add password change

2 files changed, 133 insertions, 36 deletions

diff --git a/src/components/settings/ChangePassword.tsx b/src/components/settings/ChangePassword.tsx
new file mode 100644
index 0000000..d437b5e
--- /dev/null
+++ b/src/components/settings/ChangePassword.tsx
@@ -0,0 +1,91 @@
+'use client';
+
+import { useState } from 'react';
+import { InputField } from '@/components/ui/inputfield';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { changePassword } from '@/lib/api/ChangePassword';
+
+export const ChangePasswordField = () => {
+    const [currentPassword, setCurrentPassword] = useState('');
+    const [newPassword, setNewPassword] = useState('');
+    const [confirmPassword, setConfirmPassword] = useState('');
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const handleSubmit = async () => {
+        setError(null);
+
+        if (newPassword !== confirmPassword) {
+            setError('Пароли не совпадают');
+            return;
+        }
+
+        if (newPassword.length < 6) {
+            setError('Пароль должен быть минимум 6 символов');
+            return;
+        }
+
+        setLoading(true);
+
+        const res = await changePassword(
+            currentPassword,
+            newPassword,
+            confirmPassword,
+        );
+
+        setLoading(false);
+
+        if (res.error) {
+            setError(res.error.general);
+            return;
+        }
+
+        setCurrentPassword('');
+        setNewPassword('');
+        setConfirmPassword('');
+    };
+
+    return (
+        <div className="flex flex-col gap-[20px] w-[310px]">
+            <p className="text-light-violet font-medium">СМЕНА ПАРОЛЯ</p>
+
+            <div className="flex flex-col gap-[10px]">
+                <InputField
+                    placeholder="Текущий пароль"
+                    isPassword
+                    type="password"
+                    name="currentPassword"
+                    value={currentPassword}
+                    onChange={(e: any) => setCurrentPassword(e.target.value)}
+                />
+
+                <InputField
+                    placeholder="Новый пароль"
+                    isPassword
+                    type="password"
+                    name="newPassword"
+                    value={newPassword}
+                    onChange={(e: any) => setNewPassword(e.target.value)}
+                />
+
+                <InputField
+                    placeholder="Повторите пароль"
+                    isPassword
+                    type="password"
+                    name="confirmPassword"
+                    value={confirmPassword}
+                    onChange={(e: any) => setConfirmPassword(e.target.value)}
+                />
+            </div>
+
+            {error && <p className="text-red text-sm">{error}</p>}
+
+            <Button onClick={handleSubmit} disabled={loading}>
+                {loading ? 'Смена...' : 'Сменить'}
+            </Button>
+
+            <Separator className="bg-violet/30 h-[1px]" />
+        </div>
+    );
+};
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>