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( 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"}
), ),
) )

View File

@ -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>

View File

@ -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>

View File

@ -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>

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); }, 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 { 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);