chore: better Prettier config for easier reviews
This commit is contained in:
@ -1,27 +1,27 @@
|
||||
import Image from 'next/image'
|
||||
import useTranslation from 'next-translate/useTranslation'
|
||||
import { useState, useMemo } from 'react'
|
||||
import { Form, useForm } 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 type { HandleUseFormCallback } from 'react-component-form'
|
||||
import Image from "next/image"
|
||||
import useTranslation from "next-translate/useTranslation"
|
||||
import { useState, useMemo } from "react"
|
||||
import { Form, useForm } 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 type { HandleUseFormCallback } from "react-component-form"
|
||||
|
||||
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 { userSchema } from '../../../models/User'
|
||||
import { userSettingsSchema } from '../../../models/UserSettings'
|
||||
import type { ProviderOAuth } from '../../../models/OAuth'
|
||||
import { providers } from '../../../models/OAuth'
|
||||
import { useFormTranslation } from '../../../hooks/useFormTranslation'
|
||||
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 { userSchema } from "../../../models/User"
|
||||
import { userSettingsSchema } from "../../../models/UserSettings"
|
||||
import type { ProviderOAuth } from "../../../models/OAuth"
|
||||
import { providers } from "../../../models/OAuth"
|
||||
import { useFormTranslation } from "../../../hooks/useFormTranslation"
|
||||
|
||||
const schema = {
|
||||
name: userSchema.name,
|
||||
@ -30,7 +30,7 @@ const schema = {
|
||||
website: Type.Optional(userSchema.website),
|
||||
biography: Type.Optional(userSchema.biography),
|
||||
isPublicGuilds: userSettingsSchema.isPublicGuilds,
|
||||
isPublicEmail: userSettingsSchema.isPublicEmail
|
||||
isPublicEmail: userSettingsSchema.isPublicEmail,
|
||||
}
|
||||
|
||||
export const UserSettings: React.FC = () => {
|
||||
@ -43,7 +43,7 @@ export const UserSettings: React.FC = () => {
|
||||
website: user.website,
|
||||
biography: user.biography,
|
||||
isPublicGuilds: user.settings.isPublicGuilds,
|
||||
isPublicEmail: user.settings.isPublicEmail
|
||||
isPublicEmail: user.settings.isPublicEmail,
|
||||
})
|
||||
|
||||
const {
|
||||
@ -52,7 +52,7 @@ export const UserSettings: React.FC = () => {
|
||||
setFetchState,
|
||||
message,
|
||||
setMessage,
|
||||
errors
|
||||
errors,
|
||||
} = useForm(schema)
|
||||
const { getFirstErrorTranslation } = useFormTranslation()
|
||||
|
||||
@ -68,19 +68,19 @@ export const UserSettings: React.FC = () => {
|
||||
const userSettings = { isPublicEmail, isPublicGuilds }
|
||||
const { data: userCurrentData } = await authentication.api.put(
|
||||
`/users/current?redirectURI=${window.location.origin}/authentication/signin`,
|
||||
userData
|
||||
userData,
|
||||
)
|
||||
setInputValues(formData as unknown as any)
|
||||
const hasEmailChanged = user.email !== userCurrentData.user.email
|
||||
if (hasEmailChanged) {
|
||||
return {
|
||||
type: 'success',
|
||||
message: 'application:success-email-changed'
|
||||
type: "success",
|
||||
message: "application:success-email-changed",
|
||||
}
|
||||
}
|
||||
const { data: userCurrentSettings } = await authentication.api.put(
|
||||
'/users/current/settings',
|
||||
userSettings
|
||||
"/users/current/settings",
|
||||
userSettings,
|
||||
)
|
||||
setUser((oldUser) => {
|
||||
return {
|
||||
@ -88,36 +88,36 @@ export const UserSettings: React.FC = () => {
|
||||
...userCurrentData,
|
||||
settings: {
|
||||
...oldUser.settings,
|
||||
...userCurrentSettings.settings
|
||||
}
|
||||
...userCurrentSettings.settings,
|
||||
},
|
||||
}
|
||||
})
|
||||
return {
|
||||
type: 'success',
|
||||
message: 'application:saved-information'
|
||||
type: "success",
|
||||
message: "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.')) {
|
||||
if (message.endsWith("already taken.")) {
|
||||
return {
|
||||
type: 'error',
|
||||
message: 'authentication:already-used'
|
||||
type: "error",
|
||||
message: "authentication:already-used",
|
||||
}
|
||||
} else if (message.endsWith('email to sign in.')) {
|
||||
} else if (message.endsWith("email to sign in.")) {
|
||||
return {
|
||||
type: 'error',
|
||||
message: 'authentication:email-required-to-sign-in'
|
||||
type: "error",
|
||||
message: "authentication:email-required-to-sign-in",
|
||||
}
|
||||
}
|
||||
return {
|
||||
type: 'error',
|
||||
message: 'errors:server-error'
|
||||
type: "error",
|
||||
message: "errors:server-error",
|
||||
}
|
||||
}
|
||||
return {
|
||||
type: 'error',
|
||||
message: 'errors:server-error'
|
||||
type: "error",
|
||||
message: "errors:server-error",
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -128,95 +128,95 @@ export const UserSettings: React.FC = () => {
|
||||
setInputValues((oldInputValues) => {
|
||||
return {
|
||||
...oldInputValues,
|
||||
[event.target.name]: event.target.value
|
||||
[event.target.name]: event.target.value,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const onChangeCheckbox: React.ChangeEventHandler<HTMLInputElement> = (
|
||||
event
|
||||
event,
|
||||
) => {
|
||||
setInputValues((oldInputValues) => {
|
||||
return {
|
||||
...oldInputValues,
|
||||
[event.target.name]: event.target.checked
|
||||
[event.target.name]: event.target.checked,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleFileChange: React.ChangeEventHandler<HTMLInputElement> = async (
|
||||
event
|
||||
event,
|
||||
) => {
|
||||
setFetchState('loading')
|
||||
setFetchState("loading")
|
||||
const files = event?.target?.files
|
||||
if (files != null && files.length === 1 && files[0] != null) {
|
||||
const file = files[0]
|
||||
const formData = new FormData()
|
||||
formData.append('logo', file)
|
||||
formData.append("logo", file)
|
||||
try {
|
||||
const { data } = await authentication.api.put(
|
||||
`/users/current/logo`,
|
||||
formData,
|
||||
{
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
}
|
||||
"Content-Type": "multipart/form-data",
|
||||
},
|
||||
},
|
||||
)
|
||||
setUser((oldUser) => {
|
||||
return {
|
||||
...oldUser,
|
||||
logo: data.user.logo
|
||||
logo: data.user.logo,
|
||||
}
|
||||
})
|
||||
setFetchState('idle')
|
||||
setFetchState("idle")
|
||||
} catch (error) {
|
||||
setFetchState('error')
|
||||
setMessage('errors:server-error')
|
||||
setFetchState("error")
|
||||
setMessage("errors:server-error")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleSignout = async (): Promise<void> => {
|
||||
setFetchState('loading')
|
||||
setFetchState("loading")
|
||||
await authentication.signoutServerSide()
|
||||
}
|
||||
|
||||
const handleSignoutAllDevices = async (): Promise<void> => {
|
||||
setFetchState('loading')
|
||||
setFetchState("loading")
|
||||
await authentication.signoutAllDevicesServerSide()
|
||||
}
|
||||
|
||||
const handleDeletionProvider = (
|
||||
provider: ProviderOAuth
|
||||
provider: ProviderOAuth,
|
||||
): (() => Promise<void>) => {
|
||||
return async () => {
|
||||
try {
|
||||
setFetchState('loading')
|
||||
setFetchState("loading")
|
||||
await authentication.api.delete(`/users/oauth2/${provider}`)
|
||||
setUser((oldUser) => {
|
||||
return {
|
||||
...oldUser,
|
||||
strategies: oldUser.strategies.filter((strategy) => {
|
||||
return strategy !== provider
|
||||
})
|
||||
}),
|
||||
}
|
||||
})
|
||||
setMessage('application:success-deleted-provider')
|
||||
setMessage("application:success-deleted-provider")
|
||||
} catch (error) {
|
||||
setFetchState('error')
|
||||
setMessage('errors:server-error')
|
||||
setFetchState("error")
|
||||
setMessage("errors:server-error")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleAddProvider = (
|
||||
provider: ProviderOAuth
|
||||
provider: ProviderOAuth,
|
||||
): (() => Promise<void>) => {
|
||||
return async () => {
|
||||
const redirect = window.location.href.replace(location.search, '')
|
||||
const redirect = window.location.href.replace(location.search, "")
|
||||
const { data: url } = await authentication.api.get(
|
||||
`/users/oauth2/${provider.toLowerCase()}/add-strategy?redirectURI=${redirect}`
|
||||
`/users/oauth2/${provider.toLowerCase()}/add-strategy?redirectURI=${redirect}`,
|
||||
)
|
||||
window.location.href = url
|
||||
}
|
||||
@ -225,116 +225,116 @@ export const UserSettings: React.FC = () => {
|
||||
return (
|
||||
<Form
|
||||
onSubmit={handleUseForm(onSubmit)}
|
||||
className='my-auto flex flex-col items-center justify-center py-12 lg:min-w-[875px]'
|
||||
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'>
|
||||
<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'
|
||||
type="file"
|
||||
className="absolute h-full w-full cursor-pointer opacity-0"
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<PhotographIcon color='white' className='h-8 w-8' />
|
||||
<PhotographIcon color="white" className="h-8 w-8" />
|
||||
</button>
|
||||
</div>
|
||||
<div className='flex items-center justify-center rounded-full bg-black shadow-xl'>
|
||||
<div className="flex items-center justify-center rounded-full bg-black shadow-xl">
|
||||
<Image
|
||||
quality={100}
|
||||
className='rounded-full opacity-50'
|
||||
className="rounded-full opacity-50"
|
||||
src={
|
||||
user.logo != null
|
||||
? user.logo
|
||||
: '/images/data/user-default.png'
|
||||
: "/images/data/user-default.png"
|
||||
}
|
||||
alt='Profil Picture'
|
||||
draggable='false'
|
||||
alt="Profil Picture"
|
||||
draggable="false"
|
||||
height={125}
|
||||
width={125}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mx-12 flex flex-col'>
|
||||
<div className="mx-12 flex flex-col">
|
||||
<Input
|
||||
name='name'
|
||||
label={t('common:name')}
|
||||
placeholder={t('common:name')}
|
||||
className='!mt-0'
|
||||
name="name"
|
||||
label={t("common:name")}
|
||||
placeholder={t("common:name")}
|
||||
className="!mt-0"
|
||||
onChange={onChange}
|
||||
value={inputValues.name ?? ''}
|
||||
value={inputValues.name ?? ""}
|
||||
error={getFirstErrorTranslation(errors.name)}
|
||||
/>
|
||||
<Input
|
||||
name='status'
|
||||
label={t('application:status')}
|
||||
placeholder={t('application:status')}
|
||||
className='!mt-4'
|
||||
name="status"
|
||||
label={t("application:status")}
|
||||
placeholder={t("application:status")}
|
||||
className="!mt-4"
|
||||
onChange={onChange}
|
||||
value={inputValues.status ?? ''}
|
||||
value={inputValues.status ?? ""}
|
||||
error={getFirstErrorTranslation(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'>
|
||||
<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'
|
||||
name="email"
|
||||
label="Email"
|
||||
placeholder="Email"
|
||||
onChange={onChange}
|
||||
value={inputValues.email ?? ''}
|
||||
value={inputValues.email ?? ""}
|
||||
error={getFirstErrorTranslation(errors.email)}
|
||||
/>
|
||||
<Checkbox
|
||||
name='isPublicEmail'
|
||||
label={t('application:label-checkbox-email')}
|
||||
id='checkbox-email-visibility'
|
||||
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')}
|
||||
name="website"
|
||||
label={t("application:website")}
|
||||
placeholder={t("application:website")}
|
||||
onChange={onChange}
|
||||
value={inputValues.website ?? ''}
|
||||
value={inputValues.website ?? ""}
|
||||
error={getFirstErrorTranslation(errors.website)}
|
||||
/>
|
||||
<Textarea
|
||||
name='biography'
|
||||
label={t('application:biography')}
|
||||
placeholder={t('application:biography')}
|
||||
id='textarea-biography'
|
||||
name="biography"
|
||||
label={t("application:biography")}
|
||||
placeholder={t("application:biography")}
|
||||
id="textarea-biography"
|
||||
onChange={onChange}
|
||||
value={inputValues.biography ?? ''}
|
||||
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-10 lg:pt-0'>
|
||||
<Language className='!top-12' />
|
||||
<div className='ml-auto flex'>
|
||||
<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-10 lg:pt-0">
|
||||
<Language className="!top-12" />
|
||||
<div className="ml-auto flex">
|
||||
<SwitchTheme />
|
||||
<Link
|
||||
href={`/application/users/${user.id}`}
|
||||
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'
|
||||
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'
|
||||
className="opacity-50 transition-opacity group-hover:opacity-100"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-14 flex w-full flex-col gap-4'>
|
||||
<div className="mt-14 flex w-full flex-col gap-4">
|
||||
{!hasAllProviders ? (
|
||||
<div className='flex w-full flex-col gap-4'>
|
||||
<h3 className='text-center'>
|
||||
{t('application:signin-with-an-account')}
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<h3 className="text-center">
|
||||
{t("application:signin-with-an-account")}
|
||||
</h3>
|
||||
{providers.map((provider, index) => {
|
||||
if (!user.strategies.includes(provider)) {
|
||||
@ -342,7 +342,7 @@ export const UserSettings: React.FC = () => {
|
||||
<SocialMediaButton
|
||||
key={index}
|
||||
socialMedia={provider}
|
||||
className='w-full justify-center'
|
||||
className="w-full justify-center"
|
||||
onClick={handleAddProvider(provider)}
|
||||
/>
|
||||
)
|
||||
@ -352,9 +352,9 @@ export const UserSettings: React.FC = () => {
|
||||
</div>
|
||||
) : null}
|
||||
{user.strategies.length !== 1 && (
|
||||
<div className='mt-4 flex w-full flex-col gap-4'>
|
||||
<h3 className='text-center'>
|
||||
{t('application:signout-with-an-account')}
|
||||
<div className="mt-4 flex w-full flex-col gap-4">
|
||||
<h3 className="text-center">
|
||||
{t("application:signout-with-an-account")}
|
||||
</h3>
|
||||
{providers.map((provider, index) => {
|
||||
if (user.strategies.includes(provider)) {
|
||||
@ -362,7 +362,7 @@ export const UserSettings: React.FC = () => {
|
||||
<SocialMediaButton
|
||||
key={index}
|
||||
socialMedia={provider}
|
||||
className='w-full justify-center'
|
||||
className="w-full justify-center"
|
||||
onClick={handleDeletionProvider(provider)}
|
||||
/>
|
||||
)
|
||||
@ -375,16 +375,16 @@ export const UserSettings: React.FC = () => {
|
||||
</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')}
|
||||
<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>
|
||||
<div className='mt-4'>
|
||||
<Button type='button' color='red' onClick={handleSignoutAllDevices}>
|
||||
{t('application:signout-all-devices')}
|
||||
<div className="mt-4">
|
||||
<Button type="button" color="red" onClick={handleSignoutAllDevices}>
|
||||
{t("application:signout-all-devices")}
|
||||
</Button>
|
||||
</div>
|
||||
<FormState
|
||||
|
||||
@ -1 +1 @@
|
||||
export * from './UserSettings'
|
||||
export * from "./UserSettings"
|
||||
|
||||
Reference in New Issue
Block a user