setup login stuff

src/Login.vue

@@ -0,0 +1,60 @@
+<template>
+<Form v-if="!userData.authenticated" v-slot="$form" :initialValues @submit="onFormSubmit">
+  <div class="flex flex-column">
+    <InputText name="username" type="text" placeholder="Username" fluid/>
+    <Password name="password" placeholder="Password" :feedback="false" fluid/>
+    <Button type="submit" label="Log In"/>
+  </div>
+</Form>
+
+<div v-if="userData.authenticated">
+  <h2>Logged in as: {{userData.username}}</h2>
+  <Button @click=logout() label="Log Out" fluid/>
+</div>
+</template>
+
+<style>
+</style>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue"
+import { Form } from '@primevue/forms'
+import InputText from 'primevue/inputtext'
+import Button from 'primevue/button'
+import Password from 'primevue/password';
+import axios from 'axios'
+
+const userData = ref({
+  username: "NONE",
+  authenticated: false
+})
+
+onMounted(() => {
+  axios.get('/api/auth/user').then((resp) => {
+    console.log(resp)
+    userData.value = resp.data
+  })
+})
+
+const initialValues = reactive({
+  username: '',
+  password: ''
+})
+
+function onFormSubmit(form) {
+  console.log(form)
+  const username = form.values.username
+  const password = form.values.password
+
+  axios.post('/api/auth/login', {username, password}).then((resp) => {
+    userData.value = resp.data
+  })
+}
+
+function logout() {
+  axios.post('/api/auth/logout').then((resp) => {
+    userData.value = resp.data
+  })
+}
+
+</script>

src/main.ts

@@ -6,6 +6,7 @@ import Router from './Router.vue'
 import TableManager from './TableManager.vue'
 import TableEditor from './TableEditor.vue'
 import CreateTable from './CreateTable.vue'
+import Login from './Login.vue'
 import 'primeflex/primeflex.css'
 import ConfirmationService from 'primevue/confirmationservice'
 
@@ -13,6 +14,7 @@ const routes = [
   { name: 'home', path: '/', component: TableManager },
   { name: 'edit', path: '/edit/:id', component: TableEditor },
   { name: 'new', path: '/new', component: CreateTable },
+  { name: 'login', path: '/login', component: Login}
 ]
 
 const router = createRouter({