feat: flesh in login page (#781)

Signed-off-by: hxtree <[email protected]>

clients/admin-client/src/components/DiceAnalyzer.tsx

@@ -100,23 +100,23 @@ export const DiceAnalyzer = (props: DiceAnalyzerProps) => {
               <TextField
                 label="Dice Notation"
                 value={notation}
-                onChange={e => setNotation(e.target.value)}
-                helperText="Example 1d6*2+2"
+                onChange={(e: any) => setNotation(e.target.value)}
+                helpBlock="Example 1d6*2+2"
                 variant="standard"
               />
               <TextField
                 label="Iterations"
                 value={iterations}
-                onChange={e => setIterations(Number(e.target.value))}
+                onChange={(e: any) => setIterations(Number(e.target.value))}
                 variant="standard"
-                sx={{ width: '5ch', ml: 1 }}
+                // sx={{ width: '5ch', ml: 1 }}
               />
               <TextField
                 label="Luck"
                 value={luck}
-                onChange={e => setLuck(e.target.value)}
+                onChange={(e: any) => setLuck(e.target.value)}
                 variant="standard"
-                sx={{ width: '5ch', ml: 1 }}
+                // sx={{ width: '5ch', ml: 1 }}
               />
             </Box>
           </Stack>

clients/admin-client/src/pages/login.page.tsx

@@ -0,0 +1,16 @@
+import { Paper, Link, Button, TextField, faArrowRight, FontAwesomeIcon } from '@cats-cradle/design-system/dist/main';
+
+export default function LoginPage() {
+  return (
+    <main className="container">
+      <Paper elevation="1">
+        <h1>Log In</h1>
+        <TextField id="email-address" label="Email Address" type="text"/>
+
+        <Link href="/forgot-password">Forgot Password</Link>
+        <TextField id="password" label="Password" type="password"/>
+        <Button onClick={()=>{}} color="primary">Log In <FontAwesomeIcon icon={faArrowRight}/></Button>
+      </Paper>
+    </main>
+  );
+}

clients/admin-client/src/routing/Router.tsx

@@ -7,6 +7,7 @@ import HomePage from '../pages/home.page';
 import { Outlet} from 'react-router-dom';
 import { BreadCrumbs } from '../components/Breadcrumbs';
 import Header from "../components/Header";
+import LoginPage from '../pages/login.page';
 
 const Root = () => {
   return (
@@ -32,6 +33,24 @@ const router = createBrowserRouter([
         index: true,
         element: <HomePage />,
       },
+      {
+        path: "/login",
+        element: <LoginPage />,
+        handle: {
+          title: 'Log In',
+          url: '/login',
+          crumb: () => <Link to="/login">Log In</Link>,
+        }
+      },
+      {
+        path: "/forgot-password",
+        element: <LoginPage />,
+        handle: {
+          title: 'Forgot Password',
+          url: '/forgot-password',
+          crumb: () => <Link to="/forgot-password">Forgot Password</Link>,
+        }
+      },
       {
         path: "/character-sheets",
         element: <CharacterSheetsPage />,

clients/design-system/src/components/Button/style.module.scss

@@ -50,7 +50,7 @@
       }
       &:hover {
         border-color:  lighten($color-primary, 5%);
-        color: lighten($color-primary, 5%);
+        color: $color-black;
       }
     }
     &.button-inherit {
@@ -90,7 +90,7 @@
     }
     &.button-normal, &.button-medium {
       font-size: 1rem;
-      padding: 15px 25px 10px 25px;
+      padding: 15px 46px 10px 46px;
     }
     &.button-large {
       font-size: 1.4rem;

clients/design-system/src/components/PageFooter/PageFooter.tsx

@@ -36,7 +36,7 @@ export const PageFooter = (props: PageFooterProps) => {
           </div>
           <hr/>
         <Typography variant="body">
-          &copy; {year} {siteOwner}. All Rights Reserved.
+          &copy; {siteOwner}. {year}. All Rights Reserved.
         </Typography>
       </div>
     </footer>

clients/design-system/src/components/PageFooter/style.module.scss

@@ -2,7 +2,7 @@
 
 :global {
 .page-footer {
-  background-color: $color-white;
+  background-color: $color-off-white;
   color: $color-primary;
   margin: 0;
   padding: 3rem;

clients/design-system/src/components/SocialMediaBar/style.module.scss

@@ -3,6 +3,7 @@
 :global {
   .social-media-bar {
     background-color: $color-primary;
+    background: linear-gradient(to top left, $color-primary, darken($color-primary, 20%));
     margin: 0;
     margin-top: 4rem;
     // padding: 0.2rem 3rem;

clients/design-system/src/components/TextField/TextField.tsx

@@ -1,13 +1,50 @@
-import MUITextField, {
-  TextFieldProps as MUITextFieldProps,
-} from '@mui/material/TextField';
+import React from 'react';
 
-export type TextFieldProps = MUITextFieldProps;
+export type TextFieldProps = {
+  id?: string;
+  type?: 'password' | 'text' | 'number';
+  value?: string | number | undefined;
+  label?: string;
+  helpBlock?: React.ReactNode;
+  size?: 'small' | 'medium' | 'large';
+  invalid?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  variant?: string;
+}
 
-export const TextField = (props: TextFieldProps) => {
-  const { ...muiProps } = props;
+// https://getbootstrap.com/docs/5.0/forms/validation/
+export const TextField = (props: TextFieldProps): JSX.Element => {
+  const { id, label, type, helpBlock, value, size, invalid, onChange } = props;
 
-  return <MUITextField {...muiProps}/>;
-};
+  const classNames = [];
+  classNames.push('form-control');
+  switch(size){
+    case 'small':
+      classNames.push('input-group-sm')
+      break;
+    case 'large':
+      classNames.push('input-group-lg')
+      break;
+    case 'medium':
+      default:
+  }
 
-export default TextField;
+  // TODO improve validation
+  // TODO add icons left (e.g. $) or right (e.g. calendar)
+  // TODO tip tool for info right top
+
+  if(helpBlock){
+    return (<>
+      {label && <label htmlFor={ id } className="form-label">{ label }</label>}
+      <input id={ id } type={ type } value={value} onChange={ onChange } className={classNames.join(' ')} aria-describedby={ `${id}HelpBlock` }/>
+      { helpBlock && <div id={ `${id}HelpBlock` } className="form-text">{ helpBlock }</div> }
+      { invalid && <div className="invalid-feedback">{ invalid }</div>}
+    </>)
+  }
+
+  return (<>
+    {label && <label htmlFor={ id } className="form-label">{ label }</label>}
+    <input id={ id } type={ type } value={ value } onChange={ onChange  }className={classNames.join(' ')}/>
+    { invalid && <div className="invalid-feedback">{ invalid }</div>}
+  </>)
+};

clients/player-client/README.md

@@ -2,3 +2,5 @@
 
 This client connects an individual user to the main game server. It is used to
 build the software that the player uses for playing game.
+
+https://threejs.org/docs/scenes/material-browser.html#MeshToonMaterial