feat: add login page

frontend/src/main.ts

@@ -1,5 +1,10 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faUser, faLock } from '@fortawesome/free-solid-svg-icons'
+
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 import App from './App.vue'
@@ -14,4 +19,7 @@ const app = createApp(App);
 app.use(pinia);
 app.use(router);
 
+library.add(faUser, faLock);
+app.component('font-awesome-icon', FontAwesomeIcon);
+
 app.mount('#app');

frontend/src/router/index.ts

@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { useTokenStore } from '@/stores/token'
 
-import Home from '../views/Home.vue'
+import Home from '@/views/Home.vue'
 import Collection from '@/views/Collection.vue'
 import Calendar from '@/views/Calendar.vue'
 import CalendarEvent from '@/views/CalendarEvent.vue'

frontend/src/views/Login.vue

@@ -1,8 +1,33 @@
 <script setup lang="ts"></script>
 
 <template>
-  <h1>Congratulations</h1>
-  <p>This is login.</p>
+  <div style="margin-top: 1.25rem; width: 100%; display: flex; justify-content: center; align-items: center;">
+    <div class="card" style="padding: 1.25rem;">
+      <div class="field">
+        <label class="label">User Name</label>
+        <div class="control has-icons-left has-icons-right">
+          <input id="ccn-login-form-username" class="input" type="text">
+          <span class="icon is-small is-left">
+            <font-awesome-icon icon="fas fa-user"></font-awesome-icon>
+          </span>
+        </div>
+      </div>
+      <div class="field">
+        <label class="label">Password</label>
+        <p class="control has-icons-left">
+          <input id="ccn-login-form-password" class="input" type="password">
+          <span class="icon is-small is-left">
+            <font-awesome-icon icon="fas fa-lock"></font-awesome-icon>
+          </span>
+        </p>
+      </div>
+
+      <div class="control">
+        <button class="button is-primary">Login</button>
+      </div>
+
+    </div>
+  </div>
 </template>
 
 <style scoped></style>