Add login and signup

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

app/app_template/templates/components/_nav.html

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

app/app_template/templates/pages/login.html

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

app/app_template/templates/pages/signup.html

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

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);
+    }
+}

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);
+    }
 }

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);
+    }
+}

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);