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

register page

Browse Source
This commit is contained in:
AdrienLSH
2024-01-16 09:56:40 +01:00
parent 0edb865ad8
commit a0e58e7889
3 changed files with 27 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/static/css/accounts/login.css
View File

@ -1,12 +0,0 @@
#app .form {
background-color: red;
width: 300px;
height: 300px;
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-gap: 10px;
margin-left: auto;
margin-right: auto;
margin-top: 90px;
border: 15px black solid;
}

12
frontend/static/css/accounts/register.css
View File

@ -1,12 +0,0 @@
#app .form {
background-color: red;
width: 300px;
height: 300px;
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-gap: 10px;
margin-left: auto;
margin-right: auto;
margin-top: 90px;
border: 15px black solid;
}

42
frontend/static/js/views/accounts/RegisterView.js
View File

@ -4,8 +4,9 @@ import AbstractNonAuthentifiedView from "../abstracts/AbstractNonAuthentified.js
async function register()
{
let username = document.getElementById("username-input").value;
let password = document.getElementById("password-input").value;
let username = document.getElementById("usernameInput").value;
let password = document.getElementById("passwordInput").value;
if (username === '' || password === '') {
clear("innerHTML", ["username", "password"]);
if (username === '')
@ -23,7 +24,7 @@ async function register()
return;
}
clear("innerHTML", ["username", "user", "password"]);
clear("innerHTML", ["username", "password", 'register']);
fill_errors(response_data, "innerHTML");
}
@ -34,32 +35,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')
register();
});
usernameField.focus();
let passwordField = document.getElementById('password-input');
let passwordField = document.getElementById('passwordInput');
passwordField.addEventListener('keydown', ev => {
if (ev.key === 'Enter')
register();
});
document.getElementById("register-button").onclick = register;
document.getElementById("registerButton").onclick = register;
}
async getHtml() {
return `
<div class=form>
<label>Register</label>
<link rel="stylesheet" href="/static/css/accounts/register.css">
<input type="text" id="username-input" placeholder="username">
<span id="username"></span>
<input type="password" id="password-input" placeholder="password">
<span id="password"></span>
<input type="button" value="Register" id="register-button">
<span id="user"></span>
<a href="/login" class="nav__link" data-link>Login</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'>Register</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='registerButton'>Register</button>
<span class='text-danger my-auto mx-2' id='register'></span>
<p class='ms-auto mt-auto'>Already have an account? <a href='/login' data-link>Login</a></p>
</div>
</form>
</div>
`;
}