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

import { InputField } from '@/components/ui/inputfield';
import { Button } from '@/components/ui';
import { Separator } from '@/components/ui';
export default function SecurityPage() {
    return (
        <>
            <div className="flex flex-col flex-start gap-[40px] w-[900px] h-[816px]">
                <div className="flex flex-col gap-[20px] w-[900px] ">
                    <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="password"
                            />
                            <InputField
                                isPassword
                                placeholder="Повторите пароль"
                                type="password"
                                name="password"
                            />
                        </div>
                        <Button>Сменить</Button>
                    </div>
                    <Separator className="bg-violet/30 h-[1px]" />
                    <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]" />
                    <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>
                    </div>
                    <Separator className="bg-violet/30 h-[1px]" />

                    <Button className="w-[310px]">Выйти из аккаунта</Button>
                </div>
            </div>
        </>
    );
}