Implement auth & register

frontend/components/LoginForm.vue

@@ -7,7 +7,7 @@
                 lazy-validation
             >
                 <v-text-field
-                    v-model="username"
+                    v-model="form.username"
                     :rules="usernameRules"
                     label="Username"
                     required
@@ -15,7 +15,7 @@
                 ></v-text-field>
 
                 <v-text-field
-                    v-model="password"
+                    v-model="form.password"
                     :rules="passwordRules"
                     label="Password"
                     required
@@ -30,7 +30,7 @@
             <v-btn
                 :disabled="!valid"
                 color="success"
-                @click="submit"
+                @click="userLogin"
             >
                 Login
             </v-btn>
@@ -42,17 +42,24 @@
     export default {
         name: "LoginForm",
         methods: {
-            submit() {
+            async userLogin() {
+                try {
+                    const response = await this.$auth.loginWith('local', {data: this.form})
 
+                } catch (err) {
+                    console.log(err)
+                }
             }
         },
         data: () => ({
             valid: false,
-            username: '',
+            form: {
+                username: '',
+                password: ''
+            },
             usernameRules: [
                 v => !!v || 'Name is required',
             ],
-            password: '',
             passwordRules: [
                 v => !!v || 'Password is required',
             ]

frontend/components/RegisterForm.vue

@@ -7,7 +7,7 @@
                 lazy-validation
             >
                 <v-text-field
-                    v-model="username"
+                    v-model="form.username"
                     :rules="usernameRules"
                     label="Username"
                     required
@@ -15,7 +15,7 @@
                 ></v-text-field>
 
                 <v-text-field
-                    v-model="email"
+                    v-model="form.email"
                     :rules="emailRules"
                     label="Email"
                     required
@@ -23,7 +23,7 @@
                 ></v-text-field>
 
                 <v-text-field
-                    v-model="password"
+                    v-model="form.password"
                     :rules="passwordRules"
                     label="Password"
                     required
@@ -48,7 +48,7 @@
             <v-btn
                 :disabled="!valid"
                 color="success"
-                @click="submit"
+                @click="registerUser"
             >
                 Register
             </v-btn>
@@ -60,22 +60,25 @@
     export default {
         name: "RegisterForm",
         methods: {
-            submit() {
+            async registerUser() {
-
+                const data = await this.$axios.post('/user', this.form)
+                console.log(data)
             }
         },
         data: () => ({
             valid: false,
-            username: '',
+            form: {
+                username: '',
+                email: '',
+                password: ''
+            },
             usernameRules: [
                 v => !!v || 'Name is required',
             ],
-            email: '',
             emailRules: [
                 v => !!v || 'Email is required',
                 v => /.+@.+/.test(v) || 'E-mail must be valid',
             ],
-            password: '',
             passwordRules: [
                 v => !!v || 'Password is required',
                 v => v.length >= 6 || 'Password must be longer than 6 characters',

frontend/layouts/default.vue

@@ -6,10 +6,11 @@
             color="primary"
             dark
         >
-            <v-toolbar-title>Notes</v-toolbar-title>
+            <v-btn to="/" text rounded>Simple Notes</v-btn>
             <v-spacer/>
             <v-btn to="/notes" text rounded>My notes</v-btn>
-            <v-btn to="/account" text rounded>Account</v-btn>
+            <v-btn outlined v-if="this.$store.state.auth.loggedIn">Welcome {{this.$store.state.auth.user.username}}</v-btn>
+            <v-btn v-else to="/account" text rounded>Account</v-btn>
         </v-app-bar>
         <v-content>
             <v-container>
@@ -20,9 +21,7 @@
 </template>
 
 <script>
-    export default {
+    export default {}
-
-    }
 </script>
 
 <style>

frontend/layouts/home.vue

@@ -1,33 +0,0 @@
-<template>
-    <v-app>
-        <v-app-bar
-            fixed
-            app
-            color="primary"
-            dark
-            prominent
-        >
-            <v-toolbar-title>Notes</v-toolbar-title>
-            <v-spacer/>
-            <v-btn to="/notes" text rounded>My notes</v-btn>
-            <v-btn to="/account" text rounded>Account</v-btn>
-        </v-app-bar>
-        <v-content>
-            <v-container>
-                <nuxt/>
-            </v-container>
-        </v-content>
-    </v-app>
-</template>
-
-<script>
-    export default {
-
-    }
-</script>
-
-<style>
-    html {
-        overflow-y: auto
-    }
-</style>

frontend/pages/account.vue

@@ -44,6 +44,9 @@
     export default {
         name: "centered",
         layout: "centered",
+        options: {
+            auth: 'guest',
+        },
         data: () => ({
             tab: 0,
             tabs: ["Login", "Register"]

frontend/pages/index.vue

@@ -6,10 +6,10 @@
 
     export default {
         title: 'Home',
-        layout: 'home',
+        options: {
-        data: () => ({
+            auth: false
-
+        },
-        }),
+        data: () => ({}),
         head: () => ({
             title: "Home"
         })