Merge pull request #415 from HarperDB/stage

Auth Flow Fixes
HarperDB · Nov 13, 2024 · 244afa3 · 244afa3
2 parents ae010b2 + 178866b
commit 244afa3
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 57 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "harperdb-studio",
-  "version": "4.7.0",
+  "version": "4.7.1",
   "description": "A UI for HarperDB",
   "deploymentUrl": "studio.harperdb.io",
   "private": true,

diff --git a/src/assets/styles/components/_error-boundary.scss b/src/assets/styles/components/_error-boundary.scss
@@ -1,3 +1,6 @@
+.w-400 {
+  width: 400px;
+}
 .error-boundary {
   font-size: $font-size-small;
   overflow: hidden;

diff --git a/src/assets/styles/pages/_auth.scss b/src/assets/styles/pages/_auth.scss
@@ -54,6 +54,10 @@
   }
 }
 
+.auth-centered-container {
+  height: calc(100% - 135px);
+}
+
 .auth-form-container {
   background-color: $color-darkpurple;
 }

diff --git a/src/components/auth/ResetPassword.js b/src/components/auth/ResetPassword.js
@@ -78,6 +78,7 @@ function ResetPassword() {
               className="border-0 rounded-pill btn-gradient-blue"
               title="Send Password Reset Email"
               block
+              type="submit"
               color="purple"
             >
               Send Password Reset Email

diff --git a/src/components/auth/SignIn.js b/src/components/auth/SignIn.js
@@ -93,7 +93,7 @@ function SignIn() {
                 placeholder="password"
               />
             </Label>
-            <Button id="signIn" className="border-0 rounded-pill btn-gradient-blue" onClick={submit} title="Sign In My Account" block disabled={formState.submitted}>
+            <Button id="signIn" type="submit" className="border-0 rounded-pill btn-gradient-blue" onClick={submit} title="Sign In My Account" block disabled={formState.submitted}>
               Sign In
             </Button>
           </Form>

diff --git a/src/components/auth/SignUp.js b/src/components/auth/SignUp.js
@@ -142,6 +142,7 @@ function SignUp() {
             <Button
               id="sign-up"
               block
+              type="submit"
               className="border-0 rounded-pill btn-gradient-blue"
               disabled={formState.submitted} onClick={() => setFormState({ submitted: true })}
             >

diff --git a/src/components/auth/UpdatePassword.js b/src/components/auth/UpdatePassword.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Card, CardBody, Input, Button } from 'reactstrap';
+import { Label, Input, Button } from 'reactstrap';
 import { useNavigate } from 'react-router-dom';
 import { useStoreState } from 'pullstate';
 
@@ -18,7 +18,7 @@ function UpdatePassword() {
 
   const setPasswordError = () => {
     setFormData({});
-    setTimeout(() => setFormState({ error: '8 char min., 1 lower case, 1 upper case, 1 number, 1 special char.' }), 0);
+    setFormState({ error: true });
   };
 
   // NOTE: Marketing requested to send a conversion event when this page is
@@ -51,44 +51,34 @@ function UpdatePassword() {
     }
   };
 
-  // eslint-disable-next-line
-  useEffect(() => !formState.submitted && setFormState({}), [formData]);
-
   return (
-    <div id="login-form">
-      {formState.processing ? (
-        <Loader header="setting account password" spinner relative />
-      ) : (
-        <>
-          <Card className="mb-3">
-            <CardBody onKeyDown={(e) => e.keyCode !== 13 || submit()}>
-              <div className="instructions">
-                Add an account password
-                <br />
-                <br />
-                {formState.error ? (
-                  <i className="text-small text-danger text-bold">{formState.error}</i>
-                ) : (
-                  <i className="text-small text-bold">8 char min., 1 lower case, 1 upper case, 1 number, 1 special char.</i>
-                )}
-              </div>
+    <div className="d-flex justify-content-center align-items-center auth-centered-container">
+      <div className="login-form">
+        {formState.processing ? (
+          <Loader header="setting account password" spinner relative />
+        ) : (
+          <>
+            <h2 className="mb-2 instructions">Add an account password</h2>
+            <span className={`text-small text-bold d-inline-block my-2 ${formState.error ? 'text-danger' : ''}`}>
+              <i>8 char min., 1 lower case, 1 upper case, 1 number, 1 special char.</i>
+            </span>
+            <Label className="mb-4 d-block">
               <Input
                 id="password1"
                 onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                 disabled={formState.submitted}
                 className="mb-2 text-center"
                 type="password"
                 title="password"
-                placeholder="add password"
+                placeholder="Add Password"
               />
-              <Button id="updateMyPassword" onClick={submit} disabled={formState.submitted} title="Add Account Password" block color="purple">
-                Add Account Password
-              </Button>
-            </CardBody>
-          </Card>
-          <div className="login-nav-link">&nbsp;</div>
-        </>
-      )}
+            </Label>
+            <Button type="submit" id="updateMyPassword" className="border-0 rounded-pill btn-gradient-blue" block onClick={submit} disabled={formState.submitted || formData.processing} title="Add Account Password">
+              Submit Account Password
+            </Button>
+          </>
+        )}
+      </div>
     </div>
   );
 }

diff --git a/src/components/layouts/App.js b/src/components/layouts/App.js
@@ -140,7 +140,11 @@ function App() {
       ) : loggedIn ? (
         <main id="app-container">
           <ErrorBoundary FallbackComponent={ErrorFallback}>
-            <Suspense fallback={<Loader header=" " spinner />}>
+            <Suspense fallback={
+              <div className="auth-centered-container">
+                <Loader header=" " spinner />
+              </div>
+            }>
               {/* can we put instance routes in here, each in a suspense tag (since they're lazily loaded) */}
               <Routes>
                 <Route element={isMaintenance ? <Maintenance /> : <UpdatePassword />} path="/update-password" />

diff --git a/src/components/shared/ErrorFallback.js b/src/components/shared/ErrorFallback.js
@@ -3,29 +3,31 @@ import { Button, Card, CardBody, Col, Row } from 'reactstrap';
 
 function ErrorFallback({ error, componentStack, resetErrorBoundary, extraClass = undefined }) {
   return (
-    <Card className={`error-boundary mb-3 ${extraClass}`}>
-      <CardBody>
-        <b>Component Error {new Date().toLocaleTimeString()}</b>
-        <hr className="my-1" />
-        <div className="error-message">{error.message}</div>
-        <hr className="my-1" />
-        <div className="stack-trace">
-          <pre>{componentStack}</pre>
-        </div>
-        <Row>
-          <Col>
-            <Button color="danger" block href="https://harperdbhelp.zendesk.com/hc/en-us/requests/new" target="_blank" rel="noopener noreferrer">
-              Create A Support Ticket
-            </Button>
-          </Col>
-          <Col>
-            <Button color="success" block onClick={resetErrorBoundary}>
-              Retry Component Load
-            </Button>
-          </Col>
-        </Row>
-      </CardBody>
-    </Card>
+    <div className="d-flex justify-content-center align-items-center auth-centered-container">
+      <Card className={`error-boundary mb-3 w-400 ${extraClass}`}>
+        <CardBody>
+          <b>Component Error {new Date().toLocaleTimeString()}</b>
+          <hr className="my-1" />
+          <div className="error-message">{error.message}</div>
+          <hr className="my-1" />
+          <div className="stack-trace">
+            <pre>{componentStack}</pre>
+          </div>
+          <Row>
+            <Col>
+              <Button color="danger" block href="https://harperdbhelp.zendesk.com/hc/en-us/requests/new" target="_blank" rel="noopener noreferrer">
+                Create A Support Ticket
+              </Button>
+            </Col>
+            <Col>
+              <Button color="success" block onClick={resetErrorBoundary}>
+                Retry Component Load
+              </Button>
+            </Col>
+          </Row>
+        </CardBody>
+      </Card>
+    </div>
   );
 }