Add login and signup
This commit is contained in:
parent
6cdc7f43a3
commit
9d5a6014c1
@ -5,12 +5,12 @@ class LoginForm(forms.Form):
|
|||||||
email = forms.CharField(
|
email = forms.CharField(
|
||||||
label="Email",
|
label="Email",
|
||||||
max_length=255,
|
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(
|
password = forms.CharField(
|
||||||
label="Password",
|
label="Password",
|
||||||
max_length=255,
|
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(
|
username = forms.CharField(
|
||||||
label="Username",
|
label="Username",
|
||||||
max_length=255,
|
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(
|
email = forms.EmailField(
|
||||||
label="Email",
|
label="Email",
|
||||||
max_length=255,
|
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(
|
password = forms.CharField(
|
||||||
label="Password",
|
label="Password",
|
||||||
max_length=255,
|
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(
|
password_confirm = forms.CharField(
|
||||||
label="Confirm Password",
|
label="Confirm Password",
|
||||||
max_length=255,
|
max_length=255,
|
||||||
widget=forms.PasswordInput(
|
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="#"
|
href="#"
|
||||||
class="nav__link"
|
class="nav__link"
|
||||||
id="logout"
|
id="logout"
|
||||||
|
data-action="click->navbar#logout"
|
||||||
>
|
>
|
||||||
Logout
|
Logout
|
||||||
</a>
|
</a>
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
<h1>Login</h1>
|
<h1>Login</h1>
|
||||||
<form id="login-form">
|
<form id="login-form" data-controller="login">
|
||||||
{% if user_does_not_exist %}
|
{% if user_does_not_exist %}
|
||||||
<h2>The user does not exist or the password is wrong.</h2>
|
<h2>The user does not exist or the password is wrong.</h2>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{{ form.as_p }}
|
{{ form.as_p }}
|
||||||
<input type="submit" class="button" value="Login">
|
<input type="submit" class="button" value="Login" data-action="click->login#sendFormLogin">
|
||||||
</form>
|
</form>
|
@ -1,5 +1,5 @@
|
|||||||
<h1>Signup</h1>
|
<h1>Signup</h1>
|
||||||
<form id="signup-form">
|
<form id="signup-form" data-controller="signup">
|
||||||
{% if user_exist %}
|
{% if user_exist %}
|
||||||
<p>Email already exist</p>
|
<p>Email already exist</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
@ -7,5 +7,5 @@
|
|||||||
<p>Passwords do not match.</p>
|
<p>Passwords do not match.</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{{ form.as_p }}
|
{{ form.as_p }}
|
||||||
<input type="submit" class="button" value="Signup">
|
<input type="submit" class="button" value="Signup" data-action="click->signup#sendFormSignup">
|
||||||
</form>
|
</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);
|
}, 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 { Application } from "./vendors/stimulus.js"
|
||||||
import navbarController from "./controllers/navbar_controller.js"
|
import navbarController from "./controllers/navbar_controller.js"
|
||||||
import todoController from "./controllers/todo_controller.js"
|
import todoController from "./controllers/todo_controller.js"
|
||||||
|
import loginController from "./controllers/login_controller.js"
|
||||||
|
import signupController from "./controllers/signup_controller.js"
|
||||||
|
|
||||||
/*
|
/*
|
||||||
INITIALIZATION
|
INITIALIZATION
|
||||||
*/
|
*/
|
||||||
@ -15,3 +18,5 @@ window.Stimulus = Application.start();
|
|||||||
// Register all controllers
|
// Register all controllers
|
||||||
Stimulus.register("navbar", navbarController);
|
Stimulus.register("navbar", navbarController);
|
||||||
Stimulus.register("todo", todoController);
|
Stimulus.register("todo", todoController);
|
||||||
|
Stimulus.register("login", loginController);
|
||||||
|
Stimulus.register("signup", signupController);
|
||||||
|
Loading…
Reference in New Issue
Block a user