105 lines
2.4 KiB
TypeScript
105 lines
2.4 KiB
TypeScript
import useTranslation from 'next-translate/useTranslation'
|
|
|
|
import { FormState as FormStateType } from 'hooks/useFormState'
|
|
import { ErrorMessage } from './ErrorMessage'
|
|
import { Loader } from 'components/design/Loader'
|
|
|
|
export interface FormStateProps {
|
|
state: FormStateType
|
|
message?: string
|
|
}
|
|
|
|
export const FormState: React.FC<FormStateProps> = (props) => {
|
|
const { state, message } = props
|
|
const { t } = useTranslation()
|
|
|
|
if (state === 'loading') {
|
|
return (
|
|
<>
|
|
<div data-testid='loader' className='loader'>
|
|
<Loader />
|
|
</div>
|
|
|
|
<style jsx>
|
|
{`
|
|
.loader {
|
|
margin-top: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
`}
|
|
</style>
|
|
</>
|
|
)
|
|
}
|
|
|
|
if (state === 'idle' || message == null) {
|
|
return null
|
|
}
|
|
|
|
if (state === 'success') {
|
|
return (
|
|
<>
|
|
<div className='success'>
|
|
<div className='success-message'>
|
|
<div className='success-thumbnail' />
|
|
<span className='success-text'>
|
|
<b>{t('authentication:success')} :</b> {message}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<style jsx>
|
|
{`
|
|
.success {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.success-message {
|
|
position: relative;
|
|
display: flex;
|
|
flex-flow: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 12px;
|
|
left: -3px;
|
|
color: var(--color-success);
|
|
font-family: 'Arial', 'sans-serif';
|
|
font-size: 16px;
|
|
line-height: 21px;
|
|
}
|
|
.success-thumbnail {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 22px;
|
|
background-image: url(/images/svg/icons/input/success.svg);
|
|
background-size: cover;
|
|
}
|
|
.success-text {
|
|
padding-left: 5px;
|
|
}
|
|
`}
|
|
</style>
|
|
</>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div data-testid='error' className='error'>
|
|
<ErrorMessage fontSize={16} errors={[message]} />
|
|
</div>
|
|
|
|
<style jsx>
|
|
{`
|
|
.error {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
`}
|
|
</style>
|
|
</>
|
|
)
|
|
}
|