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'
+                    )
+                )
         },
     },
 }

frontend/layouts/default.vue

@@ -6,6 +6,9 @@
                 <v-row no-gutters justify="center">
                     <nuxt />
                 </v-row>
+                <v-snackbar v-model="toast" :color="color">{{
+                    msg
+                }}</v-snackbar>
             </v-container>
         </v-content>
     </v-app>
@@ -16,6 +19,18 @@ import Navbar from '@/components/Navbar'
 
 export default {
     components: { Navbar },
+    data: () => ({
+        toast: false,
+        color: '',
+        msg: '',
+    }),
+    mounted() {
+        this.$root.$on('toast', (msg, color) => {
+            this.msg = msg
+            this.color = color ?? ''
+            this.toast = true
+        })
+    },
 }
 </script>
 

frontend/nuxt.config.js

@@ -94,7 +94,7 @@ export default {
         redirect: {
             login: '/account',
             logout: '/',
-            home: '/',
+            home: '/notes',
         },
         watchLoggedIn: true,
         cookie: {

frontend/pages/account.vue

@@ -48,6 +48,12 @@ export default {
         tab: 0,
         tabs: ['Login', 'Register'],
     }),
+    mounted() {
+        this.$root.$on('register::success', () => {
+            this.$root.$emit('toast', 'Welcome', 'success')
+            this.tab = 0
+        })
+    },
     head: () => ({
         title: 'Account',
     }),