Added login page.

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>

gymboard-app/src/components/StandardCenteredPage.vue

@@ -6,7 +6,6 @@ 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>
@@ -14,5 +13,4 @@ Use this as the root component for any pages you create.
       </slot>
     </div>
   </div>
-  </q-page>
 </template>

gymboard-app/src/pages/IndexPage.vue

@@ -1,4 +1,5 @@
 <template>
+  <q-page>
     <StandardCenteredPage>
       <q-input
         v-model="searchQuery"
@@ -20,6 +21,7 @@
         />
       </q-list>
     </StandardCenteredPage>
+  </q-page>
 </template>
 
 <script setup lang="ts">

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>

gymboard-app/src/pages/TestingPage.vue

@@ -1,4 +1,5 @@
 <template>
+  <q-page>
     <StandardCenteredPage>
       <h3>Testing Page</h3>
       <p>
@@ -11,6 +12,7 @@
         <q-btn label="Logout" @click="api.auth.logout(authStore)" />
       </div>
     </StandardCenteredPage>
+  </q-page>
 </template>
 
 <script setup lang="ts">

gymboard-app/src/pages/gym/GymPage.vue

@@ -1,4 +1,5 @@
 <template>
+  <q-page>
     <StandardCenteredPage v-if="gym">
       <h3 class="q-my-md text-center">{{ gym.displayName }}</h3>
       <q-btn-group spread square push>
@@ -20,6 +21,7 @@
       </q-btn-group>
       <router-view />
     </StandardCenteredPage>
+  </q-page>
 </template>
 
 <script setup lang="ts">

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