Add pinia and start working on authentication integration with appwrite

src/pages/LoginPage.vue

@@ -1,41 +1,136 @@
 <template>
-  <div>
-    <p>
-      {{ loggedInUser ? `Logged in as ${loggedInUser.name}` : 'Not logged in' }}
-    </p>
-
-    <form>
-      <input type="email" placeholder="Email" v-model="email" />
-      <input type="password" placeholder="Password" v-model="password" />
-      <input type="text" placeholder="Name" v-model="name" />
-      <button type="button" @click="login(email, password)">Login</button>
-      <button type="button" @click="register">Register</button>
-      <button type="button" @click="logout">Logout</button>
-    </form>
-  </div>
+  <q-layout>
+    <q-page-container>
+      <q-page class="flex bg-image flex-center">
+        <q-card
+          v-bind:style="$q.screen.lt.sm ? { width: '80%' } : { width: '30%' }"
+        >
+          <q-card-section>
+            <q-img fit="scale-down" src="~assets/oysqn_logo.png" />
+          </q-card-section>
+          <q-card-section>
+            <div class="text-center q-pt-sm">
+              <div class="col text-h6">Log in</div>
+            </div>
+            <q-card-section>
+              <div class="alert-box">
+                <strong>Error!</strong>
+                <br />
+                {{ errorMessage }}
+              </div>
+            </q-card-section>
+            <p>
+              {{
+                loggedInUser
+                  ? `Logged in as ${loggedInUser.name}`
+                  : 'Not logged in'
+              }}
+            </p>
+          </q-card-section>
+          <q-card-section>
+            <q-form class="q-gutter-md">
+              <q-input
+                v-model="email"
+                label="E-Mail"
+                type="email"
+                color="darkblue"
+                filled
+              ></q-input>
+              <q-input
+                v-model="password"
+                label="Password"
+                type="password"
+                color="darkblue"
+                filled
+              ></q-input>
+              <q-btn
+                type="submit"
+                @click="login(email, password)"
+                label="Login"
+                color="primary"
+              ></q-btn>
+              <!-- <q-btn
+                type="button"
+                @click="register"
+                color="secondary"
+                label="Register"
+                flat
+              ></q-btn> -->
+            </q-form>
+          </q-card-section>
+        </q-card>
+      </q-page>
+    </q-page-container>
+  </q-layout>
 </template>
 
-<script setup>
+<style>
+.bg-image {
+  background-image: url('/src/assets/oys_lighthouse.jpg');
+  background-repeat: no-repeat;
+  background-position-x: center;
+  background-size: cover;
+  /* background-image: linear-gradient(
+    135deg,
+    #ed232a 0%,
+    #ffffff 75%,
+    #14539a 100%
+  ); */
+}
+</style>
+
+<style scoped>
+.alert-box {
+  color: #666;
+  border: 1px solid red;
+  border-radius: 4px;
+  padding: 20px;
+  background-color: #f8f8f8;
+}
+
+strong {
+  color: red;
+}
+</style>
+
+<script lang="ts">
+import { account } from 'src/boot/appwrite';
+import { defineComponent } from 'vue';
 import { ref } from 'vue';
-import { account, ID } from './lib/appwrite.js';
 
-const loggedInUser = ref(null);
-const email = ref('');
-const password = ref('');
-const name = ref('');
+export default defineComponent({
+  name: 'LoginPage',
+  setup() {
+    const loggedInUser = ref(null);
+    const email = ref('');
+    const password = ref('');
 
-const login = async (email, password) => {
-  await account.createEmailSession(email, password);
-  loggedInUser.value = await account.get();
-};
+    const current = this.$appwrite_account.get();
 
-const register = async () => {
-  await account.create(ID.unique(), email.value, password.value, name.value);
-  login(email.value, password.value);
-};
+    current.then(
+      function (response) {
+        console.log(response);
+      },
+      function (error) {
+        console.log(error);
+      }
+    );
 
-const logout = async () => {
-  await account.deleteSession('current');
-  loggedInUser.value = null;
-};
+    const login = async (email, password) => {
+      await this.$appwrite_account.createEmailSession(email, password);
+      loggedInUser.value = await this.$appwrite_account.get();
+
+      if (loggedInUser.value.error) {
+      }
+      // TODO: Add error handling for failed login.
+      // TODO: Add forwarding for successful login.
+    };
+
+    return {
+      email,
+      password,
+      login,
+    };
+  },
+});
 </script>