Added Login form, access at /login (#179)

* Added Login form, access at /login

* removed unused imports

* removed a closing tag

server/README.md

@@ -10,6 +10,8 @@ Docker Docs: [https://docs.docker.com/]
 4. Navigate to ```/server```
 5. Run ```npx prisma migrate dev``` to create tables and apply any migrations.
 
+at the minimum you should add a userr and some initial event types to the database.  This can be dony by typing ```npx prisma studio``` and manully adding required rows.
+
 ### View DB logs
 
 ```bash

web/src/App.tsx

@@ -8,6 +8,7 @@ import { eventDetailsLoader, eventsLoader } from './Services/loaderFunctions';
 //Layouts
 import RootLayout from './Layout/RootLayout';
 //Pages
+import LoginForm from './Components/LoginForm';
 import EventList from './Components/EventList/EventList';
 import EventDetails from './Components/EventDetails/EventDetails';
 import NotFound from './Components/Error/NotFound';
@@ -17,22 +18,23 @@ import EditEvent from './Components/EditEvent/EditEvent';
 function App() {
   const router = createBrowserRouter(
     createRoutesFromElements(
-      <Route path="/" element={<RootLayout />}>
-        <Route
-          path="edit/:id"
-          element={<EditEvent />}
-          loader={eventDetailsLoader}
-          errorElement={<EventDetailsError />}
-        />
-        <Route index element={<EventList />} loader={eventsLoader} />
-        <Route
-          path=":id"
-          element={<EventDetails />}
-          loader={eventDetailsLoader}
-          errorElement={<EventDetailsError />}
-        />
-        <Route path="*" element={<NotFound />} />
-      </Route>,
+        <Route path="/" element={<RootLayout />}>
+          <Route
+            path="edit/:id"
+            element={<EditEvent />}
+            loader={eventDetailsLoader}
+            errorElement={<EventDetailsError />}
+          />
+          <Route index element={<EventList />} loader={eventsLoader} />
+          <Route
+            path=":id"
+            element={<EventDetails />}
+            loader={eventDetailsLoader}
+            errorElement={<EventDetailsError />}
+          />
+          <Route path="*" element={<NotFound />} />
+          <Route path="login" element={<LoginForm />} errorElement={<NotFound/>}/>
+        </Route>
     ),
   );
   return <RouterProvider router={router} />;

web/src/Components/EventList/EventList.tsx

@@ -23,20 +23,18 @@ const EventList = () => {
 
   return (
     <div>
-      <main className="p-4">
-        <div className="flex flex-row justify-between align-middle pb-2">
-          <h1 className="text-2xl font-black uppercase">Event List</h1>
-          <LoadingButton loading={loading} action={newCommunityEvent}>
-            New Event
-          </LoadingButton>
-        </div>
+      <div className="flex flex-row justify-between align-middle pb-2">
+        <h1 className="text-2xl font-black uppercase">Event List</h1>
+        <LoadingButton loading={loading} action={newCommunityEvent}>
+          New Event
+        </LoadingButton>
+      </div>
 
         {events.length > 0
           ? events.map((event) => (
               <EventListSingle key={event.id} event={event} />
             ))
           : 'No events found! Create a new event to get started.'}
-      </main>
     </div>
   );
 };

web/src/Components/LoginForm.tsx

@@ -0,0 +1,62 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useForm } from 'react-hook-form';
+import { Text, Password } from './Shared/Forms';
+
+import styles from './Shared/styles';
+import { useNavigate } from 'react-router-dom';
+
+const validationSchema = z.object({
+  email: z.string().email('Invalid email address'),
+  password: z.string().min(1, 'Password is required'),
+});
+
+type LoginForm = {
+  email: string;
+  password: string;
+}
+const LoginForm = () => {
+  const { register, handleSubmit, formState: { errors }, } = useForm<LoginForm>({
+    resolver: zodResolver(validationSchema),
+  });
+
+  const navigate = useNavigate();
+
+  const submitData = async (data: LoginForm) => {
+    console.log(data);
+    navigate('/');
+  }
+
+  return (
+    <div className={`${styles.layout.container} max-sm`}>
+      <h1 className={styles.layout.headingMain}>Login to continue</h1>
+      <div className="py-4">
+        <form onSubmit={handleSubmit(submitData)} className={styles.forms.layout.loginForm}>
+          <Text
+            label='Email'
+            name='email'
+            placeHolder='Enter your email'
+            errorValue={errors.email?.message as string}
+            reactHookRegister={register('email')}
+          />
+          <Password
+            label='Password'
+            name='password'
+            placeHolder='Enter your password'
+            errorValue={errors.password?.message as string}
+            reactHookRegister={register('password')}
+          />
+          <div className={styles.layout.buttonFooter}>
+            <input
+              className={styles.layout.buttons.primary}
+              type="submit"
+            />
+          </div>
+        </form>
+      </div>
+
+    </div>
+  )
+};
+
+export default LoginForm;

web/src/Components/Shared/Forms/Password.tsx

@@ -0,0 +1,33 @@
+
+import styles from '../styles';
+
+type PasswordProps = {
+  label: string,
+  name: string,
+  errorValue?: string | undefined,
+  placeHolder: string,
+  reactHookRegister: any,
+}
+
+const Password = ({ label, name, errorValue, placeHolder, reactHookRegister}: PasswordProps) => {
+  return (
+    <div className={styles.forms.layout.inputContainer}>
+      <label className={styles.forms.label} htmlFor={name}>
+        { label }
+      </label>
+      <input
+        type="password"
+        placeholder={placeHolder}
+        {...reactHookRegister}
+        className={styles.forms.text}
+      />
+      {errorValue && (
+        <span className={styles.forms.errorText}>
+          {errorValue}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export default Password;

web/src/Components/Shared/Forms/Text.tsx

@@ -0,0 +1,33 @@
+
+import styles from '../styles';
+
+type TextProps = {
+  label: string,
+  name: string,
+  errorValue?: string | undefined,
+  placeHolder: string,
+  reactHookRegister: any,
+}
+
+const Text = ({ label, name, errorValue, placeHolder, reactHookRegister}: TextProps) => {
+  return (
+    <div className={styles.forms.layout.inputContainer}>
+      <label className={styles.forms.label} htmlFor={name}>
+        { label }
+      </label>
+      <input
+        type="text"
+        placeholder={placeHolder}
+        {...reactHookRegister}
+        className={styles.forms.text}
+      />
+      {errorValue && (
+        <span className={styles.forms.errorText}>
+          {errorValue}
+        </span>
+      )}
+    </div>
+  );
+}
+
+export default Text;

web/src/Components/Shared/Forms/index.tsx

@@ -0,0 +1,7 @@
+import Text from './Text';
+import Password from './Password';
+
+export {
+  Text,
+  Password,
+}

web/src/Components/Shared/styles/forms.tsx

@@ -0,0 +1,13 @@
+/* Form componenets */
+const forms = {
+  label: 'capitalize text-slate-700',
+  text: 'border border-slate-700 p-1',
+  select: 'border border-slate-700 p-1',
+  errorText: 'text-red-700',
+  layout: {
+    inputContainer: 'flex flex-col gap-1 pb-2',
+    loginForm: 'flex flex-col gap-2',
+  }
+}
+
+export default forms

web/src/Components/Shared/styles/index.tsx

@@ -0,0 +1,9 @@
+import forms from './forms';
+import layout from './layout';
+
+const styles = {
+  forms,
+  layout,
+};
+
+export default styles;

web/src/Components/Shared/styles/layout.tsx

@@ -0,0 +1,11 @@
+const layout = {
+  container: 'flex justify-between flex-col p-4 bg-zinc-100 mb-2',
+  headingMain: 'text-2xl font-black uppercase',
+  buttonFooter: 'flex flex-row align-middle gap-3 py-6',
+  buttons: {
+    primary: 'bg-zinc-400 px-4 py-1 self-baseline text-white text-xs leading-loose hover:bg-lime-600 cursor-pointer',
+    secondary: 'bg-slate-700 px-4 py-1 self-baseline text-white text-xs leading-loose hover:bg-red-600 cursor-pointer',
+  }
+}
+
+export default layout

web/src/Layout/RootLayout.tsx

@@ -4,7 +4,7 @@ import logo from '/eotlogo_white.svg';
 const RootLayout = () => {
   const navigate = useNavigate();
   return (
-    <main>
+    <>
       <header className="flex flex-row align-middle gap-3 p-2 bg-zinc-700">
         <img
           src={logo}
@@ -16,8 +16,10 @@ const RootLayout = () => {
           Event Organizer's Toolbox
         </p>
       </header>
-      <Outlet />
-    </main>
+      <main className="p-4">
+        <Outlet />
+      </main>
+    </>
   );
 };