src/components/settings/SecurityPage.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

import { InputField } from '@/components/ui/inputfield';
import { Button } from '@/components/ui';
import { Separator } from '@/components/ui';
import { useAuthContext } from '@/lib/contexts/Auth.context';

export default function SecurityPage() {
    const { user } = useAuthContext();

    if (!user) return;

    const hasGoogle = !!user.google_id;
    const hasPassword = !!user.password;

    return (
        <>
            <div className="flex flex-col flex-start gap-[40px] w-[900px] h-[816px]">
                <div className="flex flex-col gap-[20px] w-[900px] ">
                    {hasGoogle && (
                        <div className="flex flex-col flex-start gap-[20px] w-[310px] h-[241px]">
                            <p className="text-light-violet font-medium">
                                ЗАДАТЬ ПАРОЛЬ
                            </p>
                            <div className="flex flex-col flex-start gap-[10px] w-[310px] h-[137px]">
                                <InputField
                                    placeholder="Введите пароль"
                                    type="password"
                                    name="password"
                                />
                                <InputField
                                    isPassword
                                    placeholder="Повторите пароль"
                                    type="password"
                                    name="repeat_password"
                                />
                            </div>
                            <Button>Сменить</Button>
                            <Separator className="bg-violet/30 h-[1px]" />
                        </div>
                    )}

                    <div className="flex flex-col flex-start gap-[20px] w-[310px] h-[192px]">
                        <p className="text-light-violet font-medium">
                            СМЕНА ПОЧТЫ
                        </p>
                        <div className="flex flex-col flex-start gap-[10px] w-[310px] h-[137px]">
                            <InputField
                                placeholder="Почта аккаунта"
                                type="password"
                                name="password"
                            />
                            <InputField
                                isPassword
                                placeholder="Введите пароль"
                                type="password"
                                name="password"
                            />
                        </div>
                        <Button>Сменить</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>
                    )}
                    <Button className="w-[310px]">Выйти из аккаунта</Button>
                </div>
            </div>
        </>
    );
}