feat(login): added login page

Refs: #3648

src/App.vue

@@ -1,22 +1,15 @@
 <template>
-  {{ msg }}
+    <router-view></router-view>
 </template>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { Vue } from 'vue-class-component';
 
-@Options({
+export default class App extends Vue {}
-  props: {
-    msg: String,
-  },
-})
-export default class App extends Vue {
-  msg?: string;
-
-  data(): Record<string, unknown> {
-    return {
-      msg: "Hello Salix!",
-    };
-  }
-}
 </script>
+
+<style lang="scss">
+.body--light {
+    background-color: #ccc;
+}
+</style>

src/quasar-user-options.ts

@@ -2,10 +2,11 @@ import './styles/quasar.scss';
 import lang from 'quasar/lang/es.js';
 import '@quasar/extras/roboto-font/roboto-font.css';
 import '@quasar/extras/material-icons/material-icons.css';
+import { Notify } from 'quasar';
 
 // To be used on app.use(Quasar, { ... })
 export default {
     config: {},
-    plugins: {},
+    plugins: [Notify],
     lang: lang,
 };

src/router/index.ts

@@ -1,26 +1,16 @@
-import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
+import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
-import Home from "../views/Home.vue";
 
 const routes: Array<RouteRecordRaw> = [
-  {
+    {
-    path: "/",
+        path: '/',
-    name: "Home",
+        name: 'Login',
-    component: Home,
+        component: () => import('../views/Login.vue'),
-  },
+    },
-  {
-    path: "/about",
-    name: "About",
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () =>
-      import(/* webpackChunkName: "about" */ "../views/About.vue"),
-  },
 ];
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+    history: createWebHistory(process.env.BASE_URL),
-  routes,
+    routes,
 });
 
 export default router;

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Home.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
-  </div>
-</template>
-
-<script lang="ts">
-import { Options, Vue } from "vue-class-component";
-import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
-
-@Options({
-  components: {
-    HelloWorld,
-  },
-})
-export default class Home extends Vue {}
-</script>

src/views/Login.vue

@@ -0,0 +1,112 @@
+<template>
+    <q-layout>
+        <q-page-container>
+            <q-page>
+                <div id="login">
+                    <q-card class="login q-pa-lg">
+                        <q-toggle v-model="mode" checked-icon="dark_mode" color="blue" unchecked-icon="light_mode" />
+                        <q-form @submit="onSubmit" class="q-gutter-md">
+                            <q-input
+                                filled
+                                v-model="username"
+                                label="Username"
+                                hint="Name and surname"
+                                lazy-rules
+                                :rules="[
+                                    (val: string) => (val && val.length > 0) || 'Please type something',
+                                ]"
+                            />
+                            <q-input
+                                filled
+                                type="password"
+                                v-model="password"
+                                label="Password"
+                                hint="Name and surname"
+                                lazy-rules
+                                :rules="[
+                                    (val: string) => (val && val.length > 0) || 'Please type something',
+                                ]"
+                            />
+                            <q-toggle v-model="keepLogin" label="Keep logged in" />
+
+                            <div>
+                                <q-btn label="login" type="submit" color="primary" />
+                            </div>
+                        </q-form>
+                    </q-card>
+                </div>
+            </q-page>
+        </q-page-container>
+    </q-layout>
+</template>
+
+<script lang="ts">
+import { Vue } from 'vue-class-component';
+import { Dark, useQuasar } from 'quasar';
+import axios from 'axios';
+
+export default class Login extends Vue {
+    username?: string;
+    password?: string;
+    keepLogin?: boolean;
+
+    setup() {
+        return {
+            $q: useQuasar(),
+        };
+    }
+
+    get mode(): boolean {
+        return Dark.isActive;
+    }
+
+    set mode(value: boolean) {
+        Dark.set(value);
+    }
+
+    onSubmit(): void {
+        console.log('username', this.username);
+        console.log('username', this.password);
+
+        axios
+            .post('/api/accounts/login', {
+                user: this.username,
+                password: this.password,
+            })
+            .then(() =>
+                this.$q.notify({
+                    message: 'Login success',
+                    type: 'positive',
+                })
+            )
+            .catch(() =>
+                this.$q.notify({
+                    message: 'Login failed',
+                    type: 'negative',
+                })
+            );
+    }
+
+    data() {
+        return {
+            username: '',
+            password: '',
+            keepLogin: true,
+            Dark: Dark,
+        };
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+#login {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+.login {
+    width: 400px;
+}
+</style>

vue.config.js

@@ -13,4 +13,14 @@ module.exports = {
         },
     },
     transpileDependencies: ['quasar'],
+    devServer: {
+        proxy: {
+            '^/api': {
+                target: 'http://localhost:3000',
+                logLevel: 'debug',
+                changeOrigin: true,
+                secure: false,
+            },
+        },
+    },
 };