From a5b78afaca06f8876b9625a5d45f14709d0e3fc3 Mon Sep 17 00:00:00 2001
From: Alessio Comi <alessio.comi@he-arc.ch>
Date: Fri, 5 Apr 2024 15:17:22 +0200
Subject: [PATCH 1/2] my bad

---
 frontend/src/views/Authentication/LogoutView.vue | 3 +++
 frontend/src/views/Authentication/SignUpView.vue | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/frontend/src/views/Authentication/LogoutView.vue b/frontend/src/views/Authentication/LogoutView.vue
index e69de29..956dc09 100644
--- a/frontend/src/views/Authentication/LogoutView.vue
+++ b/frontend/src/views/Authentication/LogoutView.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1>This will be logout page</h1>
+</template>
\ No newline at end of file
diff --git a/frontend/src/views/Authentication/SignUpView.vue b/frontend/src/views/Authentication/SignUpView.vue
index e69de29..08d003c 100644
--- a/frontend/src/views/Authentication/SignUpView.vue
+++ b/frontend/src/views/Authentication/SignUpView.vue
@@ -0,0 +1,3 @@
+<template>
+  <h1>This will be signup page</h1>
+</template>
\ No newline at end of file

From cf1d12136ad4bb694ff396c4725bbe10bb778eca Mon Sep 17 00:00:00 2001
From: Alessio Comi <alessio.comi@he-arc.ch>
Date: Sat, 13 Apr 2024 21:14:58 +0200
Subject: [PATCH 2/2] basic view for login page and signup page

---
 frontend/src/api_client.js                    | 38 +++++++++-
 frontend/src/components/Header.vue            |  2 +
 .../src/views/Authentication/LoginView.vue    | 71 +++++++++++++------
 .../src/views/Authentication/SignUpView.vue   | 63 +++++++++++++++-
 4 files changed, 149 insertions(+), 25 deletions(-)

diff --git a/frontend/src/api_client.js b/frontend/src/api_client.js
index 76e914a..47262ec 100644
--- a/frontend/src/api_client.js
+++ b/frontend/src/api_client.js
@@ -145,4 +145,40 @@ export default
         });
         return response.data;
     }
-}
\ No newline at end of file
+
+    /**
+     * Register a new user
+     * @param {String} username The username of the new user
+     * @param {String} password The password of the new user
+     * @returns {Object} The response data from the API
+     */
+    static async registerUser(username, password) {
+        try {
+            const response = await axios.post('/api/user/signup/', {
+                username,
+                password
+            });
+            return response.data;
+        } catch (error) {
+            throw new Error('Error registering user: ' + error.message);
+        }
+    }
+
+    /**
+     * Log in an existing user
+     * @param {String} username The username of the user
+     * @param {String} password The password of the user
+     * @returns {Object} The response data from the API
+     */
+    static async loginUser(username, password) {
+        try {
+            const response = await axios.post('/api/user/login/', {
+                username,
+                password
+            });
+            return response.data;
+        } catch (error) {
+            throw new Error('Error logging in: ' + error.message);
+        }
+    }
+}
diff --git a/frontend/src/components/Header.vue b/frontend/src/components/Header.vue
index b8a4850..03628e0 100644
--- a/frontend/src/components/Header.vue
+++ b/frontend/src/components/Header.vue
@@ -10,6 +10,8 @@ import { RouterLink } from 'vue-router'
         <RouterLink to="/">Categories</RouterLink>
         <RouterLink to="/add-question">Add question</RouterLink>
         <RouterLink to="/login">Login</RouterLink>
+        <RouterLink to="/logout">Logout</RouterLink>
+        <RouterLink to="/signup">SignUp</RouterLink>
       </nav>
     </div>
   </header>
diff --git a/frontend/src/views/Authentication/LoginView.vue b/frontend/src/views/Authentication/LoginView.vue
index e88b3b6..52e8ff7 100644
--- a/frontend/src/views/Authentication/LoginView.vue
+++ b/frontend/src/views/Authentication/LoginView.vue
@@ -1,32 +1,59 @@
 <script setup>
 import CustomInput from '@/components/CustomInput.vue';
-import { ref, computed } from 'vue';
+import { ref } from 'vue';
+import APIClient from '@/api_client.js';
 
 const username = ref('');
-const updateUsername = (value) => {
-    username.value = value;
-};
-
 const password = ref('');
-const updatePassword = (value) => {
-    password.value = value;
-};
+const validationMessage = ref('');
 
-const submitForm = () => {
-    console.log('Form submitted');
-    // TODO call api
+const clearForm = () => {
+    username.value = '';
+    password.value = '';
 };
 
+const login = async () => {
+    if (!username.value.trim() || !password.value.trim()) {
+        validationMessage.value = 'Please fill in all fields.';
+        return;
+    }
+
+    try {
+        const response = await APIClient.loginUser(username.value.trim(), password.value.trim());
+        console.log('Login successful:', response);
+        validationMessage.value = 'Login successful.';
+        clearForm();
+
+        // Redirect or perform additional actions after successful login
+    } catch (error) {
+        console.error('Error logging in:', error);
+        if (error instanceof ValidationError) {
+            validationMessage.value = error.message; // Show detailed validation error message to user
+        } else {
+            validationMessage.value = 'Error logging in. Please try again.';
+        }
+    }
+};
 </script>
+
 <template>
-    <section class="login container">
-        <h1>This is login page</h1>
-        <form @submit.prevent="submitForm">
-            {{ username }} <!-- TODO debug purpose remove this line -->
-            <CustomInput label="Username" :value="username" @input="updateUsername" required />
-            {{ password }} <!-- TODO debug purpose remove this line -->
-            <CustomInput label="Password" type="password" :value="password" @input="updatePassword" required />
-            <button type="submit" class="btn">Submit</button>
-        </form>
-    </section>
-</template>
\ No newline at end of file
+    <div>
+        <section class="login-form container">
+            <h1>Login</h1>
+            <p :class="{ 'success-message': validationMessage === 'Login successful.' }">{{ validationMessage }}</p>
+            <form @submit.prevent="login" @keyup.enter="login" style="text-align: center;">
+                <CustomInput label="Username" v-model="username" required />
+                <CustomInput label="Password" v-model="password" type="password" required/>
+                <div style="margin-top: 20px;">
+                    <button type="submit" class="btn">Login</button>
+                </div>
+            </form>
+        </section>
+    </div>
+</template>
+
+<style>
+.success-message {
+    color: green;
+}
+</style>
diff --git a/frontend/src/views/Authentication/SignUpView.vue b/frontend/src/views/Authentication/SignUpView.vue
index 08d003c..786fad0 100644
--- a/frontend/src/views/Authentication/SignUpView.vue
+++ b/frontend/src/views/Authentication/SignUpView.vue
@@ -1,3 +1,62 @@
+<script setup>
+import CustomInput from '@/components/CustomInput.vue';
+import { ref } from 'vue';
+import APIClient from '@/api_client.js';
+
+const username = ref('');
+const password = ref('');
+const confirmPassword = ref('');
+const validationMessage = ref('');
+
+const clearForm = () => {
+    username.value = '';
+    password.value = '';
+    confirmPassword.value = '';
+};
+
+const register = async () => {
+    if (!username.value.trim() || !password.value.trim() || !confirmPassword.value.trim()) {
+        validationMessage.value = 'Please fill in all fields.';
+        return;
+    }
+
+    if (password.value !== confirmPassword.value) {
+        validationMessage.value = 'Passwords do not match.';
+        return;
+    }
+
+    try {
+        const response = await APIClient.registerUser(username.value.trim(), password.value.trim());
+        console.log('Registration successful:', response);
+        validationMessage.value = 'Registration successful.';
+        clearForm();
+    } catch (error) {
+        console.error('Error registering:', error);
+        validationMessage.value = 'Error registering. Please try again.';
+    }
+};
+</script>
+
 <template>
-  <h1>This will be signup page</h1>
-</template>
\ No newline at end of file
+    <div>
+        <section class="register-form container">
+            <h1>Register</h1>
+            <p :class="{ 'success-message': validationMessage === 'Registration successful.' }">{{ validationMessage }}</p>
+            <form @submit.prevent="signUp" @keyup.enter="signUp" style="text-align: center;">
+                <CustomInput label="Username" v-model="username" required />
+                <CustomInput label="Password" v-model="password" type="password" required />
+                <CustomInput label="Confirm Password" v-model="confirmPassword" type="password" required />
+                <div style="margin-top: 20px;">
+                    <button type="submit" class="btn">Register</button>
+                </div>
+            </form>
+        </section>
+    </div>
+</template>
+
+
+<style>
+.success-message {
+    color: green;
+}
+</style>