Merge branch 'dev' into password-progress-bar

sfbrigade · Sep 4, 2024 · e548262 · e548262
2 parents 4c74c44 + 3bf6d7f
commit e548262
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 56 deletions.
diff --git a/client/src/pages/admin/users/InviteModal.jsx b/client/src/pages/admin/users/InviteModal.jsx
@@ -120,7 +120,14 @@ export function InviteModal({ opened, close }) {
             <Button variant="outline" color="gray" onClick={onClose}>
               Cancel
             </Button>
-            <Button type="submit">Send Invite</Button>
+            <Button
+              disabled={
+                !form.getValues().name.length || !form.getValues().email.length
+              }
+              type="submit"
+            >
+              Send Invite
+            </Button>
           </Group>
         </form>
       </Modal>

diff --git a/client/src/pages/auth/form.module.css b/client/src/pages/auth/form.module.css
@@ -1,6 +1,5 @@
 .header {
   text-align: center;
-  margin: 2rem 0;
 }
 
 .header > p {
@@ -19,9 +18,3 @@
   color: #2b8a3e;
   font-size: small;
 }
-
-@media (min-width: 48em) {
-  .header {
-    margin: 8.75rem 0 2rem 0;
-  }
-}
diff --git a/client/src/pages/auth/login/LoginForm.jsx b/client/src/pages/auth/login/LoginForm.jsx
@@ -71,6 +71,7 @@ export function LoginForm({
         </Container>
         <Container size="25rem">
           <Button
+            disabled={!email.length || !password.length}
             className={classes.loginBtn}
             variant="filled"
             fullWidth

diff --git a/client/src/pages/auth/login/login.jsx b/client/src/pages/auth/login/login.jsx
@@ -5,7 +5,7 @@ import { StatusCodes } from 'http-status-codes';
 import { useAuthorization } from '../../../hooks/useAuthorization';
 import { LoginForm } from './LoginForm';
 
-import classes from './login.module.css';
+import classes from '../form.module.css';
 
 /**
  * Login page component.

diff --git a/client/src/pages/auth/login/login.module.css b/client/src/pages/auth/login/login.module.css
@@ -1,8 +1,3 @@
-.header {
-  text-align: center;
-  margin: 2rem 0;
-}
-
 .email {
   margin-bottom: 1.5rem;
 }
@@ -17,12 +12,6 @@
   padding-top: 0.5rem;
 }
 
-@media (min-width: 48em) {
-  .header {
-    margin: 8.75rem 0 2rem 0;
-  }
-}
-
 .loginBtn {
   margin-top: 1.5rem;
 }
diff --git a/client/src/pages/auth/register/register.jsx b/client/src/pages/auth/register/register.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import classes from './register.module.css';
+import classes from '../form.module.css';
 import { RegisterForm } from './RegisterForm';
 import { Flex } from '@mantine/core';
 import { useParams } from 'react-router-dom';
@@ -158,34 +158,31 @@ function Register() {
   }
 
   return (
-    <div className={classes.register}>
-      <div className={classes.banner}>Image goes here</div>
-      <div>
-        <div className={classes.header}>
-          <h2>Interest Form</h2>
-          <p>
-            description of filling out interest form to start account
-            registration process
-          </p>
-        </div>
-        <Flex direction="column" gap="md">
-          <RegisterForm
-            user={user}
-            errors={errors}
-            isLoading={isLoading}
-            showLicenseHelper={showLicenseHelper}
-            onFormChange={onFormChange}
-            onSubmit={formState === 1 ? fetchLicenseNumber : handleRegister}
-            setShowLicenseHelper={() => {
-              setShowLicenseHelper(!showLicenseHelper);
-            }}
-            formState={formState}
-            showLicenseField={
-              !inviteId || (inviteId && user.role == 'FIRST_RESPONDER')
-            }
-          />
-        </Flex>
+    <div>
+      <div className={classes.header}>
+        <h2>Interest Form</h2>
+        <p>
+          description of filling out interest form to start account registration
+          process
+        </p>
       </div>
+      <Flex direction="column" gap="md">
+        <RegisterForm
+          user={user}
+          errors={errors}
+          isLoading={isLoading}
+          showLicenseHelper={showLicenseHelper}
+          onFormChange={onFormChange}
+          onSubmit={formState === 1 ? fetchLicenseNumber : handleRegister}
+          setShowLicenseHelper={() => {
+            setShowLicenseHelper(!showLicenseHelper);
+          }}
+          formState={formState}
+          showLicenseField={
+            !inviteId || (inviteId && user.role == 'FIRST_RESPONDER')
+          }
+        />
+      </Flex>
     </div>
   );
 }

diff --git a/client/src/stories/AuthLayout/AuthLayout.jsx b/client/src/stories/AuthLayout/AuthLayout.jsx
@@ -1,15 +1,18 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
 
-import './authlayout.css';
+import classes from './authlayout.module.css';
+
 /**
  * Auth Layout for login, register, password reset
  */
 export default function AuthLayout() {
   return (
-    <div className="auth-layout">
-      <div className="banner">testing</div>
-      <Outlet />
+    <div className={classes['auth-layout']}>
+      <div className={classes.banner}>testing</div>
+      <div className={classes.form}>
+        <Outlet />
+      </div>
     </div>
   );
 }
diff --git a/client/src/stories/AuthLayout/authlayout.css → .../stories/AuthLayout/authlayout.module.css b/client/src/stories/AuthLayout/authlayout.css → .../stories/AuthLayout/authlayout.module.css
@@ -1,17 +1,21 @@
 .auth-layout {
   width: 100vw;
-  height: 100vh;
-  height: 100dvh;
+  min-height: 100vh;
+  min-height: 100dvh;
 }
 
 .banner {
   display: none;
 }
 
+.form {
+  padding: 2rem 1rem;
+}
+
 @media (min-width: 48em) {
   .auth-layout {
     display: flex;
-    height: 100vh;
+    min-height: 100vh;
 
     & > * {
       flex: 1;
@@ -21,7 +25,12 @@
   .banner {
     display: block;
     width: 100%;
-    height: 100%;
+    min-height: 100%;
     background-color: aqua;
+    background-size: cover;
+  }
+
+  .form {
+    padding: 4rem 1rem;
   }
 }