Component library refactor

client/src/App.scss

@@ -77,36 +77,6 @@ $info: #009999;
   max-width: none !important;
 }
 
-// need to bump notification dropdown menu up by 1 px.
-.mt-n1 {
-  margin-top: -1px !important;
-}
-
-.alert-mw {
-  max-width: 20rem !important;
-  min-width: 20rem !important;
-}
-
-.btn-circle {
-  width: 25px !important;
-  height: 25px !important;
-  min-height: 25px !important;
-  min-width: 25px !important;
-  border-radius: 50px !important;
-  border-width: 0 !important;
-  padding: 0 !important;
-}
-
-.btn-circle.btn-lg {
-  width: 50px !important;
-  height: 50px !important;
-}
-
-.btn-circle.btn-xl {
-  width: 70px !important;
-  height: 70px !important;
-}
-
 .rotate-90-cc {
   transform: rotate(-90deg);
 }
@@ -115,27 +85,6 @@ $info: #009999;
   transform: rotate(90deg);
 }
 
-.app-container {
-  min-height: 350px;
-}
-
-.ht-ellipsis::after {
-  display: none !important;
-}
-
-button.ht-ellipsis {
-  border: none;
-  box-shadow: none;
-}
-
-button.ht-ellipsis:hover {
-  color: var(--bs-gray-dark);
-}
-
-button.ht-ellipsis:active {
-  color: var(--bs-gray-dark);
-}
-
 // boilerplate
 @media (prefers-reduced-motion: no-preference) {
   :root {
@@ -154,8 +103,6 @@ body {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-// ToDo: remove as much #layoutSidenav as possible
-// Styles inherited from the initial template (sb-admin)
 #layoutSidenav {
   display: flex;
 }
@@ -220,33 +167,6 @@ body {
   }
 }
 
-.sb-nav-fixed .sb-topnav {
-  z-index: 1039;
-}
-
-.sb-nav-fixed #layoutSidenav #layoutSidenav_nav {
-  width: 225px;
-  height: 100vh;
-  z-index: 1038;
-}
-
-.sb-nav-fixed #layoutSidenav #layoutSidenav_nav .sb-sidenav {
-  padding-top: 56px;
-}
-
-.sb-nav-fixed #layoutSidenav #layoutSidenav_nav .sb-sidenav .sb-sidenav-menu {
-  overflow-y: auto;
-}
-
-.sb-nav-fixed #layoutSidenav #layoutSidenav_content {
-  padding-left: 225px;
-  top: 56px;
-}
-
-.img-error {
-  max-width: 20rem;
-}
-
 .nav .nav-link,
 .sb-sidenav-menu .nav-link {
   margin-right: 0.5rem;
@@ -326,73 +246,12 @@ body {
   flex-shrink: 0;
 }
 
-.sb-sidenav-dark {
-  background-color: #212529;
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.sb-sidenav-dark .sb-sidenav-menu .sb-sidenav-menu-heading {
-  color: rgba(255, 255, 255, 0.25);
-}
-
-.sb-sidenav-dark .sb-sidenav-menu .nav-link {
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.sb-sidenav-dark .sb-sidenav-menu .nav-link {
-  color: rgba(255, 255, 255, 0.25);
-}
-
-.sb-sidenav-dark .sb-sidenav-menu .nav-link .sb-sidenav-collapse-arrow {
-  color: rgba(255, 255, 255, 0.25);
-}
-
-.sb-sidenav-dark .sb-sidenav-menu .nav-link:hover {
-  color: #fff;
-}
-
-.sb-sidenav-dark .sb-sidenav-menu .nav-link.active {
-  color: #fff;
-}
-
-.sb-sidenav-dark .sb-sidenav-menu .nav-link.active {
-  color: #fff;
-}
-
-.sb-sidenav-dark .sb-sidenav-footer {
-  background-color: #343a40;
-}
-
 .sb-sidenav-menu .sb-sidenav-menu-heading {
   color: #adb5bd;
 }
 
-.sb-sidenav-menu .nav-link {
-  color: #212529;
-}
-
-.sb-sidenav-menu .nav-link {
-  color: #adb5bd;
-}
-
-.sb-sidenav-menu .nav-link .sb-sidenav-collapse-arrow {
-  color: #adb5bd;
-}
-
 .sb-sidenav-menu .nav-link:hover {
   color: #0d6efd;
 }
 
-.sb-sidenav-menu .nav-link.active {
-  color: #0d6efd;
-}
-
-.sb-sidenav-menu .nav-link.active {
-  color: #0d6efd;
-}
-
-.sb-sidenav-footer {
-  background-color: #e9ecef;
-}
-
-@import 'bootstrap/scss/bootstrap.scss';
+@import '~bootstrap/scss/bootstrap';

client/src/App.tsx

@@ -1,4 +1,4 @@
-import { ErrorBoundary } from 'components/ErrorBoundary';
+import { ErrorBoundary } from 'components/Error';
 import { Notifications } from 'components/Notifications/Notifications';
 import React, { ReactElement, useEffect } from 'react';
 import { RouterProvider } from 'react-router-dom';

client/src/components/Auth/LoginForm.tsx

@@ -0,0 +1,71 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { HtForm } from 'components/UI';
+import React, { useEffect } from 'react';
+import { Form } from 'react-bootstrap';
+import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
+import { login, selectUserState, useAppDispatch, useAppSelector } from 'store';
+import { z } from 'zod';
+
+const loginSchema = z.object({
+  username: z.string().min(1, 'Username Required').min(8),
+  password: z.string().min(1, 'Password Required').min(8),
+});
+
+type LoginSchema = z.infer<typeof loginSchema>;
+
+export function LoginForm() {
+  const userState = useAppSelector(selectUserState);
+  const navigation = useNavigate();
+  const dispatch = useAppDispatch();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+  } = useForm<LoginSchema>({ resolver: zodResolver(loginSchema) });
+
+  useEffect(() => {
+    // redirect to home if already logged in
+    if (userState.user?.username) {
+      navigation('/');
+    }
+  }, [userState.user?.username]);
+
+  function onSubmit({ username, password }: LoginSchema) {
+    return dispatch(login({ username, password }));
+  }
+
+  return (
+    <HtForm onSubmit={handleSubmit(onSubmit)}>
+      <HtForm.Group>
+        <HtForm.Label htmlFor="username">Username</HtForm.Label>
+        <Form.Control
+          id="username"
+          type="text"
+          placeholder={'wary-walrus-123'}
+          {...register('username', {})}
+          className={errors.username && 'is-invalid'}
+        />
+        <div className="invalid-feedback">{errors.username?.message}</div>
+      </HtForm.Group>
+      <HtForm.Group>
+        <HtForm.Label htmlFor="password">Password</HtForm.Label>
+        <Form.Control
+          id="password"
+          type="password"
+          placeholder="MyP@ssword123"
+          {...register('password', {})}
+          className={errors.password && 'is-invalid'}
+        />
+        <div className="invalid-feedback">{errors.password?.message}</div>
+      </HtForm.Group>
+      <button type="submit" disabled={isSubmitting} className="btn btn-primary m-2">
+        {isSubmitting && <span className="spinner-border spinner-border-sm mr-1" />}
+        Login
+      </button>
+      {userState.error && (
+        <div className="alert alert-danger mt-3 mb-0">{String(userState.error)}</div>
+      )}
+    </HtForm>
+  );
+}

client/src/components/Auth/index.ts

@@ -0,0 +1 @@
+export { LoginForm } from './LoginForm';

client/src/components/Error/Error404.tsx

@@ -0,0 +1,12 @@
+import happyRobot from '/static/robot-bad-sign.jpg';
+import React from 'react';
+
+export function Error404() {
+  return (
+    <>
+      <img src={happyRobot} alt="happy robot" width={200} height={'auto'} />
+      <h1 className="display-1 d-flex justify-content-center">404</h1>
+      <h4>Resource not found</h4>
+    </>
+  );
+}

client/src/components/Error/index.ts

@@ -0,0 +1,2 @@
+export { ErrorBoundary } from './ErrorBoundary';
+export { Error404 } from './Error404';