potato

src/Login.vue

@@ -8,7 +8,7 @@
 </Form>
 
 <div v-if="userData.authenticated">
-  <h3>Logged in as: {{userData.username}}</h3>
+  <div>Logged in as: {{userData.username}}</div>
   <Form v-slot="$form" @submit="onResetPassword">
     <Password name="password" placeholder="Password" :feedback="false" fluid/>
     <Button type="submit" label="Reset Password" fluid/>
@@ -40,7 +40,7 @@ onMounted(() => {
   })
 })
 
-function onFormSubmit(form) {
+function onFormSubmit(form: any) {
   const username = form.values.username
   const password = form.values.password
 
@@ -49,7 +49,7 @@ function onFormSubmit(form) {
   })
 }
 
-function onResetPassword(form) {
+function onResetPassword(form: any) {
   const username = userData.value.username
   const password = form.values.password
 

src/Router.vue

@@ -1,3 +1,22 @@
 <template>
-  <RouterView />
+  <Toolbar>
+    <template #end>
+      <Button label="User" @click="visible = true"/>
     </template>
+  </Toolbar>
+  <RouterView />
+  <Dialog v-model:visible="visible" modal header="Log In" position="topright">
+    <Login />
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import Toolbar from 'primevue/toolbar'
+import Button from 'primevue/button'
+import Dialog from 'primevue/dialog'
+import Login from './Login.vue'
+
+import { ref } from 'vue'
+
+const visible = ref(false)
+</script>

src/TableManager.vue

@@ -79,7 +79,7 @@ function buildButtonModel(table: any) {
 @import 'primeflex/primeflex.css';
 
 .ActiveTables {
-  margin: 20px;
+  margin-top: 20px;
 
   h2 {
     padding-left: 15px;
@@ -91,7 +91,7 @@ function buildButtonModel(table: any) {
 }
 
 .AllTables {
-  margin: 20px;
+  margin-top: 20px;
 
   h2 {
     padding-left: 15px;