Draft setup page

src/assets/styles/base/_transitions.scss

@@ -0,0 +1,9 @@
+.v-fade-enter-active,
+.v-fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-fade-enter-from,
+.v-fade-leave-to {
+  opacity: 0;
+}

src/assets/styles/base/_typography.scss

@@ -65,12 +65,10 @@ h6 {
 }
 
 .text--overline {
-	.root {
-		font-family: var(--kt-body-font);
-		font-weight: 400;
-		font-size: 9px;
-		letter-spacing: 1.5px;
-	}
+	font-family: var(--kt-body-font);
+	font-weight: 400;
+	font-size: 9px;
+	letter-spacing: 1.5px;
 }
 
 .text--subtitle1 {

src/assets/styles/main.scss

@@ -1,5 +1,5 @@
 @import "abstracts/variables", "abstracts/functions", "abstracts/spacing", "abstracts/colors";
-@import "base/base", "base/reset", "base/typography", "base/grid";
+@import "base/base", "base/reset", "base/typography", "base/grid", "base/transitions";
 @import "vendor/vue-simple-context-menu.css", "vendor/vue-progressive-image.css",
 	"vendor/vue-loading-overlay.css", "vendor/codemirror";
 @import "components/alert", "components/button", "components/card", "components/form",

src/i18n.ts

@@ -9,7 +9,7 @@ export function setI18nLanguage(i18n: I18n, locale: Locale) {
     document.querySelector("html")?.setAttribute("lang", locale)
 }
 
-export async function loadLocaleMessages(i18n: I18n, locale: Locale) {
+export async function loadLocaleMessages(i18n: I18n, locale: Locale): Promise<void> {
     const messages = await import(`./lang/${locale}.json`)
     i18n.global.setLocaleMessage(locale, messages.default)
     return nextTick()

src/lang/en.json

@@ -79,5 +79,8 @@
 	"blueprints.home.title": "Blueprints",
 	"blueprints.home.subtitle": "Blueprints are definition files, design patterns used to determine how a game server instance will be built, each game server can only have one blueprint defined for it throughout its lifetime. Internally, blueprints are files in .conf format and have their own semantics.",
 	"blueprints.empty-state.title": "Blueprints have... gone?",
-	"blueprints.empty-state.description": "Import or create new blueprints and they will appear here."
+	"blueprints.empty-state.description": "Import or create new blueprints and they will appear here.",
+	"setup.title": "Let's get started",
+	"setup.header.label.docs": "Need help?",
+	"setup.header.label.login": "Log in"
 }

src/lang/pt.json

@@ -1 +1,5 @@
-{}
+{
+  "setup.title": "Configurar credenciais",
+  "setup.header.label.docs": "Precisa de ajuda?",
+  "setup.header.label.login": "Fazer login"
+}

src/main.ts

@@ -6,7 +6,7 @@ import { createVfm } from "vue-final-modal"
 import ECharts from "vue-echarts"
 import router from "@/router"
 import i18n, { DEFAULT_LOCALE, loadLocaleMessages } from "@/i18n"
-import {createPinia} from "pinia";
+import { createPinia } from "pinia"
 import VueProgressiveImage from "vue-progressive-image"
 import logService from "@/modules/platform/api/services/log.service"
 import configService from "@/modules/platform/api/services/config.service"

src/modules/accounts/api/services/account.service.ts → src/modules/accounts/api/services/accounts.service.ts

@@ -2,22 +2,29 @@ import type { Logger } from "@/modules/platform/api/services/log.service"
 import { useAccountsStore } from "../../accounts.store"
 import logService from "@/modules/platform/api/services/log.service"
 import type { Account } from "../models/account.model"
+import httpService from "@/modules/platform/api/services/http.service"
+import type { AxiosResponse } from "axios"
 
-class AccountService {
+class AccountsService {
     private readonly logger!: Logger
 
     constructor() {
-        this.logger = logService.create(AccountService.name)
+        this.logger = logService.create(AccountsService.name)
     }
 
     get isLoggedIn(): boolean {
         return useAccountsStore().isLoggedIn
     }
 
+    async listAccounts(): Promise<Account[]> {
+        return httpService.get("accounts")
+            .then((res: AxiosResponse) => res.data as Account[]);
+    }
+
     async updateAccount(account: Account): Promise<void> {
         this.logger.debug("Account updated", account)
         useAccountsStore().updateAccount(account)
     }
 }
 
-export default new AccountService()
+export default new AccountsService()

src/modules/auth/guards/authenticated-only.guard.ts

@@ -1,5 +1,5 @@
 import type { NavigationGuard, NavigationGuardNext, RouteLocationNormalized } from "vue-router"
-import accountService from "@/modules/accounts/api/services/account.service"
+import accountService from "@/modules/accounts/api/services/accounts.service"
 import authService from "@/modules/auth/api/services/auth.service"
 import { isNull } from "@/utils"
 import type { Account } from "@/modules/accounts/api/models/account.model"
@@ -22,7 +22,7 @@ export const AuthenticatedOnlyGuard: NavigationGuard = (
         .verify(localToken!)
         .then(async (account: Account) => {
             await accountService.updateAccount(account)
-            next();
+            next()
         })
         .catch((error: Error) => {
             logService.debug("Unable to verify local token", error)

src/modules/platform/api/models/server-info.ts

@@ -0,0 +1,3 @@
+export type ServerInfo = {
+	setup: boolean
+}

src/modules/platform/api/services/server.service.ts

@@ -0,0 +1,23 @@
+import type { ServerInfo } from "@/modules/platform/api/models/server-info"
+import { usePlatformStore } from "@/modules/platform/platform.store"
+import type { Logger } from "@/modules/platform/api/services/log.service"
+import logService from "@/modules/platform/api/services/log.service"
+
+class ServerService {
+
+    private readonly logger: Logger = logService.create("backend")
+
+    async getInfo(): Promise<ServerInfo> {
+        const store = usePlatformStore()
+        if (store.hasServerInfo)
+            return store.getServerInfo
+
+        const value = { setup: true } as ServerInfo
+        this.logger.debug(value);
+        store.updateServerInfo(value)
+        return value
+        // return httpService.get("/").then((res: AxiosResponse) => res.data as SystemInfo);
+    }
+}
+
+export default new ServerService()

src/modules/platform/platform.store.ts

@@ -0,0 +1,25 @@
+import { defineStore } from "pinia"
+import type { ServerInfo } from "@/modules/platform/api/models/server-info"
+import { isNull } from "@/utils"
+
+type PlatformStore = { serverInfo: ServerInfo | null }
+
+export const usePlatformStore = defineStore("platform", {
+    state: (): PlatformStore => ({ serverInfo: null }),
+    getters: {
+        getServerInfo(): ServerInfo {
+            if (!this.hasServerInfo)
+                throw new Error("Missing system information")
+
+            return this.serverInfo!
+        },
+        hasServerInfo(): boolean {
+            return !isNull(this.serverInfo);
+        }
+    },
+    actions: {
+        updateServerInfo(serverInfo: ServerInfo) {
+            this.serverInfo = serverInfo;
+        }
+    }
+})

src/modules/platform/ui/components/LoadingState.vue

@@ -10,7 +10,7 @@ import { useLoading } from "vue-loading-overlay"
 
 const root = ref(null)
 const loading = useLoading({
-    isFullPage: false,
+    isFullPage: true,
     lockScroll: true
 })
 

src/modules/platform/ui/pages/SetupPage.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="header">
+    <VContainer class="items">
+      <TheLogo
+        black
+        class="logo"
+      />
+      <ul class="links">
+        <li>
+          <a
+            v-t="'setup.header.label.docs'"
+            :href="links.docs"
+            target="_blank"
+          />
+        </li>
+        <li>
+          <a
+            v-t="'setup.header.label.login'"
+            :href="links.login"
+          />
+        </li>
+      </ul>
+    </VContainer>
+  </div>
+  <div class="root">
+    <VContainer>
+      <h2
+        v-t="'setup.title'"
+        class="title"
+      />
+      <h4>Let's get you up and running!</h4>
+    </VContainer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VContainer from "@/modules/platform/ui/components/grid/VContainer.vue"
+import TheLogo from "@/modules/platform/ui/components/TheLogo.vue"
+import configService from "@/modules/platform/api/services/config.service"
+import { useRouter } from "vue-router"
+
+const router = useRouter()
+const links = {
+    docs: configService.appWebsite,
+    login: "/login"
+}
+</script>
+
+<style scoped lang="scss">
+.root {
+    background-color: var(--kt-background-surface);
+    height: 100%;
+    width: 100%;
+}
+
+.title {
+    margin-top: 0.8em;
+    user-select: none;
+}
+
+.header {
+    background-color: var(--kt-background-surface);
+    border-bottom: 1px solid var(--kt-border-medium);
+    padding: 0.8rem 0;
+
+    .items {
+        display: flex;
+        flex-direction: row;
+        align-content: space-between;
+        width: 100%;
+    }
+
+    .logo {
+        width: 48px;
+        height: 48px;
+        border-radius: 8px;
+    }
+
+    .links {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        flex-grow: 1;
+        gap: 2.4rem;
+
+        li {
+            font-weight: 500;
+            font-size: 14px;
+
+            a {
+                text-decoration: none;
+                color: var(--kt-content-neutral);
+
+                &:hover {
+                    color: var(--kt-content-neutral-low);
+                }
+            }
+        }
+    }
+}
+
+.languages {
+
+}
+</style>

src/router.ts

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory } from "vue-router"
+import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router"
 import i18n, { loadLocaleMessages, setI18nLanguage, SUPPORTED_LOCALES } from "@/i18n"
 import { AuthRoutes } from "@/modules/auth/auth.routes"
 import { AccountsRoute } from "@/modules/accounts/accounts.routes"
@@ -14,17 +14,22 @@ export function importPage(module: string, path: string): () => Promise<unknown>
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
     routes: [
+        ...AuthRoutes,
         {
             path: "/",
             component: importPage("platform", "Root"),
             beforeEnter: AuthenticatedOnlyGuard,
             children: [
                 ...HomeRoutes,
                 ...AccountsRoute,
-                ...BlueprintsRoutes
+                ...BlueprintsRoutes,
             ]
         },
-        ...AuthRoutes
+        {
+            path: "/setup",
+            name: "setup",
+            component: importPage("platform", "Setup")
+        },
     ]
 })