starnakin/42_ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

login page 100%

Browse Source
This commit is contained in:
AdrienLSH 2024-01-16 09:36:07 +01:00
parent ff85c1d30c
commit 0edb865ad8
3 changed files with 42 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
accounts/views/login.py
View File

@ -18,6 +18,6 @@ class LoginView(APIView):
serializer.is_valid(raise_exception=True)
user = serializer.get_user(data)
if user is None:
return Response({'error': ['Username or password wrong.']}, status.HTTP_400_BAD_REQUEST)
return Response({'login': ['Invalid username or password.']}, status.HTTP_400_BAD_REQUEST)
login(request, user)
return Response({'id': user.pk}, status=status.HTTP_200_OK)

6
frontend/static/js/utils/formUtils.js
View File

@ -1,4 +1,4 @@
function clear(property_name, elements_id)
export function clear(property_name, elements_id)
{
elements_id.forEach(element_id => {
let element = document.getElementById(element_id)
@ -6,7 +6,7 @@ function clear(property_name, elements_id)
});
}
function fill_errors(errors, property_name)
export function fill_errors(errors, property_name)
{
Object.keys(errors).forEach(error_field =>
{
@ -14,5 +14,3 @@ function fill_errors(errors, property_name)
element[property_name] = errors[error_field];
});
}
export {fill_errors, clear}

48
frontend/static/js/views/accounts/LoginView.js
View File

@ -4,8 +4,19 @@ import AbstractNonAuthentifiedView from "../abstracts/AbstractNonAuthentified.js
async function login()
{
let username = document.getElementById("username-input").value;
let password = document.getElementById("password-input").value;
clear('innerHTML', ['username', 'password', 'login']);
let username = document.getElementById('usernameInput').value;
let password = document.getElementById('passwordInput').value;
if (username === '') {
document.getElementById('username').innerHTML = 'This field may not be blank.';
}
if (password === '') {
document.getElementById('password').innerHTML = 'This field may not be blank.';
}
if (username === '' || password === '')
return;
let response = await client.login(username, password);
@ -26,30 +37,41 @@ export default class extends AbstractNonAuthentifiedView {
async postInit()
{
let usernameField = document.getElementById('username-input');
let usernameField = document.getElementById('usernameInput');
usernameField.addEventListener('keydown', ev => {
if (ev.key === 'Enter')
login();
});
usernameField.focus();
let passwordField = document.getElementById('password-input');
let passwordField = document.getElementById('passwordInput');
passwordField.addEventListener('keydown', ev => {
if (ev.key === 'Enter')
login();
});
document.getElementById("login-button").onclick = login;
document.getElementById('loginButton').onclick = login;
}
async getHtml() {
return `
<div class=form>
<label>Login</label>
<link rel="stylesheet" href="/static/css/accounts/login.css">
<input type="text" id="username-input" placeholder="username">
<input type="password" id="password-input" placeholder="password">
<input type="button" value="Login" id="login-button">
<span id="error"></span>
<a href="/register" class="nav__link" data-link>Register</a>
<div class='container-fluid'>
<form class='border border-2 rounded bg-light-subtle mx-auto p-2 col-md-7 col-lg-4'>
<h4 class='text-center fw-semibold mb-4'>Login</h4>
<div class='form-floating mb-2'>
<input type='text' class='form-control' id='usernameInput' placeholder='Username'>
<label for='usernameInput'>Username</label>
<span class='text-danger' id='username'></span>
</div>
<div class='form-floating'>
<input type='password' class='form-control' id='passwordInput' placeholder='Password'>
<label for='passwordInput'>Password</label>
<span class='text-danger' id='password'></span>
</div>
<div class='d-flex'>
<button type='button' class='btn btn-primary mt-3 mb-2' id='loginButton'>Login</button>
<span class='text-danger my-auto mx-2' id='login'></span>
<p class='ms-auto mt-auto'>No account yet? <a href='/register' data-link>Register</a></p>
</div>
</form>
</div>
`;
}