Add login and signup

This commit is contained in:
Andros Fenollosa 2022-04-19 22:56:42 +02:00
parent 6cdc7f43a3
commit 9d5a6014c1
8 changed files with 76 additions and 10 deletions

View File

@ -5,12 +5,12 @@ class LoginForm(forms.Form):
email = forms.CharField(
label="Email",
max_length=255,
widget=forms.EmailInput(attrs={"id": "login-email", "class": "input"}),
widget=forms.EmailInput(attrs={"id": "login-email", "class": "input", "data-login-target": "email"})
)
password = forms.CharField(
label="Password",
max_length=255,
widget=forms.PasswordInput(attrs={"id": "login-password", "class": "input"}),
widget=forms.PasswordInput(attrs={"id": "login-password", "class": "input", "data-login-target": "password"})
)
@ -18,22 +18,22 @@ class SignupForm(forms.Form):
username = forms.CharField(
label="Username",
max_length=255,
widget=forms.TextInput(attrs={"id": "signup-username", "class": "input"}),
widget=forms.TextInput(attrs={"id": "signup-username", "class": "input", "data-signup-target": "username"})
)
email = forms.EmailField(
label="Email",
max_length=255,
widget=forms.EmailInput(attrs={"id": "signup-email", "class": "input"}),
widget=forms.EmailInput(attrs={"id": "signup-email", "class": "input", "data-signup-target": "email"})
)
password = forms.CharField(
label="Password",
max_length=255,
widget=forms.PasswordInput(attrs={"id": "signup-password", "class": "input"}),
widget=forms.PasswordInput(attrs={"id": "signup-password", "class": "input", "data-signup-target": "password"})
)
password_confirm = forms.CharField(
label="Confirm Password",
max_length=255,
widget=forms.PasswordInput(
attrs={"id": "signup-password-confirm", "class": "input"}
attrs={"id": "signup-password-confirm", "class": "input", "data-signup-target": "passwordConfirm"}
),
)

View File

@ -27,6 +27,7 @@
href="#"
class="nav__link"
id="logout"
data-action="click->navbar#logout"
>
Logout
</a>

View File

@ -1,8 +1,8 @@
<h1>Login</h1>
<form id="login-form">
<form id="login-form" data-controller="login">
{% if user_does_not_exist %}
<h2>The user does not exist or the password is wrong.</h2>
{% endif %}
{{ form.as_p }}
<input type="submit" class="button" value="Login">
<input type="submit" class="button" value="Login" data-action="click->login#sendFormLogin">
</form>

View File

@ -1,5 +1,5 @@
<h1>Signup</h1>
<form id="signup-form">
<form id="signup-form" data-controller="signup">
{% if user_exist %}
<p>Email already exist</p>
{% endif %}
@ -7,5 +7,5 @@
<p>Passwords do not match.</p>
{% endif %}
{{ form.as_p }}
<input type="submit" class="button" value="Signup">
<input type="submit" class="button" value="Signup" data-action="click->signup#sendFormSignup">
</form>

View File

@ -0,0 +1,23 @@
import { Controller } from "../vendors/stimulus.js"
import { sendData } from "../webSocketsCli.js"
export default class extends Controller {
static targets = [ "email", "password" ]
/**
* Send form from login page
* @param {Event} event
* @return {void}
*/
sendFormLogin(event) {
event.preventDefault();
sendData({
action: 'Login',
data: {
email: this.emailTarget.value,
password: this.passwordTarget.value
}
}, window.myWebSocket);
}
}

View File

@ -19,4 +19,16 @@ export default class extends Controller {
}
}, window.myWebSocket);
}
/**
* Send message to Logout
* @param {Event} event
* @return {void}
*/
logout(event) {
sendData({
action: 'Logout',
data: {}
}, window.myWebSocket);
}
}

View File

@ -0,0 +1,25 @@
import { Controller } from "../vendors/stimulus.js"
import { sendData } from "../webSocketsCli.js"
export default class extends Controller {
static targets = [ "username", "email", "password", "passwordConfirm" ]
/**
* Send form from login page
* @param {Event} event
* @return {void}
*/
sendFormSignup(event) {
event.preventDefault();
sendData({
action: 'Signup',
data: {
username: this.usernameTarget.value,
email: this.emailTarget.value,
password: this.passwordTarget.value,
password_confirm: this.passwordConfirmTarget.value
}
}, window.myWebSocket);
}
}

View File

@ -2,6 +2,9 @@ import {connect, startEvents} from './webSocketsCli.js';
import { Application } from "./vendors/stimulus.js"
import navbarController from "./controllers/navbar_controller.js"
import todoController from "./controllers/todo_controller.js"
import loginController from "./controllers/login_controller.js"
import signupController from "./controllers/signup_controller.js"
/*
INITIALIZATION
*/
@ -15,3 +18,5 @@ window.Stimulus = Application.start();
// Register all controllers
Stimulus.register("navbar", navbarController);
Stimulus.register("todo", todoController);
Stimulus.register("login", loginController);
Stimulus.register("signup", signupController);