feat: ✨ feat(Settings-page-example): Update UI components and enhance…

… settings page Description: This commit introduces updates to the user interface components and enhances the settings page. The changes are part of the ongoing work on the `Settings-page-example` branch. -In `app/(protected)/_components/navbar.tsx`, `app/(protected)/admin/_components/page-type-card.tsx`, `app/(protected)/admin/page.tsx`, `app/(protected)/settings/page.tsx`, `components/user-info.tsx`, and `schemas/index.ts`, updates have been made to handle the UI enhancements and functionality updates. Changes: - Update `app/(protected)/_components/navbar.tsx` to add `shadow-md` class for shadow effect - Update `app/(protected)/admin/_components/page-type-card.tsx`, `app/(protected)/admin/page.tsx`, `app/(protected)/settings/page.tsx`, `components/user-info.tsx`, and `schemas/index.ts` for functionality updates This commit doesn't introduce any breaking changes. The updates are compatible with the existing codebase. Co-authored-by: Ricardo Esteves <[email protected]>
RicardoGEsteves · Jan 15, 2024 · 232d95d · 232d95d
1 parent 3326cd2
commit 232d95d
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 18 deletions.
diff --git a/app/(protected)/_components/navbar.tsx b/app/(protected)/_components/navbar.tsx
@@ -14,7 +14,7 @@ const Navbar = () => {
 
   return (
     <>
-      <nav className="hidden lg:flex w-full fixed top-0 h-14 bg-secondary justify-between items-center p-4">
+      <nav className="hidden lg:flex w-full fixed top-0 h-14 bg-secondary justify-between items-center p-4 shadow-md">
         <div className="flex gap-x-2">
           {NAV_LINKS.map((link, index) => (
             <Button
@@ -30,7 +30,7 @@ const Navbar = () => {
         <UserButton />
       </nav>
 
-      <nav className="flex bg-secondary items-center justify-between p-4 lg:hidden">
+      <nav className="flex bg-secondary items-center justify-between p-4 lg:hidden shadow-md">
         <Sheet>
           <SheetTrigger>
             <Button

diff --git a/app/(protected)/admin/_components/page-type-card.tsx b/app/(protected)/admin/_components/page-type-card.tsx
@@ -8,7 +8,7 @@ type PageTypeCardProps = {
 
 const PageTypeCard = ({ title, role }: PageTypeCardProps) => {
   return (
-    <Card className="w-auto">
+    <Card className="w-auto shadow-sm">
       <CardHeader>
         <p className="text-2xl font-semibold text-center">{title}</p>
       </CardHeader>

diff --git a/app/(protected)/admin/page.tsx b/app/(protected)/admin/page.tsx
@@ -42,7 +42,7 @@ export default function AdminPage() {
   };
 
   return (
-    <Card className="w-auto">
+    <Card className="w-auto shadow-sm">
       <CardHeader className="flex-row items-center justify-center gap-x-4">
         <span>
           <MdOutlineAdminPanelSettings className="h-10 w-10 text-sky-400" />

diff --git a/app/(protected)/settings/page.tsx b/app/(protected)/settings/page.tsx
@@ -82,7 +82,7 @@ export default function SettingsPage() {
   };
 
   return (
-    <Card className="w-auto">
+    <Card className="w-auto shadow-sm">
       <CardHeader className="flex-row items-center justify-center font-semibold gap-x-3">
         <RiUserSettingsLine className="text-sky-400 text-3xl" />
 
@@ -104,8 +104,9 @@ export default function SettingsPage() {
                     <FormControl>
                       <Input
                         {...field}
-                        placeholder="John Doe"
+                        placeholder="Your Name"
                         disabled={isPending}
+                        type="text"
                       />
                     </FormControl>
                     <FormMessage />
@@ -123,7 +124,7 @@ export default function SettingsPage() {
                         <FormControl>
                           <Input
                             {...field}
-                            placeholder="john.doe@example.com"
+                            placeholder="your.email@example.com"
                             type="email"
                             disabled={isPending}
                           />
@@ -132,36 +133,60 @@ export default function SettingsPage() {
                       </FormItem>
                     )}
                   />
+
                   <FormField
                     control={form.control}
                     name="password"
                     render={({ field }) => (
                       <FormItem>
                         <FormLabel>Password</FormLabel>
                         <FormControl>
-                          <Input
+                          <PasswordInput
                             {...field}
                             placeholder="******"
                             type="password"
                             disabled={isPending}
+                            value={field.value !== undefined ? field.value : ""}
                           />
                         </FormControl>
                         <FormMessage />
                       </FormItem>
                     )}
                   />
+
                   <FormField
                     control={form.control}
                     name="newPassword"
                     render={({ field }) => (
                       <FormItem>
                         <FormLabel>New Password</FormLabel>
                         <FormControl>
-                          <Input
+                          <PasswordInput
+                            {...field}
+                            placeholder="******"
+                            type="password"
+                            disabled={isPending}
+                            value={field.value !== undefined ? field.value : ""}
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    )}
+                  />
+
+                  <FormField
+                    control={form.control}
+                    name="newPasswordConfirmation"
+                    render={({ field }) => (
+                      <FormItem>
+                        <FormLabel>New Password Confirmation</FormLabel>
+                        <FormControl>
+                          <PasswordInput
                             {...field}
                             placeholder="******"
                             type="password"
                             disabled={isPending}
+                            value={field.value !== undefined ? field.value : ""}
                           />
                         </FormControl>
                         <FormMessage />
@@ -200,11 +225,11 @@ export default function SettingsPage() {
                   control={form.control}
                   name="isTwoFactorEnabled"
                   render={({ field }) => (
-                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
+                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm gap-x-2">
                       <div className="space-y-0.5">
                         <FormLabel>Two Factor Authentication</FormLabel>
                         <FormDescription>
-                          Enable two factor authentication for your account
+                          Enable two factor authentication for your account.
                         </FormDescription>
                       </div>
                       <FormControl>

diff --git a/components/user-info.tsx b/components/user-info.tsx
@@ -17,7 +17,7 @@ const UserInfo = ({ user, label }: UserInfoProps) => {
   };
 
   return (
-    <Card className="w-auto">
+    <Card className="w-auto shadow-sm">
       <CardHeader>
         <p className="text-2xl font-semibold text-center">{label}</p>
       </CardHeader>

diff --git a/schemas/index.ts b/schemas/index.ts
@@ -32,28 +32,38 @@ export const SettingsSchema = z
     isTwoFactorEnabled: z.optional(z.boolean()),
     role: z.enum([UserRole.ADMIN, UserRole.USER]),
     email: z.optional(z.string().email()),
-    password: z.optional(z.string().min(6)),
-    newPassword: z.optional(z.string().min(6)),
-    newPasswordConfirmation: z.optional(z.string().min(6)),
+    password: z.optional(z.string().min(1)),
+    newPassword: z.optional(
+      z.string().min(6, {
+        message:
+          "Please enter a new password with at least 6 characters, required",
+      })
+    ),
+    newPasswordConfirmation: z.optional(
+      z.string().min(6, {
+        message:
+          "Please confirm your password with at least 6 characters, required",
+      })
+    ),
   })
   .refine((data) => passwordRequired(data, "password", "newPassword"), {
     message:
       "Please enter a new password with at least 6 characters, required!",
     path: ["newPassword"],
   })
   .refine((data) => passwordRequired(data, "newPassword", "password"), {
-    message: "Please enter your password is required!",
+    message: "Please enter your valid password, required!",
     path: ["password"],
   })
-  .refine((data) => data.password === data.newPasswordConfirmation, {
+  .refine((data) => data.newPassword === data.newPasswordConfirmation, {
     message: "Passwords do not match.",
     path: ["newPasswordConfirmation"],
   });
 
 export const NewPasswordSchema = z
   .object({
     password: z.string().min(6, {
-      message: "Please enter a password with at least 6 characters, required",
+      message: "Please enter your password, required",
     }),
     passwordConfirmation: z.string().min(6, {
       message: "Please confirm your password, required.",