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 { t } from '../../../utils/intl'
|
||||
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'
|
||||
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) => {
|
||||
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 (
|
||||
<PageWrap>
|
||||
<div class="wide-container">
|
||||
<div class="shift-content">
|
||||
<div class="left-col">
|
||||
<div class={clsx('left-navigation', styles.leftNavigation)}>
|
||||
<ProfileSettingsNavigation />
|
||||
<Show when={author()}>
|
||||
<div class="wide-container">
|
||||
<div class="shift-content">
|
||||
<div class="left-col">
|
||||
<div class={clsx('left-navigation', styles.leftNavigation)}>
|
||||
<ProfileSettingsNavigation />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-10 col-lg-9 col-xl-8">
|
||||
<h1>Настройки профиля</h1>
|
||||
<p class="description">Здесь можно настроить свой профиль так, как вы хотите.</p>
|
||||
|
||||
<form>
|
||||
<h4>Аватар</h4>
|
||||
<div class="pretty-form__item">
|
||||
<div class={styles.avatarContainer}>
|
||||
<img class={styles.avatar} />
|
||||
<input
|
||||
type="file"
|
||||
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 class="row">
|
||||
<div class="col-md-10 col-lg-9 col-xl-8">
|
||||
<h1>{t('Profile settings')}</h1>
|
||||
<p class="description">{t('Here you can customize your profile the way you want.')}</p>
|
||||
<form>
|
||||
<h4>{t('Userpic')}</h4>
|
||||
<div class="pretty-form__item">
|
||||
<div class={styles.avatarContainer}>
|
||||
<img class={styles.avatar} src={author().userpic} />
|
||||
<input
|
||||
type="file"
|
||||
name="avatar"
|
||||
class={styles.avatarInput}
|
||||
accept="image/jpeg,image/png,image/gif,image/webp"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Представление</h4>
|
||||
<div class="pretty-form__item">
|
||||
<textarea name="presentation" id="presentation" placeholder="Представление" />
|
||||
<label for="presentation">Представление</label>
|
||||
</div>
|
||||
|
||||
<h4>О себе</h4>
|
||||
<div class="pretty-form__item">
|
||||
<textarea name="about" id="about" placeholder="О себе" />
|
||||
<label for="about">О себе</label>
|
||||
</div>
|
||||
|
||||
<h4>Чем могу помочь/навыки</h4>
|
||||
<div class="pretty-form__item">
|
||||
<input type="text" name="skills" id="skills" />
|
||||
</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>
|
||||
<h4>{t('Name')}</h4>
|
||||
<p class="description">
|
||||
{t(
|
||||
'Your name will appear on your profile page and as your signature in publications, comments and responses.'
|
||||
)}
|
||||
</p>
|
||||
<div class="pretty-form__item">
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
id="username"
|
||||
placeholder="Имя"
|
||||
value={author().name}
|
||||
/>
|
||||
<label for="username">Имя</label>
|
||||
</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 />
|
||||
<p>
|
||||
<button class="button button--submit">Сохранить настройки</button>
|
||||
</p>
|
||||
</form>
|
||||
<h4>{t('Address on Discourse')}</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"
|
||||
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>
|
||||
</Show>
|
||||
</PageWrap>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -189,5 +189,19 @@
|
|||
"create_group": "Создать группу",
|
||||
"discourse_theme": "Тема дискурса",
|
||||
"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