Enhance authentication forms with v-model binding and submit handling for login and registration

Author: Vianpyro

components/authentication/Login.vue

@@ -1,7 +1,43 @@
 <template>
-    <form id="login-form">
-        <input type="email" id="login-email" name="email" placeholder="Email" required autofocus>
-        <input type="password" id="login-password" name="password" placeholder="Password" required>
+    <form id="login-form" @submit.prevent="login()">
+        <input type="email" id="login-email" name="email" v-model="email" placeholder="Email" required>
+        <input type="password" id="login-password" name="password" v-model="password" placeholder="Password" required>
         <button type="submit">Login</button>
     </form>
 </template>
+
+<script>
+export default {
+    data() {
+        return {
+            email: '',
+            password: ''
+        };
+    },
+    methods: {
+        login() {
+            fetch('http://localhost:5000/auth/login', {
+                method: 'GET',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    email: this.email,
+                    password: this.password,
+                }),
+            })
+            .then(response => {
+                if (response.ok) {
+                    return response.json();
+                } else {
+                    throw new Error('Login failed');
+                }
+            })
+            .then(data => {
+                console.log('Login successful:', data);
+            })
+            .catch(error => {
+                console.error('Error:', error);
+            });
+        }
+    },
+}
+</script>

components/authentication/Register.vue

@@ -1,18 +1,17 @@
 <template>
-    <form id="register-form">
-        <input type="text" id="register-username" name="username" placeholder="Username" required>
-        <input type="email" id="register-email" name="email" placeholder="Email" required>
+    <form id="register-form" @submit.prevent="register">
+        <input type="text" id="register-username" name="username" v-model="username" placeholder="Username" required>
+        <input type="email" id="register-email" name="email" v-model="email" placeholder="Email" required>
 
         <div>
-            <input type="password" id="register-password" name="password" placeholder="Password" required>
+            <input type="password" id="register-password" name="password" v-model="password" placeholder="Password" required>
             <input class="show-password-check" id="show-password-input" type="checkbox" tabindex="-1">
             <label class="show-password" for="show-password-input" title="Show Password"></label>
             <progress id="password-strength" class="hidden"></progress>
         </div>
 
         <div>
-            <input type="password" id="register-password-confirm" name="password-confirm"
-                placeholder="Confirm password" required>
+            <input type="password" id="register-password-confirm" name="password-confirm" v-model="passwordConfirm" placeholder="Confirm password" required>
             <input class="show-password-check" id="show-password-confirm-input" type="checkbox" tabindex="-1">
             <label class="show-password" for="show-password-confirm-input" title="Show Password"></label>
         </div>
@@ -21,6 +20,50 @@
     </form>
 </template>
 
+<script>
+export default {
+    data() {
+        return {
+            username: '',
+            email: '',
+            password: '',
+            passwordConfirm: ''
+        };
+    },
+    methods: {
+        register() {
+            if (this.password !== this.passwordConfirm) {
+                console.error('Passwords do not match');
+                return;
+            }
+
+            fetch('http://localhost:5000/auth/register', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    username: this.username,
+                    email: this.email,
+                    password: this.password
+                }),
+            })
+            .then(response => {
+                if (response.ok) {
+                    return response.json();
+                } else {
+                    throw new Error('Registration failed');
+                }
+            })
+            .then(data => {
+                console.log('Registration successful:', data);
+            })
+            .catch(error => {
+                console.error('Error:', error);
+            });
+        }
+    },
+}
+</script>
+
 <style scoped>
 #password-strength {
     appearance: none;

pages/index.vue

@@ -18,7 +18,7 @@
 // Import RecipeCard component
 import RecipeCard from '@/components/RecipeCard.vue';
 
-// Fetch recipes from your API
+// Fetch recipes from the API
 const { data: recipes, pending, error } = useFetch('http://localhost:5000/recipe/all', {
     params: { language_code: 'fr' },
 });