feat: add login page

frontend/package.json

@@ -14,7 +14,8 @@
     "lint:eslint": "eslint . --fix --cache"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^7.2.0",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
     "@fortawesome/vue-fontawesome": "^3.2.0",
     "bulma": "^1.0.4",
     "pinia": "^3.0.4",

frontend/pnpm-lock.yaml

@@ -8,7 +8,10 @@ importers:
 
   .:
     dependencies:
-      '@fortawesome/fontawesome-free':
+      '@fortawesome/fontawesome-svg-core':
+        specifier: ^7.2.0
+        version: 7.2.0
+      '@fortawesome/free-solid-svg-icons':
         specifier: ^7.2.0
         version: 7.2.0
       '@fortawesome/vue-fontawesome':
@@ -264,14 +267,14 @@ packages:
     resolution: {integrity: sha512-IpR0bER9FY25p+e7BmFH25MZKEwFHTfRAfhOyJubgiDnoJNsSvJ7nigLraHtp4VOG/cy8D7uiV0dLkHOne5Fhw==}
     engines: {node: '>=6'}
 
-  '@fortawesome/fontawesome-free@7.2.0':
-    resolution: {integrity: sha512-3DguDv/oUE+7vjMeTSOjCSG+KeawgVQOHrKRnvUuqYh1mfArrh7s+s8hXW3e4RerBA1+Wh+hBqf8sJNpqNrBWg==}
-    engines: {node: '>=6'}
-
   '@fortawesome/fontawesome-svg-core@7.2.0':
     resolution: {integrity: sha512-6639htZMjEkwskf3J+e6/iar+4cTNM9qhoWuRfj9F3eJD6r7iCzV1SWnQr2Mdv0QT0suuqU8BoJCZUyCtP9R4Q==}
     engines: {node: '>=6'}
 
+  '@fortawesome/free-solid-svg-icons@7.2.0':
+    resolution: {integrity: sha512-YTVITFGN0/24PxzXrwqCgnyd7njDuzp5ZvaCx5nq/jg55kUYd94Nj8UTchBdBofi/L0nwRfjGOg0E41d2u9T1w==}
+    engines: {node: '>=6'}
+
   '@fortawesome/vue-fontawesome@3.2.0':
     resolution: {integrity: sha512-7BwGjTZn8QDvVEIu8fvkHhsDRRv//tq7jtsldaDhF3dE1fyWLIQcEg3zvIzy33su7kcppWsZZ6XRYP5wp3UCgQ==}
     peerDependencies:
@@ -2017,12 +2020,14 @@ snapshots:
 
   '@fortawesome/fontawesome-common-types@7.2.0': {}
 
-  '@fortawesome/fontawesome-free@7.2.0': {}
-
   '@fortawesome/fontawesome-svg-core@7.2.0':
     dependencies:
       '@fortawesome/fontawesome-common-types': 7.2.0
 
+  '@fortawesome/free-solid-svg-icons@7.2.0':
+    dependencies:
+      '@fortawesome/fontawesome-common-types': 7.2.0
+
   '@fortawesome/vue-fontawesome@3.2.0(@fortawesome/fontawesome-svg-core@7.2.0)(vue@3.5.33(typescript@6.0.3))':
     dependencies:
       '@fortawesome/fontawesome-svg-core': 7.2.0

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>
+  <div style="margin-top: 1.25rem; width: 100%; display: flex; justify-content: center; align-items: center;">
-  <p>This is login.</p>
+    <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>