From 7c92d9d9bcc0fcf7df5501774d800f5fe9b91f0c Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Tue, 9 Jun 2020 02:59:15 +0200
Subject: [PATCH] Add notifications

---
 frontend/components/LoginForm.vue    | 15 +++++++++++----
 frontend/components/RegisterForm.vue | 25 ++++++++++++++++++-------
 frontend/layouts/default.vue         | 15 +++++++++++++++
 frontend/nuxt.config.js              |  2 +-
 frontend/pages/account.vue           |  6 ++++++
 frontend/store/notes.js              |  0
 6 files changed, 51 insertions(+), 12 deletions(-)
 create mode 100644 frontend/store/notes.js

diff --git a/frontend/components/LoginForm.vue b/frontend/components/LoginForm.vue
index 1d41efb..a874da1 100644
--- a/frontend/components/LoginForm.vue
+++ b/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')
+                )
         },
     },
 }
diff --git a/frontend/components/RegisterForm.vue b/frontend/components/RegisterForm.vue
index 0f1111a..da6a556 100644
--- a/frontend/components/RegisterForm.vue
+++ b/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'
+                    )
+                )
         },
     },
 }
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 16ec03c..abb2cb6 100644
--- a/frontend/layouts/default.vue
+++ b/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>
 
diff --git a/frontend/nuxt.config.js b/frontend/nuxt.config.js
index 743a74a..a359c96 100644
--- a/frontend/nuxt.config.js
+++ b/frontend/nuxt.config.js
@@ -94,7 +94,7 @@ export default {
         redirect: {
             login: '/account',
             logout: '/',
-            home: '/',
+            home: '/notes',
         },
         watchLoggedIn: true,
         cookie: {
diff --git a/frontend/pages/account.vue b/frontend/pages/account.vue
index bae338b..14d8a0e 100644
--- a/frontend/pages/account.vue
+++ b/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',
     }),
diff --git a/frontend/store/notes.js b/frontend/store/notes.js
new file mode 100644
index 0000000..e69de29