2022-11-28 22:14:19 +00:00
|
|
|
|
import { clsx } from 'clsx'
|
2023-11-14 15:10:00 +00:00
|
|
|
|
|
2023-09-21 11:38:22 +00:00
|
|
|
|
import { AuthGuard } from '../../components/AuthGuard'
|
2023-11-14 15:10:00 +00:00
|
|
|
|
import { ProfileSettingsNavigation } from '../../components/Nav/ProfileSettingsNavigation'
|
2024-02-04 11:25:21 +00:00
|
|
|
|
import { Icon } from '../../components/_shared/Icon'
|
|
|
|
|
import { PageLayout } from '../../components/_shared/PageLayout'
|
2023-11-14 10:45:44 +00:00
|
|
|
|
import { useLocalize } from '../../context/localize'
|
2022-11-28 22:14:19 +00:00
|
|
|
|
|
2023-11-14 15:10:00 +00:00
|
|
|
|
import styles from './Settings.module.scss'
|
|
|
|
|
|
2023-02-10 01:19:20 +00:00
|
|
|
|
export const ProfileSecurityPage = () => {
|
2023-11-14 10:45:44 +00:00
|
|
|
|
const { t } = useLocalize()
|
|
|
|
|
|
2022-11-28 22:14:19 +00:00
|
|
|
|
return (
|
2023-11-14 10:45:44 +00:00
|
|
|
|
<PageLayout title={t('Profile')}>
|
2023-09-21 11:38:22 +00:00
|
|
|
|
<AuthGuard>
|
|
|
|
|
<div class="wide-container">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-5">
|
|
|
|
|
<div class={clsx('left-navigation', styles.leftNavigation)}>
|
|
|
|
|
<ProfileSettingsNavigation />
|
|
|
|
|
</div>
|
2022-11-28 22:14:19 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
2023-09-21 11:38:22 +00:00
|
|
|
|
<div class="col-md-19">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-md-20 col-lg-18 col-xl-16">
|
|
|
|
|
<h1>Вход и безопасность</h1>
|
|
|
|
|
<p class="description">Настройки аккаунта, почты, пароля и способов входа.</p>
|
2022-11-30 18:15:01 +00:00
|
|
|
|
|
2023-09-21 11:38:22 +00:00
|
|
|
|
<form>
|
|
|
|
|
<h4>Почта</h4>
|
|
|
|
|
<div class="pretty-form__item">
|
|
|
|
|
<input type="text" name="email" id="email" placeholder="Почта" />
|
|
|
|
|
<label for="email">Почта</label>
|
|
|
|
|
</div>
|
2022-11-30 18:15:01 +00:00
|
|
|
|
|
2023-09-21 11:38:22 +00:00
|
|
|
|
<h4>Изменить пароль</h4>
|
|
|
|
|
<h5>Текущий пароль</h5>
|
|
|
|
|
<div class="pretty-form__item">
|
|
|
|
|
<input
|
|
|
|
|
type="text"
|
|
|
|
|
name="password-current"
|
|
|
|
|
id="password-current"
|
|
|
|
|
class={clsx(styles.passwordInput, 'nolabel')}
|
|
|
|
|
/>
|
|
|
|
|
<button type="button" class={styles.passwordToggleControl}>
|
|
|
|
|
<Icon name="password-hide" />
|
2023-03-23 22:05:23 +00:00
|
|
|
|
</button>
|
2023-09-21 11:38:22 +00:00
|
|
|
|
</div>
|
2023-03-23 22:05:23 +00:00
|
|
|
|
|
2023-09-21 11:38:22 +00:00
|
|
|
|
<h5>Новый пароль</h5>
|
|
|
|
|
<div class="pretty-form__item">
|
|
|
|
|
<input
|
|
|
|
|
type="password"
|
|
|
|
|
name="password-new"
|
|
|
|
|
id="password-new"
|
|
|
|
|
class={clsx(styles.passwordInput, 'nolabel')}
|
|
|
|
|
/>
|
|
|
|
|
<button type="button" class={styles.passwordToggleControl}>
|
|
|
|
|
<Icon name="password-open" />
|
2023-03-23 22:05:23 +00:00
|
|
|
|
</button>
|
2023-09-21 11:38:22 +00:00
|
|
|
|
</div>
|
2022-11-30 18:15:01 +00:00
|
|
|
|
|
2023-09-21 11:38:22 +00:00
|
|
|
|
<h5>Подтвердите новый пароль</h5>
|
|
|
|
|
<div class="pretty-form__item">
|
|
|
|
|
<input
|
|
|
|
|
type="password"
|
|
|
|
|
name="password-new-confirm"
|
|
|
|
|
id="password-new-confirm"
|
|
|
|
|
class={clsx(styles.passwordInput, 'nolabel')}
|
|
|
|
|
/>
|
|
|
|
|
<button type="button" class={styles.passwordToggleControl}>
|
|
|
|
|
<Icon name="password-open" />
|
2023-03-23 22:05:23 +00:00
|
|
|
|
</button>
|
2023-09-21 11:38:22 +00:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h4>Социальные сети</h4>
|
|
|
|
|
<h5>Google</h5>
|
|
|
|
|
<div class="pretty-form__item">
|
|
|
|
|
<p>
|
|
|
|
|
<button class={clsx('button', 'button--light', styles.socialButton)} type="button">
|
|
|
|
|
<Icon name="google" class={styles.icon} />
|
|
|
|
|
Привязать
|
|
|
|
|
</button>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
2023-03-23 22:05:23 +00:00
|
|
|
|
|
2023-09-21 11:38:22 +00:00
|
|
|
|
<h5>VK</h5>
|
|
|
|
|
<div class="pretty-form__item">
|
|
|
|
|
<p>
|
|
|
|
|
<button class={clsx(styles.socialButton, 'button', 'button--light')} type="button">
|
|
|
|
|
<Icon name="vk" class={styles.icon} />
|
|
|
|
|
Привязать
|
|
|
|
|
</button>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h5>Facebook</h5>
|
|
|
|
|
<div class="pretty-form__item">
|
|
|
|
|
<p>
|
|
|
|
|
<button class={clsx(styles.socialButton, 'button', 'button--light')} type="button">
|
|
|
|
|
<Icon name="facebook" class={styles.icon} />
|
|
|
|
|
Привязать
|
|
|
|
|
</button>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<h5>Apple</h5>
|
|
|
|
|
<div class="pretty-form__item">
|
|
|
|
|
<p>
|
|
|
|
|
<button
|
|
|
|
|
class={clsx(
|
|
|
|
|
styles.socialButton,
|
|
|
|
|
styles.socialButtonApple,
|
2023-11-14 15:10:00 +00:00
|
|
|
|
'button' + ' button--light',
|
2023-09-21 11:38:22 +00:00
|
|
|
|
)}
|
|
|
|
|
type="button"
|
|
|
|
|
>
|
|
|
|
|
<Icon name="apple" class={styles.icon} />
|
|
|
|
|
Привязать
|
|
|
|
|
</button>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<br />
|
2023-03-23 22:05:23 +00:00
|
|
|
|
<p>
|
2023-09-21 11:38:22 +00:00
|
|
|
|
<button class="button button--submit" type="submit">
|
|
|
|
|
Сохранить настройки
|
2023-03-23 22:05:23 +00:00
|
|
|
|
</button>
|
|
|
|
|
</p>
|
2023-09-21 11:38:22 +00:00
|
|
|
|
</form>
|
|
|
|
|
</div>
|
2023-03-23 22:05:23 +00:00
|
|
|
|
</div>
|
2022-11-28 22:14:19 +00:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-09-21 11:38:22 +00:00
|
|
|
|
</AuthGuard>
|
2023-02-17 09:21:02 +00:00
|
|
|
|
</PageLayout>
|
2022-11-28 22:14:19 +00:00
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
2023-02-17 09:21:02 +00:00
|
|
|
|
export const Page = ProfileSecurityPage
|