Transition to Sign In Flow

strawhat19 · Dec 19, 2024 · b37faf8 · b37faf8
1 parent c6baaa2
commit b37faf8
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 53 deletions.
diff --git a/components/nav.tsx b/components/nav.tsx
@@ -8,6 +8,7 @@ import { AuthStates, Themes } from "../shared/enums";
 import { guest, sharedDatabase } from "../shared/shared";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowRightToBracket, faDatabase, faMoon, faSpa, faSun, faUserPlus } from "@fortawesome/free-solid-svg-icons";
+import { userTypes } from "../shared/types/users";
 
 export class NavItem {
     icon: any;
@@ -95,7 +96,7 @@ export default function Nav({ direction = `row` }: any) {
                             // </div>
                         // </Tooltip>
                     ) : (
-                        navItem.auth && user == guest ? (
+                        navItem.auth && (user == guest || user.type == userTypes.simulated) ? (
                             // <Tooltip key={nIdx} title={title} arrow>
                                 <Button 
                                     id={id} 

diff --git a/components/signin.tsx b/components/signin.tsx
@@ -1,34 +1,52 @@
-import { useState } from 'react';
 import { Button } from '@mui/material';
+import { useContext, useState } from 'react';
+import { sharedDatabase } from '../shared/shared';
+import { userTypes } from '../shared/types/users';
 
 export default function Signin() {
-  const [form, setForm] = useState<any>({email: ``, password: ``});
-  const trackFormInput = (event:any) => {
-    if (event.target.type === `email`) {
-      setForm({...form, email: event.target.value});
-    } else {
-      setForm({...form, password: event.target.value});
-    }
-  };
+  let { user, users, setUser, setAuthState } = useContext<any>(sharedDatabase);
+
+  // const [form, setForm] = useState<any>({email: ``, password: ``});
+  // const trackFormInput = (event:any) => {
+  //   if (event.target.type === `email`) {
+  //     setForm({...form, email: event.target.value});
+  //   } else {
+  //     setForm({...form, password: event.target.value});
+  //   }
+  // };
+
   return (
     <div className='form' id="signin">
       <div className="innerForm" style={{ width: `57%` }}>
         <div className='formElements'>
           <div className='formRow'>
             <div className="formCol">
               <div className="formLabel">Sign In</div>
-              <form id="signinForm" className="signinForm" onInput={(event) => trackFormInput(event)}>
+              <form id="signinForm" className="signinForm">
                 <div id="emailInputSigninItem" className="inputItem">
                   <div className={`authLabel left`} style={{ padding: `0 0 5px 3px` }}>
                     Email
                   </div>
-                  <input type="email" id="emailInputSignin" />
+                  <input 
+                    type="email" 
+                    name="email" 
+                    id="emailInputSignin" 
+                    defaultValue={user.type == userTypes.simulated ? user.email : ``} 
+                    required 
+                  />
                 </div>
                 <div id="passwordInputSigninItem" className="inputItem">
                   <div className={`authLabel left`} style={{ padding: `0 0 5px 3px` }}>
                     Password
                   </div>
-                  <input type="password" id="passwordInputSignin" autoComplete="password" />
+                  <input 
+                    type="password" 
+                    name="password" 
+                    id="passwordInputSignin" 
+                    autoComplete="password" 
+                    defaultValue={user.type == userTypes.simulated ? user.password : ``} 
+                    required 
+                  />
                 </div>
                 <Button id="signinBtn" className="btn regBtn inputItem" title='Signin'>Sign In</Button>
               </form>

diff --git a/components/signup.tsx b/components/signup.tsx
@@ -1,46 +1,32 @@
 import { Button } from '@mui/material';
 import { toast } from 'react-toastify';
 import { useContext, useState } from 'react';
+import { AuthStates } from '../shared/enums';
 import { sharedDatabase } from '../shared/shared';
 import { addUser, auth } from '../server/firebase';
-import { ROLES, User } from '../shared/types/users';
+import { ROLES, User, userTypes } from '../shared/types/users';
 import { createUserWithEmailAndPassword } from 'firebase/auth';
+import { userFromForm } from '../functions';
 
 export default function Signup() {
-  let { users } = useContext<any>(sharedDatabase);
-
-  const createUserFromForm = (form: any) => {
-    let { email: emailField, password: passwordField } = form;
-
-    let email = emailField?.value;
-    let password = passwordField?.value;
-
-    let usersLength = users ? users?.length : 0;
-    let index = usersLength + 1;
-
-    let newUser = new User({
-      email,
-      index,
-      password,
-      role: ROLES.Subscriber.name,
-      level: ROLES.Subscriber.level,
-    });
-
-    return newUser;
-  }
+  let { users, setUser, setAuthState } = useContext<any>(sharedDatabase);
 
   const onSignUp = (e?: any) => {
     e.preventDefault();
     let form = e.target;
-    let newUser = createUserFromForm(form);
-    console.log(`New User`, newUser);
-    toast.success(`User Signed Up`);
-    // form.reset();
+    let formUser = userFromForm(form, users);
+
+    setAuthState(AuthStates.signin);
+    setUser(formUser);
+    form.reset();
+
+    console.log(`Form User`, formUser);
+    toast.success(`User Signed Up as ${formUser.name}`);
 
     // createUserWithEmailAndPassword(auth, email, password).then(fireBaseUserCred => {
     //   let { uid } = fireBaseUserCred?.user;
-    //   newUser = { ...newUser, uid };
-    //   addUser(newUser);
+    //   formUser = { ...formUser, uid };
+    //   addUser(formUser);
     //   // window.location.href = `/signin`;
     // }).catch(fireBaseCreateUserError => {
     //   toast.error(`Failed to Create User`);

diff --git a/functions.ts b/functions.ts
@@ -1,4 +1,5 @@
 import dynamic from 'next/dynamic';
+import { ROLES, User, userTypes } from './shared/types/users';
 
 // Helper Functions
 export const titleCase = (string: string) => string.replace(/\b\w/g, (match: string) => match.toUpperCase());
@@ -13,20 +14,33 @@ export const scrollBottom = () => {
   window.scrollTo(0,document.documentElement.scrollHeight); // For Chrome, Firefox, IE and Opera
 }
 
+export const userFromForm = (form: any, users: any) => {
+  let { email: emailField, password: passwordField } = form;
+
+  let email = emailField?.value;
+  let password = passwordField?.value;
+
+  let usersLength = users ? users?.length : 0;
+  let index = usersLength + 1;
+
+  let formUser = new User({
+    email,
+    index,
+    password,
+    role: ROLES.Guest.name,
+    level: ROLES.Guest.level,
+    type: userTypes.simulated,
+  });
+
+  return formUser;
+}
+
 export const helperFunctions = {
    // Get Current Page State
    getCurrentPageName: () => {
       return window.location.hash.slice(window.location.hash.lastIndexOf(`/`)).replace(`/`, ``) as string;
    },
 
-  // Cut Off Long Strings of Text & Replace with Custom Character... Also known as Truncation
-  cutOffTextAndReplace: (string: string, end: number, replacement: string) => {
-    if (!replacement) {
-      replacement = `...` || `-`;
-    }
-    return string?.length > end ? string?.substring(0, end - 1) + replacement : string;
-  },
-
   // Capitalize First Letter of Every Word in String
   capitalizeAllWords: (string: string) => {
     let words: any = string.split(` `);

diff --git a/public/styles/_themes.scss b/public/styles/_themes.scss
@@ -1,4 +1,7 @@
 body {
+    .Toastify__close-button {
+        display: none;
+    }
     .signupBtn {
         &.active {
             color: white !important;
@@ -35,7 +38,7 @@ body {
         }
         footer {
             background: var(--secondaryVariant);
-            .sectionEndText, .formLabel, .formElements ion-label {
+            .sectionEndText, .authLabel, .formLabel, .formElements ion-label {
                 color: white;
             }
             .formElements {

diff --git a/shared/types/users.ts b/shared/types/users.ts
@@ -1,5 +1,8 @@
+import { capitalize } from "@mui/material";
 import { Plant } from "./plants";
 
+export const userTypes = { simulated: `simulated`, real: `real` };
+
 export class Role {
   name: any;
   level: number;
@@ -27,19 +30,20 @@ export class User {
   email: string = ``;
   created: string = ``;
   updated: string = ``;
-  password?: string = ``;
   provider: string = `Firebase`;
   role: string = ROLES.Guest.name;
   level: number = ROLES.Guest.level;
-
+  
   garden?: any[] = [];
   plants?: Plant[] = [];
+  password?: string = ``;
+  type?: string = userTypes.real;
 
   constructor(data: Partial<User>) {
     Object.assign(this, data);
     let now = new Date().toLocaleString();
     let currentTimeStampNoSpaces = now.replaceAll(` `, `_`).replaceAll(`,`, `_`).replaceAll(`/`, `_`).replaceAll(`:`, `_`);
-    if (!this.name || this.name == ``) this.name = this.email.split(`@`)[0];
+    if (!this.name || this.name == ``) this.name = capitalize(this.email.split(`@`)[0]);
     if (!this.id || this.id == ``) this.id = `${this.index}_User_${this.name}_${currentTimeStampNoSpaces}_${this.uid}`;
     if (!this.created) this.created = now;
     if (!this.updated) this.updated = now;