From 9d5a6014c162c8b0ada7054a2cd3b50923b8bbdf Mon Sep 17 00:00:00 2001 From: Andros Fenollosa Date: Tue, 19 Apr 2022 22:56:42 +0200 Subject: [PATCH] Add login and signup --- app/app_template/forms.py | 12 ++++----- .../templates/components/_nav.html | 1 + app/app_template/templates/pages/login.html | 4 +-- app/app_template/templates/pages/signup.html | 4 +-- static/js/controllers/login_controller.js | 23 +++++++++++++++++ static/js/controllers/navbar_controller.js | 12 +++++++++ static/js/controllers/signup_controller.js | 25 +++++++++++++++++++ static/js/main.js | 5 ++++ 8 files changed, 76 insertions(+), 10 deletions(-) create mode 100644 static/js/controllers/login_controller.js create mode 100644 static/js/controllers/signup_controller.js diff --git a/app/app_template/forms.py b/app/app_template/forms.py index 85332fd..45a7d60 100644 --- a/app/app_template/forms.py +++ b/app/app_template/forms.py @@ -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"} ), ) diff --git a/app/app_template/templates/components/_nav.html b/app/app_template/templates/components/_nav.html index b4b3b71..04ffc0d 100644 --- a/app/app_template/templates/components/_nav.html +++ b/app/app_template/templates/components/_nav.html @@ -27,6 +27,7 @@ href="#" class="nav__link" id="logout" + data-action="click->navbar#logout" > Logout diff --git a/app/app_template/templates/pages/login.html b/app/app_template/templates/pages/login.html index ae73b35..e0be76d 100644 --- a/app/app_template/templates/pages/login.html +++ b/app/app_template/templates/pages/login.html @@ -1,8 +1,8 @@

Login

-
+ {% if user_does_not_exist %}

The user does not exist or the password is wrong.

{% endif %} {{ form.as_p }} - +
\ No newline at end of file diff --git a/app/app_template/templates/pages/signup.html b/app/app_template/templates/pages/signup.html index 1264d03..31916a2 100644 --- a/app/app_template/templates/pages/signup.html +++ b/app/app_template/templates/pages/signup.html @@ -1,5 +1,5 @@

Signup

-
+ {% if user_exist %}

Email already exist

{% endif %} @@ -7,5 +7,5 @@

Passwords do not match.

{% endif %} {{ form.as_p }} - +
\ No newline at end of file diff --git a/static/js/controllers/login_controller.js b/static/js/controllers/login_controller.js new file mode 100644 index 0000000..c184628 --- /dev/null +++ b/static/js/controllers/login_controller.js @@ -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); + } +} diff --git a/static/js/controllers/navbar_controller.js b/static/js/controllers/navbar_controller.js index 80fde3f..77e4fe7 100644 --- a/static/js/controllers/navbar_controller.js +++ b/static/js/controllers/navbar_controller.js @@ -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); + } } diff --git a/static/js/controllers/signup_controller.js b/static/js/controllers/signup_controller.js new file mode 100644 index 0000000..3179f57 --- /dev/null +++ b/static/js/controllers/signup_controller.js @@ -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); + } +} diff --git a/static/js/main.js b/static/js/main.js index 4901c07..1689770 100755 --- a/static/js/main.js +++ b/static/js/main.js @@ -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);