diff --git a/package.json b/package.json index b53356cf..738849c1 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "@solid-devtools/logger": "^0.5.0", "@solid-primitives/memo": "^1.1.2", "@solid-primitives/storage": "^1.3.3", + "@solid-primitives/upload": "^0.0.105", "@types/express": "^4.17.14", "@types/node": "^18.11.9", "@types/uuid": "^8.3.4", diff --git a/public/icons/apple.svg b/public/icons/apple.svg new file mode 100644 index 00000000..5d9607c8 --- /dev/null +++ b/public/icons/apple.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/password-hide.svg b/public/icons/password-hide.svg new file mode 100644 index 00000000..d21dec32 --- /dev/null +++ b/public/icons/password-hide.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icons/password-open.svg b/public/icons/password-open.svg new file mode 100644 index 00000000..cf5339bc --- /dev/null +++ b/public/icons/password-open.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Discours/ProfileSettingsNavigation.module.scss b/src/components/Discours/ProfileSettingsNavigation.module.scss new file mode 100644 index 00000000..24cb0762 --- /dev/null +++ b/src/components/Discours/ProfileSettingsNavigation.module.scss @@ -0,0 +1,10 @@ +.navigationHeader { + @include font-size(1.8rem); + + font-weight: bold; + margin-top: 1.1em !important; +} + +.navigation { + @include font-size(1.4rem); +} diff --git a/src/components/Discours/ProfileSettingsNavigation.tsx b/src/components/Discours/ProfileSettingsNavigation.tsx new file mode 100644 index 00000000..05336ceb --- /dev/null +++ b/src/components/Discours/ProfileSettingsNavigation.tsx @@ -0,0 +1,21 @@ +import styles from './ProfileSettingsNavigation.module.scss' +import { clsx } from 'clsx' + +export default () => { + return ( + <> +

Настройки

+ + + ) +} diff --git a/src/components/Pages/profile/ProfileSecurityPage.tsx b/src/components/Pages/profile/ProfileSecurityPage.tsx new file mode 100644 index 00000000..d0a07515 --- /dev/null +++ b/src/components/Pages/profile/ProfileSecurityPage.tsx @@ -0,0 +1,135 @@ +import { PageWrap } from '../../_shared/PageWrap' +import type { PageProps } from '../../types' +import styles from './Settings.module.scss' +import { Icon } from '../../_shared/Icon' +import { clsx } from 'clsx' +import ProfileSettingsNavigation from '../../Discours/ProfileSettingsNavigation' + +export const ProfileSecurityPage = (props: PageProps) => { + return ( + +
+
+
+
+ +
+
+ +
+
+

Вход и безопасность

+

Настройки аккаунта, почты, пароля и способов входа.

+ +
+

Почта

+
+ + +
+ +

Изменить пароль

+
Текущий пароль
+
+ + +
+ +
Новый пароль
+
+ + +
+ +
Подтвердите новый пароль
+
+ + +
+ +

Социальные сети

+
Google
+
+

+ +

+
+ +
VK
+
+

+ +

+
+ +
Facebook
+
+

+ +

+
+ +
Apple
+
+

+ +

+
+ +
+

+ +

+
+
+
+
+
+ + ) +} + +// for lazy loading +export default ProfileSecurityPage diff --git a/src/components/Pages/profile/ProfileSettingsPage.tsx b/src/components/Pages/profile/ProfileSettingsPage.tsx index 01041b37..0d0d2334 100644 --- a/src/components/Pages/profile/ProfileSettingsPage.tsx +++ b/src/components/Pages/profile/ProfileSettingsPage.tsx @@ -1,122 +1,182 @@ import { PageWrap } from '../../_shared/PageWrap' +import { t } from '../../../utils/intl' import type { PageProps } from '../../types' -import styles from './Settings.module.scss' import { Icon } from '../../_shared/Icon' +import ProfileSettingsNavigation from '../../Discours/ProfileSettingsNavigation' +import { For, createSignal, Show } from 'solid-js' import { clsx } from 'clsx' +import styles from './Settings.module.scss' +import { useProfileForm } from '../../../context/profile' +import { createFileUploader } from '@solid-primitives/upload' export const ProfileSettingsPage = (props: PageProps) => { + const [addLinkForm, setAddLinkForm] = createSignal(false) + const { form, updateFormField, submit } = useProfileForm() + const handleChangeSocial = (value) => { + updateFormField('links', value) + setAddLinkForm(false) + } + const handleSubmit = (event: Event): void => { + event.preventDefault() + submit(form) + } + const { selectFiles: selectFilesAsync } = createFileUploader({ accept: 'image/*' }) + + const handleUpload = () => { + selectFilesAsync(async ([{ source, name, size, file }]) => { + try { + console.log({ source, name, size, file }) + // DO UPLOAD STUFF HERE AND RETURN URL + } catch (error) { + console.log(error) + } + }) + } + return ( -
-
-
-
WIP
-
- -
-
-

Настройки профиля

-

Здесь можно настроить свой профиль так, как вы хотите.

- -
-

Аватар

-
-
- - -
-
- -

Имя

-

- Ваше имя появится на странице вашего профиля и как ваша подпись - в публикациях, комментариях и откликах -

-
- - -
- -

Адрес на Дискурсе

-
-
- -
- -

- Увы, этот адрес уже занят, выберите другой -

+ +
+
+
+
+ +
+
+
+
+

{t('Profile settings')}

+

{t('Here you can customize your profile the way you want.')}

+ +

{t('Userpic')}

+
+
+ {form.name} +
-
- -

Представление

-
-