feat(web): working on login style

src/FiscalOS.Web/src/assets/css/main.css

@@ -0,0 +1,71 @@
+@import './reset.css';
+
+@font-face {
+  font-family: 'CaskaydiaCove NFM';
+  src: url('../fonts/CaskaydiaCoveNFM-Regular.eot');
+  src:
+    url('../fonts/CaskaydiaCoveNFM-Regular.eot?#iefix') format('embedded-opentype'),
+    url('../fonts/CaskaydiaCoveNFM-Regular.woff2') format('woff2'),
+    url('../fonts/CaskaydiaCoveNFM-Regular.woff') format('woff'),
+    url('../fonts/CaskaydiaCoveNFM-Regular.svg#CaskaydiaCoveNFM-Regular') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  --palette-lavender: #b39cd0;
+  --palette-rose: #d09c9f;
+  --palette-sage: #b9d09c;
+  --palette-mint: #9cd0cd;
+
+  --neutral-white: #ffffff;
+  --neutral-100: #f5f5f5;
+  --neutral-200: #e5e5e5;
+  --neutral-800: #262626;
+  --neutral-900: #171717;
+  --neutral-black: #000000;
+
+  --bg-app: var(--neutral-white);
+  --bg-surface: var(--neutral-100);
+  --bg-element: var(--neutral-200);
+
+  --text-primary: var(--neutral-black);
+  --text-secondary: var(--neutral-800);
+  --border-subtle: var(--neutral-200);
+
+  --brand-primary: var(--palette-lavender);
+  --brand-secondary: var(--palette-rose);
+  --brand-accent: var(--palette-mint);
+  --state-success: var(--palette-sage);
+  --state-error: var(--palette-rose);
+
+  font-family: 'CaskaydiaCove NFM', monospace;
+  font-size: 16px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-app: var(--neutral-black);
+    --bg-surface: var(--neutral-900);
+    --bg-element: var(--neutral-800);
+
+    --text-primary: var(--neutral-white);
+    --text-secondary: var(--neutral-200);
+    --border-subtle: var(--neutral-800);
+  }
+}
+
+body {
+  color: var(--text-primary);
+  background: var(--bg-app);
+}
+
+html,
+body,
+#app {
+  height: 100%;
+}

src/FiscalOS.Web/src/assets/css/reset.css

@@ -0,0 +1,42 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+input {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+ul {
+  list-style-type: none;
+}
+
+img {
+  max-width: 100%;
+  display: block;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}

src/FiscalOS.Web/src/components/ProtectedLayout.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+
+  </div>
+</template>
+
+<style scoped>
+
+</style>

src/FiscalOS.Web/src/components/PublicLayout.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router';
+
+
+</script>
+
+<template>
+  <main>
+    <RouterView />
+  </main>
+</template>
+
+<style scoped>
+  main {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+</style>

src/FiscalOS.Web/src/main.ts

@@ -1,3 +1,5 @@
+import './assets/css/main.css';
+
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 

src/FiscalOS.Web/src/router/index.ts

@@ -8,6 +8,7 @@ const router = createRouter({
   routes: [
     {
       path: '/public',
+      component: () => import('../components/PublicLayout.vue'),
       redirect: '/public/login',
       beforeEnter: () => {
         const userStore = useUserStore();

src/FiscalOS.Web/src/views/HomeView.vue

@@ -1,7 +1,26 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { useUserStore } from '@/stores/userStore';
+import { useRouter } from 'vue-router';
+
+const { logUserOut } = useUserStore();
+const router = useRouter();
+
+function handleLogout() {
+  // TODO: Also need to log user
+  // out on the server...which is
+  // basically just clearing
+  // refresh token cookie and revoking
+  // it in the database
+  logUserOut();
+  router.push({ path: '/public/login' });
+}
+</script>
 
 <template>
   <h1>Home View</h1>
+  <button type="button" v-on:click="handleLogout">
+    Logout
+  </button>
 </template>
 
 <style scoped></style>

src/FiscalOS.Web/src/views/LoginView.vue

@@ -15,7 +15,6 @@ async function handleSubmit(e: SubmitEvent) {
   );
 
   if (loginResult.err) {
-
     alert(loginResult.val.join('\n'));
     return;
   }
@@ -26,7 +25,6 @@ async function handleSubmit(e: SubmitEvent) {
 </script>
 
 <template>
-  <h1>Login View</h1>
   <form v-on:submit.prevent="handleSubmit">
     <div>
       <label for="username">Username</label>
@@ -42,4 +40,38 @@ async function handleSubmit(e: SubmitEvent) {
   </form>
 </template>
 
-<style scoped></style>
+<style scoped>
+  form,
+  form > div {
+    display: flex;
+    flex-direction: column;
+    background-color: var(--bg-surface);
+  }
+
+  form {
+    gap: 1rem;
+    padding: 1rem;
+    border-radius: 0.25rem;
+  }
+
+  form > div {
+    gap: 0.25rem;
+  }
+
+  form > div label {
+    font-weight: 700;
+  }
+
+  form > div input {
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    border: 1px solid black;
+    background-color: var(--bg-element);
+  }
+
+  form > div button {
+    background-color: var(--brand-primary);
+    padding: 0.5rem 0.25rem;
+    border-radius: 0.25rem;
+  }
+</style>