314 lines
10 KiB
TypeScript
314 lines
10 KiB
TypeScript
import Image from 'next/image'
|
|
import useTranslation from 'next-translate/useTranslation'
|
|
import { useState } from 'react'
|
|
import { Form } from 'react-component-form'
|
|
import { EyeIcon, PhotographIcon } from '@heroicons/react/solid'
|
|
import { Type } from '@sinclair/typebox'
|
|
import axios from 'axios'
|
|
import Link from 'next/link'
|
|
|
|
import { API_URL } from '../../../tools/api'
|
|
import { Input } from '../../design/Input'
|
|
import { Checkbox } from '../../design/Checkbox'
|
|
import { Textarea } from '../../design/Textarea'
|
|
import { SocialMediaButton } from '../../design/SocialMediaButton'
|
|
import { SwitchTheme } from '../../Header/SwitchTheme'
|
|
import { Language } from '../../Header/Language'
|
|
import { useAuthentication } from '../../../tools/authentication'
|
|
import { Button } from '../../design/Button'
|
|
import { FormState } from '../../design/FormState'
|
|
import { useForm, HandleSubmitCallback } from '../../../hooks/useForm'
|
|
import { userSchema } from '../../../models/User'
|
|
import { userSettingsSchema } from '../../../models/UserSettings'
|
|
|
|
export const UserSettings: React.FC = () => {
|
|
const { user, setUser, authentication } = useAuthentication()
|
|
const { t } = useTranslation()
|
|
const [inputValues, setInputValues] = useState({
|
|
name: user.name,
|
|
status: user.status,
|
|
email: user.email,
|
|
website: user.website,
|
|
biography: user.biography,
|
|
isPublicGuilds: user.settings.isPublicGuilds,
|
|
isPublicEmail: user.settings.isPublicEmail
|
|
})
|
|
|
|
const {
|
|
fetchState,
|
|
setFetchState,
|
|
message,
|
|
setMessageTranslationKey,
|
|
errors,
|
|
getErrorTranslation,
|
|
handleSubmit
|
|
} = useForm({
|
|
validateSchema: {
|
|
name: userSchema.name,
|
|
status: Type.Optional(userSchema.status),
|
|
email: Type.Optional(Type.Union([userSchema.email, Type.Null()])),
|
|
website: Type.Optional(userSchema.website),
|
|
biography: Type.Optional(userSchema.biography),
|
|
isPublicGuilds: userSettingsSchema.isPublicGuilds,
|
|
isPublicEmail: userSettingsSchema.isPublicEmail
|
|
},
|
|
replaceEmptyStringToNull: true,
|
|
resetOnSuccess: false
|
|
})
|
|
|
|
const onSubmit: HandleSubmitCallback = async (formData) => {
|
|
try {
|
|
const { isPublicGuilds, isPublicEmail, ...userData } = formData
|
|
const userSettings = { isPublicEmail, isPublicGuilds }
|
|
const { data: userCurrentData } = await authentication.api.put(
|
|
`/users/current?redirectURI=${window.location.origin}/authentication/signin`,
|
|
userData
|
|
)
|
|
setInputValues(formData as any)
|
|
const hasEmailChanged = user.email !== userCurrentData.user.email
|
|
if (hasEmailChanged) {
|
|
return {
|
|
type: 'success',
|
|
value: 'application:success-email-changed'
|
|
}
|
|
}
|
|
const { data: userCurrentSettings } = await authentication.api.put(
|
|
'/users/current/settings',
|
|
userSettings
|
|
)
|
|
setUser((oldUser) => {
|
|
return {
|
|
...oldUser,
|
|
...userCurrentData,
|
|
settings: userCurrentSettings.settings
|
|
}
|
|
})
|
|
return {
|
|
type: 'success',
|
|
value: 'application:saved-information'
|
|
}
|
|
} catch (error) {
|
|
if (axios.isAxiosError(error) && error.response?.status === 400) {
|
|
const message = error.response.data.message as string
|
|
if (message.endsWith('already taken.')) {
|
|
return {
|
|
type: 'error',
|
|
value: 'authentication:already-used'
|
|
}
|
|
} else if (message.endsWith('email to sign in.')) {
|
|
return {
|
|
type: 'error',
|
|
value: 'authentication:email-required-to-sign-in'
|
|
}
|
|
}
|
|
return {
|
|
type: 'error',
|
|
value: 'errors:server-error'
|
|
}
|
|
}
|
|
return {
|
|
type: 'error',
|
|
value: 'errors:server-error'
|
|
}
|
|
}
|
|
}
|
|
|
|
const onChange: React.ChangeEventHandler<
|
|
HTMLInputElement | HTMLTextAreaElement
|
|
> = (event) => {
|
|
setInputValues((oldInputValues) => {
|
|
return {
|
|
...oldInputValues,
|
|
[event.target.name]: event.target.value
|
|
}
|
|
})
|
|
}
|
|
|
|
const onChangeCheckbox: React.ChangeEventHandler<HTMLInputElement> = (
|
|
event
|
|
) => {
|
|
setInputValues((oldInputValues) => {
|
|
return {
|
|
...oldInputValues,
|
|
[event.target.name]: event.target.checked
|
|
}
|
|
})
|
|
}
|
|
|
|
const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = async (
|
|
event
|
|
) => {
|
|
setFetchState('loading')
|
|
const files = event?.target?.files
|
|
if (files != null && files.length === 1) {
|
|
const file = files[0]
|
|
const formData = new FormData()
|
|
formData.append('logo', file)
|
|
try {
|
|
const { data } = await authentication.api.put(
|
|
`/users/current/logo`,
|
|
formData
|
|
)
|
|
setUser((oldUser) => {
|
|
return {
|
|
...oldUser,
|
|
logo: data.user.logo
|
|
}
|
|
})
|
|
setFetchState('idle')
|
|
} catch (error) {
|
|
setFetchState('error')
|
|
setMessageTranslationKey('errors:server-error')
|
|
}
|
|
}
|
|
}
|
|
|
|
const handleSignout = async (): Promise<void> => {
|
|
try {
|
|
setFetchState('loading')
|
|
await authentication.signoutServerSide()
|
|
} catch (error) {
|
|
setFetchState('error')
|
|
setMessageTranslationKey('errors:server-error')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Form
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
className='my-auto flex flex-col items-center justify-center py-12 lg:min-w-[875px]'
|
|
>
|
|
<div className='flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row'>
|
|
<div className=' flex w-full flex-wrap items-center justify-center px-6 sm:w-max'>
|
|
<div className='relative'>
|
|
<div className='absolute z-50 h-full w-full'>
|
|
<button className='relative flex h-full w-full items-center justify-center transition hover:scale-110'>
|
|
<input
|
|
type='file'
|
|
className='absolute h-full w-full cursor-pointer opacity-0'
|
|
onChange={handleFileChange}
|
|
/>
|
|
<PhotographIcon color='white' className='h-8 w-8' />
|
|
</button>
|
|
</div>
|
|
<div className='flex items-center justify-center rounded-full bg-black shadow-xl'>
|
|
<Image
|
|
quality={100}
|
|
className='rounded-full opacity-50'
|
|
src={
|
|
user.logo != null
|
|
? API_URL + user.logo
|
|
: '/images/data/user-default.png'
|
|
}
|
|
alt='Profil Picture'
|
|
draggable='false'
|
|
height={125}
|
|
width={125}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className='mx-12 flex flex-col'>
|
|
<Input
|
|
name='name'
|
|
label={t('common:name')}
|
|
placeholder={t('common:name')}
|
|
className='!mt-0'
|
|
onChange={onChange}
|
|
value={inputValues.name ?? ''}
|
|
error={getErrorTranslation(errors.name)}
|
|
/>
|
|
<Input
|
|
name='status'
|
|
label={t('application:status')}
|
|
placeholder={t('application:status')}
|
|
className='!mt-4'
|
|
onChange={onChange}
|
|
value={inputValues.status ?? ''}
|
|
error={getErrorTranslation(errors.status)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className='mt-12 flex w-full flex-col items-center justify-between sm:w-fit lg:flex-row'>
|
|
<div className='w-4/5 pr-0 sm:w-[450px] lg:border-r-[1px] lg:border-neutral-700 lg:pr-12'>
|
|
<Input
|
|
name='email'
|
|
label='Email'
|
|
placeholder='Email'
|
|
onChange={onChange}
|
|
value={inputValues.email ?? ''}
|
|
error={getErrorTranslation(errors.email)}
|
|
/>
|
|
<Checkbox
|
|
name='isPublicEmail'
|
|
label={t('application:label-checkbox-email')}
|
|
id='checkbox-email-visibility'
|
|
onChange={onChangeCheckbox}
|
|
checked={inputValues.isPublicEmail}
|
|
/>
|
|
<Input
|
|
name='website'
|
|
label={t('application:website')}
|
|
placeholder={t('application:website')}
|
|
onChange={onChange}
|
|
value={inputValues.website ?? ''}
|
|
error={getErrorTranslation(errors.website)}
|
|
/>
|
|
<Textarea
|
|
name='biography'
|
|
label={t('application:biography')}
|
|
placeholder={t('application:biography')}
|
|
id='textarea-biography'
|
|
onChange={onChange}
|
|
value={inputValues.biography ?? ''}
|
|
/>
|
|
</div>
|
|
<div className='flex h-full w-4/5 flex-col items-center justify-between pr-0 sm:w-[415px] lg:pl-12'>
|
|
<div className='flex w-full items-center pt-14'>
|
|
<Language className='!top-12' />
|
|
<div className='ml-auto flex'>
|
|
<SwitchTheme />
|
|
<Link href={`/application/users/${user.id}`}>
|
|
<a
|
|
className='group ml-3 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg bg-slate-200 transition-colors hover:bg-slate-300 dark:bg-slate-700 hover:dark:bg-slate-800'
|
|
title='Preview Public Profile'
|
|
>
|
|
<EyeIcon
|
|
height={20}
|
|
className='opacity-50 transition-opacity group-hover:opacity-100'
|
|
/>
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='mt-14 flex w-full flex-col gap-4'>
|
|
<SocialMediaButton
|
|
socialMedia='Google'
|
|
className='w-full justify-center'
|
|
/>
|
|
<SocialMediaButton
|
|
socialMedia='Discord'
|
|
className='w-full justify-center'
|
|
/>
|
|
<SocialMediaButton
|
|
socialMedia='GitHub'
|
|
className='w-full justify-center'
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='mt-12 flex flex-col items-center justify-center sm:w-fit'>
|
|
<div className='space-x-6'>
|
|
<Button type='submit'>{t('application:save')}</Button>
|
|
<Button type='button' color='red' onClick={handleSignout}>
|
|
{t('application:signout')}
|
|
</Button>
|
|
</div>
|
|
<FormState state={fetchState} message={message} />
|
|
</div>
|
|
</Form>
|
|
)
|
|
}
|