From 59eea69b8aed92a5de3cd4c09c4c59bd063d255d Mon Sep 17 00:00:00 2001
From: Erick Lima <ericklima63@gmail.com>
Date: Fri, 15 Mar 2024 19:31:15 -0300
Subject: [PATCH 1/3] fix: Add Username to SignUp Form

---
 .../UserLoginModal/component.module.css       | 26 +++++++++++------
 app/components/UserLoginModal/index.tsx       | 29 +++++++++++++++++--
 2 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/app/components/UserLoginModal/component.module.css b/app/components/UserLoginModal/component.module.css
index 2728b9ee..674cd90a 100644
--- 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,14 +246,6 @@
     -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);
@@ -247,6 +253,8 @@
     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
index 91fc3382..c3dca050 100644
--- 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

From 18f901b2d05485986835e41fa661e408e57b845e Mon Sep 17 00:00:00 2001
From: Erick Lima <ericklima63@gmail.com>
Date: Fri, 15 Mar 2024 19:32:41 -0300
Subject: [PATCH 2/3] fix: Error Pages Redirect to Home

---
 app/error.tsx     | 4 ++--
 app/not-found.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/error.tsx b/app/error.tsx
index ee8820f0..124cd3ea 100644
--- 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>
 
diff --git a/app/not-found.tsx b/app/not-found.tsx
index f7fd1e10..1061be80 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -86,9 +86,9 @@ function Custom404() {
 
             <div style={errorButtonContainerStyles}>
 
-                <Link href={"/"} style={errorReturnHomeContainerStyles}>
+                <a href={"/"} style={errorReturnHomeContainerStyles}>
                     Return to Home Page
-                </Link>
+                </a>
 
             </div>
 

From 61d0bce2602b3a8041db2d25d7227445cd3cd3c7 Mon Sep 17 00:00:00 2001
From: Erick Lima <ericklima63@gmail.com>
Date: Fri, 15 Mar 2024 21:50:21 -0300
Subject: [PATCH 3/3] feat: Add Possibility to Change Photo and Username on
 Settings

---
 .../UserSettingsModal/component.module.css    | 199 +++++++++++++++++-
 .../components/UserSettingsModal/index.tsx    | 148 ++++++++++++-
 app/lib/formatDateUnix.ts                     |   2 +-
 3 files changed, 334 insertions(+), 15 deletions(-)

diff --git a/app/layout/header/components/UserSettingsModal/component.module.css b/app/layout/header/components/UserSettingsModal/component.module.css
index f3e3b5cf..41cfeffc 100644
--- a/app/layout/header/components/UserSettingsModal/component.module.css
+++ b/app/layout/header/components/UserSettingsModal/component.module.css
@@ -54,10 +54,25 @@
     border-radius: 6px;
 }
 
+#modal #close_menu_btn {
+
+    display: flex;
+    margin-left: auto;
+    padding: 16px;
+    background: transparent;
+    border: 0;
+
+}
+
+#modal #close_menu_btn svg {
+    transform: scale(2);
+    fill: var(--brand-color);
+}
+
 #modal form {
 
     display: flex;
-    gap: 16px 0;
+    gap: 62px 0;
     flex-direction: column;
 
 }
@@ -66,19 +81,30 @@
 
     display: flex;
     flex-direction: column;
-    gap: 16px 0;
+    gap: 12px 0;
 
 }
 
 #modal form h5 {
 
-    color: var(--brand-color);
+    display: flex;
+    gap: 8px;
+
+    font-family: var(--font-family-sans-serif);
+
+    padding: 12px 16px;
+
+    border-radius: 8px;
+
+    background-color: var(--brand-color);
+
+    color: var(--white-100);
 
 }
 
 #modal form h5 span {
 
-    color: var(--black-75);
+    color: var(--white-75);
 
 }
 
@@ -88,6 +114,155 @@
 
 }
 
+#modal form .user_acc_info_container {
+
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 32px;
+
+}
+
+@media(min-width: 400px) {
+    #modal form .user_acc_info_container {
+
+        grid-template-columns: minmax(100px, 1fr) 3fr;
+        gap: 0 8px;
+
+    }
+}
+
+@media(min-width: 520px) {
+    #modal form .user_acc_info_container {
+
+        grid-template-columns: minmax(140px, 1fr) 3fr;
+
+    }
+}
+
+#modal form .user_acc_info_container #img_container {
+
+    cursor: pointer;
+
+    position: relative;
+    top: 0;
+
+    width: inherit;
+    min-height: 240px;
+    height: 100%;
+
+    border-radius: 8px;
+    overflow: hidden;
+
+}
+
+@media(min-width: 400px) {
+    #modal form .user_acc_info_container #img_container {
+        min-height: 100px;
+    }
+}
+
+@media(min-width: 520px) {
+    #modal form .user_acc_info_container #img_container {
+        min-height: 140px;
+    }
+}
+
+#modal form .user_acc_info_container #img_container::after {
+
+    transition: all ease-in-out 200ms;
+}
+
+#modal form .user_acc_info_container #img_container:hover::after {
+
+    content: "Change Image";
+    display: flex;
+
+    width: 100%;
+    height: 100%;
+
+    background: linear-gradient(var(--black-25), var(--black-25));
+    color: var(--white-100);
+
+    z-index: 2;
+    position: absolute;
+    justify-content: center;
+    align-items: center;
+
+}
+
+#modal form .user_acc_info_container #img_container:hover img {
+    filter: brightness(0.2);
+}
+
+/* IMAGES PANEL CONTAINER */
+#imgs_panel_container {
+
+    padding: 8px;
+
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+
+    background-color: var(--black-05);
+
+    border-radius: 8px;
+
+}
+
+@media(min-width: 420px) {
+    #imgs_panel_container {
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+}
+
+@media(min-width: 520px) {
+    #imgs_panel_container {
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+}
+
+#imgs_panel_container .img_checkbox {
+
+    position: relative;
+    aspect-ratio: 1/1;
+
+    overflow: hidden;
+
+}
+
+#imgs_panel_container .img_checkbox img {
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+#imgs_panel_container .img_checkbox input {
+
+    border: 4px solid transparent;
+
+    position: relative;
+
+    border-radius: 50%;
+
+    background: rgba(40, 40, 40, 0.2);
+    color: black;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    z-index: 1;
+
+    width: 100%;
+    height: 100%;
+
+}
+
+#imgs_panel_container .img_checkbox input:checked {
+
+    border: 4px solid var(--brand-color);
+
+}
+
+/*  */
 #modal form label {
 
     display: flex;
@@ -96,7 +271,8 @@
 
 }
 
-#modal form label select {
+#modal form label select,
+#modal form label input {
 
     margin-top: 8px;
 
@@ -113,7 +289,8 @@
 
 }
 
-#modal form select:focus {
+#modal form select:focus,
+#modal form input:focus {
 
     outline-width: 0;
     border: 1px solid var(--brand-color);
@@ -215,25 +392,27 @@
 
     box-shadow: inset 0px 0px 3px var(--black-25);
 
-    background-color: var(--brand-color);
-    color: var(--white-100);
+    background-color: transparent;
+    color: var(--brand-color);
 
     padding: 16px 16px;
 
     border-radius: 8px;
-    border: 1px solid transparent;
+    border: 1px solid var(--brand-color);
 
 }
 
 #modal form button[type="submit"][data-change-success=true] {
 
     background-color: #2e882b;
+    color: var(--white-100);
+    border: 1px solid transparent;
 
 }
 
 #modal form button[type="submit"]:not(:disabled):hover {
 
-    filter: brightness(90%);
+    filter: brightness(65%);
 
 }
 
diff --git a/app/layout/header/components/UserSettingsModal/index.tsx b/app/layout/header/components/UserSettingsModal/index.tsx
index 1cf2686f..12e44f80 100644
--- a/app/layout/header/components/UserSettingsModal/index.tsx
+++ b/app/layout/header/components/UserSettingsModal/index.tsx
@@ -3,10 +3,16 @@ import React, { MouseEventHandler, useState } from 'react'
 import styles from "./component.module.css"
 import CheckSvg from '@/public/assets/check-circle-fill.svg'
 import LoadingSvg from '@/public/assets/ripple-1s-200px.svg'
+import CloseSvg from '@/public/assets/x.svg'
+import UserSvg from '@/public/assets/person-circle.svg'
+import VideoSvg from '@/public/assets/play.svg'
+import SourceSvg from '@/public/assets/globe2.svg'
+import DeleteSvg from '@/public/assets/trash.svg'
 import { useAuthState } from 'react-firebase-hooks/auth'
 import { deleteDoc, deleteField, doc, getDoc, getFirestore, updateDoc } from 'firebase/firestore'
 import { initFirebase } from '@/firebase/firebaseApp'
-import { Auth, deleteUser } from 'firebase/auth'
+import { Auth, deleteUser, updateProfile } from 'firebase/auth'
+import Image from 'next/image'
 
 function UserSettingsModal({ onClick, auth, }: { onClick?: MouseEventHandler<HTMLDivElement>, auth: Auth }) {
 
@@ -38,6 +44,9 @@ function UserSettingsModal({ onClick, auth, }: { onClick?: MouseEventHandler<HTM
     const [isLoading, setIsLoading] = useState(false)
     const [wasSuccessfull, setWasSuccessfull] = useState<boolean | null>(null)
 
+    const [openUserProfilePanel, setOpenUserProfilePanel] = useState<boolean>(false)
+    const [newImgProfileSelected, setNewImgProfileSelected] = useState<string | null>(null)
+
     const [deleteBookmarksClick, setDeleteBookmarksClick] = useState<boolean>(false)
     const [deleteEpisodesClick, setDeleteEpisodessClick] = useState<boolean>(false)
     const [deleteAccountClick, setDeleteAccountClick] = useState<boolean>(false)
@@ -69,6 +78,34 @@ function UserSettingsModal({ onClick, auth, }: { onClick?: MouseEventHandler<HTM
 
     ]
 
+    const imagesOptions = [
+
+        { name: "Naruto", value: "https://staticg.sportskeeda.com/editor/2023/07/90f02-16887293481353-1920.jpg?w=840" },
+        { name: "Sasuke", value: "https://i.pinimg.com/736x/1d/67/b1/1d67b12e9aa9837e5e6bbeb9c4a7de6a.jpg" },
+        { name: "Sakura", value: "https://i.pinimg.com/736x/7d/6e/eb/7d6eeb79b0b43bb0987bf4c6935fa148.jpg" },
+        { name: "Orochimaru", value: "https://i.pinimg.com/736x/46/96/2c/46962c4c09748dee70bad0151bd780f2.jpg" },
+        { name: "Goku", value: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT3mWj71ZXtaNlw17vZ9-grd9PXx6u59fVP3CBing7za9sf3ioZ5AZC7poY9KKgsQ5H4j0" },
+        { name: "Vegeta", value: "https://i.pinimg.com/originals/82/fe/68/82fe682632ade16ee6c8f812f7654e39.jpg" },
+        { name: "Luffy", value: "https://pbs.twimg.com/profile_images/1565724526503424000/TbLcrB1g_400x400.jpg" },
+        { name: "Zoro", value: "https://i.pinimg.com/736x/e6/67/3f/e6673fc4f4930a84277c3f88bc87978e.jpg" },
+        { name: "Tanjiro", value: " https://www.batamnews.co.id/foto_berita//74yaoiba.jpg" },
+        { name: "Zenitsu ", value: "https://i.pinimg.com/1200x/ce/45/de/ce45dee27e0b84ce0b673cc64e7b0db4.jpg" },
+        { name: "Nezuko", value: "https://referencianerd.com/wp-content/uploads/2020/03/Nezuko-Kamado.jpg" },
+        { name: "Rengoku", value: "https://wallpapers-clan.com/wp-content/uploads/2023/07/demon-slayer-rengoku-2-pfp-03.jpg" },
+        { name: "Kuroko", value: "https://i.pinimg.com/736x/15/f4/bc/15f4bcb261ae17c4c58896eccdfced6b.jpg" },
+        { name: "Kagami", value: "https://i.pinimg.com/736x/58/e9/b7/58e9b7f8c80684809651f65fef96bf88.jpg" },
+        { name: "Kilua", value: "https://pbs.twimg.com/media/EWWBpLJX0AYu6Ph.jpg" },
+        { name: "Gon", value: "https://i.pinimg.com/1200x/eb/6d/ac/eb6dace372c72a61b58313fdb7e01053.jpg" },
+        { name: "Hisoka", value: "https://static.wikia.nocookie.net/hunterxhunter/images/2/29/Hisoka_Morow_YC_Portrait.png/revision/latest?cb=20190123172039" },
+        { name: "Gon", value: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQOBHFT7nggN11EYtTIMqsvrM6kDdKvX57IAw" },
+        { name: "Kaneki", value: "https://i.pinimg.com/736x/28/c6/d1/28c6d1b1ba52d55b2ba5f6618d8a0907.jpg" },
+        { name: "Kaneki", value: "https://i.pinimg.com/236x/0f/79/a9/0f79a98a5321f26ee102b18fd002a1c0.jpg" },
+        { name: "Ichigo", value: "https://e0.pxfuel.com/wallpapers/263/836/desktop-wallpaper-cool-bleach-anime-anime-profile.jpg" },
+        { name: "Ichigo", value: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRdcvuS6sprbhx7QosddiutilT2Gn69PD8ch_cGWi2xhcaD3sU6cQB0JnEA46mgnebuZlM" },
+        { name: "Ichigo", value: "https://bandodequadrados.com/img/imagem_noticia/parte-2-de-bleach-thousand-year-blood-war-ganha-teaser-e-data-de-estreia-20221228103701.jpg" },
+
+    ]
+
     const sourcesOptions = [
 
         { name: "Crunchyroll", value: "crunchyroll" },
@@ -108,6 +145,16 @@ function UserSettingsModal({ onClick, auth, }: { onClick?: MouseEventHandler<HTM
             }
         )
 
+        // update user info
+        if (newImgProfileSelected || form.username.value) {
+
+            await updateProfile(user, {
+                photoURL: newImgProfileSelected || user.photoURL,
+                displayName: form.username.value || user.displayName
+            })
+
+        }
+
         setIsLoading(false)
         setWasSuccessfull(true)
 
@@ -197,11 +244,102 @@ function UserSettingsModal({ onClick, auth, }: { onClick?: MouseEventHandler<HTM
                 exit="exit"
             >
 
+                <motion.button
+                    title="Close Settings"
+                    onClick={onClick as any}
+                    id={styles.close_menu_btn}
+                    variants={btnVariants}
+                    whileTap={"tap"}
+                >
+                    <CloseSvg alt="Close" width={16} height={16} />
+                </motion.button>
+
                 <form onSubmit={(e) => changeSettings(e)}>
 
+                    <div className={styles.group_container}>
+                        <h5><span><UserSvg alt="Person" width={16} height={16} /></span> User Account</h5>
+
+                        <div className={`${styles.user_acc_info_container}`}>
+                            <div>
+                                {user && (
+                                    <>
+                                        <label
+                                            id={styles.img_container}
+                                            onClick={() => setOpenUserProfilePanel(!openUserProfilePanel)}
+                                        >
+                                            Change Profile Image
+                                            <Image
+                                                src={user.photoURL as string}
+                                                alt={user.displayName as string}
+                                                // height={140} width={140}
+                                                fill
+                                            />
+                                        </label>
+                                    </>
+                                )}
+                            </div>
+
+                            <div>
+                                {user && (
+                                    <label>
+                                        Change Username
+                                        <input
+                                            type='text'
+                                            name='username'
+                                            placeholder={user.displayName as string}
+                                        ></input>
+                                    </label>
+                                )}
+                            </div>
+
+                        </div>
+
+                        {/* IMAGES PANEL */}
+                        <AnimatePresence
+                            initial={false}
+                            mode='wait'
+                        >
+                            {openUserProfilePanel && (
+                                <motion.div
+                                    initial={{ opacity: 0, height: 0, marginTop: "8px", marginBottom: "40px" }}
+                                    animate={{ opacity: 1, height: "auto", transition: { duration: 0.4 } }}
+                                    exit={{ opacity: 0, height: 0, marginTop: "0", marginBottom: "0" }}
+                                    id={styles.imgs_panel_container}
+                                >
+
+                                    {imagesOptions.map((item, key) => (
+
+                                        <motion.div
+                                            key={key}
+                                            className={styles.img_checkbox}
+                                            variants={btnVariants}
+                                            whileTap={"tap"}
+                                        >
+                                            <input
+                                                type='checkbox'
+                                                name='photoURL'
+                                                value={item.value}
+                                                checked={newImgProfileSelected ? newImgProfileSelected == item.value : false}
+                                                onClick={(e: any) => setNewImgProfileSelected(newImgProfileSelected == e.target.value ? null : e.target.value)}
+                                            >
+                                            </input>
+                                            <Image
+                                                src={item.value}
+                                                alt={item.name}
+                                                fill
+                                            />
+                                        </motion.div>
+
+                                    ))}
+
+                                </motion.div>
+                            )}
+                        </AnimatePresence>
+                    </div>
+
                     <div className={styles.group_container}>
 
-                        <h5>Video</h5>
+                        <h5><span><VideoSvg alt="Play" width={16} height={16} /></span> Video</h5>
 
                         <div>
                             {currentLang && (
@@ -246,7 +384,7 @@ function UserSettingsModal({ onClick, auth, }: { onClick?: MouseEventHandler<HTM
                     </div>
 
                     <div className={styles.group_container}>
-                        <h5>Source</h5>
+                        <h5><span><SourceSvg alt="Globe" width={16} height={16} /></span> Source</h5>
 
                         <div>
                             {currentSource && (
@@ -267,7 +405,9 @@ function UserSettingsModal({ onClick, auth, }: { onClick?: MouseEventHandler<HTM
                     </div>
 
                     <div >
-                        <h5 style={{ marginBottom: "16px" }}>Delete <span>(can not be reverted!)</span></h5>
+                        <h5 style={{ marginBottom: "16px" }}>
+                            <span><DeleteSvg alt="Play" width={16} height={16} /></span> Delete <span>(can not be reverted!)</span>
+                        </h5>
 
                         <div className={styles.btns_container}>
                             <label>
diff --git a/app/lib/formatDateUnix.ts b/app/lib/formatDateUnix.ts
index ad6f3ed3..51d44e56 100644
--- a/app/lib/formatDateUnix.ts
+++ b/app/lib/formatDateUnix.ts
@@ -19,7 +19,7 @@ export function convertFromUnix(unixTimestamp: number, options?: { month: "numer
 
     const date = new Date(unixTimestamp * 1000)
 
-    return date.toLocaleDateString('default', { month: options ? options.month : 'long', day: "numeric", year: "numeric" })
+    return date.toLocaleDateString('en-US', { month: options ? options.month : 'long', day: "numeric", year: "numeric" })
 
 }