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() async function register()
{ {
let username = document.getElementById("username-input").value; let username = document.getElementById("usernameInput").value;
let password = document.getElementById("password-input").value; let password = document.getElementById("passwordInput").value;
if (username === '' || password === '') { if (username === '' || password === '') {
clear("innerHTML", ["username", "password"]); clear("innerHTML", ["username", "password"]);
if (username === '') if (username === '')
@ -23,7 +24,7 @@ async function register()
return; return;
} }
clear("innerHTML", ["username", "user", "password"]); clear("innerHTML", ["username", "password", 'register']);
fill_errors(response_data, "innerHTML"); fill_errors(response_data, "innerHTML");
} }
@ -34,32 +35,41 @@ 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')
register(); register();
}); });
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')
register(); register();
}); });
document.getElementById("register-button").onclick = register; document.getElementById("registerButton").onclick = register;
} }
async getHtml() { async getHtml() {
return ` return `
<div class=form> <div class='container-fluid'>
<label>Register</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/register.css"> <h4 class='text-center fw-semibold mb-4'>Register</h4>
<input type="text" id="username-input" placeholder="username"> <div class='form-floating mb-2'>
<span id="username"></span> <input type='text' class='form-control' id='usernameInput' placeholder='Username'>
<input type="password" id="password-input" placeholder="password"> <label for='usernameInput'>Username</label>
<span id="password"></span> <span class='text-danger' id='username'></span>
<input type="button" value="Register" id="register-button"> </div>
<span id="user"></span> <div class='form-floating'>
<a href="/login" class="nav__link" data-link>Login</a> <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> </div>
`; `;
} }