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) serializer.is_valid(raise_exception=True)
user = serializer.get_user(data) user = serializer.get_user(data)
if user is None: 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) login(request, user)
return Response({'id': user.pk}, status=status.HTTP_200_OK) 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 => { elements_id.forEach(element_id => {
let element = document.getElementById(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 => Object.keys(errors).forEach(error_field =>
{ {
@ -14,5 +14,3 @@ function fill_errors(errors, property_name)
element[property_name] = errors[error_field]; element[property_name] = errors[error_field];
}); });
} }
export {fill_errors, clear}

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

@ -4,9 +4,20 @@ import AbstractNonAuthentifiedView from "../abstracts/AbstractNonAuthentified.js
async function login() async function login()
{ {
let username = document.getElementById("username-input").value; clear('innerHTML', ['username', 'password', 'login']);
let password = document.getElementById("password-input").value;
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); let response = await client.login(username, password);
if (response.status == 200) { if (response.status == 200) {
@ -26,31 +37,42 @@ export default class extends AbstractNonAuthentifiedView {
async postInit() async postInit()
{ {
let usernameField = document.getElementById('username-input'); let usernameField = document.getElementById('usernameInput');
usernameField.addEventListener('keydown', ev => { usernameField.addEventListener('keydown', ev => {
if (ev.key === 'Enter') if (ev.key === 'Enter')
login(); login();
}); });
usernameField.focus(); usernameField.focus();
let passwordField = document.getElementById('password-input'); let passwordField = document.getElementById('passwordInput');
passwordField.addEventListener('keydown', ev => { passwordField.addEventListener('keydown', ev => {
if (ev.key === 'Enter') if (ev.key === 'Enter')
login(); login();
}); });
document.getElementById("login-button").onclick = login; document.getElementById('loginButton').onclick = login;
} }
async getHtml() { async getHtml() {
return ` return `
<div class=form> <div class='container-fluid'>
<label>Login</label> <form class='border border-2 rounded bg-light-subtle mx-auto p-2 col-md-7 col-lg-4'>
<link rel="stylesheet" href="/static/css/accounts/login.css"> <h4 class='text-center fw-semibold mb-4'>Login</h4>
<input type="text" id="username-input" placeholder="username"> <div class='form-floating mb-2'>
<input type="password" id="password-input" placeholder="password"> <input type='text' class='form-control' id='usernameInput' placeholder='Username'>
<input type="button" value="Login" id="login-button"> <label for='usernameInput'>Username</label>
<span id="error"></span> <span class='text-danger' id='username'></span>
<a href="/register" class="nav__link" data-link>Register</a> </div>
</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>
`;
} }
} }