Updates to user schema, account page

Renamed isAccountVerified to accountIsVerified, add account info to account page

src/pages/account/index.tsx

@@ -1,16 +1,121 @@
-import UserContext from '@/contexts/userContext';
 import withPageAuthRequired from '@/util/withPageAuthRequired';
 import { NextPage } from 'next';
 
-import { useContext } from 'react';
-import { Tab } from '@headlessui/react';
+import { FC, useState } from 'react';
+import { Switch, Tab } from '@headlessui/react';
 import Head from 'next/head';
+import FormInfo from '@/components/ui/forms/FormInfo';
+import FormLabel from '@/components/ui/forms/FormLabel';
+import FormError from '@/components/ui/forms/FormError';
+import FormTextInput from '@/components/ui/forms/FormTextInput';
+import { zodResolver } from '@hookform/resolvers/zod';
+import GetUserSchema from '@/services/User/schema/GetUserSchema';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import DBClient from '@/prisma/DBClient';
 
-interface AccountPageProps {}
+interface AccountPageProps {
+  user: z.infer<typeof GetUserSchema>;
+}
 
-const AccountPage: NextPage<AccountPageProps> = () => {
-  const { user } = useContext(UserContext);
+const AccountInfo: FC<{
+  user: z.infer<typeof GetUserSchema>;
+}> = ({ user }) => {
+  const { register, handleSubmit, formState, reset } = useForm<
+    z.infer<typeof GetUserSchema>
+  >({
+    resolver: zodResolver(GetUserSchema),
+    defaultValues: {
+      username: 'test',
+      email: 'test@example.com',
+      firstName: 'test',
+      lastName: 'icle',
+      dateOfBirth: new Date(),
+    },
+  });
 
+  const [inEditMode, setInEditMode] = useState(false);
+
+  return (
+    <div className="mt-8">
+      <div className="flex flex-col space-y-3">
+        <div className="flex flex-row">
+          <label className="label-text" htmlFor="edit-toggle">
+            Edit Account Info
+          </label>
+          <Switch
+            checked={inEditMode}
+            className="toggle"
+            onClick={() => {
+              setInEditMode((editMode) => !editMode);
+              reset();
+            }}
+            id="edit-toggle"
+          />
+        </div>
+
+        <form className="space-y-5" onSubmit={handleSubmit(() => {})}>
+          <div>
+            <FormInfo>
+              <FormLabel htmlFor="username">Username</FormLabel>
+              <FormError>{formState.errors.username?.message}</FormError>
+            </FormInfo>
+            <FormTextInput
+              type="text"
+              disabled={!inEditMode || formState.isSubmitting}
+              error={!!formState.errors.username}
+              id="username"
+              formValidationSchema={register('username')}
+            />
+            <FormInfo>
+              <FormLabel htmlFor="email">Email</FormLabel>
+              <FormError>{''}</FormError>
+            </FormInfo>
+            <FormTextInput
+              type="email"
+              disabled={!inEditMode || formState.isSubmitting}
+              error={!!formState.errors.email}
+              id="email"
+              formValidationSchema={register('email')}
+            />
+
+            <div className="flex space-x-3">
+              <div className="w-1/2">
+                <FormInfo>
+                  <FormLabel htmlFor="firstName">First Name</FormLabel>
+                  <FormError>{formState.errors.firstName?.message}</FormError>
+                </FormInfo>
+                <FormTextInput
+                  type="text"
+                  disabled={!inEditMode || formState.isSubmitting}
+                  error={!!formState.errors.firstName}
+                  id="firstName"
+                  formValidationSchema={register('firstName')}
+                />
+              </div>
+              <div className="w-1/2">
+                <FormInfo>
+                  <FormLabel htmlFor="lastName">Last Name</FormLabel>
+                  <FormError>{formState.errors.lastName?.message}</FormError>
+                </FormInfo>
+                <FormTextInput
+                  type="text"
+                  disabled={!inEditMode || formState.isSubmitting}
+                  error={!!formState.errors.lastName}
+                  id="lastName"
+                  formValidationSchema={register('lastName')}
+                />
+              </div>
+            </div>
+          </div>
+          {inEditMode && <button className="btn-primary btn w-full">Save Changes</button>}
+        </form>
+      </div>
+    </div>
+  );
+};
+
+const AccountPage: NextPage<AccountPageProps> = ({ user }) => {
   return (
     <>
       <Head>
@@ -28,7 +133,7 @@ const AccountPage: NextPage<AccountPageProps> = () => {
             </div>
 
             <div className="flex flex-col items-center space-y-1">
-              <p className="text-3xl font-bold">Hello, {user?.username}!</p>
+              <p className="text-3xl font-bold">Hello, {user.username}!</p>
               <p className="text-lg">Welcome to your account page.</p>
             </div>
           </div>
@@ -36,19 +141,17 @@ const AccountPage: NextPage<AccountPageProps> = () => {
           <div className="w-full">
             <Tab.Group>
               <Tab.List className="tabs tabs-boxed items-center justify-center rounded-2xl">
-                <Tab className="tab tab-md w-1/3 uppercase ui-selected:tab-active">
-                  Settings
-                </Tab>
-                <Tab className="tab tab-md w-1/3 uppercase ui-selected:tab-active">
+                <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
                   Account Info
                 </Tab>
-                <Tab className="tab tab-md w-1/3 uppercase ui-selected:tab-active">
+                <Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
                   Your Posts
                 </Tab>
               </Tab.List>
               <Tab.Panels>
-                <Tab.Panel>Content 1</Tab.Panel>
-                <Tab.Panel>Content 2</Tab.Panel>
+                <Tab.Panel>
+                  <AccountInfo user={user} />
+                </Tab.Panel>
                 <Tab.Panel>Content 3</Tab.Panel>
               </Tab.Panels>
             </Tab.Group>
@@ -61,4 +164,30 @@ const AccountPage: NextPage<AccountPageProps> = () => {
 
 export default AccountPage;
 
-export const getServerSideProps = withPageAuthRequired();
+export const getServerSideProps = withPageAuthRequired(async (context, session) => {
+  const { id } = session;
+
+  const user: z.infer<typeof GetUserSchema> | null =
+    await DBClient.instance.user.findUnique({
+      where: { id },
+      select: {
+        username: true,
+        email: true,
+        accountIsVerified: true,
+        firstName: true,
+        lastName: true,
+        dateOfBirth: true,
+        id: true,
+        createdAt: true,
+      },
+    });
+
+  if (!user) {
+    return { redirect: { destination: '/login', permanent: false } };
+  }
+  return {
+    props: {
+      user: JSON.parse(JSON.stringify(user)),
+    },
+  };
+});

src/pages/api/users/confirm.ts

@@ -27,7 +27,7 @@ const confirmUser = async (req: ConfirmUserRequest, res: NextApiResponse) => {
     throw new ServerError('Could not confirm user.', 401);
   }
 
-  if (user.isAccountVerified) {
+  if (user.accountIsVerified) {
     throw new ServerError('User is already verified.', 400);
   }
 

src/prisma/migrations/20230510010306_/migration.sql

@@ -0,0 +1,9 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `isAccountVerified` on the `User` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "User" DROP COLUMN "isAccountVerified",
+ADD COLUMN     "accountIsVerified" BOOLEAN NOT NULL DEFAULT false;

src/prisma/schema.prisma

@@ -21,7 +21,7 @@ model User {
   email             String            @unique
   createdAt         DateTime          @default(now()) @db.Timestamptz(3)
   updatedAt         DateTime?         @updatedAt @db.Timestamptz(3)
-  isAccountVerified Boolean           @default(false)
+  accountIsVerified Boolean           @default(false)
   dateOfBirth       DateTime
   beerPosts         BeerPost[]
   beerTypes         BeerType[]

src/services/User/createNewUser.ts

@@ -30,7 +30,7 @@ const createNewUser = async ({
       lastName: true,
       dateOfBirth: true,
       createdAt: true,
-      isAccountVerified: true,
+      accountIsVerified: true,
     },
   });
 

src/services/User/findUserById.ts

@@ -14,7 +14,7 @@ const findUserById = async (id: string) => {
         lastName: true,
         dateOfBirth: true,
         createdAt: true,
-        isAccountVerified: true,
+        accountIsVerified: true,
       },
     });
 

src/services/User/schema/GetUserSchema.ts

@@ -9,7 +9,7 @@ const GetUserSchema = z.object({
   firstName: z.string(),
   lastName: z.string(),
   dateOfBirth: z.coerce.date(),
-  isAccountVerified: z.boolean(),
+  accountIsVerified: z.boolean(),
 });
 
 export default GetUserSchema;

src/services/User/updateUserToBeConfirmedById.ts

@@ -5,12 +5,12 @@ import { z } from 'zod';
 const updateUserToBeConfirmedById = async (id: string) => {
   const user: z.infer<typeof GetUserSchema> = await DBClient.instance.user.update({
     where: { id },
-    data: { isAccountVerified: true, updatedAt: new Date() },
+    data: { accountIsVerified: true, updatedAt: new Date() },
     select: {
       id: true,
       username: true,
       email: true,
-      isAccountVerified: true,
+      accountIsVerified: true,
       createdAt: true,
       firstName: true,
       lastName: true,