Thream/website
Archived
2
2
Fork 0
Code Issues Pull Requests Releases Activity

feat: create a guild (#1)

Browse Source
This commit is contained in:
Divlo
2021-10-26 16:38:55 +02:00
committed by GitHub
parent a0fa66e8f5
commit d8fab08585
45 changed files with 530 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
pages/application/guilds/create.tsx
View File

@ -1,77 +1,19 @@
import Image from 'next/image'
import { Form } from 'react-component-form'
import TextareaAutosize from 'react-textarea-autosize'
import { Head } from 'components/Head'
import { Application } from 'components/Application'
import { Input } from 'components/design/Input'
import { Main } from 'components/design/Main'
import { Button } from 'components/design/Button'
import { FormState } from 'components/design/FormState'
import {
authenticationFromServerSide,
AuthenticationProvider,
PagePropsWithAuthentication
} from 'utils/authentication'
import { CreateGuild } from 'components/Application/CreateGuild'
const CreateGuild: React.FC<PagePropsWithAuthentication> = (props) => {
const CreateGuildPage: React.FC<PagePropsWithAuthentication> = (props) => {
return (
<AuthenticationProvider authentication={props.authentication}>
<Head title='Thream | Create a Guild' />
<Application path='/application/guilds/create'>
<Main>
<Form className='w-4/6 max-w-xs'>
<div className='flex flex-col'>
<div className='flex justify-between mt-6 mb-2'>
<label className='pl-1' htmlFor='icon'>
Icon
</label>
</div>
<div className='mt-2 relative flex flex-col items-center'>
<button className='relative w-14 h-14 flex items-center overflow-hidden justify-center text-green-800 dark:text-green-400 transform scale-125 hover:scale-150'>
<Image
src='/images/data/guild-default.png'
alt='logo'
width={56}
height={56}
className='w-14 h-14 rounded-full'
/>
<input
name='icon'
id='icon'
type='file'
className='absolute w-22 h-20 -top-8 -left-8 opacity-0 cursor-pointer'
/>
</button>
</div>
</div>
<Input type='text' placeholder='Name' name='name' label='Name' />
<div className='flex flex-col'>
<div className='flex justify-between mt-6 mb-2'>
<label className='pl-1' htmlFor='description'>
Description
</label>
</div>
<div className='mt-0 relative'>
<TextareaAutosize
className='p-3 rounded-lg bg-[#f1f1f1] text-[#2a2a2a] caret-green-600 font-paragraph w-full focus:border focus:outline-none resize-none focus:shadow-green'
placeholder='Description...'
id='description'
name='description'
wrap='soft'
></TextareaAutosize>
<FormState state='idle' />
</div>
</div>
<Button className='w-full mt-6' type='submit'>
Create
</Button>
</Form>
</Main>
<CreateGuild />
</Application>
</AuthenticationProvider>
)
@ -81,4 +23,4 @@ export const getServerSideProps = authenticationFromServerSide({
shouldBeAuthenticated: true
})
export default CreateGuild
export default CreateGuildPage

3
pages/application/users/[userId].tsx
View File

@ -5,8 +5,7 @@ import {
AuthenticationProvider,
PagePropsWithAuthentication
} from 'utils/authentication'
import { UserProfile } from 'components/UserProfile'
import { UserProfile } from 'components/Application/UserProfile'
const UserProfilePage: React.FC<PagePropsWithAuthentication> = (props) => {
return (

67
pages/authentication/forgot-password.tsx
View File

@ -1,10 +1,7 @@
import { useState, useMemo } from 'react'
import Link from 'next/link'
import { AuthenticationForm } from 'components/Authentication'
import useTranslation from 'next-translate/useTranslation'
import { HandleForm } from 'react-component-form'
import axios from 'axios'
import { Type } from '@sinclair/typebox'
import { Head } from 'components/Head'
import { Header } from 'components/Header'
@ -13,54 +10,40 @@ import { Footer, FooterProps } from 'components/Footer'
import { Input } from 'components/design/Input'
import { Button } from 'components/design/Button'
import { FormState } from 'components/design/FormState'
import { useFormState } from 'hooks/useFormState'
import { authenticationFromServerSide } from 'utils/authentication'
import { ScrollableBody } from 'components/ScrollableBody'
import { userSchema } from 'models/User'
import { api } from 'utils/api'
import { userSchema } from '../../models/User'
import { ajv } from '../../utils/ajv'
import { HandleSubmitCallback, useForm } from 'hooks/useForm'
const ForgotPassword: React.FC<FooterProps> = (props) => {
const { t } = useTranslation()
const { version } = props
const [formState, setFormState] = useFormState()
const [messageTranslationKey, setMessageTranslationKey] = useState<
string | undefined
>(undefined)
const validateSchema = useMemo(() => {
return Type.Object({
email: userSchema.email
})
}, [])
const { formState, message, errors, getErrorTranslation, handleSubmit } =
useForm({ validateSchemaObject: { email: userSchema.email } })
const validate = useMemo(() => {
return ajv.compile(validateSchema)
}, [validateSchema])
const handleSubmit: HandleForm = async (formData, formElement) => {
const isValid = validate(formData)
if (!isValid) {
setFormState('error')
setMessageTranslationKey('errors:email')
} else {
setFormState('loading')
try {
await api.post(
`/users/reset-password?redirectURI=${window.location.origin}/authentication/reset-password`,
formData
)
formElement.reset()
setFormState('success')
setMessageTranslationKey('authentication:success-forgot-password')
} catch (error) {
setFormState('error')
if (axios.isAxiosError(error) && error.response?.status === 400) {
setMessageTranslationKey('errors:email')
} else {
setMessageTranslationKey('errors:server-error')
const onSubmit: HandleSubmitCallback = async (formData) => {
try {
await api.post(
`/users/reset-password?redirectURI=${window.location.origin}/authentication/reset-password`,
formData
)
return {
type: 'success',
value: 'authentication:success-forgot-password'
}
} catch (error) {
if (axios.isAxiosError(error) && error.response?.status === 400) {
return {
type: 'error',
value: 'errors:email'
}
}
return {
type: 'error',
value: 'errors:server-error'
}
}
}
@ -69,7 +52,7 @@ const ForgotPassword: React.FC<FooterProps> = (props) => {
<Head title={`Thream | ${t('authentication:forgot-password')}`} />
<Header />
<Main>
<AuthenticationForm onSubmit={handleSubmit}>
<AuthenticationForm onSubmit={handleSubmit(onSubmit)}>
<Input type='email' placeholder='Email' name='email' label='Email' />
<Button data-cy='submit' className='w-full mt-6' type='submit'>
{t('authentication:submit')}
@ -84,7 +67,7 @@ const ForgotPassword: React.FC<FooterProps> = (props) => {
id='message'
state={formState}
message={
messageTranslationKey != null ? t(messageTranslationKey) : null
message != null ? message : getErrorTranslation(errors.email)
}
/>
</Main>

61
pages/authentication/reset-password.tsx
View File

@ -1,9 +1,6 @@
import { useState, useMemo } from 'react'
import { useRouter } from 'next/router'
import useTranslation from 'next-translate/useTranslation'
import { HandleForm } from 'react-component-form'
import axios from 'axios'
import { Type } from '@sinclair/typebox'
import { Head } from 'components/Head'
import { Header } from 'components/Header'
@ -12,54 +9,40 @@ import { Footer, FooterProps } from 'components/Footer'
import { Input } from 'components/design/Input'
import { Button } from 'components/design/Button'
import { FormState } from 'components/design/FormState'
import { useFormState } from 'hooks/useFormState'
import { authenticationFromServerSide } from 'utils/authentication'
import { AuthenticationForm } from 'components/Authentication'
import { ScrollableBody } from 'components/ScrollableBody/ScrollableBody'
import { api } from 'utils/api'
import { userSchema } from '../../models/User'
import { ajv } from '../../utils/ajv'
import { HandleSubmitCallback, useForm } from 'hooks/useForm'
const ResetPassword: React.FC<FooterProps> = (props) => {
const { t } = useTranslation()
const router = useRouter()
const { version } = props
const [formState, setFormState] = useFormState()
const [messageTranslationKey, setMessageTranslationKey] = useState<
string | undefined
>(undefined)
const validateSchema = useMemo(() => {
return Type.Object({
password: userSchema.password
})
}, [])
const { formState, message, errors, getErrorTranslation, handleSubmit } =
useForm({ validateSchemaObject: { password: userSchema.password } })
const validate = useMemo(() => {
return ajv.compile(validateSchema)
}, [validateSchema])
const handleSubmit: HandleForm = async (formData, formElement) => {
const isValid = validate(formData)
if (!isValid) {
setFormState('error')
setMessageTranslationKey('errors:invalid')
} else {
setFormState('loading')
try {
await api.put(`/users/reset-password`, {
...formData,
temporaryToken: router.query.temporaryToken
})
await router.push('/authentication/signin')
} catch (error) {
setFormState('error')
if (axios.isAxiosError(error) && error.response?.status === 400) {
setMessageTranslationKey('errors:invalid')
} else {
setMessageTranslationKey('errors:server-error')
const onSubmit: HandleSubmitCallback = async (formData) => {
try {
await api.put(`/users/reset-password`, {
...formData,
temporaryToken: router.query.temporaryToken
})
await router.push('/authentication/signin')
return null
} catch (error) {
if (axios.isAxiosError(error) && error.response?.status === 400) {
return {
type: 'error',
value: 'errors:invalid'
}
}
return {
type: 'error',
value: 'errors:server-error'
}
}
}
@ -68,7 +51,7 @@ const ResetPassword: React.FC<FooterProps> = (props) => {
<Head title={`Thream | ${t('authentication:reset-password')}`} />
<Header />
<Main>
<AuthenticationForm onSubmit={handleSubmit}>
<AuthenticationForm onSubmit={handleSubmit(onSubmit)}>
<Input
type='password'
placeholder='Password'
@ -83,7 +66,7 @@ const ResetPassword: React.FC<FooterProps> = (props) => {
id='message'
state={formState}
message={
messageTranslationKey != null ? t(messageTranslationKey) : null
message != null ? message : getErrorTranslation(errors.password)
}
/>
</Main>