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

Also,
- Fixed empty dashboard refresh
- GPX download loading state

api/config.go

@@ -65,16 +65,17 @@ func (a *API) updateConfig(c echo.Context) error {
 //	@Summary	Check Application Setup completed
 //	@Tags		config
 //	@Accept		json
-//	@Success	200	{object}	map[string]bool
+//	@Success	200	{object}	map[string]interface{}
 //	@Router		/api/config/setup [get]
 func (a *API) checkSetupCompleted(c echo.Context) error {
 	cfg, err := a.db.GetCurrentConfig()
 	if err != nil {
 		return echo.NewHTTPError(http.StatusInternalServerError, err)
 	}
 
-	return c.JSON(http.StatusOK, map[string]bool{
-		"status": cfg.SetupCompleted(),
+	return c.JSON(http.StatusOK, map[string]interface{}{
+		"completed":  cfg.SetupCompleted(),
+		"login_type": cfg.LoginType,
 	})
 }
 

api/dashboard.go

@@ -213,7 +213,7 @@ func (a *API) createComponent(c echo.Context) error {
 
 	type componentInput struct {
 		Name    string               `json:"name" validate:"required" err:"name is required"`
-		Type    models.ComponentType `json:"type" validate:"type" err:"name is required"`
+		Type    models.ComponentType `json:"type" validate:"required" err:"name is required"`
 		Configs interface{}          `json:"configs"`
 		Query   string               `json:"query" validate:"required" err:"query is required"`
 	}

api/docs/docs.go

@@ -329,9 +329,7 @@ const docTemplate = `{
                         "description": "OK",
                         "schema": {
                             "type": "object",
-                            "additionalProperties": {
-                                "type": "boolean"
-                            }
+                            "additionalProperties": true
                         }
                     }
                 }

api/docs/swagger.json

@@ -318,9 +318,7 @@
                         "description": "OK",
                         "schema": {
                             "type": "object",
-                            "additionalProperties": {
-                                "type": "boolean"
-                            }
+                            "additionalProperties": true
                         }
                     }
                 }

api/docs/swagger.yaml

@@ -711,8 +711,7 @@ paths:
         "200":
           description: OK
           schema:
-            additionalProperties:
-              type: boolean
+            additionalProperties: true
             type: object
       summary: Check Application Setup completed
       tags:

ui/src/App.vue

@@ -2,7 +2,7 @@
   <div id="app">
     <Toast />
     <ConfirmDialog />
-    <AppHeader />
+    <AppHeader v-if="showHeader" />
     <router-view />
   </div>
 </template>
@@ -11,12 +11,23 @@
 import Toast from 'primevue/toast';
 import ConfirmDialog from 'primevue/confirmdialog';
 import AppHeader from './components/AppHeader.vue';
+import { useUserStore } from '@/store/user';
 
 export default {
   components: {
     AppHeader,
     Toast,
     ConfirmDialog,
   },
+  setup() {
+    return {
+      user: useUserStore(),
+    };
+  },
+  computed: {
+    showHeader() {
+      return !['Login', 'Setup'].includes(this.$route.name);
+    },
+  },
 };
 </script>

ui/src/components/AppHeader.vue

@@ -6,7 +6,7 @@
 
 <script>
 import Menubar from 'primevue/menubar';
-import { useRouter } from 'vue-router';
+import { useStravaStore } from '@/store/strava';
 import { useUserStore } from '@/store/user';
 
 export default {
@@ -15,26 +15,26 @@ export default {
     Menubar,
   },
   setup() {
-    const router = useRouter();
-    const user = useUserStore();
-
-    return { router, user };
+    return {
+      strava: useStravaStore(),
+      user: useUserStore(),
+    };
   },
   computed: {
     items() {
-      const accessToken = this.user.accessToken;
-      const user = this.user.user;
+      const accessToken = this.strava.accessToken;
+      const user = this.strava.user;
 
       return [
         {
           label: 'Dashboard',
           icon: 'pi pi-fw pi-home',
-          command: () => this.router.push('/'),
+          command: () => this.$router.push('/'),
         },
         {
           label: 'Settings',
           icon: 'pi pi-fw pi-cog',
-          command: () => this.router.push('/app/settings'),
+          command: () => this.$router.push('/app/settings'),
         },
         {
           label: 'Data',
@@ -43,49 +43,55 @@ export default {
             {
               label: 'Activities',
               icon: 'pi pi-fw pi-calendar',
-              command: () => this.router.push('/app/activities'),
+              command: () => this.$router.push('/app/activities'),
             },
             {
               label: 'Gears',
               icon: 'pi pi-fw pi-sitemap',
-              command: () => this.router.push('/app/gears'),
+              command: () => this.$router.push('/app/gears'),
             },
             {
               label: 'Athletes',
               icon: 'pi pi-fw pi-user',
-              command: () => this.router.push('/app/athletes'),
+              command: () => this.$router.push('/app/athletes'),
             },
           ],
         },
         {
-          label: accessToken ? user.firstname : 'Anonymous',
+          label: accessToken ? user.firstname : 'User',
           icon: 'pi pi-fw pi-user',
           items: [
+            ...(this.user.loginNeeded()
+              ? [
+                  {
+                    label: 'Logout App',
+                    icon: 'pi pi-fw pi-sign-out',
+                    command: () => {
+                      this.user.logout();
+                      this.$router.push('/app/login');
+                    },
+                  },
+                ]
+              : []),
             ...(accessToken
               ? [
                   {
-                    label: 'Logout',
+                    label: 'Logout Strava',
                     icon: 'pi pi-fw pi-sign-out',
-                    command: () => this.logout(),
+                    command: () => this.strava.logout(),
                   },
                 ]
               : [
                   {
-                    label: 'Login',
+                    label: 'Login Strava',
                     icon: 'pi pi-fw pi-sign-in',
-                    command: () => this.router.push('/app/login'),
+                    command: () => this.$router.push('/app/strava-login'),
                   },
                 ]),
           ],
         },
       ];
     },
   },
-  methods: {
-    logout() {
-      const user = useUserStore();
-      user.logout();
-    },
-  },
 };
 </script>

ui/src/components/ComponentModal.vue

@@ -199,6 +199,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    accessToken: {
+      type: String,
+      required: true,
+    },
   },
   components: {
     Dialog,
@@ -303,7 +307,8 @@ export default {
         this.$emit('set-loading', true);
 
         const task = await waitAsyncTask(
-          await runQuery({
+          this.accessToken,
+          await runQuery(this.accessToken, {
             query: this.form.query,
           })
         );

ui/src/pages/ActivitiesPage.vue

@@ -36,15 +36,15 @@
       :style="{ width: '50rem' }"
     >
       <div class="mb-3">
+        <Message v-if="!strava.accessToken" severity="info">
+          To download GPX file, you need to logged in to with Strava
+        </Message>
         <Button
-          :disabled="!accessToken || loading"
+          :disabled="!strava.accessToken || loading || modal.loading"
           type="button"
           label="Download GPX"
           severity="secondary"
           @click="downloadGPXFile"
-          v-tooltip.right="
-            'To download GPX file, you need to logged in to with Strava'
-          "
         />
       </div>
       <div>
@@ -63,8 +63,9 @@ import Skeleton from 'primevue/skeleton';
 import VueJsonPretty from 'vue-json-pretty';
 import Dialog from 'primevue/dialog';
 import Button from 'primevue/button';
+import Message from 'primevue/message';
 import { useHead } from '@unhead/vue';
-import { mapState } from 'pinia';
+import { useStravaStore } from '@/store/strava';
 import { useUserStore } from '@/store/user';
 
 export default {
@@ -77,9 +78,15 @@ export default {
     Button,
     VueJsonPretty,
     Skeleton,
+    Message,
   },
   setup() {
     useHead({ title: 'Activities' });
+
+    return {
+      strava: useStravaStore(),
+      user: useUserStore(),
+    };
   },
   data() {
     return {
@@ -88,6 +95,7 @@ export default {
       currentPage: 1,
       count: 0,
       modal: {
+        loading: false,
         show: false,
         data: {},
       },
@@ -96,9 +104,6 @@ export default {
   mounted() {
     this.fetch();
   },
-  computed: {
-    ...mapState(useUserStore, ['accessToken']),
-  },
   methods: {
     athleteName(row) {
       return `${row.athlete.firstname} ${row.athlete.lastname}`;
@@ -110,7 +115,10 @@ export default {
     async fetch() {
       try {
         this.loading = true;
-        const response = await fetchActivities(this.currentPage);
+        const response = await fetchActivities(
+          this.user.accessToken,
+          this.currentPage
+        );
         this.activities = response.results;
         this.count = response.count;
       } catch (error) {
@@ -121,11 +129,17 @@ export default {
     },
     async downloadGPXFile() {
       try {
-        this.loading = true;
-        const fileName = `activity_${this.modal.data.id}.gpx`;
+        this.modal.loading = true;
+
+        const blob = await getActivityGPX(
+          this.modal.data.id,
+          this.strava.accessToken,
+          this.user.accessToken
+        );
 
-        const blob = await getActivityGPX(this.modal.data.id, this.accessToken);
+        const fileName = `activity_${this.modal.data.id}.gpx`;
         const url = window.URL.createObjectURL(blob);
+
         const link = document.createElement('a');
         link.href = url;
         link.setAttribute('download', fileName);
@@ -135,7 +149,7 @@ export default {
       } catch (error) {
         this.onError(error);
       } finally {
-        this.loading = false;
+        this.modal.loading = false;
       }
     },
     onError(err) {
@@ -149,6 +163,7 @@ export default {
     onRowSelect(event) {
       this.modal.data = event.data;
       this.modal.show = true;
+      this.modal.loading = false;
     },
   },
 };

ui/src/pages/AthletesPage.vue

@@ -49,6 +49,7 @@ import VueJsonPretty from 'vue-json-pretty';
 import Dialog from 'primevue/dialog';
 import { useHead } from '@unhead/vue';
 import Skeleton from 'primevue/skeleton';
+import { useUserStore } from '@/store/user';
 
 export default {
   name: 'AthletesPage',
@@ -62,6 +63,10 @@ export default {
   },
   setup() {
     useHead({ title: 'Athletes' });
+
+    return {
+      user: useUserStore(),
+    };
   },
   data() {
     return {
@@ -86,7 +91,10 @@ export default {
     async fetch() {
       try {
         this.loading = true;
-        const response = await fetchAthletes(this.currentPage);
+        const response = await fetchAthletes(
+          this.user.accessToken,
+          this.currentPage
+        );
         this.athletes = response.results;
         this.count = response.count;
       } catch (error) {