bootstrap add

services/frontend/package.json

@@ -17,7 +17,10 @@
     "serve": "^14.2.1",
     "vue": "^3.3.4",
     "vue-cookies": "^1.8.3",
-    "vue-router": "^4.2.4"
+    "vue-router": "^4.2.4",
+    "bootstrap": "^5.1.3",
+    "bootstrap-icons": "^1.7.2",
+    "bootstrap-vue": "^2.21.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.2",

services/frontend/src/App.vue

@@ -1,3 +1,4 @@
+
 <template>
   <RouterView />
 </template>

services/frontend/src/main.ts

@@ -7,6 +7,9 @@ import piniaPluginPersistedState from 'pinia-plugin-persistedstate'
 import './assets/reset.css'
 import { useUserStore } from './stores/user'
 
+import 'bootstrap/dist/css/bootstrap.css'
+import 'bootstrap-vue/dist/bootstrap-vue.css'
+
 const app = createApp(App)
 const pinia = createPinia()
 app.use(pinia)

services/frontend/src/stores/user.ts

@@ -14,7 +14,6 @@ export const useUserStore = defineStore(
     async function whoami() {
       const response = await axios.get('/users/whoami')
       if (response.status === 200) {
-        console.log(response.data.user)
         const data = await response.data.user
         username.value = data.username
         email.value = data.email
@@ -34,7 +33,7 @@ export const useUserStore = defineStore(
       try {
         const response = await axios.post('/auth/register', parameters)
         if (response.status === 200) {
-          await whoami()
+          console.log('register success')
         }
       } catch (error) {
         console.log(error)

services/frontend/src/views/HomeView.vue

@@ -13,7 +13,7 @@ function logout() {
 <template>
   <h1>HomePage</h1>
 
-  <h2> Hi, {{ userStore.username }} </h2>
+  <h2>Hi, {{ userStore.username }}</h2>
   <p>Your email is : {{ userStore.email }}</p>
   <button @click="logout">Logout</button>
 </template>

services/frontend/src/views/LoginView.vue

@@ -4,6 +4,7 @@ import { ref } from 'vue'
 import router from '../router/index'
 
 const username = ref('')
+const email = ref('')
 const password = ref('')
 
 async function login() {
@@ -19,7 +20,7 @@ async function register() {
   const userStore = useUserStore()
   await userStore.register({
     username: username.value,
-    email: username.value,
+    email: email.value,
     password: password.value
   })
 }
@@ -33,15 +34,18 @@ async function register() {
       <input v-model="username" type="text" id="username" name="username" />
       <label for="password">Password</label>
       <input v-model="password" type="password" id="password" name="password" />
-      <input @click="login" type="submit" name="" id="" />
+      <input @click="login" type="submit" name="" value="LogIn" id="" />
+      <input type="submit" name="" value="Register" id="" />
     </form>
   </div>
 
   <div class="container">
     <h1>Register</h1>
     <form @submit.prevent>
       <label for="username">Username</label>
-      <input v-model="username" type="text" id="username" name="username" />
+      <input v-model="username" type="text" id="email" name="username" />
+      <label for="email">email</label>
+      <input v-model="email" type="text" id="email" name="username" />
       <label for="password">Password</label>
       <input v-model="password" type="password" id="password" name="password" />
       <input @click="register" type="submit" name="" id="" />

services/users/src/assets/login.css

@@ -0,0 +1,27 @@
+h1 {
+    color: red;
+    text-align: center;
+  }
+
+  .container {
+    background-color: darkgray;
+    border: 1px solid black;
+    width: 30%;
+    margin: auto;
+
+    padding: 1rem 2rem;
+    margin-top: 10%;
+  }
+
+  input {
+    display: block;
+    margin-bottom: 1rem;
+    height: 2rem;
+    width: 100%;
+  }
+
+  form {
+    margin: auto;
+    display: flex;
+    flex-direction: column;
+}