feat: basic auth

components/app/auth/page.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { signInWithEmailAndPassword } from 'firebase/auth'
+import { f7List, f7ListButton, f7ListInput, f7LoginScreenTitle, f7NavLeft, f7NavTitle, f7NavTitleLarge, f7Navbar, f7Page } from 'framework7-vue'
+
+const auth = useFirebaseAuth()
+
+const state = reactive({
+  email: '',
+  password: '',
+})
+
+async function login() {
+  signInWithEmailAndPassword(auth!, state.email, state.password)
+}
+</script>
+
+<template>
+  <f7Page login-screen no-toolbar no-navbar no-swipeback>
+    <f7LoginScreenTitle>SSTAA Login</f7LoginScreenTitle>
+    <f7List form>
+      <f7ListInput
+        v-model:value="state.email"
+        label="Email"
+        type="email"
+        placeholder="Your email (example: aurelius@sst.edu.sg)"
+      />
+      <f7ListInput
+        v-model:value="state.password"
+        label="Password"
+        type="password"
+        placeholder="Your password"
+        error-message="Nice"
+      />
+    </f7List>
+    <f7List inset>
+      <f7ListButton @click="login">
+        Login
+      </f7ListButton>
+    </f7List>
+  </f7Page>
+</template>

pages/app.vue

@@ -25,6 +25,11 @@ const appRoutes = [
     path: '/app/events',
     asyncComponent: () => import('~/components/app/events/page.vue'),
   },
+  {
+    name: 'auth',
+    path: '/app/auth',
+    asyncComponent: () => import('~/components/app/auth/page.vue'),
+  },
 ]
 
 useSeoMeta({

pages/app/auth.vue

@@ -0,0 +1,3 @@
+<template>
+  <AppAuthPage />
+</template>