127 lines
5.9 KiB
TypeScript
127 lines
5.9 KiB
TypeScript
import React, { useCallback, useState } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { useAuth } from '../auth-context';
|
|
import ErrorBox from '../components/error-box';
|
|
import { SpinnerIcon } from '../components/icons';
|
|
import InfoBox from '../components/info-box';
|
|
import SupporterLogos from '../components/supporter-logos';
|
|
|
|
export const SignUp: React.FC = () => {
|
|
const { isLoading, signup } = useAuth();
|
|
const [error, setError] = useState(undefined);
|
|
|
|
const [username, setUsername] = useState('');
|
|
const [email, setEmail] = useState('');
|
|
const [confirmEmail, setConfirmEmail] = useState('')
|
|
const [password, setPassword] = useState('');
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [confirmConditions, setConfirmConditions] = useState(false);
|
|
|
|
const onSubmit = useCallback(
|
|
e => {
|
|
e.preventDefault();
|
|
signup({ username, email, confirmEmail, password }, setError);
|
|
},
|
|
[username, email, confirmEmail, password, confirmConditions, signup]
|
|
);
|
|
|
|
return (
|
|
<article>
|
|
<section className="main-col">
|
|
<h1 className="h2">Sign up</h1>
|
|
<InfoBox msg="Welcome to Colouring London. You're one of the first people to sign up! ">
|
|
<br/>Please <a href="https://discuss.colouring.london/">discuss
|
|
suggestions for improvements</a> and <a
|
|
href="https://github.com/colouring-london/colouring-london/issues">
|
|
report issues or problems</a>.
|
|
</InfoBox>
|
|
<p>
|
|
Create an account to start colouring in.
|
|
</p>
|
|
<ErrorBox msg={error} />
|
|
<form onSubmit={onSubmit}>
|
|
<label htmlFor="username">Username*</label>
|
|
<input name="username" id="username"
|
|
className="form-control" type="text"
|
|
value={username} onChange={e => setUsername(e.target.value)}
|
|
placeholder="not-your-real-name" required
|
|
minLength={4}
|
|
maxLength={29}
|
|
pattern="\w+"
|
|
title="Usernames can contain only letters, numbers and the underscore"
|
|
/>
|
|
|
|
<label htmlFor="email">Email (optional)</label>
|
|
<input name="email" id="email"
|
|
className="form-control" type="email"
|
|
value={email} onChange={e => setEmail(e.target.value)}
|
|
placeholder="someone@example.com"
|
|
/>
|
|
<InfoBox msg="Please note that if you forget your password, you will only be able to recover your account if you provide an email address." />
|
|
|
|
<label htmlFor="confirm_email">Confirm email (optional)</label>
|
|
<input name="confirm_email" id="confirm_email"
|
|
className="form-control" type="email"
|
|
value={confirmEmail} onChange={e => setConfirmEmail(e.target.value)}
|
|
/>
|
|
|
|
<label htmlFor="password">Password (at least 8 characters)</label>
|
|
<input name="password" id="password"
|
|
className="form-control"
|
|
type={(showPassword)? 'text': 'password'}
|
|
value={password} onChange={e => setPassword(e.target.value)}
|
|
required
|
|
minLength={8}
|
|
maxLength={128}
|
|
/>
|
|
|
|
<div className="form-check">
|
|
<input id="show_password" name="show_password"
|
|
className="form-check-input" type="checkbox"
|
|
checked={showPassword}
|
|
onChange={e => setShowPassword(e.target.checked)}
|
|
/>
|
|
<label className="form-check-label" htmlFor="show_password">
|
|
Show password?
|
|
</label>
|
|
</div>
|
|
|
|
<div className="form-check">
|
|
<input id="confirm_conditions" name="confirm_conditions"
|
|
className="form-check-input" type="checkbox"
|
|
checked={confirmConditions}
|
|
onChange={e => setConfirmConditions(e.target.checked)}
|
|
required />
|
|
<label className="form-check-label" htmlFor="confirm_conditions">
|
|
I confirm that I have read and agree to the <Link
|
|
to="/privacy-policy.html">privacy policy</Link>, <Link
|
|
to="/contributor-agreement.html">contributor agreement</Link> and <Link
|
|
to="/data-accuracy.html">data accuracy agreement</Link>.
|
|
</label>
|
|
</div>
|
|
|
|
<div className="buttons-container with-space">
|
|
<input type="submit" disabled={isLoading} value="Sign Up" className="btn btn-primary" />
|
|
{isLoading && <span><SpinnerIcon/>Sending sign up data...</span>}
|
|
</div>
|
|
<InfoBox msg="">
|
|
Please also read our <a href="https://www.pages.colouring.london/data-ethics">data ethics policy</a> before using or sharing our data
|
|
</InfoBox>
|
|
|
|
Do you already have an account?
|
|
|
|
<div className="buttons-container with-space">
|
|
<Link to="login.html" className="btn btn-outline-dark">Log in</Link>
|
|
</div>
|
|
|
|
</form>
|
|
</section>
|
|
<hr />
|
|
<section className="main-col">
|
|
<SupporterLogos />
|
|
</section>
|
|
</article>
|
|
);
|
|
};
|