Login tests and pretty

services/frontend/package.json

@@ -12,6 +12,7 @@
     "lint:fix": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix"
   },
   "dependencies": {
+    "axios": "^1.4.0",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
   },

services/frontend/src/App.vue

@@ -1,11 +1,29 @@
 <template>
-  <div id="app">
-    <header>
-      <h1>PiperChat</h1>
-    </header>
-    <main>
-      <aside class="sidebar"></aside>
-      <div class="content"></div>
-    </main>
+  <div v-if="!userStore.getters.isLoggedIn" class="d-grid gap-2 col-6 mx-auto">
+    <FormLogin />
+  </div>
+  <div v-else class="text-center">
+    <h2>Welcome, {{ userStore.state.name }}</h2>
+    <Counter />
+    <button class="btn btn-secondary" @click="userStore.logout()">
+      Logout
+    </button>
   </div>
 </template>
+
+<script lang="ts">
+import { defineComponent, onMounted } from 'vue'
+
+import userStore from '@/stores/user'
+import FormLogin from '@/components/FormLogin.vue'
+
+
+export default defineComponent({
+  name: 'App',
+  components: { FormLogin },
+  setup() {
+    onMounted(userStore.getUser)
+    return { userStore }
+  }
+})
+</script>

services/frontend/src/components/FormLogin.vue

@@ -0,0 +1,35 @@
+<template>
+  <form @submit.prevent="onSubmit">
+    <div class="form-group my-2">
+      <label>Username</label>
+      <input v-model="form.username" class="form-control" placeholder="Username" required />
+    </div>
+    <div class="form-group my-2">
+      <label>Password</label>
+      <input v-model="form.password" class="form-control" type="password" placeholder="Password" required />
+    </div>
+    <div class="text-danger my-2">{{ userStore.state.error }}</div>
+    <button class="btn btn-success btn-block my-2" type="submit">Login</button>
+  </form>
+</template>
+<script lang="ts">
+import { defineComponent, reactive } from 'vue'
+import userStore from '@/stores/user'
+
+export default defineComponent({
+  setup() {
+    const form = reactive({
+      username: '',
+      password: ''
+    })
+
+    const onSubmit = () => {
+      userStore.login(form.username, form.password)
+      form.username = ''
+      form.password = ''
+    }
+
+    return { form, userStore, onSubmit }
+  }
+})
+</script>

services/frontend/src/router/index.ts

@@ -8,14 +8,6 @@ const router = createRouter({
       path: '/',
       name: 'home',
       component: HomeView
-    },
-    {
-      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('../views/AutenticationView.vue')
     }
   ]
 })

services/frontend/src/stores/user.ts

@@ -0,0 +1,50 @@
+import { computed, reactive } from 'vue'
+import axios from 'axios'
+
+const state = reactive({
+  name: '',
+  username: '',
+
+  error: ''
+})
+
+const getters = reactive({
+  isLoggedIn: computed(() => state.username !== '')
+})
+
+const actions = {
+  async getUser() {
+
+  },
+  async login(username: string, password: string) {
+
+    const data = JSON.stringify({
+      username: username,
+      password: password
+    })
+
+    const config = {
+      method: 'post',
+      maxBodyLength: Infinity,
+      url: 'http://localhost:3000/auth/login',
+      headers: {
+        'Access-Control-Allow-Origin':'*',
+        'Content-Type': 'application/json',
+      },
+      data: data
+    }
+
+    axios
+      .request(config)
+      .then((response) => {
+        console.log(JSON.stringify(response.data))
+      })
+      .catch((error) => {
+        console.log(error)
+      })
+  }
+
+
+}
+
+export default { state, getters, ...actions }

services/users/src/server.ts

@@ -2,7 +2,7 @@ import http from 'http'
 import express from 'express'
 import { serviceRouter } from './routes/router'
 import cookieParser from 'cookie-parser'
-import cors from 'cors';
+import cors from 'cors'
 
 export class UsersServer {
   private port: number
@@ -13,7 +13,7 @@ export class UsersServer {
     this.port = port
     this.app = express()
     this.app.use(cors())
-    this.app.use(express.json());
+    this.app.use(express.json())
     this.server = http.createServer(this.app)
     this.setupMiddleware()
     this.setupRouter()