Add changes to user profile; Fixes;

ErickLimaS · Mar 16, 2024 · aef4029 · aef4029
2 parents db1e50c + 61d0bce
commit aef4029
Show file tree

Hide file tree

Showing 7 changed files with 382 additions and 30 deletions.
diff --git a/app/components/UserLoginModal/component.module.css b/app/components/UserLoginModal/component.module.css
@@ -41,6 +41,20 @@
 
 }
 
+#modal::-webkit-scrollbar {
+    width: 8px;
+}
+
+#modal::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 8px var(--black-05);
+    border-radius: 10px;
+}
+
+#modal::-webkit-scrollbar-thumb {
+    background: var(--black-50);
+    border-radius: 6px;
+}
+
 /* heading */
 #modal #heading {
 
@@ -232,21 +246,15 @@
     -webkit-box-shadow: 0 0 0 3px rgb(255 172 166 / 60%) inset !important;
 }
 
-/* #modal form[data-error-occurred=true] input {
-
-    background-color: rgb(255 172 166 / 60%) !important;
-    box-shadow: 0 0 0 3px rgb(255 172 166 / 60%) inset !important;
-    -webkit-box-shadow: 0 0 0 3px rgb(255 172 166 / 60%) inset !important;
-
-} */
-
 #modal form button {
 
     color: var(--white-100);
 
     background-color: var(--brand-color);
     border: 1px solid transparent;
 
+    margin-top: 32px;
+
     padding: 18px 8px;
 
     width: 100%;
@@ -281,7 +289,7 @@
 
 }
 
-#modal #create_account_button:hover {
+#modal #create_account_button {
 
     text-decoration: underline;
 

diff --git a/app/components/UserLoginModal/index.tsx b/app/components/UserLoginModal/index.tsx
@@ -66,6 +66,7 @@ function UserModal({ onClick, auth, }: { onClick?: MouseEventHandler<HTMLDivElem
 
         const form: any = e.target
 
+        // signup
         if (action == "signup") {
             try {
 
@@ -84,6 +85,7 @@ function UserModal({ onClick, auth, }: { onClick?: MouseEventHandler<HTMLDivElem
 
                 const res = await createUserWithEmailAndPassword(auth, form.email.value.trim(), form.password.value.trim())
 
+                // add default values to user doc
                 await setDoc(doc(collection(db, "users"), res.user?.uid), {
                     bookmarks: [],
                     comments: {},
@@ -93,7 +95,9 @@ function UserModal({ onClick, auth, }: { onClick?: MouseEventHandler<HTMLDivElem
                     videoSubtitleLanguage: "English",
                 })
 
+                // update user info
                 await updateProfile(res.user, {
+                    displayName: form.username.value,
                     photoURL: ProfileFallbackImg.src as string
                 })
 
@@ -108,6 +112,7 @@ function UserModal({ onClick, auth, }: { onClick?: MouseEventHandler<HTMLDivElem
 
             }
         }
+        // login
         else {
             try {
                 const res = await signInWithEmailAndPassword(auth, form.email.value.trim(), form.password.value.trim())
@@ -176,6 +181,26 @@ function UserModal({ onClick, auth, }: { onClick?: MouseEventHandler<HTMLDivElem
                     data-error-occurred={loginError ? true : false}
                 >
 
+                    <AnimatePresence>
+                        {alternativeForm && (
+                            <motion.label
+                                initial={{ opacity: 0, height: 0, }}
+                                animate={{ opacity: 1, height: "auto", transition: { duration: 0.4 } }}
+                                exit={{ opacity: 0, height: 0 }}
+                            >
+                                Username
+                                <input
+                                    type='text'
+                                    name='username'
+                                    pattern="^.{1,15}$"
+                                    title={"The limit is 15 characters."}
+                                    placeholder='Your Username'
+                                    required>
+                                </input>
+                            </motion.label>
+                        )}
+                    </AnimatePresence>
+
                     <label>
                         Email
                         <input
@@ -201,9 +226,9 @@ function UserModal({ onClick, auth, }: { onClick?: MouseEventHandler<HTMLDivElem
                     <AnimatePresence>
                         {alternativeForm && (
                             <motion.label
-                                initial={{ opacity: 0, height: 0, marginTop: "8px", marginBottom: "40px" }}
+                                initial={{ opacity: 0, height: 0, marginTop: "8px" }}
                                 animate={{ opacity: 1, height: "auto", transition: { duration: 0.4 } }}
-                                exit={{ opacity: 0, height: 0, marginTop: "0", marginBottom: "0" }}
+                                exit={{ opacity: 0, height: 0, marginTop: "0" }}
                             >
                                 Confirm Password
                                 <input

diff --git a/app/error.tsx b/app/error.tsx
@@ -111,9 +111,9 @@ function ErrorPage({ error, reset }: {
                     Try again
                 </button>
 
-                <Link href={"/"} style={errorReturnHomeContainerStyles}>
+                <a href={"/"} style={errorReturnHomeContainerStyles}>
                     Return to Home Page
-                </Link>
+                </a>
 
             </div>