profile-view-refactored
This commit is contained in:
parent
6d3629592a
commit
90691aa650
|
|
@ -1 +0,0 @@
|
||||||
export { ProfileSettings } from './ProfileSettings'
|
|
||||||
305
src/components/Views/Profile/ProfileSecurity.tsx
Normal file
305
src/components/Views/Profile/ProfileSecurity.tsx
Normal file
|
|
@ -0,0 +1,305 @@
|
||||||
|
import { UpdateProfileInput } from '@authorizerdev/authorizer-js'
|
||||||
|
import { clsx } from 'clsx'
|
||||||
|
import { Show, createEffect, createSignal, on } from 'solid-js'
|
||||||
|
import { AuthGuard } from '~/components/AuthGuard'
|
||||||
|
import { PasswordField } from '~/components/Nav/AuthModal/PasswordField'
|
||||||
|
import { ProfileSettingsNavigation } from '~/components/Nav/ProfileSettingsNavigation'
|
||||||
|
import { Button } from '~/components/_shared/Button'
|
||||||
|
import { Icon } from '~/components/_shared/Icon'
|
||||||
|
import { Loading } from '~/components/_shared/Loading'
|
||||||
|
import { useLocalize } from '~/context/localize'
|
||||||
|
import { useSession } from '~/context/session'
|
||||||
|
import { DEFAULT_HEADER_OFFSET, useSnackbar, useUI } from '~/context/ui'
|
||||||
|
import { validateEmail } from '~/utils/validateEmail'
|
||||||
|
import styles from './Settings.module.scss'
|
||||||
|
|
||||||
|
type FormField = 'oldPassword' | 'newPassword' | 'newPasswordConfirm' | 'email'
|
||||||
|
type FormData = Record<FormField, string | undefined>
|
||||||
|
|
||||||
|
// biome-ignore lint/suspicious/noExplicitAny: <explanation>
|
||||||
|
export const ProfileSecurityView = (_props: any) => {
|
||||||
|
const { t } = useLocalize()
|
||||||
|
const { updateProfile, session, isSessionLoaded } = useSession()
|
||||||
|
const { showConfirm } = useUI()
|
||||||
|
const { showSnackbar } = useSnackbar()
|
||||||
|
const [newPasswordError, setNewPasswordError] = createSignal<string | undefined>()
|
||||||
|
const [oldPasswordError, setOldPasswordError] = createSignal<string | undefined>()
|
||||||
|
const [emailError, setEmailError] = createSignal<string | undefined>()
|
||||||
|
const [isSubmitting, setIsSubmitting] = createSignal<boolean>()
|
||||||
|
const [isFloatingPanelVisible, setIsFloatingPanelVisible] = createSignal(false)
|
||||||
|
|
||||||
|
const initialState = {
|
||||||
|
oldPassword: undefined,
|
||||||
|
newPassword: undefined,
|
||||||
|
newPasswordConfirm: undefined,
|
||||||
|
email: undefined
|
||||||
|
} as FormData
|
||||||
|
|
||||||
|
const [formData, setFormData] = createSignal(initialState)
|
||||||
|
let oldPasswordRef: HTMLDivElement | undefined
|
||||||
|
let newPasswordRepeatRef: HTMLDivElement | undefined
|
||||||
|
|
||||||
|
createEffect(
|
||||||
|
on(
|
||||||
|
() => session()?.user?.email,
|
||||||
|
(email) => {
|
||||||
|
setFormData((prevData: FormData) => ({ ...prevData, email }) as FormData)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
)
|
||||||
|
const handleInputChange = (name: FormField, value: string) => {
|
||||||
|
if (
|
||||||
|
name === 'email' ||
|
||||||
|
(name === 'newPasswordConfirm' && value && value?.length > 0 && !emailError() && !newPasswordError())
|
||||||
|
) {
|
||||||
|
setIsFloatingPanelVisible(true)
|
||||||
|
} else {
|
||||||
|
setIsFloatingPanelVisible(false)
|
||||||
|
}
|
||||||
|
setFormData((prevData) => ({
|
||||||
|
...prevData,
|
||||||
|
[name]: value
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCancel = async () => {
|
||||||
|
const isConfirmed = await showConfirm({
|
||||||
|
confirmBody: t('Do you really want to reset all changes?'),
|
||||||
|
confirmButtonVariant: 'primary',
|
||||||
|
declineButtonVariant: 'secondary'
|
||||||
|
})
|
||||||
|
if (isConfirmed) {
|
||||||
|
setEmailError()
|
||||||
|
setFormData({
|
||||||
|
...initialState,
|
||||||
|
['email']: session()?.user?.email
|
||||||
|
})
|
||||||
|
setIsFloatingPanelVisible(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const handleChangeEmail = (_value: string) => {
|
||||||
|
if (formData() && !validateEmail(formData()['email'] || '')) {
|
||||||
|
setEmailError(t('Invalid email'))
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const handleCheckNewPassword = (value: string) => {
|
||||||
|
handleInputChange('newPasswordConfirm', value)
|
||||||
|
if (newPasswordRepeatRef && value !== formData()['newPassword']) {
|
||||||
|
const rect = newPasswordRepeatRef.getBoundingClientRect()
|
||||||
|
const topPosition = window.scrollY + rect.top - DEFAULT_HEADER_OFFSET * 2
|
||||||
|
window.scrollTo({
|
||||||
|
top: topPosition,
|
||||||
|
left: 0,
|
||||||
|
behavior: 'smooth'
|
||||||
|
})
|
||||||
|
showSnackbar({ type: 'error', body: t('Incorrect new password confirm') })
|
||||||
|
setNewPasswordError(t('Passwords are not equal'))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
setIsSubmitting(true)
|
||||||
|
|
||||||
|
const options: UpdateProfileInput = {
|
||||||
|
old_password: formData()['oldPassword'],
|
||||||
|
new_password: formData()['newPassword'] || formData()['oldPassword'],
|
||||||
|
confirm_new_password: formData()['newPassword'] || formData()['oldPassword'],
|
||||||
|
email: formData()['email']
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await updateProfile(options)
|
||||||
|
if (result) {
|
||||||
|
// FIXME: const { errors } = result
|
||||||
|
if (oldPasswordRef) {
|
||||||
|
// && errors.some((obj: Error) => obj.message === 'incorrect old password')) {
|
||||||
|
setOldPasswordError(t('Incorrect old password'))
|
||||||
|
showSnackbar({ type: 'error', body: t('Incorrect old password') })
|
||||||
|
const rect = oldPasswordRef.getBoundingClientRect()
|
||||||
|
const topPosition = window.scrollY + rect.top - DEFAULT_HEADER_OFFSET * 2
|
||||||
|
window.scrollTo({
|
||||||
|
top: topPosition,
|
||||||
|
left: 0,
|
||||||
|
behavior: 'smooth'
|
||||||
|
})
|
||||||
|
setIsFloatingPanelVisible(false)
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
showSnackbar({ type: 'success', body: t('Profile successfully saved') })
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error)
|
||||||
|
} finally {
|
||||||
|
setIsSubmitting(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<AuthGuard>
|
||||||
|
<Show when={isSessionLoaded()} fallback={<Loading />}>
|
||||||
|
<div class="wide-container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-5">
|
||||||
|
<div class={clsx('left-navigation', styles.leftNavigation)}>
|
||||||
|
<ProfileSettingsNavigation />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-19">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-20 col-lg-18 col-xl-16">
|
||||||
|
<h1>{t('Login and security')}</h1>
|
||||||
|
<p class="description">{t('Settings for account, email, password and login methods.')}</p>
|
||||||
|
|
||||||
|
<form>
|
||||||
|
<h4>{t('Email')}</h4>
|
||||||
|
<div class="pretty-form__item">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="email"
|
||||||
|
id="email"
|
||||||
|
disabled={isSubmitting()}
|
||||||
|
value={formData()['email'] || ''}
|
||||||
|
placeholder={t('Email')}
|
||||||
|
onFocus={() => setEmailError()}
|
||||||
|
onInput={(event) => handleChangeEmail(event.target.value)}
|
||||||
|
/>
|
||||||
|
<label for="email">{t('Email')}</label>
|
||||||
|
<Show when={emailError()}>
|
||||||
|
<div
|
||||||
|
class={clsx(styles.emailValidationError, {
|
||||||
|
'form-message--error': emailError()
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
{emailError()}
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h4>{t('Change password')}</h4>
|
||||||
|
<h5>{t('Current password')}</h5>
|
||||||
|
|
||||||
|
<div ref={(el: HTMLDivElement) => (oldPasswordRef = el)}>
|
||||||
|
<PasswordField
|
||||||
|
onFocus={() => setOldPasswordError()}
|
||||||
|
setError={oldPasswordError()}
|
||||||
|
onInput={(value) => handleInputChange('oldPassword', value)}
|
||||||
|
value={formData()['oldPassword'] || undefined}
|
||||||
|
disabled={isSubmitting()}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>{t('New password')}</h5>
|
||||||
|
<PasswordField
|
||||||
|
onInput={(value) => {
|
||||||
|
handleInputChange('newPassword', value)
|
||||||
|
handleInputChange('newPasswordConfirm', '')
|
||||||
|
}}
|
||||||
|
value={formData()['newPassword'] ?? ''}
|
||||||
|
disabled={isSubmitting()}
|
||||||
|
disableAutocomplete={true}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<h5>{t('Confirm your new password')}</h5>
|
||||||
|
<div ref={(el) => (newPasswordRepeatRef = el)}>
|
||||||
|
<PasswordField
|
||||||
|
noValidate={true}
|
||||||
|
value={formData?.()['newPasswordConfirm']}
|
||||||
|
onFocus={() => setNewPasswordError()}
|
||||||
|
setError={newPasswordError()}
|
||||||
|
onInput={(value) => handleCheckNewPassword(value)}
|
||||||
|
disabled={isSubmitting()}
|
||||||
|
disableAutocomplete={true}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h4>{t('Social networks')}</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} />
|
||||||
|
{t('Connect')}
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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} />
|
||||||
|
{t('Connect')}
|
||||||
|
</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} />
|
||||||
|
{t('Connect')}
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h5>Apple</h5>
|
||||||
|
<div class="pretty-form__item">
|
||||||
|
<p>
|
||||||
|
<button
|
||||||
|
class={clsx(
|
||||||
|
styles.socialButton,
|
||||||
|
styles.socialButtonApple,
|
||||||
|
'button' + ' button--light'
|
||||||
|
)}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<Icon name="apple" class={styles.icon} />
|
||||||
|
{t('Connect')}
|
||||||
|
</button>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
|
||||||
|
<Show when={isFloatingPanelVisible() && !emailError() && !newPasswordError()}>
|
||||||
|
<div class={styles.formActions}>
|
||||||
|
<div class="wide-container">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-19 offset-md-5">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-20 col-lg-18 col-xl-16">
|
||||||
|
<div class={styles.content}>
|
||||||
|
<Button
|
||||||
|
class={styles.cancel}
|
||||||
|
variant="light"
|
||||||
|
value={
|
||||||
|
<>
|
||||||
|
<span class={styles.cancelLabel}>{t('Cancel changes')}</span>
|
||||||
|
<span class={styles.cancelLabelMobile}>{t('Cancel')}</span>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
onClick={handleCancel}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
onClick={handleSubmit}
|
||||||
|
variant="primary"
|
||||||
|
disabled={isSubmitting()}
|
||||||
|
value={isSubmitting() ? t('Saving...') : t('Save settings')}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Show>
|
||||||
|
</AuthGuard>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -24,14 +24,14 @@ import { handleImageUpload } from '~/lib/handleImageUpload'
|
||||||
import { profileSocialLinks } from '~/lib/profileSocialLinks'
|
import { profileSocialLinks } from '~/lib/profileSocialLinks'
|
||||||
import { clone } from '~/utils/clone'
|
import { clone } from '~/utils/clone'
|
||||||
import { validateUrl } from '~/utils/validateUrl'
|
import { validateUrl } from '~/utils/validateUrl'
|
||||||
import { Modal } from '../Nav/Modal'
|
import { Modal } from '../../Nav/Modal'
|
||||||
import { ProfileSettingsNavigation } from '../Nav/ProfileSettingsNavigation'
|
import { ProfileSettingsNavigation } from '../../Nav/ProfileSettingsNavigation'
|
||||||
import { Button } from '../_shared/Button'
|
import { Button } from '../../_shared/Button'
|
||||||
import { Icon } from '../_shared/Icon'
|
import { Icon } from '../../_shared/Icon'
|
||||||
import { ImageCropper } from '../_shared/ImageCropper'
|
import { ImageCropper } from '../../_shared/ImageCropper'
|
||||||
import { Loading } from '../_shared/Loading'
|
import { Loading } from '../../_shared/Loading'
|
||||||
import { Popover } from '../_shared/Popover'
|
import { Popover } from '../../_shared/Popover'
|
||||||
import { SocialNetworkInput } from '../_shared/SocialNetworkInput'
|
import { SocialNetworkInput } from '../../_shared/SocialNetworkInput'
|
||||||
import styles from './Settings.module.scss'
|
import styles from './Settings.module.scss'
|
||||||
|
|
||||||
const SimplifiedEditor = lazy(() => import('~/components/Editor/SimplifiedEditor'))
|
const SimplifiedEditor = lazy(() => import('~/components/Editor/SimplifiedEditor'))
|
||||||
|
|
@ -9,8 +9,8 @@ import { dummyFilter } from '~/lib/dummyFilter'
|
||||||
import stylesSettings from '../../../styles/FeedSettings.module.scss'
|
import stylesSettings from '../../../styles/FeedSettings.module.scss'
|
||||||
import { AuthorBadge } from '../../Author/AuthorBadge'
|
import { AuthorBadge } from '../../Author/AuthorBadge'
|
||||||
import { ProfileSettingsNavigation } from '../../Nav/ProfileSettingsNavigation'
|
import { ProfileSettingsNavigation } from '../../Nav/ProfileSettingsNavigation'
|
||||||
import styles from '../../ProfileSettings/Settings.module.scss'
|
|
||||||
import { TopicBadge } from '../../Topic/TopicBadge'
|
import { TopicBadge } from '../../Topic/TopicBadge'
|
||||||
|
import styles from '../Profile/Settings.module.scss'
|
||||||
|
|
||||||
export const ProfileSubscriptions = () => {
|
export const ProfileSubscriptions = () => {
|
||||||
const { t, lang } = useLocalize()
|
const { t, lang } = useLocalize()
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
export { ProfileSubscriptions } from './ProfileSubscriptions'
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { AuthGuard } from '~/components/AuthGuard'
|
import { AuthGuard } from '~/components/AuthGuard'
|
||||||
import { ProfileSettings } from '~/components/ProfileSettings'
|
import { ProfileSettings } from '~/components/Views/Profile/ProfileSettings'
|
||||||
import { PageLayout } from '~/components/_shared/PageLayout'
|
import { PageLayout } from '~/components/_shared/PageLayout'
|
||||||
import { useLocalize } from '~/context/localize'
|
import { useLocalize } from '~/context/localize'
|
||||||
import { ProfileProvider } from '~/context/profile'
|
import { ProfileProvider } from '~/context/profile'
|
||||||
|
|
|
||||||
|
|
@ -1,317 +1,17 @@
|
||||||
import { UpdateProfileInput } from '@authorizerdev/authorizer-js'
|
|
||||||
import { clsx } from 'clsx'
|
|
||||||
import { Show, createEffect, createSignal, on } from 'solid-js'
|
|
||||||
import { AuthGuard } from '~/components/AuthGuard'
|
import { AuthGuard } from '~/components/AuthGuard'
|
||||||
import { PasswordField } from '~/components/Nav/AuthModal/PasswordField'
|
import { ProfileSecurityView } from '~/components/Views/Profile/ProfileSecurity'
|
||||||
import { ProfileSettingsNavigation } from '~/components/Nav/ProfileSettingsNavigation'
|
|
||||||
import { Button } from '~/components/_shared/Button'
|
|
||||||
import { Icon } from '~/components/_shared/Icon'
|
|
||||||
import { Loading } from '~/components/_shared/Loading'
|
|
||||||
import { PageLayout } from '~/components/_shared/PageLayout'
|
import { PageLayout } from '~/components/_shared/PageLayout'
|
||||||
import { useLocalize } from '~/context/localize'
|
import { useLocalize } from '~/context/localize'
|
||||||
import { useSession } from '~/context/session'
|
import { ProfileProvider } from '~/context/profile'
|
||||||
import { DEFAULT_HEADER_OFFSET, useSnackbar, useUI } from '~/context/ui'
|
|
||||||
import { validateEmail } from '~/utils/validateEmail'
|
|
||||||
import styles from './Settings.module.scss'
|
|
||||||
|
|
||||||
type FormField = 'oldPassword' | 'newPassword' | 'newPasswordConfirm' | 'email'
|
|
||||||
type FormData = Record<FormField, string | undefined>
|
|
||||||
export default () => {
|
export default () => {
|
||||||
const { t } = useLocalize()
|
const { t } = useLocalize()
|
||||||
const { updateProfile, session, isSessionLoaded } = useSession()
|
|
||||||
const { showSnackbar } = useSnackbar()
|
|
||||||
const { showConfirm } = useUI()
|
|
||||||
const [newPasswordError, setNewPasswordError] = createSignal<string | undefined>()
|
|
||||||
const [oldPasswordError, setOldPasswordError] = createSignal<string | undefined>()
|
|
||||||
const [emailError, setEmailError] = createSignal<string | undefined>()
|
|
||||||
const [isSubmitting, setIsSubmitting] = createSignal<boolean>()
|
|
||||||
const [isFloatingPanelVisible, setIsFloatingPanelVisible] = createSignal(false)
|
|
||||||
|
|
||||||
const initialState = {
|
|
||||||
oldPassword: undefined,
|
|
||||||
newPassword: undefined,
|
|
||||||
newPasswordConfirm: undefined,
|
|
||||||
email: undefined
|
|
||||||
} as FormData
|
|
||||||
|
|
||||||
const [formData, setFormData] = createSignal(initialState)
|
|
||||||
let oldPasswordRef: HTMLDivElement | undefined
|
|
||||||
let newPasswordRepeatRef: HTMLDivElement | undefined
|
|
||||||
|
|
||||||
createEffect(
|
|
||||||
on(
|
|
||||||
() => session()?.user?.email,
|
|
||||||
(email) => {
|
|
||||||
setFormData((prevData: FormData) => ({ ...prevData, email }) as FormData)
|
|
||||||
}
|
|
||||||
)
|
|
||||||
)
|
|
||||||
const handleInputChange = (name: FormField, value: string) => {
|
|
||||||
if (
|
|
||||||
name === 'email' ||
|
|
||||||
(name === 'newPasswordConfirm' && value && value?.length > 0 && !emailError() && !newPasswordError())
|
|
||||||
) {
|
|
||||||
setIsFloatingPanelVisible(true)
|
|
||||||
} else {
|
|
||||||
setIsFloatingPanelVisible(false)
|
|
||||||
}
|
|
||||||
setFormData((prevData) => ({
|
|
||||||
...prevData,
|
|
||||||
[name]: value
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCancel = async () => {
|
|
||||||
const isConfirmed = await showConfirm({
|
|
||||||
confirmBody: t('Do you really want to reset all changes?'),
|
|
||||||
confirmButtonVariant: 'primary',
|
|
||||||
declineButtonVariant: 'secondary'
|
|
||||||
})
|
|
||||||
if (isConfirmed) {
|
|
||||||
setEmailError()
|
|
||||||
setFormData({
|
|
||||||
...initialState,
|
|
||||||
['email']: session()?.user?.email
|
|
||||||
})
|
|
||||||
setIsFloatingPanelVisible(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const handleChangeEmail = (_value: string) => {
|
|
||||||
if (formData() && !validateEmail(formData()['email'] || '')) {
|
|
||||||
setEmailError(t('Invalid email'))
|
|
||||||
return
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const handleCheckNewPassword = (value: string) => {
|
|
||||||
handleInputChange('newPasswordConfirm', value)
|
|
||||||
if (newPasswordRepeatRef && value !== formData()['newPassword']) {
|
|
||||||
const rect = newPasswordRepeatRef.getBoundingClientRect()
|
|
||||||
const topPosition = window.scrollY + rect.top - DEFAULT_HEADER_OFFSET * 2
|
|
||||||
window.scrollTo({
|
|
||||||
top: topPosition,
|
|
||||||
left: 0,
|
|
||||||
behavior: 'smooth'
|
|
||||||
})
|
|
||||||
showSnackbar({ type: 'error', body: t('Incorrect new password confirm') })
|
|
||||||
setNewPasswordError(t('Passwords are not equal'))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
|
||||||
setIsSubmitting(true)
|
|
||||||
|
|
||||||
const options: UpdateProfileInput = {
|
|
||||||
old_password: formData()['oldPassword'],
|
|
||||||
new_password: formData()['newPassword'] || formData()['oldPassword'],
|
|
||||||
confirm_new_password: formData()['newPassword'] || formData()['oldPassword'],
|
|
||||||
email: formData()['email']
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const result = await updateProfile(options)
|
|
||||||
if (result) {
|
|
||||||
// FIXME: const { errors } = result
|
|
||||||
if (oldPasswordRef) {
|
|
||||||
// && errors.some((obj: Error) => obj.message === 'incorrect old password')) {
|
|
||||||
setOldPasswordError(t('Incorrect old password'))
|
|
||||||
showSnackbar({ type: 'error', body: t('Incorrect old password') })
|
|
||||||
const rect = oldPasswordRef.getBoundingClientRect()
|
|
||||||
const topPosition = window.scrollY + rect.top - DEFAULT_HEADER_OFFSET * 2
|
|
||||||
window.scrollTo({
|
|
||||||
top: topPosition,
|
|
||||||
left: 0,
|
|
||||||
behavior: 'smooth'
|
|
||||||
})
|
|
||||||
setIsFloatingPanelVisible(false)
|
|
||||||
}
|
|
||||||
return
|
|
||||||
}
|
|
||||||
showSnackbar({ type: 'success', body: t('Profile successfully saved') })
|
|
||||||
} catch (error) {
|
|
||||||
console.error(error)
|
|
||||||
} finally {
|
|
||||||
setIsSubmitting(false)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageLayout withPadding={true} title={`${t('Discours')} :: ${t('Security')}`}>
|
<PageLayout withPadding={true} title={`${t('Discours')} :: ${t('Security')}`}>
|
||||||
<AuthGuard>
|
<AuthGuard>
|
||||||
<Show when={isSessionLoaded()} fallback={<Loading />}>
|
<ProfileProvider>
|
||||||
<div class="wide-container">
|
<ProfileSecurityView />
|
||||||
<div class="row">
|
</ProfileProvider>
|
||||||
<div class="col-md-5">
|
|
||||||
<div class={clsx('left-navigation', styles.leftNavigation)}>
|
|
||||||
<ProfileSettingsNavigation />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-md-19">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-20 col-lg-18 col-xl-16">
|
|
||||||
<h1>{t('Login and security')}</h1>
|
|
||||||
<p class="description">
|
|
||||||
{t('Settings for account, email, password and login methods.')}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<form>
|
|
||||||
<h4>{t('Email')}</h4>
|
|
||||||
<div class="pretty-form__item">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="email"
|
|
||||||
id="email"
|
|
||||||
disabled={isSubmitting()}
|
|
||||||
value={formData()['email'] || ''}
|
|
||||||
placeholder={t('Email')}
|
|
||||||
onFocus={() => setEmailError()}
|
|
||||||
onInput={(event) => handleChangeEmail(event.target.value)}
|
|
||||||
/>
|
|
||||||
<label for="email">{t('Email')}</label>
|
|
||||||
<Show when={emailError()}>
|
|
||||||
<div
|
|
||||||
class={clsx(styles.emailValidationError, {
|
|
||||||
'form-message--error': emailError()
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
{emailError()}
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h4>{t('Change password')}</h4>
|
|
||||||
<h5>{t('Current password')}</h5>
|
|
||||||
|
|
||||||
<div ref={(el: HTMLDivElement) => (oldPasswordRef = el)}>
|
|
||||||
<PasswordField
|
|
||||||
onFocus={() => setOldPasswordError()}
|
|
||||||
setError={oldPasswordError()}
|
|
||||||
onInput={(value) => handleInputChange('oldPassword', value)}
|
|
||||||
value={formData()['oldPassword'] || undefined}
|
|
||||||
disabled={isSubmitting()}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h5>{t('New password')}</h5>
|
|
||||||
<PasswordField
|
|
||||||
onInput={(value) => {
|
|
||||||
handleInputChange('newPassword', value)
|
|
||||||
handleInputChange('newPasswordConfirm', '')
|
|
||||||
}}
|
|
||||||
value={formData()['newPassword'] ?? ''}
|
|
||||||
disabled={isSubmitting()}
|
|
||||||
disableAutocomplete={true}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<h5>{t('Confirm your new password')}</h5>
|
|
||||||
<div ref={(el) => (newPasswordRepeatRef = el)}>
|
|
||||||
<PasswordField
|
|
||||||
noValidate={true}
|
|
||||||
value={formData?.()['newPasswordConfirm']}
|
|
||||||
onFocus={() => setNewPasswordError()}
|
|
||||||
setError={newPasswordError()}
|
|
||||||
onInput={(value) => handleCheckNewPassword(value)}
|
|
||||||
disabled={isSubmitting()}
|
|
||||||
disableAutocomplete={true}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<h4>{t('Social networks')}</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} />
|
|
||||||
{t('Connect')}
|
|
||||||
</button>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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} />
|
|
||||||
{t('Connect')}
|
|
||||||
</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} />
|
|
||||||
{t('Connect')}
|
|
||||||
</button>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h5>Apple</h5>
|
|
||||||
<div class="pretty-form__item">
|
|
||||||
<p>
|
|
||||||
<button
|
|
||||||
class={clsx(
|
|
||||||
styles.socialButton,
|
|
||||||
styles.socialButtonApple,
|
|
||||||
'button' + ' button--light'
|
|
||||||
)}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<Icon name="apple" class={styles.icon} />
|
|
||||||
{t('Connect')}
|
|
||||||
</button>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
|
|
||||||
<Show when={isFloatingPanelVisible() && !emailError() && !newPasswordError()}>
|
|
||||||
<div class={styles.formActions}>
|
|
||||||
<div class="wide-container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-19 offset-md-5">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-20 col-lg-18 col-xl-16">
|
|
||||||
<div class={styles.content}>
|
|
||||||
<Button
|
|
||||||
class={styles.cancel}
|
|
||||||
variant="light"
|
|
||||||
value={
|
|
||||||
<>
|
|
||||||
<span class={styles.cancelLabel}>{t('Cancel changes')}</span>
|
|
||||||
<span class={styles.cancelLabelMobile}>{t('Cancel')}</span>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
onClick={handleCancel}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
onClick={handleSubmit}
|
|
||||||
variant="primary"
|
|
||||||
disabled={isSubmitting()}
|
|
||||||
value={isSubmitting() ? t('Saving...') : t('Save settings')}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Show>
|
|
||||||
</AuthGuard>
|
</AuthGuard>
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import { AuthGuard } from '~/components/AuthGuard'
|
import { AuthGuard } from '~/components/AuthGuard'
|
||||||
import { ProfileSubscriptions } from '~/components/Views/ProfileSubscriptions'
|
import { ProfileSubscriptions } from '~/components/Views/Profile/ProfileSubscriptions'
|
||||||
import { PageLayout } from '~/components/_shared/PageLayout'
|
import { PageLayout } from '~/components/_shared/PageLayout'
|
||||||
import { useLocalize } from '~/context/localize'
|
import { useLocalize } from '~/context/localize'
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user