fully implemented email authentication

components/Modal/User/ChangePassword.tsx

@@ -17,7 +17,6 @@ export default function ChangePassword({
   setUser,
   user,
 }: Props) {
-  const [oldPassword, setOldPassword] = useState("");
   const [newPassword, setNewPassword1] = useState("");
   const [newPassword2, setNewPassword2] = useState("");
 
@@ -28,15 +27,15 @@ export default function ChangePassword({
 
   useEffect(() => {
     if (
-      !(oldPassword == "" || newPassword == "" || newPassword2 == "") &&
+      !(newPassword == "" || newPassword2 == "") &&
       newPassword === newPassword2
     ) {
-      setUser({ ...user, oldPassword, newPassword });
+      setUser({ ...user, newPassword });
     }
-  }, [oldPassword, newPassword, newPassword2]);
+  }, [newPassword, newPassword2]);
 
   const submit = async () => {
-    if (oldPassword == "" || newPassword == "" || newPassword2 == "") {
+    if (newPassword == "" || newPassword2 == "") {
       toast.error("Please fill all the fields.");
     } else if (newPassword === newPassword2) {
       setSubmitLoader(true);
@@ -56,11 +55,15 @@ export default function ChangePassword({
 
       setSubmitLoader(false);
 
-      if (user.username !== account.username || user.name !== account.name)
+      if (
+        (user.username !== account.username || user.name !== account.name) &&
+        user.username &&
+        user.email
+      )
         update({ username: user.username, name: user.name });
 
       if (response.ok) {
-        setUser({ ...user, oldPassword: undefined, newPassword: undefined });
+        setUser({ ...user, newPassword: undefined });
         togglePasswordFormModal();
       }
     } else {
@@ -71,20 +74,13 @@ export default function ChangePassword({
   return (
     <div className="mx-auto sm:w-[35rem] w-80">
       <div className="max-w-[25rem] w-full mx-auto flex flex-col gap-3 justify-between">
-        <p className="text-sm text-sky-500">Old Password</p>
-
-        <input
-          value={oldPassword}
-          onChange={(e) => setOldPassword(e.target.value)}
-          type="password"
-          className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
-        />
         <p className="text-sm text-sky-500">New Password</p>
 
         <input
           value={newPassword}
           onChange={(e) => setNewPassword1(e.target.value)}
           type="password"
+          placeholder="*****************"
           className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
         />
         <p className="text-sm text-sky-500">Re-enter New Password</p>
@@ -93,6 +89,7 @@ export default function ChangePassword({
           value={newPassword2}
           onChange={(e) => setNewPassword2(e.target.value)}
           type="password"
+          placeholder="*****************"
           className="w-full rounded-md p-3 mx-auto border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
         />
 

components/Modal/User/PrivacySettings.tsx

@@ -35,7 +35,7 @@ export default function PrivacySettings({
   }, [whitelistedUsersTextbox]);
 
   useEffect(() => {
-    setUser({ ...user, oldPassword: undefined, newPassword: undefined });
+    setUser({ ...user, newPassword: undefined });
   }, []);
 
   const stringToArray = (str: string) => {
@@ -68,7 +68,7 @@ export default function PrivacySettings({
       update({ username: user.username, name: user.name });
 
     if (response.ok) {
-      setUser({ ...user, oldPassword: undefined, newPassword: undefined });
+      setUser({ ...user, newPassword: undefined });
       toggleSettingsModal();
     }
   };

components/Modal/User/ProfileSettings.tsx

@@ -16,6 +16,8 @@ type Props = {
   user: AccountSettings;
 };
 
+const EmailProvider = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
+
 export default function ProfileSettings({
   toggleSettingsModal,
   setUser,
@@ -59,7 +61,7 @@ export default function ProfileSettings({
   };
 
   useEffect(() => {
-    setUser({ ...user, oldPassword: undefined, newPassword: undefined });
+    setUser({ ...user, newPassword: undefined });
   }, []);
 
   const submit = async () => {
@@ -80,7 +82,11 @@ export default function ProfileSettings({
 
     setSubmitLoader(false);
 
-    if (user.username !== account.username || user.name !== account.name)
+    if (
+      user.username !== account.username ||
+      user.name !== account.name ||
+      user.email !== account.email
+    )
       update({
         username: user.username,
         email: user.username,
@@ -88,7 +94,7 @@ export default function ProfileSettings({
       });
 
     if (response.ok) {
-      setUser({ ...user, oldPassword: undefined, newPassword: undefined });
+      setUser({ ...user, newPassword: undefined });
       toggleSettingsModal();
     }
   };
@@ -158,6 +164,18 @@ export default function ProfileSettings({
               className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
             />
           </div>
+
+          {EmailProvider ? (
+            <div>
+              <p className="text-sm text-sky-500 mb-2">Email</p>
+              <input
+                type="text"
+                value={user.email || ""}
+                onChange={(e) => setUser({ ...user, email: e.target.value })}
+                className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-500 duration-100"
+              />
+            </div>
+          ) : undefined}
         </div>
       </div>