add functions to the auth page

src/pages/auth/UserAuth.vue

@@ -1,22 +1,71 @@
 <template>
   <base-card>
-    <form @submit.prevent="">
+    <form @submit.prevent="submitForm">
       <div class="form-control">
         <label for="email">E-Mail</label>
-        <input type="email" id="email" />
+        <input type="email" id="email" v-model.trim="email" />
       </div>
       <div class="form-control">
         <label for="password">Password</label>
-        <input type="password" id="password" />
+        <input type="password" id="password" v-model.trim="password" />
       </div>
-      <base-button>Login</base-button>
-      <base-button type="button" mode="flat">Signup instead</base-button>
+      <p v-if="!formIsValid">
+        Please enter a valid email and password (min. 6 characters).
+      </p>
+      <base-button>{{ submitButtonCaption }}</base-button>
+      <base-button type="button" mode="flat" @click="switchAuthMode">{{
+        switchModeButtonCaption
+      }}</base-button>
     </form>
   </base-card>
 </template>
 
 <script>
 export default {
+  data() {
+    return {
+      email: '',
+      password: '',
+      formIsValid: true,
+      mode: 'login'
+    };
+  },
+  computed: {
+    submitButtonCaption() {
+      if (this.mode === 'login') {
+        return 'Login';
+      } else {
+        return 'Signup';
+      }
+    },
+    switchModeButtonCaption() {
+      if (this.mode === 'login') {
+        return 'Signup instead';
+      } else {
+        return 'Login instead';
+      }
+    }
+  },
+  methods: {
+    submitForm() {
+      this.formIsValid = true;
+      if (
+        this.email === '' ||
+        !this.email.includes('@') ||
+        this.password.length < 6
+      ) {
+        this.formIsValid = false;
+        return;
+      }
+    },
+    switchAuthMode() {
+      if (this.mode === 'login') {
+        this.mode = 'signup';
+      } else {
+        this.mode = 'login';
+      }
+    }
+  }
 };
 </script>