Get User Data & i18n
This commit is contained in:
ilya-bkv
parent
ebb302b403
commit
7b0bac4eca
|
|
@ -1,125 +1,160 @@
|
||||||
import { PageWrap } from '../../_shared/PageWrap'
|
import { PageWrap } from '../../_shared/PageWrap'
|
||||||
|
import { t } from '../../../utils/intl'
|
||||||
import type { PageProps } from '../../types'
|
import type { PageProps } from '../../types'
|
||||||
import styles from './Settings.module.scss'
|
|
||||||
import { Icon } from '../../_shared/Icon'
|
import { Icon } from '../../_shared/Icon'
|
||||||
import { clsx } from 'clsx'
|
|
||||||
import ProfileSettingsNavigation from '../../Discours/ProfileSettingsNavigation'
|
import ProfileSettingsNavigation from '../../Discours/ProfileSettingsNavigation'
|
||||||
|
import { useSession } from '../../../context/session'
|
||||||
|
import { createMemo, For, createSignal, Show, createEffect } from 'solid-js'
|
||||||
|
import { loadAuthor, useAuthorsStore } from '../../../stores/zine/authors'
|
||||||
|
import type { Author } from '../../../graphql/types.gen'
|
||||||
|
import { clsx } from 'clsx'
|
||||||
|
import styles from './Settings.module.scss'
|
||||||
|
|
||||||
export const ProfileSettingsPage = (props: PageProps) => {
|
export const ProfileSettingsPage = (props: PageProps) => {
|
||||||
|
const [author, setAuthor] = createSignal<Author>(null)
|
||||||
|
const { session } = useSession()
|
||||||
|
const currentSlug = createMemo(() => session()?.user?.slug)
|
||||||
|
const { authorEntities } = useAuthorsStore({ authors: [] })
|
||||||
|
const currentAuthor = createMemo(() => authorEntities()[currentSlug()])
|
||||||
|
|
||||||
|
createEffect(async () => {
|
||||||
|
if (!currentSlug()) return
|
||||||
|
try {
|
||||||
|
await loadAuthor({ slug: currentSlug() })
|
||||||
|
setAuthor(currentAuthor())
|
||||||
|
console.log('!!! currentAuthor:', currentAuthor())
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageWrap>
|
<PageWrap>
|
||||||
<div class="wide-container">
|
<Show when={author()}>
|
||||||
<div class="shift-content">
|
<div class="wide-container">
|
||||||
<div class="left-col">
|
<div class="shift-content">
|
||||||
<div class={clsx('left-navigation', styles.leftNavigation)}>
|
<div class="left-col">
|
||||||
<ProfileSettingsNavigation />
|
<div class={clsx('left-navigation', styles.leftNavigation)}>
|
||||||
|
<ProfileSettingsNavigation />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row">
|
||||||
|
<div class="col-md-10 col-lg-9 col-xl-8">
|
||||||
<div class="row">
|
<h1>{t('Profile settings')}</h1>
|
||||||
<div class="col-md-10 col-lg-9 col-xl-8">
|
<p class="description">{t('Here you can customize your profile the way you want.')}</p>
|
||||||
<h1>Настройки профиля</h1>
|
<form>
|
||||||
<p class="description">Здесь можно настроить свой профиль так, как вы хотите.</p>
|
<h4>{t('Userpic')}</h4>
|
||||||
|
<div class="pretty-form__item">
|
||||||
<form>
|
<div class={styles.avatarContainer}>
|
||||||
<h4>Аватар</h4>
|
<img class={styles.avatar} src={author().userpic} />
|
||||||
<div class="pretty-form__item">
|
<input
|
||||||
<div class={styles.avatarContainer}>
|
type="file"
|
||||||
<img class={styles.avatar} />
|
name="avatar"
|
||||||
<input
|
class={styles.avatarInput}
|
||||||
type="file"
|
accept="image/jpeg,image/png,image/gif,image/webp"
|
||||||
name="avatar"
|
/>
|
||||||
class={styles.avatarInput}
|
|
||||||
accept="image/jpeg,image/png,image/gif,image/webp"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h4>Имя</h4>
|
|
||||||
<p class="description">
|
|
||||||
Ваше имя появится на странице вашего профиля и как ваша подпись
|
|
||||||
в публикациях, комментариях и откликах
|
|
||||||
</p>
|
|
||||||
<div class="pretty-form__item">
|
|
||||||
<input type="text" name="username" id="username" placeholder="Имя" />
|
|
||||||
<label for="username">Имя</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h4>Адрес на Дискурсе</h4>
|
|
||||||
<div class="pretty-form__item">
|
|
||||||
<div class={styles.discoursName}>
|
|
||||||
<label for="user-address">https://discours.io/user/</label>
|
|
||||||
<div class={styles.discoursNameField}>
|
|
||||||
<input type="text" name="user-address" id="user-address" class="nolabel" />
|
|
||||||
<p class="form-message form-message--error">
|
|
||||||
Увы, этот адрес уже занят, выберите другой
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<h4>Представление</h4>
|
<h4>{t('Name')}</h4>
|
||||||
<div class="pretty-form__item">
|
<p class="description">
|
||||||
<textarea name="presentation" id="presentation" placeholder="Представление" />
|
{t(
|
||||||
<label for="presentation">Представление</label>
|
'Your name will appear on your profile page and as your signature in publications, comments and responses.'
|
||||||
</div>
|
)}
|
||||||
|
</p>
|
||||||
<h4>О себе</h4>
|
<div class="pretty-form__item">
|
||||||
<div class="pretty-form__item">
|
<input
|
||||||
<textarea name="about" id="about" placeholder="О себе" />
|
type="text"
|
||||||
<label for="about">О себе</label>
|
name="username"
|
||||||
</div>
|
id="username"
|
||||||
|
placeholder="Имя"
|
||||||
<h4>Чем могу помочь/навыки</h4>
|
value={author().name}
|
||||||
<div class="pretty-form__item">
|
/>
|
||||||
<input type="text" name="skills" id="skills" />
|
<label for="username">Имя</label>
|
||||||
</div>
|
|
||||||
|
|
||||||
<h4>Откуда</h4>
|
|
||||||
<div class="pretty-form__item">
|
|
||||||
<input type="text" name="location" id="location" placeholder="Откуда" />
|
|
||||||
<label for="location">Откуда</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h4>Дата рождения</h4>
|
|
||||||
<div class="pretty-form__item">
|
|
||||||
<input
|
|
||||||
type="date"
|
|
||||||
name="birthdate"
|
|
||||||
id="birthdate"
|
|
||||||
placeholder="Дата рождения"
|
|
||||||
class="nolabel"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class={clsx(styles.multipleControls, 'pretty-form__item')}>
|
|
||||||
<div class={styles.multipleControlsHeader}>
|
|
||||||
<h4>Социальные сети</h4>
|
|
||||||
<button class="button">+</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class={styles.multipleControlsItem}>
|
|
||||||
<input type="text" name="social1" class="nolabel" />
|
|
||||||
<button>
|
|
||||||
<Icon name="remove" class={styles.icon} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class={styles.multipleControlsItem}>
|
|
||||||
<input type="text" name="social1" class="nolabel" />
|
|
||||||
<button>
|
|
||||||
<Icon name="remove" class={styles.icon} />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<br />
|
<h4>{t('Address on Discourse')}</h4>
|
||||||
<p>
|
<div class="pretty-form__item">
|
||||||
<button class="button button--submit">Сохранить настройки</button>
|
<div class={styles.discoursName}>
|
||||||
</p>
|
<label for="user-address">https://discours.io/user/</label>
|
||||||
</form>
|
<div class={styles.discoursNameField}>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="user-address"
|
||||||
|
id="user-address"
|
||||||
|
value={currentSlug()}
|
||||||
|
class="nolabel"
|
||||||
|
/>
|
||||||
|
<p class="form-message form-message--error">
|
||||||
|
{t('Sorry, this address is already taken, please choose another one.')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4>{t('Introduce')}</h4>
|
||||||
|
<div class="pretty-form__item">
|
||||||
|
<textarea name="presentation" id="presentation" placeholder="Представление" />
|
||||||
|
<label for="presentation">{t('Introduce')}</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4>{t('About myself')}</h4>
|
||||||
|
<div class="pretty-form__item">
|
||||||
|
<textarea name="about" id="about" placeholder="О себе">
|
||||||
|
{author().bio}
|
||||||
|
</textarea>
|
||||||
|
<label for="about">{t('About myself')}</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4>{t('How can I help/skills')}</h4>
|
||||||
|
<div class="pretty-form__item">
|
||||||
|
<input type="text" name="skills" id="skills" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4>{t('Where')}</h4>
|
||||||
|
<div class="pretty-form__item">
|
||||||
|
<input type="text" name="location" id="location" placeholder="Откуда" />
|
||||||
|
<label for="location">{t('Where')}</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4>{t('Date of Birth')}</h4>
|
||||||
|
<div class="pretty-form__item">
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
name="birthdate"
|
||||||
|
id="birthdate"
|
||||||
|
placeholder="Дата рождения"
|
||||||
|
class="nolabel"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class={clsx(styles.multipleControls, 'pretty-form__item')}>
|
||||||
|
<div class={styles.multipleControlsHeader}>
|
||||||
|
<h4>{t('Social networks')}</h4>
|
||||||
|
<button class="button">+</button>
|
||||||
|
</div>
|
||||||
|
<For each={author().links}>
|
||||||
|
{(link) => (
|
||||||
|
<div class={styles.multipleControlsItem}>
|
||||||
|
<input type="text" value={link} name="social1" class="nolabel" />
|
||||||
|
<button>
|
||||||
|
<Icon name="remove" class={styles.icon} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</For>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br />
|
||||||
|
<p>
|
||||||
|
<button class="button button--submit">{t('Save settings')}</button>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Show>
|
||||||
</PageWrap>
|
</PageWrap>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -189,5 +189,19 @@
|
||||||
"create_group": "Создать группу",
|
"create_group": "Создать группу",
|
||||||
"discourse_theme": "Тема дискурса",
|
"discourse_theme": "Тема дискурса",
|
||||||
"cancel": "Отмена",
|
"cancel": "Отмена",
|
||||||
"group_chat": "Общий чат"
|
"group_chat": "Общий чат",
|
||||||
|
"Profile settings": "Настройки профиля",
|
||||||
|
"Here you can customize your profile the way you want.": "Здесь можно настроить свой профиль так, как вы хотите.",
|
||||||
|
"Userpic": "Аватар",
|
||||||
|
"Name": "Имя",
|
||||||
|
"Your name will appear on your profile page and as your signature in publications, comments and responses.": "Ваше имя появится на странице вашего профиля и как ваша подпись в публикациях, комментариях и откликах",
|
||||||
|
"Address on Discourse": "Адрес на Дискурсе",
|
||||||
|
"Sorry, this address is already taken, please choose another one.": "Увы, этот адрес уже занят, выберите другой",
|
||||||
|
"Introduce": "Представление",
|
||||||
|
"About myself": "О себе",
|
||||||
|
"How can I help/skills": "Чем могу помочь/навыки",
|
||||||
|
"Where": "Откуда",
|
||||||
|
"Date of Birth": "Дата рождения",
|
||||||
|
"Social networks": "Социальные сети",
|
||||||
|
"Save settings": "Сохранить настройки"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user