disable submit buttons if inputs are empty, changed css to module css

client/src/pages/admin/users/InviteModal.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Modal, Select, TextInput, Group, Button } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { notifications } from '@mantine/notifications';
@@ -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>

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

client/src/stories/AuthLayout/AuthLayout.jsx

@@ -1,15 +1,16 @@
 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>
-      <div className="form">
+    <div className={classes['auth-layout']}>
+      <div className={classes.banner}>testing</div>
+      <div className={classes.form}>
         <Outlet />
       </div>
     </div>