Add login and signup
This commit is contained in:
parent
6cdc7f43a3
commit
9d5a6014c1
@ -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"}
|
||||
),
|
||||
)
|
||||
|
@ -27,6 +27,7 @@
|
||||
href="#"
|
||||
class="nav__link"
|
||||
id="logout"
|
||||
data-action="click->navbar#logout"
|
||||
>
|
||||
Logout
|
||||
</a>
|
||||
|
@ -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>
|
@ -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>
|
23
static/js/controllers/login_controller.js
Normal file
23
static/js/controllers/login_controller.js
Normal 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);
|
||||
}
|
||||
}
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
25
static/js/controllers/signup_controller.js
Normal file
25
static/js/controllers/signup_controller.js
Normal 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);
|
||||
}
|
||||
}
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user