Merge pull request #117 from HE-Arc/75-comi-frontend-loginlogoutsignup

* basic view for login page and signup page

frontend/src/api_client.js

@@ -145,4 +145,40 @@ export default
         });
         return response.data;
     }
-}
+
+    /**
+     * 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);
+        }
+    }
+}

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>

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

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