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={30} 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> ); };