Merge pull request #120 from Ryan-slither/main

Build out Admin Register Page

src/apps/auth/components/AuthRegisterForm.tsx

@@ -0,0 +1,131 @@
+import { useRef, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { Form, FormInputGroup, FormSection, FormSubmit } from 'src/components'
+import { selectUserStatus } from 'src/store'
+
+export const AuthRegisterForm = (props: {
+  onSubmit: (
+    email: string,
+    firstName: string,
+    lastName: string,
+    password: string,
+    confirmPassword: string,
+  ) => Promise<
+    | ({
+        success: true
+      } & { [key: string]: any })
+    | {
+        success: false
+        emailError?: string
+        firstNameError?: string
+        lastNameError?: string
+        passwordError?: string
+        confirmPasswordError?: string
+        error?: string
+      }
+  >
+}) => {
+  const { onSubmit } = props
+  const [errors, setErrors] = useState<{
+    error?: string
+    email?: string
+    firstName?: string
+    lastName?: string
+    password?: string
+    confirmPassword?: string
+  }>({})
+
+  const userStatus = useSelector(selectUserStatus)
+
+  // Register form refs
+  const emailRef = useRef<HTMLInputElement>(null)
+  const firstNameRef = useRef<HTMLInputElement>(null)
+  const lastNameRef = useRef<HTMLInputElement>(null)
+  const passwordRef = useRef<HTMLInputElement>(null)
+  const confirmPasswordRef = useRef<HTMLInputElement>(null)
+
+  const handleRegisterSubmit = () => {
+    const email = emailRef.current?.value || ''
+    const firstName = firstNameRef.current?.value || ''
+    const lastName = lastNameRef.current?.value || ''
+    const password = passwordRef.current?.value || ''
+    const confirmPassword = confirmPasswordRef.current?.value || ''
+
+    onSubmit(email, firstName, lastName, password, confirmPassword).then(
+      (res) => {
+        if (!res.success) {
+          setErrors({
+            error: res.error,
+            email: res.emailError,
+            firstName: res.firstNameError,
+            lastName: res.lastNameError,
+            password: res.passwordError,
+            confirmPassword: res.confirmPasswordError,
+          })
+        }
+      },
+    )
+  }
+
+  return (
+    <Form onSubmit={handleRegisterSubmit}>
+      <FormSection>
+        <FormInputGroup
+          label="Email"
+          id="email"
+          type="text"
+          ref={emailRef}
+          disabled={userStatus === 'loading'}
+          required
+          error={errors.email}
+        />
+        <div className="form-row">
+          <FormInputGroup
+            label="First Name"
+            id="firstName"
+            type="text"
+            ref={firstNameRef}
+            disabled={userStatus === 'loading'}
+            required
+            error={errors.firstName}
+          />
+
+          <FormInputGroup
+            label="Last Name"
+            id="lastName"
+            type="text"
+            ref={lastNameRef}
+            disabled={userStatus === 'loading'}
+            required
+            error={errors.lastName}
+          />
+        </div>
+        <FormInputGroup
+          label="Password"
+          id="password"
+          type="password"
+          ref={passwordRef}
+          disabled={userStatus === 'loading'}
+          required
+          error={errors.password}
+        />
+        <FormInputGroup
+          label="Confirm Password"
+          id="confirmPassword"
+          type="password"
+          ref={confirmPasswordRef}
+          disabled={userStatus === 'loading'}
+          required
+          error={errors.confirmPassword}
+        />
+        <div>
+          {errors.error && (
+            <p className="form-feedback error">{errors.error}</p>
+          )}
+          {userStatus === 'loading' && <p>Loading...</p>}
+        </div>
+      </FormSection>
+      <FormSubmit disabled={userStatus === 'loading'} />
+    </Form>
+  )
+}

src/apps/auth/pages/AdminRegister.scss

@@ -0,0 +1,36 @@
+.register-page {
+  display: grid;
+  place-content: center;
+  height: 100vh;
+  background-color: var(--color-surface-container);
+}
+
+.register-page__form-container {
+  grid-column-start: 5;
+  grid-column-end: 9;
+  text-align: center;
+}
+
+.register-page__form-container > h2 {
+  color: var(--color-surface-on);
+  padding-bottom: 2vw;
+}
+
+.register-page__form-authcontainer {
+  margin: 0 auto;
+  padding: 2vw 3vw 4vw 3vw;
+  box-sizing: border-box;
+  background-color: var(--color-surface);
+}
+
+.form-row {
+  display: flex;
+  gap: 1rem;
+  width: 100%;
+}
+
+.form-row > div {
+  flex: 1;
+  min-width: 0;
+  box-sizing: border-box;
+}

src/apps/auth/pages/AdminRegister.tsx

@@ -1,3 +1,36 @@
+import { useSelector } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
+import { AuthRegisterForm } from 'src/apps/auth/components/AuthRegisterForm'
+import { registerUser, selectUserStatus } from 'src/store'
+import './AdminRegister.scss'
+
 export const AdminRegister = () => {
-  return <div>AdminRegister</div>
+  const userStatus = useSelector(selectUserStatus)
+  const navigate = useNavigate()
+
+  const handleRegisterUser = (
+    email: string,
+    firstName: string,
+    lastName: string,
+    password: string,
+    confirmPassword: string,
+  ) => registerUser(email, firstName, lastName, password, confirmPassword)
+
+  // Issue: userStatus needs an exception to not succeed if on register page
+  // useEffect(() => {
+  //   if (userStatus === 'succeeded') {
+  //     navigate('/auth/admin/login')
+  //   }
+  // }, [userStatus])
+
+  return (
+    <div className="register-page grid">
+      <div className="register-page__form-container">
+        <h2>Register Account</h2>
+        <div className="register-page__form-authcontainer">
+          <AuthRegisterForm onSubmit={handleRegisterUser} />
+        </div>
+      </div>
+    </div>
+  )
 }

src/store/user/userActions.ts

@@ -3,7 +3,11 @@ import { Network } from 'src/network'
 import { generateLocalData, isUser } from 'src/utils'
 import { store } from '../store'
 import { userSlice } from './userSlice'
-import { thunkFetchUserInfo, thunkLoginUser } from './userThunks'
+import {
+  thunkFetchUserInfo,
+  thunkGetUserSpotifyToken,
+  thunkLoginUser,
+} from './userThunks'
 
 const { logout, set, update } = userSlice.actions
 
@@ -42,6 +46,30 @@ export const loginUser = async (email: string, password: string) => {
   return res
 }
 
+/**
+ * Register user, needs work!!!
+ */
+export const registerUser = async (
+  email: string,
+  firstName: string,
+  lastName: string,
+  password: string,
+  confirmPassword: string,
+): Promise<{ success: boolean } & { [key: string]: any }> => {
+  if (password === confirmPassword) {
+    console.log(
+      `Registration successful - ${email}, ${firstName}, ${lastName}, ${password}, ${confirmPassword}`,
+    )
+    return {
+      success: true,
+    }
+  }
+  console.log('Registeratiion failed')
+  return {
+    success: false,
+  }
+}
+
 /**
  * Fetch user's info, return user
  */
@@ -79,6 +107,7 @@ export const initializeUser = async () => {
 
     if (isUser(user)) {
       setUser(user, token)
+      await store.dispatch(thunkGetUserSpotifyToken())
     } else {
       logoutUser()
     }