my account page created

the-mirror-gdp · Oct 16, 2024 · 97f11ad · 97f11ad
1 parent 1aa93bf
commit 97f11ad
Show file tree

Hide file tree

Showing 8 changed files with 198 additions and 108 deletions.
diff --git a/mirror-2/actions/auth.ts b/mirror-2/actions/auth.ts
@@ -27,11 +27,10 @@ export const createAccountAction = async (formData: FormData) => {
     console.error(error.code + " " + error.message);
     return encodedRedirect("error", "/create-account", error.message);
   } else {
-
     return encodedRedirect(
       "success",
       "/create-account",
-      "Thanks for signing up! Please check your email for a verification link.",
+      "Thanks for signing up! Please check your email for a verification link."
     );
   }
 };
@@ -72,7 +71,7 @@ export const forgotPasswordAction = async (formData: FormData) => {
     return encodedRedirect(
       "error",
       "/forgot-password",
-      "Could not reset password",
+      "Could not reset password"
     );
   }
 
@@ -83,7 +82,7 @@ export const forgotPasswordAction = async (formData: FormData) => {
   return encodedRedirect(
     "success",
     "/forgot-password",
-    "Check your email for a link to reset your password.",
+    "Check your email for a link to reset your password."
   );
 };
 
@@ -97,15 +96,15 @@ export const resetPasswordAction = async (formData: FormData) => {
     encodedRedirect(
       "error",
       "/protected/reset-password",
-      "Password and confirm password are required",
+      "Password and confirm password are required"
     );
   }
 
   if (password !== confirmPassword) {
     encodedRedirect(
       "error",
       "/protected/reset-password",
-      "Passwords do not match",
+      "Passwords do not match"
     );
   }
 
@@ -117,9 +116,35 @@ export const resetPasswordAction = async (formData: FormData) => {
     encodedRedirect(
       "error",
       "/protected/reset-password",
-      "Password update failed",
+      "Password update failed"
     );
   }
 
   encodedRedirect("success", "/protected/reset-password", "Password updated");
 };
+
+export const resetEmailAction = async (formData: FormData) => {
+  const supabase = createServerClient();
+
+  const email = formData.get("email") as string;
+  const password = formData.get("password") as string;
+
+  if (!email || !password) {
+    encodedRedirect(
+      "error",
+      "/protected/reset-password",
+      "Email and password are required"
+    );
+  }
+  //NOTE: Need to match current password with entered password before updating the user's email.
+
+  const { error } = await supabase.auth.updateUser({
+    email,
+  });
+
+  if (error) {
+    encodedRedirect("error", "/protected/reset-email", "Email update failed");
+  }
+
+  encodedRedirect("success", "/protected/reset-email", "Email updated");
+};
diff --git a/mirror-2/app/home/page.tsx b/mirror-2/app/home/page.tsx
@@ -99,41 +99,44 @@ export default function Home() {
                 </p>
               </div>
             </div>
-
-            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 py-6">
-              {spaces?.slice(0, 4).map((space) => (
-                <Card
-                  className="rounded-none"
-                  style={{
-                    borderBottomLeftRadius: "0.75rem",
-                    borderBottomRightRadius: "0.75rem",
-                  }}
-                >
-                  <CardContent className="p-0">
-                    <Image
-                      src={dummyImg}
-                      width={250}
-                      height={250}
-                      alt={space?.name}
-                      style={{
-                        height: "250px",
-                        width: "100%",
-                      }}
-                    />
-                  </CardContent>
-                  <CardFooter>
-                    <div className="space-y-1 text-lg mt-4">
-                      <h3 className="font-medium leading-none">
-                        {space?.name}
-                      </h3>
-                      <p className="text-xs text-muted-foreground">
-                        Created At {space?.created_at.split("T")[0]}
-                      </p>
-                    </div>
-                  </CardFooter>
-                </Card>
-              ))}
-            </div>
+            {spaces?.length ? (
+              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 py-6">
+                {spaces?.slice(0, 4).map((space) => (
+                  <Card
+                    className="rounded-none"
+                    style={{
+                      borderBottomLeftRadius: "0.75rem",
+                      borderBottomRightRadius: "0.75rem",
+                    }}
+                  >
+                    <CardContent className="p-0">
+                      <Image
+                        src={dummyImg}
+                        width={250}
+                        height={250}
+                        alt={space?.name}
+                        style={{
+                          height: "250px",
+                          width: "100%",
+                        }}
+                      />
+                    </CardContent>
+                    <CardFooter>
+                      <div className="space-y-1 text-lg mt-4">
+                        <h3 className="font-medium leading-none">
+                          {space?.name}
+                        </h3>
+                        <p className="text-xs text-muted-foreground">
+                          Created At {space?.created_at.split("T")[0]}
+                        </p>
+                      </div>
+                    </CardFooter>
+                  </Card>
+                ))}
+              </div>
+            ) : (
+              <h3 className="text-center">No Space found</h3>
+            )}
           </div>
         </div>
       </div>

diff --git a/mirror-2/app/my/account/components/editButton.tsx b/mirror-2/app/my/account/components/editButton.tsx
@@ -0,0 +1,23 @@
+import React, { MouseEventHandler } from "react";
+
+const EditButton = () => {
+  return (
+    <button
+      type="button"
+      className="flex justify-center max-h-[3.125rem] items-center whitespace-nowrap p-3 bg-blueMirror rounded-xl font-primary font-semibold border border-transparent text-white shadow-[0_2px_40px_0px_rgba(57,121,255,0.4)]  min-w-fit mobile:text-xs bg-transparent shadowNone text-blueMirror bg-[#121428]
+      hover:bg-blue-700 hover:ease-in duration-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true"
+        className="w-6 h-6"
+      >
+        <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
+      </svg>{" "}
+    </button>
+  );
+};
+
+export default EditButton;
diff --git a/mirror-2/app/my/account/page.tsx b/mirror-2/app/my/account/page.tsx
@@ -1,13 +1,14 @@
 import React from "react";
 import { Separator } from "@/components/ui/separator";
-import { Metadata } from "next";
 import { Sidebar } from "@/app/home/components/sidebar";
 import { playlists } from "@/app/home/data/playlists";
+import EditButton from "./components/editButton";
+import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import ResetPassword from "@/app/protected/reset-password/page";
+import ResetEmail from "@/app/protected/reset-email/page";
 
-export const metadata: Metadata = {
-  title: "Discover",
-  description: "",
-};
 const MyAccount = () => {
   return (
     <div className="bg-background flex">
@@ -35,38 +36,55 @@ const MyAccount = () => {
         <div className="flex items-center gap-2 mobile:gap-1 w-full justify-between">
           <div className="flex relative">
             <div className="flex-wrap mt-1 rounded-md shadow-sm">
-              <input
-                id="email"
-                autoComplete="none"
-                name="email"
+              <Input
                 type="email"
-                placeholder="[email protected]"
-                className="block h-[3.125rem] rounded-xl focus:outline-none pt-6 pl-4 bg-bluenav text-white text-base font-semibold font-primary border-gray-700 text-disabledMirror focus:border-ringBlue border-none bg-transparent"
-                value="[email protected]"
+                name="email"
+                className="block h-[3.125rem] rounded-xl focus:outline-none pt-6 pl-4 text-white text-base font-semibold font-primary border-gray-700 text-disabledMirror focus:border-ringBlue border-none bg-transparent"
+                value={"[email protected]"}
               />
-              <label
+              <Label
                 htmlFor="email"
                 className="absolute left-4 top-2 text-textInput text-xs font-semibold font-primary peer-placeholder-shown:text-sm peer-focus:text-xs"
               >
                 Email
-              </label>
+              </Label>
+            </div>
+          </div>
+          <Dialog>
+            <DialogTrigger asChild>
+              <EditButton />
+            </DialogTrigger>
+            <DialogContent>
+              <ResetEmail searchParams={{ message: "" }} />
+            </DialogContent>
+          </Dialog>
+        </div>
+        {/* ========== */}
+        <div className="flex items-center gap-2 mobile:gap-1 w-full justify-between mt-4">
+          <div className="flex relative">
+            <div className="flex-wrap mt-1 rounded-md shadow-sm">
+              <Input
+                type="password"
+                name="password"
+                value="[email protected]"
+                className="block h-[3.125rem] rounded-xl focus:outline-none pt-6 pl-4 text-white text-base font-semibold font-primary border-gray-700 text-disabledMirror focus:border-ringBlue border-none bg-transparent"
+              />
+              <Label
+                htmlFor="password"
+                className="absolute left-4 top-2 text-textInput text-xs font-semibold font-primary peer-placeholder-shown:text-sm peer-focus:text-xs"
+              >
+                Password
+              </Label>
             </div>
           </div>
-          <button
-            type="button"
-            className="flex justify-center max-h-[3.125rem] items-center whitespace-nowrap p-3 bg-blueMirror rounded-xl font-primary font-semibold border border-transparent text-white shadow-[0_2px_40px_0px_rgba(57,121,255,0.4)]  min-w-fit mobile:text-xs bg-transparent shadowNone text-blueMirror bg-[#121428]
-      hover:bg-blue-700 hover:ease-in duration-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-              aria-hidden="true"
-              className="w-6 h-6"
-            >
-              <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"></path>
-            </svg>{" "}
-          </button>
+          <Dialog>
+            <DialogTrigger asChild>
+              <EditButton />
+            </DialogTrigger>
+            <DialogContent>
+              <ResetPassword searchParams={{ message: "" }} />
+            </DialogContent>
+          </Dialog>
         </div>
       </div>
     </div>

diff --git a/mirror-2/app/protected/reset-email/page.tsx b/mirror-2/app/protected/reset-email/page.tsx
@@ -1,4 +1,4 @@
-import { resetPasswordAction } from "@/actions/auth";
+import { resetEmailAction } from "@/actions/auth";
 import { FormMessage, Message } from "@/components/form-message";
 import { SubmitButton } from "@/components/submit-button";
 import { Input } from "@/components/ui/input";
@@ -11,27 +11,23 @@ export default async function ResetEmail({
 }) {
   return (
     <form className="flex flex-col w-full max-w-md p-4 gap-2 [&>input]:mb-4">
-      <h1 className="text-2xl font-medium">Reset Email</h1>
+      <h1 className="text-2xl font-medium">Reset email</h1>
       <p className="text-sm text-foreground/60">
-        Please enter your new password below.
+        Please enter your new email and verify your password below.
       </p>
-      <Label htmlFor="password">New password</Label>
+      <Label htmlFor="email" className="mt-3">
+        New email
+      </Label>
+      <Input type="email" name="email" placeholder="Enter New Email" required />
+
+      <Label htmlFor="password">Password</Label>
       <Input
         type="password"
         name="password"
-        placeholder="New password"
-        required
-      />
-      <Label htmlFor="confirmPassword">Confirm password</Label>
-      <Input
-        type="password"
-        name="confirmPassword"
-        placeholder="Confirm password"
+        placeholder="Enter password"
         required
       />
-      <SubmitButton formAction={resetPasswordAction}>
-        Reset password
-      </SubmitButton>
+      <SubmitButton formAction={resetEmailAction}>Reset email</SubmitButton>
       <FormMessage message={searchParams} />
     </form>
   );

diff --git a/mirror-2/app/protected/reset-password/page.tsx b/mirror-2/app/protected/reset-password/page.tsx
@@ -15,7 +15,9 @@ export default async function ResetPassword({
       <p className="text-sm text-foreground/60">
         Please enter your new password below.
       </p>
-      <Label htmlFor="password">New password</Label>
+      <Label htmlFor="password" className="mt-3">
+        New password
+      </Label>
       <Input
         type="password"
         name="password"