commit code

2023-01-16 21:37:39 +02:00 · 2023-01-16 21:37:39 +02:00 · e2cf0a1be9
commit e2cf0a1be9
47 changed files with 5510 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.env
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "plugins": [
+    "prettier-plugin-tailwindcss"
+  ]
+}
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,18 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Type Support For `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
--- a/example.json
+++ b/example.json
@ -0,0 +1,171 @@
+[
+  {
+    "index": 0,
+    "name": "Base",
+    "color": "#00ddff",
+    "contents": [
+      {
+        "name": "New Line",
+        "type": "line",
+        "visible": true,
+        "selected": false,
+        "closed": true,
+        "color": "#000",
+        "width": 16,
+        "segments": [
+          {
+            "start": [
+              64,
+              40
+            ],
+            "end": [
+              976,
+              40
+            ]
+          },
+          {
+            "end": [
+              976,
+              672
+            ]
+          },
+          {
+            "end": [
+              64,
+              664
+            ]
+          }
+        ],
+        "render": {}
+      },
+      {
+        "name": "New Line",
+        "type": "line",
+        "visible": true,
+        "selected": false,
+        "closed": false,
+        "color": "#000",
+        "width": 16,
+        "segments": [
+          {
+            "start": [
+              320,
+              664
+            ],
+            "end": [
+              320,
+              400
+            ]
+          },
+          {
+            "end": [
+              64,
+              400
+            ]
+          }
+        ],
+        "render": {}
+      },
+      {
+        "name": "New Line",
+        "type": "line",
+        "visible": true,
+        "selected": false,
+        "closed": false,
+        "color": "#000",
+        "width": 16,
+        "segments": [
+          {
+            "start": [
+              320,
+              400
+            ],
+            "end": [
+              320,
+              40
+            ]
+          }
+        ],
+        "render": {}
+      },
+      {
+        "name": "New Line",
+        "type": "line",
+        "visible": true,
+        "selected": false,
+        "closed": false,
+        "color": "#000",
+        "width": 16,
+        "segments": [
+          {
+            "start": [
+              720,
+              40
+            ],
+            "end": [
+              720,
+              128
+            ]
+          },
+          {
+            "end": [
+              424,
+              400
+            ]
+          },
+          {
+            "end": [
+              328,
+              400
+            ]
+          }
+        ],
+        "render": {}
+      },
+      {
+        "name": "New Line",
+        "type": "line",
+        "visible": true,
+        "selected": false,
+        "closed": false,
+        "color": "#000",
+        "width": 16,
+        "segments": [
+          {
+            "start": [
+              688,
+              672
+            ],
+            "end": [
+              688,
+              584
+            ]
+          },
+          {
+            "end": [
+              880,
+              408
+            ]
+          },
+          {
+            "end": [
+              976,
+              408
+            ]
+          }
+        ],
+        "render": {}
+      }
+    ],
+    "visible": true,
+    "active": true
+  },
+  {
+    "index": 1,
+    "name": "Rooms",
+    "color": "#00ddff",
+    "contents": [],
+    "visible": true,
+    "active": false
+  }
+]
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Home manager</title>
+  </head>
+  <body class="h-full">
+    <div id="app" class="h-full"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,34 @@
+{
+  "name": "homemanager-fe",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@headlessui/vue": "^1.7.7",
+    "@heroicons/vue": "^2.0.13",
+    "@vueuse/core": "^9.10.0",
+    "jwt-decode": "^3.1.2",
+    "pinia": "^2.0.28",
+    "sass": "^1.57.1",
+    "vue": "^3.2.45",
+    "vue-router": "^4.1.6"
+  },
+  "devDependencies": {
+    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/line-clamp": "^0.4.2",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.21",
+    "prettier": "^2.8.3",
+    "prettier-plugin-tailwindcss": "^0.2.1",
+    "tailwindcss": "^3.2.4",
+    "typescript": "^4.9.3",
+    "vite": "^4.0.0",
+    "vue-tsc": "^1.0.11"
+  }
+}
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/vite.svg
+++ b/public/vite.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useUserStore } from './store/user.store';
+const userStore = useUserStore();
+
+onMounted(() => {
+  if (userStore.accessToken && !userStore.isLoggedIn) {
+    userStore.loginFromToken();
+  }
+})
+</script>
+
+<template>
+  <router-view></router-view>
+</template>
+
+<style scoped>
+</style>
--- a/src/assets/vue.svg
+++ b/src/assets/vue.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
--- a/src/components/Dropdown.vue
+++ b/src/components/Dropdown.vue
@ -0,0 +1,54 @@
+<template>
+  <div class="relative" ref="wrapper">
+    <slot name="trigger" :title="title" :open="open" :toggle="toggle">
+      <button type="button" @click="() => toggle()" :aria-expanded="open">
+        <span>{{ title }}</span>
+        <ChevronDownIcon class="ml-2 h-5 w-5" />
+      </button>
+    </slot>
+
+    <Transition
+      name="menu-transition"
+      enter-active-class="transition ease-out duration-200"
+      enter-from-class="opacity-0 translate-y-1"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition ease-in duration-150"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 translate-y-1"
+    >
+      <slot :title="title" :open="open" :toggle="toggle" v-if="open"></slot>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon } from '@heroicons/vue/24/outline';
+import { onMounted, ref } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router';
+
+const open = ref(false);
+const wrapper = ref();
+
+const props = defineProps<{
+  title: string;
+}>();
+
+const toggle = (to?: boolean) => {
+  open.value = to ?? !open.value;
+};
+
+onMounted(() => {
+  const event = (e: MouseEvent) => {
+    if (wrapper.value.contains(e.target as HTMLElement)) {
+      return;
+    }
+    open.value = false;
+  };
+  window.addEventListener('click', event);
+  return () => window.removeEventListener('click', event);
+});
+
+onBeforeRouteLeave(() => {
+  toggle(false);
+});
+</script>
--- a/src/components/StandardLayout.vue
+++ b/src/components/StandardLayout.vue
@ -0,0 +1,19 @@
+<template>
+  <div class="min-h-screen bg-white">
+    <header>
+      <slot name="header">
+        <Header />
+      </slot>
+    </header>
+    <main class="mx-auto min-h-full max-w-7xl p-6">
+      <slot />
+    </main>
+    <footer>
+      <slot name="footer" />
+    </footer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Header from './header/Header.vue';
+</script>
--- a/src/components/header/Building.vue
+++ b/src/components/header/Building.vue
@ -0,0 +1,29 @@
+<template>
+  <RouterLink
+    :to="{ name: 'dashboard' }"
+    class="flex flex-row items-center space-x-2 px-5 py-3 hover:bg-gray-100"
+  >
+    <div
+      class="flex h-10 w-10 flex-row items-center justify-center rounded-full bg-gray-100"
+      :style="{ backgroundColor: building.color }"
+    >
+      <HomeIcon class="h-6 w-6" />
+    </div>
+    <div class="flex flex-1 flex-col">
+      <span class="text-md font-bold">{{ building.displayName }}</span>
+      <span class="text-sm font-light text-gray-800 line-clamp-1">{{
+        building.address
+      }}</span>
+    </div>
+    <ChevronRightIcon class="h-4 w-4" />
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { HomeIcon, ChevronRightIcon } from '@heroicons/vue/24/outline';
+import { BuildingListItem } from '../../interfaces/building.interfaces';
+
+const props = defineProps<{
+  building: BuildingListItem;
+}>();
+</script>
--- a/src/components/header/Dropdown.vue
+++ b/src/components/header/Dropdown.vue
@ -0,0 +1,41 @@
+<template>
+  <Dropdown :title="title">
+    <template #trigger="{ title, open, toggle }">
+      <button
+        type="button"
+        @click="() => toggle()"
+        :aria-expanded="open"
+        :class="[
+          open ? 'text-gray-900' : 'text-gray-500',
+          'group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+        ]"
+      >
+        <span>{{ title }}</span>
+        <ChevronDownIcon class="ml-2 h-5 w-5" />
+      </button>
+    </template>
+
+    <template #default="{ title, open, toggle }">
+      <div
+        class="absolute z-10 -ml-4 mt-3 w-screen max-w-xs transform px-2 sm:px-0 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2"
+      >
+        <div
+          class="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5"
+        >
+          <slot></slot>
+        </div>
+      </div>
+    </template>
+  </Dropdown>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon } from '@heroicons/vue/24/outline';
+import { onMounted, ref } from 'vue';
+import { onBeforeRouteLeave } from 'vue-router';
+import Dropdown from '../Dropdown.vue';
+
+const props = defineProps<{
+  title: string;
+}>();
+</script>
--- a/src/components/header/Header.vue
+++ b/src/components/header/Header.vue
@ -0,0 +1,71 @@
+<template>
+  <div class="relative border-b-2 border-gray-100 bg-white">
+    <div class="mx-auto max-w-7xl px-5">
+      <div
+        class="flex items-center justify-between py-5 md:justify-start md:space-x-10"
+      >
+        <div class="flex w-0 justify-start md:mr-4">
+          <router-link to="/"><HomeIcon class="h-8 w-8" /></router-link>
+        </div>
+
+        <div class="-my-2 -mr-2 md:hidden">
+          <button
+            type="button"
+            class="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
+            aria-expanded="false"
+          >
+            <span class="sr-only">Open menu</span>
+            <Bars3Icon class="h-6 w-6" />
+          </button>
+        </div>
+
+        <nav class="hidden space-x-10 md:flex">
+          <Dropdown title="My Buildings">
+            <div class="relative bg-white pt-4 pb-4 sm:gap-5">
+              <template v-for="building of buildings">
+                <Building :building="building" />
+              </template>
+            </div>
+          </Dropdown>
+          <button
+            type="button"
+            :class="[
+              'text-gray-500',
+              'inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+            ]"
+          >
+            <span>Groups</span>
+          </button>
+        </nav>
+
+        <div class="hidden items-center justify-end md:flex md:flex-1 lg:w-0">
+          <UserPill :user="user" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  HomeIcon,
+  Bars3Icon,
+  ChevronDownIcon,
+  UserIcon,
+} from '@heroicons/vue/24/outline';
+import { storeToRefs } from 'pinia';
+import { useUserStore } from '../../store/user.store';
+import UserPill from './UserPill.vue';
+import Dropdown from './Dropdown.vue';
+import Building from './Building.vue';
+import { useBuildingStore } from '../../store/building.store';
+import { onMounted } from 'vue';
+const userStore = useUserStore();
+const buildingsStore = useBuildingStore();
+const { user } = storeToRefs(userStore);
+const { buildings } = storeToRefs(buildingsStore);
+
+onMounted(() => {
+  buildingsStore.getBuildings();
+});
+</script>
--- a/src/components/header/UserPill.vue
+++ b/src/components/header/UserPill.vue
@ -0,0 +1,24 @@
+<template>
+  <div class="relative">
+    <button
+      class="flex flex-row items-center space-x-2 rounded-full px-1 py-1 pr-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
+    >
+      <div
+        class="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full bg-gray-200"
+      >
+        <UserIcon class="h-5 w-5" />
+      </div>
+      <span>{{ user.name }}</span>
+      <ChevronDownIcon class="ml-2 h-5 w-5" />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ChevronDownIcon, UserIcon } from '@heroicons/vue/24/outline';
+import { User } from '../../interfaces/user.interfaces';
+
+const props = defineProps<{
+  user: User;
+}>();
+</script>
--- a/src/components/house-planner/HousePlanner.vue
+++ b/src/components/house-planner/HousePlanner.vue
@ -0,0 +1,140 @@
+<template>
+  <div class="relative h-full w-full bg-white">
+    <canvas ref="canvas" class="border-none" />
+    <PlannerToolbar>
+      <PlannerTool
+        v-for="toolItem of toolbar"
+        :icon="toolItem.icon"
+        :multiple="!!toolItem.children?.length"
+        :selected="tool === toolItem.tool"
+        @click="selectTool(toolItem.tool, toolItem.subTool)"
+      >
+        <template v-if="toolItem.children?.length">
+          <PlannerTool
+            v-for="subItem of toolItem.children"
+            :icon="subItem.icon"
+            :selected="
+              tool === subItem.tool &&
+              (!subItem.subTool || subItem.subTool === subTool)
+            "
+            @click.stop="selectTool(subItem.tool, subItem.subTool)"
+          />
+        </template>
+      </PlannerTool>
+    </PlannerToolbar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  PencilSquareIcon,
+  PencilIcon,
+  HomeIcon,
+  ArrowsPointingOutIcon,
+  ArrowDownOnSquareIcon,
+} from '@heroicons/vue/24/outline';
+import { useSessionStorage } from '@vueuse/core';
+import { onMounted, ref, shallowRef } from 'vue';
+import { HousePlanner } from '../../modules/house-planner';
+import { Layer, ToolEvent } from '../../modules/house-planner/interfaces';
+import { SubToolType, ToolType } from '../../modules/house-planner/types';
+import { ToolbarTool } from './interfaces/toolbar.interfaces';
+import PlannerTool from './PlannerTool.vue';
+import PlannerToolbar from './PlannerToolbar.vue';
+
+const canvas = ref();
+const module = shallowRef(new HousePlanner());
+const tool = ref<ToolType>('line');
+const subTool = ref<SubToolType>('line');
+const serializedLayers = useSessionStorage<Layer[]>(
+  'roomData',
+  [
+    {
+      index: 0,
+      name: 'Base',
+      color: '#00ddff',
+      contents: [],
+      visible: true,
+      active: true,
+    },
+    {
+      index: 1,
+      name: 'Rooms',
+      color: '#00ddff',
+      contents: [],
+      visible: true,
+      active: false,
+    },
+  ],
+  { writeDefaults: false }
+);
+
+const toolbar: ToolbarTool[] = [
+  {
+    title: 'Move',
+    icon: ArrowsPointingOutIcon,
+    tool: null,
+  },
+  {
+    title: 'Draw',
+    icon: PencilSquareIcon,
+    tool: 'line',
+    subTool: 'line',
+    children: [
+      {
+        title: 'Outlines',
+        icon: PencilIcon,
+        tool: 'line',
+        subTool: 'line',
+      },
+      {
+        title: 'Rooms',
+        icon: HomeIcon,
+        tool: 'line',
+        subTool: 'room',
+      },
+      {
+        title: 'Curves',
+        icon: ArrowDownOnSquareIcon,
+        tool: 'line',
+        subTool: 'curve',
+      },
+    ],
+  },
+];
+
+const selectTool = (newTool: ToolType, newSubTool?: SubToolType) => {
+  if (newTool === tool.value && !newSubTool) {
+    newTool = null;
+  }
+  module.value.manager?.tools.setTool(newTool, newSubTool);
+};
+
+onMounted(() => {
+  const cleanUp = module.value.initialize(
+    canvas.value,
+    JSON.parse(JSON.stringify(serializedLayers.value))
+  );
+
+  const events: Record<string, (e: CustomEvent) => void> = {
+    'hpc:update': (e: CustomEvent) => {
+      serializedLayers.value = module.value.manager!.layers;
+    },
+    'hpc:tool': (e: CustomEvent<ToolEvent>) => {
+      tool.value = e.detail.primary;
+      subTool.value = e.detail.secondary;
+    },
+  };
+
+  Object.keys(events).forEach((event) =>
+    canvas.value.addEventListener(event, events[event])
+  );
+
+  return () => {
+    Object.keys(events).forEach((event) =>
+      canvas.value.removeEventListener(event, events[event])
+    );
+    cleanUp();
+  };
+});
+</script>
--- a/src/components/house-planner/PlannerTool.vue
+++ b/src/components/house-planner/PlannerTool.vue
@ -0,0 +1,56 @@
+<template>
+  <div
+    :class="[
+      selected && multiple
+        ? [
+            'wrapper rounded-full px-1 py-1 shadow-md ring-1 ring-black ring-opacity-5',
+          ]
+        : '',
+      'flex flex-row items-center',
+    ]"
+  >
+    <button
+      :class="[
+        selected && !multiple ? ' bg-purple-400 hover:bg-purple-300' : '',
+        selected && multiple ? ' bg-purple-500 hover:bg-purple-400' : '',
+        !selected ? 'hover:bg-gray-100' : '',
+        'flex h-12 w-12 items-center justify-center rounded-full shadow-md ring-1 ring-black ring-opacity-5',
+      ]"
+    >
+      <component :is="icon" class="h-8 w-8" />
+    </button>
+    <Transition
+      enter-active-class="transition ease-out duration-200"
+      enter-from-class="opacity-0 translate-y-1"
+      enter-to-class="opacity-100 translate-y-0"
+      leave-active-class="transition ease-in duration-150"
+      leave-from-class="opacity-100 translate-y-0"
+      leave-to-class="opacity-0 translate-y-1"
+    >
+      <div v-if="selected && multiple" class="flex flex-row space-x-1">
+        <div class="ml-1 mr-1 h-12 w-1 border-r-2 border-gray-100"></div>
+
+        <slot />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue';
+
+const props = defineProps<{
+  icon: Component;
+  multiple?: boolean;
+  selected?: boolean;
+}>();
+
+const emit = defineEmits();
+</script>
+
+<style scoped lang="scss">
+.wrapper {
+  margin-top: -8px;
+  margin-bottom: -8px;
+}
+</style>
--- a/src/components/house-planner/PlannerToolbar.vue
+++ b/src/components/house-planner/PlannerToolbar.vue
@ -0,0 +1,11 @@
+<template>
+  <div
+    class="absolute bottom-0 z-10 w-screen max-w-xs rounded-lg bg-white lg:left-1/2 lg:ml-0 lg:-translate-x-1/2"
+  >
+    <div
+      class="flex flex-1 flex-row items-center justify-center space-x-2 py-4 px-4 shadow-lg ring-1 ring-black ring-opacity-5"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
--- a/src/components/house-planner/interfaces/toolbar.interfaces.ts
+++ b/src/components/house-planner/interfaces/toolbar.interfaces.ts
@ -0,0 +1,10 @@
+import type { Component } from 'vue';
+import { SubToolType, ToolType } from '../../../modules/house-planner/types';
+
+export interface ToolbarTool {
+  title: string;
+  icon: Component;
+  tool: ToolType;
+  subTool?: SubToolType;
+  children?: ToolbarTool[];
+}
--- a/src/composables/useAccessToken.ts
+++ b/src/composables/useAccessToken.ts
@ -0,0 +1,14 @@
+import { useLocalStorage } from '@vueuse/core';
+import { computed } from 'vue';
+
+export const useAccessToken = () => {
+  const accessToken = useLocalStorage<string>('accessToken', null, {
+    writeDefaults: false,
+  });
+
+  const authHeader = computed(() => ({
+    Authorization: `Bearer ${accessToken.value}`,
+  }));
+
+  return { accessToken, authHeader };
+};
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@ -0,0 +1,4 @@
+const env = import.meta.env;
+
+export const BACKEND_URL =
+  (env.BACKEND_URL as string) || 'http://localhost:3000';
--- a/src/interfaces/building.interfaces.ts
+++ b/src/interfaces/building.interfaces.ts
@ -0,0 +1,8 @@
+export interface BuildingListItem {
+  id: number;
+  displayName: string;
+  address: string;
+  color: string;
+  createdAt: string;
+  updatedAt: string;
+}
--- a/src/interfaces/user.interfaces.ts
+++ b/src/interfaces/user.interfaces.ts
@ -0,0 +1,7 @@
+export interface User {
+  sub: string;
+  name: string;
+  email?: string;
+  picture?: string;
+  color?: string;
+}
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,14 @@
+import { createApp } from 'vue';
+import './style.scss';
+import App from './App.vue';
+import { createPinia } from 'pinia';
+import router from './router';
+
+const pinia = createPinia();
+
+const app = createApp(App);
+
+app.use(pinia);
+app.use(router);
+
+app.mount('#app');
--- a/src/modules/house-planner/canvas.ts
+++ b/src/modules/house-planner/canvas.ts
@ -0,0 +1,223 @@
+import { HousePlannerCanvasGrid } from './grid';
+import { BezierSegment, Layer, Line, LineSegment, Vec2 } from './interfaces';
+import { HousePlannerCanvasTools } from './tools';
+import {
+  rad2deg,
+  vec2Add,
+  vec2AngleFromOrigin,
+  vec2Distance,
+  vec2DivideScalar,
+  vec2PointFromAngle,
+} from './utils';
+
+export class HousePlannerCanvas {
+  public ctx!: CanvasRenderingContext2D;
+  public layers: Layer[] = [];
+  public tools = new HousePlannerCanvasTools(this);
+  public grid = new HousePlannerCanvasGrid(this, 8);
+
+  constructor(public canvas: HTMLCanvasElement) {
+    this.ctx = this.canvas.getContext('2d')!;
+    this.setupEvents();
+  }
+
+  get width() {
+    return this.canvas.width;
+  }
+
+  get height() {
+    return this.canvas.height;
+  }
+
+  addLayer(layer: Layer) {
+    this.layers.push(layer);
+    this.draw();
+  }
+
+  cleanUp() {
+    this.tools.cleanUp();
+    window.removeEventListener('keyup', this.boundKeyUpEvent);
+    window.removeEventListener('keydown', this.boundKeyDownEvent);
+  }
+
+  draw() {
+    this.ctx.clearRect(0, 0, this.width, this.height);
+    this.grid.draw();
+    this.tools.drawHighlights();
+    for (const layer of this.layers) {
+      if (!layer.visible) continue;
+      if (!layer.contents?.length) continue;
+      this.drawLayer(layer);
+    }
+    this.tools.drawControls();
+  }
+
+  makeBezier(segment: BezierSegment, path: Path2D) {
+    const bezier = segment as BezierSegment;
+    const [cp1x, cp1y] = bezier.startControl;
+    const [cp2x, cp2y] = bezier.endControl;
+    const [x, y] = bezier.end;
+    path.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);
+  }
+
+  makeLinePath(line: Line) {
+    const path = new Path2D();
+    const [firstSegment, ...segments] = line.segments;
+    // first segment must have a starting point
+    if (!firstSegment.start) return path;
+    path.moveTo(...firstSegment.start);
+
+    if (line.type === 'curve') {
+      const lineLength = vec2Distance(firstSegment.start, firstSegment.end);
+      const lineAngle = vec2AngleFromOrigin(
+        firstSegment.end,
+        firstSegment.start!
+      );
+      const ninety = lineAngle + Math.PI / 2;
+      path.moveTo(...firstSegment.end);
+      path.arc(
+        firstSegment.start[0],
+        firstSegment.start[1],
+        lineLength,
+        lineAngle,
+        ninety
+      );
+      path.lineTo(...firstSegment.start);
+    } else if ((firstSegment as BezierSegment).startControl) {
+      this.makeBezier(firstSegment as BezierSegment, path);
+    } else {
+      path.lineTo(...firstSegment.end);
+    }
+
+    for (const segment of segments) {
+      if ((segment as BezierSegment).startControl) {
+        this.makeBezier(segment as BezierSegment, path);
+        continue;
+      }
+
+      path.lineTo(...segment.end);
+    }
+    if (line.closed && line.type !== 'curve') {
+      path.closePath();
+    }
+    return path;
+  }
+
+  setupLine(line: Line, overBounds = 0, overrideColor?: string) {
+    if (line.lineDash) {
+      this.ctx.setLineDash(line.lineDash);
+    }
+
+    this.ctx.strokeStyle = overrideColor || line.color || '#000';
+    this.ctx.lineWidth = line.width + overBounds;
+
+    if (line.lineCap) {
+      this.ctx.lineCap = line.lineCap;
+    }
+  }
+
+  isOnLine(line: Line, x: number, y: number, selectError = 16) {
+    let path = line.render || this.makeLinePath(line);
+    this.setupLine(line, selectError);
+    return this.ctx.isPointInStroke(path, x, y);
+  }
+
+  isOnSegment(
+    line: Line,
+    segment: LineSegment,
+    lastPoint: Vec2,
+    x: number,
+    y: number,
+    selectError = 16
+  ) {
+    const fakePath = this.makeLinePath({
+      ...line,
+      closed: false,
+      segments: [{ ...segment, start: lastPoint }],
+    });
+    this.setupLine(line, selectError);
+    return this.ctx.isPointInStroke(fakePath, x, y);
+  }
+
+  private keyDownEvent(e: KeyboardEvent) {
+    if (e.target !== document.body && e.target != null) return;
+    e.preventDefault();
+    this.tools.onKeyDown(e);
+  }
+  private boundKeyDownEvent = this.keyDownEvent.bind(this);
+  private keyUpEvent(e: KeyboardEvent) {
+    if (e.target !== document.body && e.target != null) return;
+    e.preventDefault();
+    this.tools.onKeyUp(e);
+  }
+  private boundKeyUpEvent = this.keyUpEvent.bind(this);
+
+  private setupEvents() {
+    window.addEventListener('keyup', this.boundKeyUpEvent);
+    window.addEventListener('keydown', this.boundKeyDownEvent);
+
+    this.canvas.addEventListener('mousemove', (e) => this.tools.onMouseMove(e));
+    this.canvas.addEventListener('mousedown', (e) => this.tools.onMouseDown(e));
+    this.canvas.addEventListener('mouseup', (e) => this.tools.onMouseUp(e));
+
+    this.canvas.addEventListener('touchmove', (e) => this.tools.onTouchMove(e));
+    this.canvas.addEventListener('touchstart', (e) =>
+      this.tools.onTouchStart(e)
+    );
+    this.canvas.addEventListener('touchend', (e) => this.tools.onTouchEnd(e));
+    this.canvas.addEventListener('wheel', (e) => this.tools.onMouseWheel(e));
+
+    this.canvas.addEventListener('pointerleave', () =>
+      this.tools.onPointerLeave()
+    );
+  }
+
+  private drawRoomText(line: Line) {
+    const centerPoint = vec2DivideScalar(
+      line.segments.reduce<Vec2 | null>((prev, curr) => {
+        if (!prev) {
+          if (curr.start) {
+            return vec2Add(curr.start, curr.end);
+          }
+          return curr.end;
+        }
+
+        let preadd = vec2Add(prev, curr.end);
+        if (curr.start) {
+          preadd = vec2Add(curr.start, preadd);
+        }
+        return preadd;
+      }, null) as Vec2,
+      line.segments.length + 1
+    );
+    this.ctx.font = '16px Arial';
+    this.ctx.fillStyle = line.color;
+    const { width } = this.ctx.measureText(line.name);
+    this.ctx.fillText(
+      line.name,
+      centerPoint[0] - width / 2,
+      centerPoint[1] - 8
+    );
+  }
+
+  private drawLine(line: Line) {
+    const path = this.makeLinePath(line);
+    line.render = path;
+    this.setupLine(line);
+    this.ctx.stroke(path);
+    if (line.type === 'room') {
+      this.drawRoomText(line);
+    }
+  }
+
+  private drawLayer(layer: Layer) {
+    for (const item of layer.contents) {
+      if (!item.visible) continue;
+      const line = item as Line;
+      if (line.segments) {
+        this.drawLine(line);
+        continue;
+      }
+    }
+  }
+}
--- a/src/modules/house-planner/grid.ts
+++ b/src/modules/house-planner/grid.ts
@ -0,0 +1,36 @@
+import type { HousePlannerCanvas } from './canvas';
+
+export class HousePlannerCanvasGrid {
+  constructor(
+    public manager: HousePlannerCanvas,
+    public gridSnap = 8,
+    public edgeOffset = 8 * 4
+  ) {}
+
+  setGridSize(size: number) {
+    this.gridSnap = size;
+  }
+
+  draw() {
+    const cellsPerWidth = Math.round(
+      (this.manager.width - this.edgeOffset) / this.gridSnap
+    );
+    const cellsPerHeight = Math.round(
+      (this.manager.height - this.edgeOffset) / this.gridSnap
+    );
+    const path = new Path2D();
+    for (let x = 0; x < cellsPerWidth - 3; x++) {
+      const absX = this.edgeOffset + x * this.gridSnap;
+      path.moveTo(absX, this.edgeOffset);
+      path.lineTo(absX, cellsPerHeight * this.gridSnap);
+    }
+    for (let y = 0; y < cellsPerHeight - 3; y++) {
+      const absY = this.edgeOffset + y * this.gridSnap;
+      path.moveTo(this.edgeOffset, absY);
+      path.lineTo(cellsPerWidth * this.gridSnap, absY);
+    }
+    this.manager.ctx.strokeStyle = '#ddd';
+    this.manager.ctx.lineWidth = 1;
+    this.manager.ctx.stroke(path);
+  }
+}
--- a/src/modules/house-planner/history.ts
+++ b/src/modules/house-planner/history.ts
@ -0,0 +1,52 @@
+import { History } from './interfaces';
+
+export class HousePlannerCanvasHistory {
+  private history: History<unknown>[][] = [];
+  private unhistory: History<unknown>[][] = [];
+  private lastCommandWasUndo = false;
+
+  constructor() {}
+
+  appendToHistory(changes: History<any>[]) {
+    this.history.push(changes);
+    this.unhistory.length = 0;
+  }
+
+  undo() {
+    const lastChanges = this.history.pop();
+    if (!lastChanges) return;
+    if (!this.lastCommandWasUndo && this.unhistory.length) {
+      this.unhistory.length = 0;
+    }
+    this.lastCommandWasUndo = true;
+
+    let redo = [];
+    for (const change of lastChanges) {
+      if (!change.object) continue;
+      const preChange = (change.object as any)[change.property];
+      (change.object as any)[change.property] = change.value;
+      redo.push({
+        ...change,
+        value: preChange as any,
+      });
+    }
+    this.unhistory.push(redo);
+  }
+
+  redo() {
+    const lastChanges = this.unhistory.pop();
+    if (!lastChanges) return;
+    this.lastCommandWasUndo = false;
+    let undo = [];
+    for (const change of lastChanges) {
+      if (!change.object) continue;
+      const preChange = (change.object as any)[change.property];
+      (change.object as any)[change.property] = change.value;
+      undo.push({
+        ...change,
+        value: preChange as any,
+      });
+    }
+    this.history.push(undo);
+  }
+}
--- a/src/modules/house-planner/index.ts
+++ b/src/modules/house-planner/index.ts
@ -0,0 +1,37 @@
+import { HousePlannerCanvas } from './canvas';
+import { Layer } from './interfaces';
+
+export class HousePlanner {
+  public canvas!: HTMLCanvasElement;
+  public manager?: HousePlannerCanvas;
+
+  initialize(canvas: HTMLCanvasElement, initialData: Layer[]) {
+    this.canvas = canvas;
+    this.resizeCanvas();
+    this.addResizeEvents();
+    this.manager = new HousePlannerCanvas(canvas);
+    this.manager.layers = initialData;
+    this.manager.tools.selectLayer(
+      initialData[initialData.findIndex((layer) => layer.active)]
+    );
+    this.manager.draw();
+    return () => this.cleanUp();
+  }
+
+  cleanUp() {
+    window.removeEventListener('resize', this.boundResizeEvent);
+    this.manager?.cleanUp();
+  }
+
+  private addResizeEvents() {
+    window.addEventListener('resize', this.boundResizeEvent);
+  }
+
+  resizeCanvas() {
+    this.canvas.width = this.canvas.parentElement!.clientWidth;
+    this.canvas.height = this.canvas.parentElement!.clientHeight;
+    this.manager?.draw();
+  }
+
+  private boundResizeEvent = this.resizeCanvas.bind(this);
+}
--- a/src/modules/house-planner/interfaces.ts
+++ b/src/modules/house-planner/interfaces.ts
@ -0,0 +1,54 @@
+import { SubToolType, ToolType } from './types';
+
+export type Vec2 = [number, number];
+export interface LineSegment {
+  start?: Vec2;
+  end: Vec2;
+}
+
+export interface BezierSegment extends LineSegment {
+  startControl: Vec2;
+  endControl: Vec2;
+}
+
+export interface LayerObject {
+  name: string;
+  visible: boolean;
+  selected: boolean;
+  type: 'line' | 'room' | 'curve' | 'object';
+}
+
+export interface Line extends LayerObject {
+  segments: LineSegment[];
+  width: number;
+  color: string;
+  render?: Path2D;
+  lineCap?: CanvasLineCap;
+  closed?: boolean;
+  lineDash?: number[];
+}
+
+export interface Layer {
+  index: number;
+  contents: LayerObject[];
+  name: string;
+  color: string;
+  visible: boolean;
+  active: boolean;
+}
+
+export interface History<T> {
+  object: T;
+  property: keyof T;
+  value: unknown;
+}
+
+export interface UpdateEvent {
+  event: string;
+  object?: LayerObject;
+}
+
+export interface ToolEvent {
+  primary: ToolType;
+  secondary: SubToolType;
+}
--- a/src/modules/house-planner/tools.ts
+++ b/src/modules/house-planner/tools.ts
@ -0,0 +1,739 @@
+import type { HousePlannerCanvas } from './canvas';
+import { HousePlannerCanvasHistory } from './history';
+import {
+  BezierSegment,
+  History,
+  Layer,
+  LayerObject,
+  Line,
+  LineSegment,
+  ToolEvent,
+  Vec2,
+} from './interfaces';
+import { ToolType, SubToolType, BezierControl, LineControl } from './types';
+import {
+  vec2Add,
+  vec2Equals,
+  vec2InCircle,
+  vec2Inverse,
+  vec2Snap,
+  vec2Sub,
+} from './utils';
+
+export class HousePlannerCanvasTools {
+  public selectedLayer?: Layer;
+  public selectedObjects: LayerObject[] = [];
+  public mousePosition: Vec2 = [0, 0];
+  public mousePositionSnapped: Vec2 = [0, 0];
+  public gridSnap = true;
+  public gridSnapScale = 8;
+  public tool: ToolType = 'line';
+  public subTool: SubToolType = 'line';
+  public history = new HousePlannerCanvasHistory();
+  public lastStrokeWidth = 16;
+  public lastColor = '#000';
+  private dragging = false;
+  private pinching = false;
+  private lastPinchLength = 0;
+  private moved = false;
+  private holdShift = false;
+  private selectError = 16;
+  private bezierControls: BezierSegment[] = [];
+  private lineControls: LineSegment[] = [];
+  private handlingBezier: BezierControl | null = null;
+  private handlingLine: LineControl | null = null;
+  private drawingLine: Line | null = null;
+  private clickedOn: LayerObject | null = null;
+  private movingObject = false;
+
+  constructor(public manager: HousePlannerCanvas) {}
+
+  get canvas() {
+    return this.manager.canvas;
+  }
+
+  get ctx() {
+    return this.manager.ctx;
+  }
+
+  isSelected(object: LayerObject) {
+    return this.selectedObjects.indexOf(object) > -1;
+  }
+
+  selectLayer(layer: Layer) {
+    if (this.selectedLayer) {
+      this.selectedLayer.active = false;
+      for (const item of this.selectedLayer.contents) {
+        item.selected = false;
+      }
+      this.selectedObjects.length = 0;
+    }
+    this.selectedLayer = layer;
+    this.selectedLayer.active = true;
+  }
+
+  selectObject(object?: LayerObject | null, add = false) {
+    if (!object) {
+      if (!add) {
+        this.selectedObjects.forEach((object) => {
+          object.selected = false;
+        });
+        this.selectedObjects.length = 0;
+      }
+      this.manager.draw();
+      return;
+    }
+
+    if (this.selectedObjects.includes(object)) {
+      // Unselect in multi-select
+      if (add) {
+        const foundAt = this.selectedObjects.indexOf(object);
+        object.selected = false;
+        this.selectedObjects.splice(foundAt, 1);
+        this.manager.draw();
+      }
+      return;
+    }
+
+    // Select in multi-select
+    if (add) {
+      object.selected = true;
+      this.selectedObjects.push(object);
+      this.manager.draw();
+      return;
+    }
+
+    this.selectedObjects.forEach((obj) => {
+      obj.selected = false;
+    });
+
+    object.selected = true;
+
+    this.selectedObjects = [object];
+    this.manager.draw();
+  }
+
+  getMousedObject() {
+    if (!this.selectedLayer?.visible) return null;
+    const [x, y] = this.mousePosition;
+    for (const object of this.selectedLayer.contents) {
+      if ((object as Line).segments) {
+        const moused = this.manager.isOnLine(
+          object as Line,
+          x,
+          y,
+          this.selectError
+        );
+        if (moused) return object;
+      }
+      // TODO: other kinds of objects
+    }
+    return null;
+  }
+
+  getMousedLineSegment(line: Line) {
+    if (!this.selectedLayer?.visible) return null;
+    const [x, y] = this.mousePosition;
+    let lastSegment = null;
+    for (const segment of line.segments) {
+      const lastPoint = lastSegment ? lastSegment.end : (segment.start as Vec2);
+      if (
+        this.manager.isOnSegment(
+          line,
+          segment,
+          lastPoint,
+          x,
+          y,
+          this.selectError
+        )
+      ) {
+        return segment;
+      }
+      lastSegment = segment;
+    }
+    return null;
+  }
+
+  drawHighlights() {
+    for (const object of this.selectedObjects) {
+      const line = object as Line;
+      if (line.segments) {
+        const path = this.manager.makeLinePath(line);
+        this.manager.setupLine(line, this.selectError, '#00ddff55');
+        this.ctx.stroke(path);
+      }
+      // TODO: other kinds of objects
+    }
+  }
+
+  drawBezierControls(bezier: BezierSegment, previousEnd: Vec2) {
+    this.bezierControls.push(bezier);
+    const [cp1x, cp1y] = bezier.startControl;
+    const [cp2x, cp2y] = bezier.endControl;
+    const [endx, endy] = bezier.end;
+    const [prevx, prevy] = previousEnd;
+    this.ctx.fillStyle = '#00ddffaa';
+    this.ctx.strokeStyle = '#00ddffaa';
+    this.ctx.lineWidth = 2;
+    this.ctx.beginPath();
+    this.ctx.arc(cp1x, cp1y, this.selectError / 2, 0, 2 * Math.PI);
+    this.ctx.fill();
+
+    this.ctx.beginPath();
+    this.ctx.arc(cp2x, cp2y, this.selectError / 2, 0, 2 * Math.PI);
+    this.ctx.fill();
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(cp1x, cp1y);
+    this.ctx.lineTo(prevx, prevy);
+    this.ctx.stroke();
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(cp2x, cp2y);
+    this.ctx.lineTo(endx, endy);
+    this.ctx.stroke();
+  }
+
+  drawLineControls(line: LineSegment, previousEnd: Vec2) {
+    this.lineControls.push(line);
+    const [endx, endy] = line.end;
+    this.ctx.fillStyle = '#00ddffaa';
+
+    this.ctx.beginPath();
+    this.ctx.arc(endx, endy, this.selectError / 2, 0, 2 * Math.PI);
+    this.ctx.fill();
+
+    if (line.start) {
+      const [startx, starty] = line.start;
+      this.ctx.beginPath();
+      this.ctx.arc(startx, starty, this.selectError / 2, 0, 2 * Math.PI);
+      this.ctx.fill();
+    }
+  }
+
+  drawControls() {
+    this.bezierControls.length = 0;
+    this.lineControls.length = 0;
+    for (const object of this.selectedObjects) {
+      const line = object as Line;
+      if (line.segments && line.render) {
+        let lastSegment = null;
+        for (const segment of line.segments) {
+          const bezier = segment as BezierSegment;
+          const previousPoint = lastSegment ? lastSegment.end : segment.start!;
+          if (bezier.startControl && bezier.endControl) {
+            this.drawBezierControls(bezier, previousPoint);
+          }
+          this.drawLineControls(segment, previousPoint);
+          lastSegment = segment;
+        }
+      }
+      // TODO: other kinds of objects
+    }
+
+    if (this.tool === 'line') {
+      if (this.selectedObjects.length) return;
+      const [mx, my] = this.mousePositionSnapped;
+      this.ctx.fillStyle = '#00ddffaa';
+      this.ctx.beginPath();
+      this.ctx.arc(mx, my, this.selectError / 2, 0, 2 * Math.PI);
+      this.ctx.fill();
+    }
+  }
+
+  cleanUp() {}
+
+  setTool(tool: typeof this.tool, subTool?: typeof this.subTool) {
+    this.tool = tool;
+    if (subTool !== undefined) this.subTool = subTool;
+    this.canvas.dispatchEvent(
+      new CustomEvent<ToolEvent>('hpc:tool', {
+        detail: { primary: this.tool, secondary: this.subTool },
+      })
+    );
+  }
+
+  onMouseMove(e: MouseEvent) {
+    this.dragEvent(e.clientX, e.clientY);
+  }
+  onMouseDown(e: MouseEvent) {
+    this.mousePosition = [e.clientX, e.clientY];
+    this.mousePositionSnapped = this.gridSnap
+      ? vec2Snap(this.mousePosition, this.gridSnapScale)
+      : this.mousePosition;
+    this.dragging = true;
+    this.moved = false;
+
+    this.pointerDown();
+  }
+  onMouseUp(e: MouseEvent) {
+    this.dragging = false;
+    this.pointerUp();
+  }
+
+  onTouchMove(ev: TouchEvent) {
+    ev.preventDefault();
+
+    if (ev.touches.length === 2 && this.pinching) {
+      const pinchLength = Math.hypot(
+        ev.touches[0].pageX - ev.touches[1].pageX,
+        ev.touches[0].pageY - ev.touches[1].pageY
+      );
+
+      // TODO: zoom
+      // if (this.lastPinchLength) {
+      //   const delta = pinchLength / this.lastPinchLength;
+      //   const scaleX = (ev.touches[0].clientX - this._posx) / this._zoom;
+      //   const scaleY = (ev.touches[0].clientY - this._posy) / this._zoom;
+
+      //   delta > 0 ? (this._zoom *= delta) : (this._zoom /= delta);
+      //   this._zoom = clamp(this._zoom, 1, 100);
+
+      //   this._posx = ev.touches[0].clientX - scaleX * this._zoom;
+      //   this._posy = ev.touches[0].clientY - scaleY * this._zoom;
+      // }
+      // this.lastPinchLength = pinchLength;
+    }
+
+    this.dragEvent(ev.touches[0].clientX, ev.touches[0].clientY);
+  }
+
+  onTouchStart(e: TouchEvent) {
+    e.preventDefault();
+    const touch = e.touches[0] || e.changedTouches[0];
+    this.mousePosition = [touch.pageX, touch.pageY];
+    this.mousePositionSnapped = this.gridSnap
+      ? vec2Snap(this.mousePosition, this.gridSnapScale)
+      : this.mousePosition;
+    this.dragging = true;
+    this.moved = false;
+
+    if (e.touches.length === 2) {
+      this.pinching = true;
+    }
+
+    this.pointerDown();
+  }
+  onTouchEnd(e: TouchEvent) {
+    this.pinching = false;
+    this.lastPinchLength = 0;
+
+    if (!e.touches?.length) {
+      this.dragging = false;
+    }
+
+    this.pointerUp();
+  }
+
+  onMouseWheel(e: WheelEvent) {
+    // TODO: zoom
+    // ev.preventDefault();
+    // this._mousex = ev.clientX;
+    // this._mousey = ev.clientY;
+    // const scaleX = (ev.clientX - this._posx) / this._zoom;
+    // const scaleY = (ev.clientY - this._posy) / this._zoom;
+    // ev.deltaY < 0 ? (this._zoom *= 1.2) : (this._zoom /= 1.2);
+    // this._zoom = clamp(this._zoom, this._minZoom, this._maxZoom);
+    // this._posx = ev.clientX - scaleX * this._zoom;
+    // this._posy = ev.clientY - scaleY * this._zoom;
+    // const realSize = this._zoom * this._size;
+    // this._posx = clamp(this._posx, this._cursorx - realSize, this._cursorx);
+    // this._posy = clamp(this._posy, this._cursory - realSize, this._cursory);
+  }
+  onPointerLeave() {
+    this.dragging = false;
+  }
+
+  onKeyDown(e: KeyboardEvent) {
+    if (e.key === 'z' && e.ctrlKey) {
+      this.history.undo();
+      this.manager.draw();
+      this.canvas.dispatchEvent(
+        new CustomEvent('hpc:undo', {
+          detail: 'keyboard',
+        })
+      );
+      this.canvas.dispatchEvent(
+        new CustomEvent('hpc:update', {
+          detail: {
+            event: 'undo',
+          },
+        })
+      );
+    }
+
+    if (e.key === 'y' && e.ctrlKey) {
+      this.history.redo();
+      this.manager.draw();
+      this.canvas.dispatchEvent(
+        new CustomEvent('hpc:redo', {
+          detail: 'keyboard',
+        })
+      );
+      this.canvas.dispatchEvent(
+        new CustomEvent('hpc:update', {
+          detail: { event: 'redo' },
+        })
+      );
+    }
+
+    if (e.key === 'Shift') {
+      this.holdShift = true;
+    }
+  }
+
+  onKeyUp(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      if (this.drawingLine && this.selectedLayer) {
+        if (this.subTool === 'room') {
+          this.drawingLine.closed = true;
+        }
+        this.drawingLine.segments.splice(
+          this.drawingLine.segments.length - 1,
+          1
+        );
+        this.history.appendToHistory([
+          {
+            object: this.selectedLayer,
+            property: 'contents',
+            value: [...this.selectedLayer.contents].filter(
+              (item) => item !== this.drawingLine
+            ),
+          } as History<typeof this.selectedLayer>,
+          {
+            object: this,
+            property: 'selectedObjects',
+            value: [],
+          },
+        ]);
+        this.canvas.dispatchEvent(
+          new CustomEvent('hpc:newobject', {
+            detail: this.drawingLine,
+          })
+        );
+        this.canvas.dispatchEvent(
+          new CustomEvent('hpc:update', {
+            detail: { event: 'newobject', object: this.drawingLine },
+          })
+        );
+        this.drawingLine = null;
+        this.manager.draw();
+      }
+    }
+
+    if (e.key === 'Escape') {
+      if (this.selectedObjects.length === 0 && this.tool && !this.drawingLine) {
+        this.setTool(null);
+      }
+
+      this.selectObject(null);
+
+      if (this.drawingLine && this.selectedLayer) {
+        const indexOf = this.selectedLayer.contents.indexOf(this.drawingLine);
+        if (indexOf > -1) {
+          this.selectedLayer.contents.splice(indexOf, 1);
+        }
+        this.drawingLine = null;
+        this.manager.draw();
+      }
+    }
+
+    if (e.key === 'Shift') {
+      this.holdShift = false;
+    }
+
+    if (e.key === 'l') {
+      this.setTool('line');
+    }
+
+    if (e.key === 'Delete' || e.key === 'x') {
+      this.deleteSelection();
+    }
+  }
+
+  deleteSelection() {
+    if (!this.selectedObjects.length || !this.selectedLayer) return;
+    this.history.appendToHistory([
+      {
+        object: this.selectedLayer,
+        property: 'contents',
+        value: [...this.selectedLayer.contents],
+      } as History<typeof this.selectedLayer>,
+    ]);
+
+    this.selectedLayer.contents = this.selectedLayer.contents.filter(
+      (item) => this.selectedObjects.indexOf(item) === -1
+    );
+
+    this.selectedObjects.length = 0;
+    this.manager.draw();
+    this.canvas.dispatchEvent(
+      new CustomEvent('hpc:update', {
+        detail: { event: 'delete' },
+      })
+    );
+  }
+
+  private grabbedBezierControl() {
+    let clickedOnControl: BezierControl | null = null;
+    for (const bezier of this.bezierControls) {
+      for (const control of ['startControl', 'endControl']) {
+        const asType = control as 'startControl' | 'endControl';
+        if (
+          vec2InCircle(bezier[asType], this.mousePosition, this.selectError / 2)
+        ) {
+          clickedOnControl = [bezier, asType, bezier[asType]];
+        }
+      }
+    }
+    return clickedOnControl;
+  }
+
+  private grabbedLineControl() {
+    let clickedOnControl: LineControl | null = null;
+    for (const line of this.lineControls) {
+      for (const control of ['start', 'end']) {
+        const asType = control as 'start' | 'end';
+        if (
+          line[asType] &&
+          vec2InCircle(
+            line[asType] as Vec2,
+            this.mousePosition,
+            this.selectError / 2
+          )
+        ) {
+          clickedOnControl = [line, asType, line[asType] as Vec2];
+        }
+      }
+    }
+    return clickedOnControl;
+  }
+
+  private translate(offset: Vec2) {
+    for (const object of this.selectedObjects) {
+      if ((object as Line).segments) {
+        for (const segment of (object as Line).segments) {
+          if ((segment as BezierSegment).startControl) {
+            const bezier = segment as BezierSegment;
+            bezier.startControl = vec2Add(bezier.startControl, offset);
+            bezier.endControl = vec2Add(bezier.endControl, offset);
+          }
+
+          if (segment.start) {
+            segment.start = vec2Add(segment.start, offset);
+          }
+
+          segment.end = vec2Add(segment.end, offset);
+        }
+      }
+    }
+    this.manager.draw();
+  }
+
+  private pointerDown() {
+    if (this.drawingLine) return;
+    this.clickedOn = this.getMousedObject();
+    const bezierControl = this.grabbedBezierControl();
+    const lineControl = this.grabbedLineControl();
+    if (bezierControl) {
+      this.handlingBezier = bezierControl;
+    } else if (lineControl) {
+      this.handlingLine = lineControl;
+    }
+  }
+
+  private pointerUp() {
+    if (!this.moved && !this.handlingBezier && !this.handlingLine) {
+      if (this.tool === 'line') {
+        this.startLine();
+      } else if (!this.drawingLine) {
+        this.pick();
+      }
+    }
+
+    if (this.handlingBezier) {
+      this.history.appendToHistory([
+        {
+          object: this.handlingBezier[0],
+          property: this.handlingBezier[1],
+          value: this.handlingBezier[2],
+        },
+      ]);
+    }
+
+    if (this.handlingLine) {
+      this.history.appendToHistory([
+        {
+          object: this.handlingLine[0],
+          property: this.handlingLine[1],
+          value: this.handlingLine[2],
+        },
+      ]);
+    }
+
+    if (this.movingObject || this.handlingLine || this.handlingBezier) {
+      this.canvas.dispatchEvent(
+        new CustomEvent('hpc:update', {
+          detail: {
+            event: 'line-move',
+            object: this.handlingLine || this.handlingBezier || this.clickedOn,
+          },
+        })
+      );
+    }
+
+    this.handlingBezier = null;
+    this.handlingLine = null;
+    this.clickedOn = null;
+    this.movingObject = false;
+  }
+
+  private startLine() {
+    if (!this.selectedLayer?.visible) return;
+    if (this.drawingLine) {
+      if (
+        vec2Equals(
+          this.mousePositionSnapped,
+          this.drawingLine.segments[0].start as Vec2
+        ) ||
+        this.drawingLine.type === 'curve'
+      ) {
+        if (this.drawingLine.type !== 'curve') {
+          this.drawingLine.segments.splice(
+            this.drawingLine.segments.length - 1,
+            1
+          );
+        }
+        this.history.appendToHistory([
+          {
+            object: this.selectedLayer,
+            property: 'contents',
+            value: [...this.selectedLayer.contents].filter(
+              (item) => item !== this.drawingLine
+            ),
+          } as History<typeof this.selectedLayer>,
+          {
+            object: this,
+            property: 'selectedObjects',
+            value: [],
+          },
+        ]);
+        this.drawingLine.closed = true;
+        this.canvas.dispatchEvent(
+          new CustomEvent('hpc:newobject', {
+            detail: this.drawingLine,
+          })
+        );
+        this.canvas.dispatchEvent(
+          new CustomEvent('hpc:update', {
+            detail: { event: 'newobject', object: this.drawingLine },
+          })
+        );
+        this.drawingLine = null;
+        return;
+      }
+
+      this.drawingLine.segments.push({
+        end: [...this.mousePositionSnapped],
+      });
+      return;
+    }
+
+    const newLineObject: Line = {
+      name: 'New Line',
+      type: this.subTool!,
+      visible: true,
+      selected: false,
+      closed: false,
+      color: this.lastColor,
+      width: this.subTool === 'curve' ? 2 : this.lastStrokeWidth,
+      segments: [
+        {
+          start: [...this.mousePositionSnapped],
+          end: [...this.mousePositionSnapped],
+        },
+      ],
+    };
+    this.drawingLine = newLineObject;
+    this.selectedLayer.contents.unshift(newLineObject);
+    this.selectObject(this.drawingLine);
+    this.canvas.dispatchEvent(
+      new CustomEvent('hpc:startdrawing', {
+        detail: newLineObject,
+      })
+    );
+  }
+
+  private pick() {
+    if (this.clickedOn && this.isSelected(this.clickedOn)) {
+      // Pick line segment
+      if ((this.clickedOn as Line).segments) {
+        const segment = this.getMousedLineSegment(this.clickedOn as Line);
+      }
+    }
+    this.selectObject(this.clickedOn, this.holdShift);
+  }
+
+  private dragEvent(x: number, y: number) {
+    this.moved = true;
+
+    const currentPos = this.gridSnap
+      ? vec2Snap(this.mousePosition, this.gridSnapScale)
+      : this.mousePosition;
+
+    const rect = this.manager.canvas.getBoundingClientRect();
+    this.mousePosition = [x - rect.left, y - rect.top];
+    this.mousePositionSnapped = this.gridSnap
+      ? vec2Snap(this.mousePosition, this.gridSnapScale)
+      : this.mousePosition;
+
+    let offset = vec2Sub(currentPos, this.mousePositionSnapped);
+
+    if (!this.selectedLayer) return;
+
+    if (this.tool) {
+      if (this.drawingLine) {
+        const lastSegment = this.drawingLine.segments.at(-1);
+        if (lastSegment) {
+          lastSegment.end = [...this.mousePositionSnapped];
+        }
+      }
+      this.manager.draw();
+    }
+
+    if (this.drawingLine) {
+      return;
+    }
+
+    if (this.handlingBezier) {
+      const [segment, property] = this.handlingBezier;
+      segment[property] = [...this.mousePositionSnapped];
+      this.manager.draw();
+    } else if (this.handlingLine) {
+      const [segment, property] = this.handlingLine;
+      segment[property] = [...this.mousePositionSnapped];
+      this.manager.draw();
+    } else if (this.clickedOn) {
+      if (!this.movingObject) {
+        // TODO: optimize history storage
+        this.history.appendToHistory([
+          {
+            object: this.selectedLayer,
+            property: 'contents',
+            value: JSON.parse(JSON.stringify(this.selectedLayer['contents'])),
+          },
+        ]);
+        this.movingObject = true;
+      }
+      this.translate(vec2Inverse(offset));
+    }
+  }
+
+  private selectedEvent() {
+    this.canvas.dispatchEvent(
+      new CustomEvent('hpc:selectionchange', {
+        detail: this.selectedObjects,
+      })
+    );
+  }
+}
--- a/src/modules/house-planner/types.ts
+++ b/src/modules/house-planner/types.ts
@ -0,0 +1,11 @@
+import { BezierSegment, LineSegment, Vec2 } from './interfaces';
+
+export type ToolType = 'line' | null;
+export type SubToolType = 'line' | 'curve' | 'room';
+
+export type BezierControl = [
+  BezierSegment,
+  'startControl' | 'endControl',
+  Vec2
+];
+export type LineControl = [LineSegment, 'start' | 'end', Vec2];
--- a/src/modules/house-planner/utils.ts
+++ b/src/modules/house-planner/utils.ts
@ -0,0 +1,56 @@
+import { Vec2 } from './interfaces';
+
+export const vec2Length = ([x, y]: Vec2) => Math.abs(Math.sqrt(x * x + y * y));
+
+export const vec2Add = ([x1, y1]: Vec2, [x2, y2]: Vec2): Vec2 => [
+  x1 + x2,
+  y1 + y2,
+];
+
+export const vec2Sub = ([x1, y1]: Vec2, [x2, y2]: Vec2): Vec2 => [
+  x1 - x2,
+  y1 - y2,
+];
+
+export const vec2MultiplyScalar = ([x, y]: Vec2, scalar: number): Vec2 => [
+  x * scalar,
+  y * scalar,
+];
+
+export const vec2DivideScalar = ([x, y]: Vec2, scalar: number): Vec2 => [
+  x / scalar,
+  y / scalar,
+];
+
+export const vec2Normalize = (vec: Vec2): Vec2 =>
+  vec2DivideScalar(vec, vec2Length(vec));
+
+export const vec2Distance = (vec1: Vec2, vec2: Vec2) =>
+  vec2Length(vec2Sub(vec2, vec1));
+
+export const vec2InCircle = (circle: Vec2, point: Vec2, radius: number) =>
+  vec2Distance(circle, point) <= radius;
+
+export const vec2Inverse = (vec: Vec2): Vec2 => vec2MultiplyScalar(vec, -1);
+
+export const vec2Snap = ([x, y]: Vec2, snapScale: number): Vec2 =>
+  vec2MultiplyScalar(
+    [Math.round(x / snapScale), Math.round(y / snapScale)],
+    snapScale
+  );
+
+export const vec2Equals = ([x1, y1]: Vec2, [x2, y2]: Vec2) =>
+  x1 === x2 && y1 === y2;
+
+export const vec2AngleFromOrigin = (
+  [x, y]: Vec2,
+  [ox, oy]: Vec2 = [0, 0]
+): number => Math.atan2(y - oy, x - ox);
+
+export const vec2PointFromAngle = (
+  angle: number,
+  [ox, oy]: Vec2 = [0, 0]
+): Vec2 => [Math.cos(angle) + ox, Math.sin(angle) + oy];
+
+export const deg2rad = (deg: number) => deg * (Math.PI / 180);
+export const rad2deg = (rad: number) => rad * (180 / Math.PI);
--- a/src/router/index.ts
+++ b/src/router/index.ts
@ -0,0 +1,48 @@
+import { NavigationGuardWithThis, RouteRecordRaw } from 'vue-router';
+import Dashboard from '../views/Dashboard.vue';
+import Login from '../views/Login.vue';
+import { createRouter, createWebHashHistory } from 'vue-router';
+import { useUserStore } from '../store/user.store';
+import HousePlanner from '../components/house-planner/HousePlanner.vue';
+
+const routes: RouteRecordRaw[] = [
+  {
+    name: 'dashboard',
+    path: '/',
+    component: Dashboard,
+  },
+  {
+    name: 'login',
+    path: '/login',
+    component: Login,
+  },
+  {
+    name: 'planner',
+    path: '/planner',
+    component: HousePlanner,
+    meta: {
+      authenticated: false,
+    },
+  },
+];
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+});
+
+router.beforeEach(async (to, from, next) => {
+  const userStore = useUserStore();
+
+  if (
+    to.name !== 'login' &&
+    to.meta?.authenticated !== false &&
+    !userStore.isLoggedIn
+  ) {
+    return next({ name: 'login' });
+  }
+
+  next();
+});
+
+export default router;
--- a/src/store/building.store.ts
+++ b/src/store/building.store.ts
@ -0,0 +1,22 @@
+import { defineStore } from 'pinia';
+import { useAccessToken } from '../composables/useAccessToken';
+import { BACKEND_URL } from '../constants';
+import { BuildingListItem } from '../interfaces/building.interfaces';
+import jfetch from '../utils/jfetch';
+
+const { authHeader } = useAccessToken();
+export const useBuildingStore = defineStore('building', {
+  state: () => {
+    return {
+      buildings: [] as BuildingListItem[],
+    };
+  },
+  actions: {
+    async getBuildings() {
+      const { data: buildings } = await jfetch(`${BACKEND_URL}/buildings`, {
+        headers: authHeader.value,
+      });
+      this.buildings = buildings;
+    },
+  },
+});
--- a/src/store/user.store.ts
+++ b/src/store/user.store.ts
@ -0,0 +1,60 @@
+import { defineStore } from 'pinia';
+import { User } from '../interfaces/user.interfaces';
+import { useLocalStorage } from '@vueuse/core';
+import jwtDecode from 'jwt-decode';
+import { BACKEND_URL } from '../constants';
+import jfetch from '../utils/jfetch';
+
+export const useUserStore = defineStore('user', {
+  state: () => {
+    return {
+      currentUser: null as User | null,
+      accessToken: useLocalStorage<string>('accessToken', null, {
+        writeDefaults: false,
+      }),
+    };
+  },
+  getters: {
+    user: (state) => state.currentUser!,
+    isLoggedIn: (state) => !!state.currentUser,
+  },
+  actions: {
+    loginFromToken() {
+      const token = this.accessToken;
+      try {
+        const decoded = jwtDecode(token) as Record<string, unknown>;
+        if (!decoded.sub) {
+          throw new Error('Invalid token');
+        }
+        this.currentUser = {
+          sub: decoded.sub as string,
+          name: decoded.name as string,
+          email: decoded.email as string,
+          picture: decoded.picture as string,
+        };
+      } catch {
+        // TODO
+      }
+    },
+    async login({ email, password }: { email: string; password: string }) {
+      const header = btoa(`${email}:${password}`);
+      const { data: tokenResponse } = await jfetch(
+        `${BACKEND_URL}/user/login`,
+        {
+          method: 'POST',
+          headers: new Headers({
+            Authorization: `Basic ${header}`,
+            'Content-Type': 'application/json',
+          }),
+        }
+      );
+
+      this.accessToken = tokenResponse.access_token;
+      this.loginFromToken();
+    },
+    logout() {
+      this.accessToken = '';
+      this.currentUser = null;
+    },
+  },
+});
--- a/src/style.scss
+++ b/src/style.scss
@ -0,0 +1,4 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
--- a/src/utils/jfetch.ts
+++ b/src/utils/jfetch.ts
@ -0,0 +1,46 @@
+export class JFetchResponse<T> {
+  constructor(
+    public statusCode: number,
+    public headers: Headers,
+    public data: T
+  ) {}
+}
+
+export class JFetchError {
+  constructor(
+    public statusCode: number,
+    public headers: Headers,
+    public data: any
+  ) {}
+}
+
+export default async function jfetch<T = any>(
+  url: string,
+  opts: Record<string, unknown> & {
+    returnType?: 'blob' | 'json' | 'arraybuffer';
+  }
+) {
+  const { returnType } = opts;
+  const response = await fetch(url, {
+    ...(opts as Record<string, unknown>),
+  });
+
+  let data!: T;
+  if (!returnType || returnType === 'json') {
+    data = await response.json();
+  }
+
+  if (returnType === 'arraybuffer') {
+    data = (await response.arrayBuffer()) as T;
+  }
+
+  if (returnType === 'blob') {
+    data = (await response.blob()) as T;
+  }
+
+  if (response.status < 200 || response.status > 299) {
+    throw new JFetchError(response.status, response.headers, data);
+  }
+
+  return new JFetchResponse<T>(response.status, response.headers, data);
+}
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@ -0,0 +1,15 @@
+<template>
+  <StandardLayout>
+    <h1>Dashboard</h1>
+    <p>Hello, {{ user.name }}</p>
+  </StandardLayout>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useUserStore } from '../store/user.store';
+import StandardLayout from '../components/StandardLayout.vue';
+
+const userStore = useUserStore();
+const user = ref(userStore.user);
+</script>
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@ -0,0 +1,108 @@
+<template>
+  <div
+    class="flex min-h-full items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8"
+  >
+    <div class="w-full max-w-md space-y-8">
+      <div>
+        <h2
+          class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900"
+        >
+          Sign in to your account
+        </h2>
+      </div>
+      <Transition
+        enter-active-class="transition-height ease-out duration-500 origin-bottom overflow-hidden"
+        enter-from-class="h-0"
+        enter-to-class="h-10"
+      >
+        <div class="mb-4 rounded" v-if="errorMessage">
+          <div
+            class="rounded bg-red-100 px-4 py-2 text-center font-bold text-red-700"
+            role="alert"
+            aria-live="assertive"
+          >
+            {{ errorMessage }}
+          </div>
+        </div>
+      </Transition>
+      <form
+        @submit.prevent="doLogin"
+        class="mt-8 overflow-hidden shadow sm:rounded-md"
+      >
+        <div class="bg-white px-4 py-5 sm:p-6">
+          <div class="space-y-5">
+            <div class="space-y-1">
+              <label for="email" class="block text-sm font-medium text-gray-700"
+                >Email address</label
+              >
+              <input
+                type="email"
+                name="email"
+                id="email"
+                required
+                autofocus
+                autocomplete="email"
+                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+                v-model="loginForm.email"
+              />
+            </div>
+            <div class="space-y-1">
+              <label
+                for="password"
+                class="block text-sm font-medium text-gray-700"
+                >Password</label
+              >
+              <input
+                type="password"
+                name="password"
+                id="password"
+                required
+                autocomplete="current-password"
+                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm"
+                v-model="loginForm.password"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="bg-gray-50 px-4 py-3 text-right sm:px-6">
+          <button
+            type="submit"
+            class="inline-flex justify-center rounded-md border border-transparent bg-green-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+          >
+            Sign in
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useUserStore } from '../store/user.store';
+import { JFetchError } from '../utils/jfetch';
+
+const userStore = useUserStore();
+const router = useRouter();
+const errorMessage = ref<string>('');
+const loginForm = ref<{
+  email: string;
+  password: string;
+}>({
+  email: '',
+  password: '',
+});
+
+const doLogin = async () => {
+  errorMessage.value = '';
+  try {
+    const { email, password } = loginForm.value;
+    await userStore.login({ email, password });
+    router.replace({ name: 'dashboard' });
+  } catch (e) {
+    const error = e as JFetchError;
+    errorMessage.value = error?.data?.message || (e as Error).message;
+  }
+};
+</script>
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/line-clamp')],
+};
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+})
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>`