From 6b1e20d5447f6deff60bc8d617c4e18842811b66 Mon Sep 17 00:00:00 2001
From: Andrew Lalis <andrewlalisofficial@gmail.com>
Date: Tue, 31 Jan 2023 09:13:18 +0100
Subject: [PATCH] Added login page.

---
 .../src/components/AccountMenuItem.vue        | 14 +++-
 .../src/components/StandardCenteredPage.vue   | 14 ++--
 gymboard-app/src/pages/IndexPage.vue          | 44 ++++++-----
 gymboard-app/src/pages/LoginPage.vue          | 78 +++++++++++++++++++
 gymboard-app/src/pages/TestingPage.vue        | 26 ++++---
 gymboard-app/src/pages/gym/GymPage.vue        | 44 ++++++-----
 gymboard-app/src/router/routes.ts             |  2 +
 7 files changed, 159 insertions(+), 63 deletions(-)
 create mode 100644 gymboard-app/src/pages/LoginPage.vue

diff --git a/gymboard-app/src/components/AccountMenuItem.vue b/gymboard-app/src/components/AccountMenuItem.vue
index 48321bd..b5dcd13 100644
--- a/gymboard-app/src/components/AccountMenuItem.vue
+++ b/gymboard-app/src/components/AccountMenuItem.vue
@@ -21,7 +21,7 @@
       v-if="!authStore.loggedIn"
       no-caps
       icon="person"
-      to="/login"
+      @click="goToLoginPage"
     />
   </div>
 </template>
@@ -29,8 +29,20 @@
 <script setup lang="ts">
 import { useAuthStore } from 'stores/auth-store';
 import api from 'src/api/main';
+import {useRoute, useRouter} from 'vue-router';
 
 const authStore = useAuthStore();
+const route = useRoute();
+const router = useRouter();
+
+async function goToLoginPage() {
+  await router.push({
+    path: '/login',
+    query: {
+      next: encodeURIComponent(route.path)
+    }
+  });
+}
 </script>
 
 <style scoped></style>
diff --git a/gymboard-app/src/components/StandardCenteredPage.vue b/gymboard-app/src/components/StandardCenteredPage.vue
index 7878a7c..229f1ef 100644
--- a/gymboard-app/src/components/StandardCenteredPage.vue
+++ b/gymboard-app/src/components/StandardCenteredPage.vue
@@ -6,13 +6,11 @@ width for smaller screens.
 Use this as the root component for any pages you create.
 -->
 <template>
-  <q-page>
-    <div class="row justify-center">
-      <div class="col-xs-12 col-md-6 q-px-sm">
-        <slot>
-          <p>Page content</p>
-        </slot>
-      </div>
+  <div class="row justify-center">
+    <div class="col-xs-12 col-md-6 q-px-sm">
+      <slot>
+        <p>Page content</p>
+      </slot>
     </div>
-  </q-page>
+  </div>
 </template>
diff --git a/gymboard-app/src/pages/IndexPage.vue b/gymboard-app/src/pages/IndexPage.vue
index c6f6f1a..62ab279 100644
--- a/gymboard-app/src/pages/IndexPage.vue
+++ b/gymboard-app/src/pages/IndexPage.vue
@@ -1,25 +1,27 @@
 <template>
-  <StandardCenteredPage>
-    <q-input
-      v-model="searchQuery"
-      :label="$t('indexPage.searchHint')"
-      clearable
-      :loading="searchBarLoadingState"
-      @update:modelValue="onSearchQueryUpdated"
-      class="q-mt-lg"
-    >
-      <template v-slot:append>
-        <q-icon name="search" />
-      </template>
-    </q-input>
-    <q-list>
-      <GymSearchResultListItem
-        v-for="result in searchResults"
-        :gym="result"
-        :key="result.compoundId"
-      />
-    </q-list>
-  </StandardCenteredPage>
+  <q-page>
+    <StandardCenteredPage>
+      <q-input
+        v-model="searchQuery"
+        :label="$t('indexPage.searchHint')"
+        clearable
+        :loading="searchBarLoadingState"
+        @update:modelValue="onSearchQueryUpdated"
+        class="q-mt-lg"
+      >
+        <template v-slot:append>
+          <q-icon name="search" />
+        </template>
+      </q-input>
+      <q-list>
+        <GymSearchResultListItem
+          v-for="result in searchResults"
+          :gym="result"
+          :key="result.compoundId"
+        />
+      </q-list>
+    </StandardCenteredPage>
+  </q-page>
 </template>
 
 <script setup lang="ts">
diff --git a/gymboard-app/src/pages/LoginPage.vue b/gymboard-app/src/pages/LoginPage.vue
new file mode 100644
index 0000000..ce07ac5
--- /dev/null
+++ b/gymboard-app/src/pages/LoginPage.vue
@@ -0,0 +1,78 @@
+<template>
+  <StandardCenteredPage>
+    <h3 class="text-center">Login to Gymboard</h3>
+    <q-form @submit="tryLogin" @reset="resetLogin">
+      <SlimForm>
+        <div class="row">
+          <q-input
+            :label="$t('loginPage.email')"
+            v-model="loginModel.email"
+            class="col-12"
+          />
+        </div>
+        <div class="row">
+          <q-input
+            :label="$t('loginPage.password')"
+            v-model="loginModel.password"
+            :type="passwordVisible ? 'text' : 'password'"
+            class="col-12"
+          >
+            <template v-slot:append>
+              <q-icon
+                :name="passwordVisible ? 'visibility' : 'visibility_off'"
+                class="cursor-pointer"
+                @click="passwordVisible = !passwordVisible"
+              />
+            </template>
+          </q-input>
+        </div>
+        <div class="row">
+          <q-btn type="submit" label="Log in" color="primary" class="q-mt-md col-12" no-caps/>
+        </div>
+        <div class="row">
+          <q-btn flat no-caps label="Create an account" color="secondary" class="q-mt-md col-12" style="text-decoration: underline"/>
+        </div>
+      </SlimForm>
+    </q-form>
+  </StandardCenteredPage>
+</template>
+
+<script setup lang="ts">
+import StandardCenteredPage from 'src/components/StandardCenteredPage.vue';
+import SlimForm from 'components/SlimForm.vue';
+import {ref} from 'vue';
+import api from 'src/api/main';
+import {useAuthStore} from 'stores/auth-store';
+import {useRoute, useRouter} from 'vue-router';
+
+const authStore = useAuthStore();
+const router = useRouter();
+const route = useRoute();
+
+const loginModel = ref({
+  email: '',
+  password: ''
+});
+const passwordVisible = ref(false);
+
+async function tryLogin() {
+  console.log('logging in...');
+  try {
+    await api.auth.login(authStore, loginModel.value);
+    const dest = route.query.next ? decodeURIComponent(route.query.next as string) : '/';
+    await router.push(dest);
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+function resetLogin() {
+  loginModel.value.email = '';
+  loginModel.value.password = '';
+}
+
+</script>
+
+<style scoped>
+
+</style>
diff --git a/gymboard-app/src/pages/TestingPage.vue b/gymboard-app/src/pages/TestingPage.vue
index e82604e..f21b396 100644
--- a/gymboard-app/src/pages/TestingPage.vue
+++ b/gymboard-app/src/pages/TestingPage.vue
@@ -1,16 +1,18 @@
 <template>
-  <StandardCenteredPage>
-    <h3>Testing Page</h3>
-    <p>
-      Use this page to test new functionality, before adding it to the main app.
-      This page should be hidden on production.
-    </p>
-    <div style="border: 3px solid red">
-      <h4>Auth Test</h4>
-      <q-btn label="Do auth" @click="doAuth()" />
-      <q-btn label="Logout" @click="api.auth.logout(authStore)" />
-    </div>
-  </StandardCenteredPage>
+  <q-page>
+    <StandardCenteredPage>
+      <h3>Testing Page</h3>
+      <p>
+        Use this page to test new functionality, before adding it to the main app.
+        This page should be hidden on production.
+      </p>
+      <div style="border: 3px solid red">
+        <h4>Auth Test</h4>
+        <q-btn label="Do auth" @click="doAuth()" />
+        <q-btn label="Logout" @click="api.auth.logout(authStore)" />
+      </div>
+    </StandardCenteredPage>
+  </q-page>
 </template>
 
 <script setup lang="ts">
diff --git a/gymboard-app/src/pages/gym/GymPage.vue b/gymboard-app/src/pages/gym/GymPage.vue
index f8b3b69..dbb03e9 100644
--- a/gymboard-app/src/pages/gym/GymPage.vue
+++ b/gymboard-app/src/pages/gym/GymPage.vue
@@ -1,25 +1,27 @@
 <template>
-  <StandardCenteredPage v-if="gym">
-    <h3 class="q-my-md text-center">{{ gym.displayName }}</h3>
-    <q-btn-group spread square push>
-      <q-btn
-        :label="$t('gymPage.home')"
-        :to="getGymRoute(gym)"
-        :color="homePageSelected ? 'primary' : 'secondary'"
-      />
-      <q-btn
-        :label="$t('gymPage.submit')"
-        :to="getGymRoute(gym) + '/submit'"
-        :color="submitPageSelected ? 'primary' : 'secondary'"
-      />
-      <q-btn
-        :label="$t('gymPage.leaderboard')"
-        :to="getGymRoute(gym) + '/leaderboard'"
-        :color="leaderboardPageSelected ? 'primary' : 'secondary'"
-      />
-    </q-btn-group>
-    <router-view />
-  </StandardCenteredPage>
+  <q-page>
+    <StandardCenteredPage v-if="gym">
+      <h3 class="q-my-md text-center">{{ gym.displayName }}</h3>
+      <q-btn-group spread square push>
+        <q-btn
+          :label="$t('gymPage.home')"
+          :to="getGymRoute(gym)"
+          :color="homePageSelected ? 'primary' : 'secondary'"
+        />
+        <q-btn
+          :label="$t('gymPage.submit')"
+          :to="getGymRoute(gym) + '/submit'"
+          :color="submitPageSelected ? 'primary' : 'secondary'"
+        />
+        <q-btn
+          :label="$t('gymPage.leaderboard')"
+          :to="getGymRoute(gym) + '/leaderboard'"
+          :color="leaderboardPageSelected ? 'primary' : 'secondary'"
+        />
+      </q-btn-group>
+      <router-view />
+    </StandardCenteredPage>
+  </q-page>
 </template>
 
 <script setup lang="ts">
diff --git a/gymboard-app/src/router/routes.ts b/gymboard-app/src/router/routes.ts
index d11c0e2..3ae9fc4 100644
--- a/gymboard-app/src/router/routes.ts
+++ b/gymboard-app/src/router/routes.ts
@@ -6,6 +6,7 @@ import GymSubmissionPage from 'pages/gym/GymSubmissionPage.vue';
 import GymHomePage from 'pages/gym/GymHomePage.vue';
 import GymLeaderboardsPage from 'pages/gym/GymLeaderboardsPage.vue';
 import TestingPage from 'pages/TestingPage.vue';
+import LoginPage from 'pages/LoginPage.vue';
 
 const routes: RouteRecordRaw[] = [
   {
@@ -25,6 +26,7 @@ const routes: RouteRecordRaw[] = [
       },
     ],
   },
+  { path: '/login', component: LoginPage },
 
   // Always leave this as last one,
   // but you can also remove it