feat(ui): Login and sync flow have been implemented

bahattincinic · May 23, 2024 · 22c69fd · 22c69fd
1 parent bf994ca
commit 22c69fd
Show file tree

Hide file tree

Showing 17 changed files with 344 additions and 51 deletions.
diff --git a/api/api.go b/api/api.go
@@ -15,6 +15,7 @@ import (
 	"github.com/bahattincinic/fitwave/queue"
 	"github.com/bahattincinic/fitwave/strava"
 	"github.com/labstack/echo/v4"
+	"github.com/labstack/echo/v4/middleware"
 	"go.uber.org/zap"
 )
 
@@ -44,6 +45,10 @@ func RunAPI(ctx context.Context, wg *sync.WaitGroup, log *zap.Logger, db *databa
 	}
 	srv.ec.Server.IdleTimeout = 120 * time.Second
 
+	srv.ec.Use(middleware.LoggerWithConfig(middleware.LoggerConfig{
+		Format: "method=${method}, uri=${uri}, status=${status}, error=${error}\n",
+	}))
+
 	srv.setupHandlers()
 	srv.setupSwagger()
 	srv.setupCors()

diff --git a/api/docs/docs.go b/api/docs/docs.go
@@ -1359,7 +1359,7 @@ const docTemplate = `{
         "queue.TaskResult": {
             "type": "object",
             "properties": {
-                "completionTime": {
+                "completion_time": {
                     "type": "string"
                 },
                 "error": {},
@@ -1613,7 +1613,7 @@ const docTemplate = `{
         "strava.User": {
             "type": "object",
             "properties": {
-                "accessToken": {
+                "access_token": {
                     "type": "string"
                 },
                 "athlete": {

diff --git a/api/docs/swagger.json b/api/docs/swagger.json
@@ -1348,7 +1348,7 @@
         "queue.TaskResult": {
             "type": "object",
             "properties": {
-                "completionTime": {
+                "completion_time": {
                     "type": "string"
                 },
                 "error": {},
@@ -1602,7 +1602,7 @@
         "strava.User": {
             "type": "object",
             "properties": {
-                "accessToken": {
+                "access_token": {
                     "type": "string"
                 },
                 "athlete": {

diff --git a/api/docs/swagger.yaml b/api/docs/swagger.yaml
@@ -265,7 +265,7 @@ definitions:
     type: object
   queue.TaskResult:
     properties:
-      completionTime:
+      completion_time:
         type: string
       error: {}
       id:
@@ -438,7 +438,7 @@ definitions:
     type: object
   strava.User:
     properties:
-      accessToken:
+      access_token:
         type: string
       athlete:
         $ref: '#/definitions/strava.AthleteDetailed'

diff --git a/queue/queue.go b/queue/queue.go
@@ -30,11 +30,11 @@ type Task struct {
 }
 
 type TaskResult struct {
-	ID             string
-	Status         TaskStatus
-	Error          error
-	CompletionTime time.Time
-	Result         interface{}
+	ID             string      `json:"id"`
+	Status         TaskStatus  `json:"status"`
+	Error          error       `json:"error"`
+	CompletionTime time.Time   `json:"completion_time"`
+	Result         interface{} `json:"result"`
 }
 
 // Queue represents a task queue.

diff --git a/strava/user.go b/strava/user.go
@@ -8,9 +8,9 @@ import (
 
 type User struct {
 	st          *client.Client
-	AccessToken string
+	AccessToken string `json:"access_token"`
 	cfg         *models.Config
-	Athlete     *client.AthleteDetailed
+	Athlete     *client.AthleteDetailed `json:"athlete"`
 }
 
 func (s *Strava) NewUser(cfg *models.Config, accessToken string) (*User, error) {

diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@vueuse/head": "^2.0.0",
     "core-js": "^3.8.3",
+    "js-cookie": "^3.0.5",
     "pinia": "^2.1.7",
     "primeicons": "^7.0.0",
     "primevue": "^3.52.0",

diff --git a/ui/src/App.vue b/ui/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app" class="p-2">
     <AppHeader />
     <router-view />
   </div>

diff --git a/ui/src/pages/LoginPage.vue b/ui/src/pages/LoginPage.vue
@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <Toast />
+
+    <Button
+      :disabled="loading"
+      severity="success"
+      label="Login with Strava"
+      icon="pi pi-user"
+      @click="redirectToStrava()"
+    />
+  </div>
+</template>
+
+<script>
+import Toast from 'primevue/toast';
+import Button from 'primevue/button';
+import { onMounted, ref } from 'vue';
+import { useToast } from 'primevue/usetoast';
+import { getAccessToken, getAuthorizationURL } from '@/services/auth';
+import {useRoute, useRouter} from 'vue-router';
+import { useUserStore } from "@/store/user";
+import Cookies from "js-cookie";
+
+export default {
+  name: 'LoginPage',
+  components: {
+    Toast,
+    Button
+  },
+  setup() {
+    const loading = ref(false);
+    const toast = useToast();
+    const user = useUserStore();
+    const url = ref('');
+    const { query } = useRoute();
+    const router = useRouter()
+
+    const login = async (code) => {
+      const resp = await getAccessToken(code);
+      user.setAccessToken(resp.access_token);
+      user.setUser(resp.athlete);
+      Cookies.set('accessToken', resp.access_token);
+      await router.push('/');
+    }
+
+    const fetchURL = async () => {
+      const resp = await getAuthorizationURL();
+      url.value = resp.authorization_url;
+    }
+
+    onMounted(async () => {
+      try {
+        await fetchURL();
+        if (query.code) {
+          await login(query.code);
+        }
+      } catch (error) {
+        toast.add({
+          severity: 'error',
+          summary: 'Error',
+          detail: error.toString(),
+          life: 3000,
+        });
+      }
+    })
+
+    return {
+      loading,
+      toast,
+      url,
+      user
+    }
+  },
+  methods: {
+    redirectToStrava() {
+      window.location.href = this.url;
+    }
+  }
+};
+</script>