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