add password change

1 files changed, 91 insertions, 0 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>
+    );
+};