Error handling
This commit is contained in:
parent
fa5a40c973
commit
dd397e0b0e
|
@ -28,9 +28,9 @@ def login(request):
|
||||||
"token": token
|
"token": token
|
||||||
})
|
})
|
||||||
else:
|
else:
|
||||||
return JsonResponse({'error': 'Wrong credentials'})
|
return JsonResponse({'error': 'WrongCredentials'})
|
||||||
except User.DoesNotExist:
|
except User.DoesNotExist:
|
||||||
return JsonResponse({'error': 'User does not exist'})
|
return JsonResponse({'error': 'UserNotExist'})
|
||||||
|
|
||||||
@api_view(['POST'])
|
@api_view(['POST'])
|
||||||
def register(request):
|
def register(request):
|
||||||
|
|
|
@ -5,6 +5,8 @@ const Login = (props) => {
|
||||||
const [username, setUsername] = useState('');
|
const [username, setUsername] = useState('');
|
||||||
const [password, setPassword] = useState('');
|
const [password, setPassword] = useState('');
|
||||||
const [loggedin, setLoggedin] = useState(false);
|
const [loggedin, setLoggedin] = useState(false);
|
||||||
|
const [hasError, setHasError] = useState(false);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
|
||||||
const getToken = (idToken) => {
|
const getToken = (idToken) => {
|
||||||
localStorage.getItem('token');
|
localStorage.getItem('token');
|
||||||
|
@ -32,7 +34,16 @@ const Login = (props) => {
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.append('username', username);
|
formData.append('username', username);
|
||||||
formData.append('password', password);
|
formData.append('password', password);
|
||||||
|
const user = await getUser(username, password, formData);
|
||||||
|
|
||||||
|
if(user.error){
|
||||||
|
setHasError(true);
|
||||||
|
setError(user.error)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const getUser = (username, password, formData) => {
|
||||||
return authFetch(`/api/auth/login?username=${username}&password=${password}`, {
|
return authFetch(`/api/auth/login?username=${username}&password=${password}`, {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
body: formData
|
body: formData
|
||||||
|
@ -46,19 +57,19 @@ const Login = (props) => {
|
||||||
setToken(res.token);
|
setToken(res.token);
|
||||||
return Promise.resolve(res);
|
return Promise.resolve(res);
|
||||||
}
|
}
|
||||||
|
else if(res.error){
|
||||||
|
return res;
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleFormSubmit = async (event) => {
|
const handleFormSubmit = async (event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
const res = await login(username, password);
|
const res = await login(username, password);
|
||||||
console.log(res);
|
|
||||||
|
|
||||||
if(res.user.id){
|
if(res && res.user && res.user.id){
|
||||||
setLoggedin(true);
|
setLoggedin(true);
|
||||||
window.location.href = "/";
|
window.location.href = "/";
|
||||||
}else{
|
|
||||||
alert("Inlogegevens zijn onjuist. Probeer het opnieuw");
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -101,21 +112,23 @@ const Login = (props) => {
|
||||||
<div className='login'>
|
<div className='login'>
|
||||||
<img className="logo_text" src="/static/images/logo.png" />
|
<img className="logo_text" src="/static/images/logo.png" />
|
||||||
|
|
||||||
|
{hasError && error === 'UserNotExist' && (<div id='err_msg' className="alert alert-danger" style={{ textAlign: 'center' }}>Deze gebruiker heeft geen account</div>)}
|
||||||
|
{hasError && error === 'WrongCredentials' && (<div id='err_msg' className="alert alert-danger" style={{ textAlign: 'center' }}>De ingevulde gegevens zijn onjuist.</div>)}
|
||||||
|
|
||||||
<form onSubmit={(event) => handleFormSubmit(event)}>
|
<form onSubmit={(event) => handleFormSubmit(event)}>
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<span className='icon'>
|
<span className='icon'>
|
||||||
<i className="fas fa-user"></i>
|
<i className="fas fa-user"></i>
|
||||||
</span>
|
</span>
|
||||||
<input type="text" onChange={handleChange} className="form-control" name="username" id="username" placeholder="Gebruikersnaam" aria-describedby="emailHelp" />
|
<input type="text" onChange={handleChange} className="form-control" name="username" id="username" placeholder="Gebruikersnaam" aria-describedby="emailHelp" required/>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-3">
|
<div className="mb-3">
|
||||||
<span className='icon'>
|
<span className='icon'>
|
||||||
<i className="fas fa-key"></i>
|
<i className="fas fa-key"></i>
|
||||||
</span>
|
</span>
|
||||||
<input type="password" onChange={handleChange} className="form-control" name="password" id="password" placeholder="Wachtwoord"/>
|
<input type="password" onChange={handleChange} className="form-control" name="password" id="password" placeholder="Wachtwoord" required/>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" className="btn btn-primary">Inloggen</button>
|
<button type="submit" className="btn btn-primary">Inloggen</button>
|
||||||
<div id='err_msg'></div>
|
|
||||||
</form>
|
</form>
|
||||||
<Link className="btn" to="/register" style={{ width: '100%', marginTop: '15px' }}>Maak een account aan</Link>
|
<Link className="btn" to="/register" style={{ width: '100%', marginTop: '15px' }}>Maak een account aan</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -31,7 +31,7 @@ export const Register = (props) => {
|
||||||
<img className="logo_text" src="/static/images/logo.png" />
|
<img className="logo_text" src="/static/images/logo.png" />
|
||||||
|
|
||||||
{isRegistered &&(
|
{isRegistered &&(
|
||||||
<div id="ok_msg" class="alert alert-success" style={{ marginTop: '20px' }}>Account aangemaakt! Klik <Link to="/">hier</Link> om in te loggen.</div>
|
<div id="ok_msg" class="alert alert-success" style={{ marginTop: '20px', textAlign: 'center' }}>Account aangemaakt! Klik <Link to="/">hier</Link> om in te loggen.</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<form onSubmit={(event) => handleFormSubmit(event)}>
|
<form onSubmit={(event) => handleFormSubmit(event)}>
|
||||||
|
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue