Add notifications

frontend/components/LoginForm.vue

@@ -1,6 +1,6 @@
 <template>
     <v-card flat>
-        <v-form ref="form" v-model="valid" lazy-validation>
+        <v-form ref="form" v-model="valid">
             <v-card-text>
                 <v-text-field
                     v-model="form.username"
@@ -52,9 +52,16 @@ export default {
     }),
     methods: {
         userLogin() {
-            this.$auth.loginWith('local', {
-                data: this.form,
-            })
+            this.$auth
+                .loginWith('local', {
+                    data: this.form,
+                })
+                .then((_) =>
+                    this.$root.$emit('toast', 'Welcome back', 'success')
+                )
+                .catch((_) =>
+                    this.$root.$emit('toast', 'Invalid credentials', 'error')
+                )
         },
     },
 }

frontend/components/RegisterForm.vue

@@ -1,6 +1,6 @@
 <template>
     <v-card flat>
-        <v-form ref="form" v-model="valid" lazy-validation>
+        <v-form ref="form" v-model="valid">
             <v-card-text>
                 <v-text-field
                     v-model="form.username"
@@ -57,7 +57,7 @@ import { mdiLock, mdiAccount, mdiAt } from '@mdi/js'
 
 export default {
     name: 'RegisterForm',
-    data: () => ({
+    data: (vm) => ({
         mdiLock,
         mdiAccount,
         mdiAt,
@@ -67,7 +67,10 @@ export default {
             email: '',
             password: '',
         },
-        usernameRules: [(v) => !!v || 'Name is required'],
+        usernameRules: [
+            (v) => !!v || 'Name is required',
+            (v) => /^[a-zA-Z0-9]+$/.test(v) || 'Name must be alphanumeric',
+        ],
         emailRules: [
             (v) => !!v || 'Email is required',
             (v) => /.+@.+/.test(v) || 'E-mail must be valid',
@@ -79,13 +82,21 @@ export default {
         confirm: '',
         confirmRules: [
             (v) => !!v || 'Password is required',
-            // v => confirmEquals() || 'Both passwords must be equals',
+            (v) => v === vm.form.password || 'Both passwords must be equals',
         ],
     }),
     methods: {
-        async registerUser() {
-            const data = await this.$axios.post('/user', this.form)
-            console.log(data)
+        registerUser() {
+            this.$axios
+                .post('/user', this.form)
+                .then((_) => this.$root.$emit('register::success'))
+                .catch((_) =>
+                    this.$root.$emit(
+                        'toast',
+                        'Please choose another username',
+                        'error'
+                    )
+                )
         },
     },
 }