106 lines
3.6 KiB
React
Raw Normal View History

import React from 'react'
import { useTranslation } from 'react-i18next'
2018-01-01 11:10:39 +01:00
import { Helmet } from 'react-helmet'
import { history } from '../../index'
import { isRegistrationAllowed } from '../../utils'
2019-08-28 15:35:22 +02:00
export default function Form(props) {
const { t } = useTranslation()
const pageTitle = `${props.formType
.charAt(0)
.toUpperCase()}${props.formType.slice(1)}`
return (
<div>
2018-01-01 11:10:39 +01:00
<Helmet>
<title>FitTrackee - {t(props.formType)}</title>
2018-01-01 11:10:39 +01:00
</Helmet>
<h1 className="page-title">{t(pageTitle)}</h1>
2017-12-25 20:11:10 +01:00
<div className="container">
<div className="row">
<div className="col-md-3" />
<div className="col-md-6">
2019-08-28 15:35:22 +02:00
<hr />
<br />
{props.formType === 'register' && !isRegistrationAllowed ? (
<div className="card">
<div className="card-body">Registration is disabled.</div>
<div className="card-body">
<button
type="submit"
className="btn btn-secondary btn-lg btn-block"
onClick={() => history.go(-1)}
2019-08-28 15:35:22 +02:00
>
Back
</button>
</div>
</div>
) : (
2019-08-28 15:35:22 +02:00
<form
onSubmit={event =>
props.handleUserFormSubmit(event, props.formType)
}
2019-08-28 15:35:22 +02:00
>
{props.formType === 'register' && (
<div className="form-group">
<input
className="form-control input-lg"
name="username"
placeholder={t('Enter a username')}
2019-08-28 15:35:22 +02:00
required
type="text"
value={props.userForm.username}
onChange={props.onHandleFormChange}
/>
</div>
)}
<div className="form-group">
<input
className="form-control input-lg"
name="email"
placeholder={t('Enter an email address')}
required
type="email"
value={props.userForm.email}
onChange={props.onHandleFormChange}
/>
</div>
<div className="form-group">
<input
className="form-control input-lg"
name="password"
placeholder={t('Enter a password')}
required
type="password"
value={props.userForm.password}
onChange={props.onHandleFormChange}
/>
</div>
2019-08-28 15:35:22 +02:00
{props.formType === 'register' && (
<div className="form-group">
<input
className="form-control input-lg"
name="password_conf"
placeholder={t('Enter the password confirmation')}
2019-08-28 15:35:22 +02:00
required
type="password"
value={props.userForm.password_conf}
onChange={props.onHandleFormChange}
/>
</div>
)}
<input
type="submit"
className="btn btn-primary btn-lg btn-block"
value={t('Submit')}
/>
</form>
)}
</div>
<div className="col-md-3" />
</div>
2017-12-25 20:11:10 +01:00
</div>
</div>
)
}