Merge pull request #299 from priyanshuverma-dev/feat-confirm-password

feat: Confirm Password and hide button
kom-senapati · Nov 10, 2024 · e38709a · e38709a
2 parents 137702f + aaa6f3f
commit e38709a
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 29 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -4,28 +4,35 @@
 ---
 
 ### Related Issue
+
 <!-- Replace `<issue number>` with the issue number this PR addresses -->
-Closes #<issue number>
+
+- Issue Closes: #<issue number>
 
 ---
 
 ### Description
+
 <!-- Briefly describe the changes in this PR -->
 
 ---
 
 ### How Has This Been Tested?
+
 <!-- Briefly describe how you tested the changes -->
 
 ---
 
 ### Screenshots (if applicable)
+
 <!-- Add screenshots to show visual changes, if applicable -->
 
 ---
 
 ### Type of Change
+
 <!-- Check the type of change this PR introduces -->
+
 - [ ] Bug fix
 - [ ] New feature
 - [ ] Code style update

diff --git a/.github/workflows/pr_raise.yml b/.github/workflows/pr_raise.yml
@@ -18,7 +18,7 @@ jobs:
         run: |
           COMMENT=$(cat <<EOF
           {
-            "body": "Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our chaotic [CONTRIBUTING.md](https://github.com/vansh-codes/ChaosWeb/blob/main/CONTRIBUTING). If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊"
+            "body": "Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our bot-verse [CONTRIBUTING.md](https://github.com/kom-senapati/bot-verse/blob/main/CONTRIBUTING.md). If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊"
           }
           EOF
           )

diff --git a/client/src/lib/schemas.ts b/client/src/lib/schemas.ts
@@ -1,31 +1,37 @@
 import { z } from "zod";
 
-export const signupSchema = z.object({
-  name: z.string().min(3, {
-    message: "Name should be at least 3 characters long.",
-  }),
-  username: z.string().min(3, {
-    message: "Username should be at least 3 characters long.",
-  }),
-  email: z.string().email({
-    message: "Enter a valid email.",
-  }),
-  password: z
-    .string()
-    .min(8, { message: "Password must be at least 8 characters long." })
-    .max(32, { message: "Password must be less than 32 characters long." })
-    .regex(/[A-Z]/, {
-      message: "Password must contain at least one uppercase letter.",
-    })
-    .regex(/[a-z]/, {
-      message: "Password must contain at least one lowercase letter.",
-    })
-    .regex(/\d/, { message: "Password must contain at least one number." })
-    .regex(/[@$!%*?&#]/, {
-      message:
-        "Password must contain at least one special character (@, $, !, %, *, ?, &, #).",
+export const signupSchema = z
+  .object({
+    name: z.string().min(3, {
+      message: "Name should be at least 3 characters long.",
     }),
-});
+    username: z.string().min(3, {
+      message: "Username should be at least 3 characters long.",
+    }),
+    email: z.string().email({
+      message: "Enter a valid email.",
+    }),
+    password: z
+      .string()
+      .min(8, { message: "Password must be at least 8 characters long." })
+      .max(32, { message: "Password must be less than 32 characters long." })
+      .regex(/[A-Z]/, {
+        message: "Password must contain at least one uppercase letter.",
+      })
+      .regex(/[a-z]/, {
+        message: "Password must contain at least one lowercase letter.",
+      })
+      .regex(/\d/, { message: "Password must contain at least one number." })
+      .regex(/[@$!%*?&#]/, {
+        message:
+          "Password must contain at least one special character (@, $, !, %, *, ?, &, #).",
+      }),
+    confirmPassword: z.string(),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: "Passwords do not match.",
+    path: ["confirmPassword"],
+  });
 
 export const loginSchema = z.object({
   username: z.string().min(3, {

diff --git a/client/src/pages/Signup.tsx b/client/src/pages/Signup.tsx
@@ -27,21 +27,23 @@ import toast from "react-hot-toast";
 import axios from "axios";
 import { SERVER_URL } from "@/lib/utils";
 import { useState } from "react";
-import { Loader2 } from "lucide-react";
+import { Loader2, Eye, EyeOff } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import transition from "@/components/transition";
 
 function SignupPage() {
   const navigate = useNavigate();
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
   const form = useForm<z.infer<typeof signupSchema>>({
     resolver: zodResolver(signupSchema),
     defaultValues: {
       username: "",
       email: "",
       name: "",
       password: "",
+      confirmPassword: "",
     },
   });
 
@@ -136,7 +138,39 @@ function SignupPage() {
                     <FormItem>
                       <FormLabel>{t("auth.password")}</FormLabel>
                       <FormControl>
-                        <Input placeholder="I don't know" {...field} />
+                        <div className="relative">
+                          <Input
+                            type={showPassword ? "text" : "password"}
+                            placeholder="I don't know"
+                            {...field}
+                          />
+                          <button
+                            type="button"
+                            onClick={() => setShowPassword(!showPassword)}
+                            className="absolute inset-y-0 right-3 flex items-center text-muted-foreground"
+                          >
+                            {showPassword ? <EyeOff /> : <Eye />}
+                          </button>
+                        </div>
+                      </FormControl>
+
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+                <FormField
+                  control={form.control}
+                  disabled={loading}
+                  name="confirmPassword"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Confirm {t("auth.password")}</FormLabel>
+                      <FormControl>
+                        <Input
+                          type={showPassword ? "text" : "password"}
+                          placeholder="yes, you know"
+                          {...field}
+                        />
                       </FormControl>
 
                       <FormMessage />
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,7 +18,7 @@ jobs: @@
             run: |
               COMMENT=$(cat <<EOF
               {
-                "body": "Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our chaotic [CONTRIBUTING.md](https://github.com/vansh-codes/ChaosWeb/blob/main/CONTRIBUTING). If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊"
+                "body": "Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our bot-verse [CONTRIBUTING.md](https://github.com/kom-senapati/bot-verse/blob/main/CONTRIBUTING.md). If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊"
               }
               EOF
               )
@@ Expand Down @@