add password change

1 files changed, 42 insertions, 36 deletions

diff --git a/src/components/settings/SecurityPage.tsx b/src/components/settings/SecurityPage.tsx
index b5f38a9..dd650c4 100644
--- a/src/components/settings/SecurityPage.tsx
+++ b/src/components/settings/SecurityPage.tsx
@@ -3,14 +3,41 @@ import { Button } from '@/components/ui';
 import { Separator } from '@/components/ui';
 import { useAuthContext } from '@/lib/contexts/Auth.context';
 import LogoutButton from './LogoutButton';
+import { changeEmail } from '@/lib/api/ChangeEmail';
+import { useState } from 'react';
+import { ChangePasswordField } from './ChangePassword';
 export default function SecurityPage() {
     const { user } = useAuthContext();
 
     if (!user) return;
 
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    if (!user) return null;
+
     const hasGoogle = !!user.google_id;
-    const hasPassword = !!user.password;
+    const hasPassword = user.has_password;
     const showSetPassword = hasGoogle && !hasPassword;
+
+    const handleChangeEmail = async () => {
+        if (!email || !password) return;
+
+        setLoading(true);
+
+        const res = await changeEmail(email, password);
+
+        setLoading(false);
+
+        if (res.error) {
+            console.error(res.error.general);
+            return;
+        }
+
+        setEmail('');
+        setPassword('');
+    };
     return (
         <>
             <div className="flex flex-col flex-start gap-[40px] w-[900px] h-[816px]">
@@ -38,55 +65,34 @@ export default function SecurityPage() {
                         </div>
                     )}
 
-                    <div className="flex flex-col flex-start gap-[20px] w-[310px] h-[192px]">
+                    <div className="flex flex-col gap-[20px] w-[310px]">
                         <p className="text-light-violet font-medium">
                             СМЕНА ПОЧТЫ
                         </p>
-                        <div className="flex flex-col flex-start gap-[10px] w-[310px] h-[137px]">
+
+                        <div className="flex flex-col gap-[10px]">
                             <InputField
-                                placeholder="Почта аккаунта"
-                                type="password"
-                                name="password"
+                                placeholder="Новая почта"
+                                type="email"
+                                name="email"
+                                value={email}
+                                onChange={(e) => setEmail(e.target.value)}
                             />
+
                             <InputField
                                 isPassword
                                 placeholder="Введите пароль"
                                 type="password"
                                 name="password"
+                                value={password}
+                                onChange={(e) => setPassword(e.target.value)}
                             />
                         </div>
-                        <Button>Сменить</Button>
+
+                        <Button onClick={handleChangeEmail}>Сменить</Button>
                     </div>
                     <Separator className="bg-violet/30 h-[1px]" />
-                    {hasPassword && (
-                        <div className="flex flex-col flex-start gap-[20px] w-[310px] ">
-                            <p className="text-light-violet font-medium">
-                                СМЕНА ПАРОЛЯ
-                            </p>
-                            <div className="flex flex-col flex-start gap-[10px] w-[310px]">
-                                <InputField
-                                    placeholder="Текущий пароль"
-                                    isPassword
-                                    type="password"
-                                    name="password"
-                                />
-                                <InputField
-                                    isPassword
-                                    placeholder="Введите пароль"
-                                    type="password"
-                                    name="password"
-                                />
-                                <InputField
-                                    isPassword
-                                    placeholder="Повторите пароль"
-                                    type="password"
-                                    name="password"
-                                />
-                            </div>
-                            <Button>Сменить</Button>
-                            <Separator className="bg-violet/30 h-[1px]" />
-                        </div>
-                    )}
+                    {hasPassword && <ChangePasswordField />}
                     <LogoutButton />
                 </div>
             </div>