diff --git a/src/LoginForm.js b/src/LoginForm.js index 1ea664e97b2405fa1f3ffc0080d2335e954ea89d..681c72cba376fb3608c92fd450ee76f4e599ef53 100644 --- a/src/LoginForm.js +++ b/src/LoginForm.js @@ -5,16 +5,6 @@ import AuthService from './services/auth.service' import Button from './Button' import './LoginForm.css'; -const required = value => { - if (!value) { - return ( - <div className='alert alert-danger' role='alert'> - This field is required! - </div> - ) - } -} - export default function LoginForm(props){ const { value: username, bind: bindUsername, reset: resetUsername } = useInput('') @@ -32,7 +22,7 @@ export default function LoginForm(props){ window.location.reload() } catch(error) { - setMessage('Error') + setMessage('Login failed') resetPassword() resetUsername() } @@ -50,7 +40,7 @@ export default function LoginForm(props){ name='username' className="email" {...bindUsername} - validations={[required]} + required placeholder="Your email" /> @@ -60,7 +50,7 @@ export default function LoginForm(props){ name='password' className="password" {...bindPassword} - validations={[required]} + required placeholder="Your password" /> diff --git a/src/RegisterForm.js b/src/RegisterForm.js index f15f6de9e8601912a07bcd2dfe64a21ab75fb2af..d011ed7847e9b47614690e2d04cf41a471fee11c 100644 --- a/src/RegisterForm.js +++ b/src/RegisterForm.js @@ -5,22 +5,11 @@ import { useState } from "react"; import { loggedIn } from './services/loggedInService'; import './RegisterForm.css' -const required = value => { - if (!value) { - return ( - <div className='alert alert-danger' role='alert'> - This field is required! - </div> - ) - } -} - export default function RegisterForm(props){ const { value: username, bind: bindUsername, reset: resetUsername } = useInput('') const { value: password, bind: bindPassword, reset: resetPassword } = useInput('') const { value: email, bind: bindEmail, reset: resetEmail } = useInput('') - const [successful, setSuccesful] = useState(false) const [message, setMessage] = useState('') const handleRegister = async event => { @@ -35,10 +24,7 @@ export default function RegisterForm(props){ window.location.reload() } catch(error){ - const responseMessage = - (error.response && error.response.data && error.response.data.message) || error.message || error.toString() - setMessage(responseMessage) - setSuccesful(false) + setMessage('Register failed') resetPassword() resetUsername() resetEmail() @@ -49,42 +35,42 @@ export default function RegisterForm(props){ <div className="formContainer"> <h1>Register</h1> <form onSubmit={handleRegister}> - {!successful && ( - <div className="register_form-container"> - <label htmlFor='username'>Username</label> - <input - type='text' - name='username' - className="username" - {...bindUsername} - validations={[required]} - placeholder="Your username" - /> + + <div className="register_form-container"> + <label htmlFor='username'>Username</label> + <input + type='text' + name='username' + className="username" + {...bindUsername} + required + placeholder="Your username" + /> - <label htmlFor='email'>Email</label> - <input - type='text' - name='email' - className="email" - {...bindEmail} - validations={[required]} - placeholder="Your email" - /> + <label htmlFor='email'>Email</label> + <input + type='text' + name='email' + className="email" + {...bindEmail} + required + placeholder="Your email" + /> - <label htmlFor='password'>Password</label> - <input - type='password' - name='password' - className="password" - {...bindPassword} - validations={[required]} - placeholder="password" - /> - <div className="buttonContainer"> - <button className='registerButton'>Sign Up</button> - </div> + <label htmlFor='password'>Password</label> + <input + type='password' + name='password' + className="password" + {...bindPassword} + required + placeholder="password" + /> + <div className="buttonContainer"> + <button className='registerButton'>Sign Up</button> </div> - )} + </div> + {message && ( <div>