refactor: layout of login related page

Signed-off-by: Ryan Wang <i@ryanc.cc>
halo-dev · Feb 27, 2024 · cc06f45 · cc06f45
1 parent b176c49
commit cc06f45
Show file tree

Hide file tree

Showing 9 changed files with 309 additions and 287 deletions.
diff --git a/ui/console-src/layouts/GatewayLayout.vue b/ui/console-src/layouts/GatewayLayout.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import IconLogo from "~icons/core/logo?width=5rem&height=2rem";
+</script>
+
+<template>
+  <div
+    class="flex h-screen flex-col items-center overflow-auto bg-white/90 pt-[30vh]"
+  >
+    <IconLogo class="mb-8 flex-none" />
+
+    <RouterView />
+  </div>
+</template>
diff --git a/ui/console-src/modules/system/users/Login.vue b/ui/console-src/modules/system/users/Login.vue
diff --git a/ui/console-src/modules/system/users/module.ts b/ui/console-src/modules/system/users/module.ts
@@ -3,10 +3,8 @@ import BasicLayout from "@console/layouts/BasicLayout.vue";
 import UserStatsWidget from "./widgets/UserStatsWidget.vue";
 import UserList from "./UserList.vue";
 import UserDetail from "./UserDetail.vue";
-import Login from "./Login.vue";
 import { IconUserSettings } from "@halo-dev/components";
 import { markRaw } from "vue";
-import Binding from "./Binding.vue";
 import NotificationWidget from "./widgets/NotificationWidget.vue";
 
 export default definePlugin({
@@ -15,22 +13,6 @@ export default definePlugin({
     NotificationWidget,
   },
   routes: [
-    {
-      path: "/login",
-      name: "Login",
-      component: Login,
-      meta: {
-        title: "core.login.title",
-      },
-    },
-    {
-      path: "/binding/:provider",
-      name: "Binding",
-      component: Binding,
-      meta: {
-        title: "core.binding.title",
-      },
-    },
     {
       path: "/users",
       name: "UsersRoot",

diff --git a/ui/console-src/router/routes.config.ts b/ui/console-src/router/routes.config.ts
@@ -2,10 +2,13 @@ import type { RouteRecordRaw } from "vue-router";
 import NotFound from "@/views/exceptions/NotFound.vue";
 import Forbidden from "@/views/exceptions/Forbidden.vue";
 import BasicLayout from "@console/layouts/BasicLayout.vue";
+import GatewayLayout from "@console/layouts/GatewayLayout.vue";
 import Setup from "@console/views/system/Setup.vue";
 import Redirect from "@console/views/system/Redirect.vue";
 import SetupInitialData from "@console/views/system/SetupInitialData.vue";
 import ResetPassword from "@console/views/system/ResetPassword.vue";
+import Login from "@console/views/system/Login.vue";
+import Binding from "@console/views/system/Binding.vue";
 
 export const routes: Array<RouteRecordRaw> = [
   {
@@ -24,13 +27,47 @@ export const routes: Array<RouteRecordRaw> = [
       },
     ],
   },
+  {
+    path: "/login",
+    component: GatewayLayout,
+    children: [
+      {
+        path: "",
+        name: "Login",
+        component: Login,
+        meta: {
+          title: "core.login.title",
+        },
+      },
+    ],
+  },
+  {
+    path: "/binding/:provider",
+    component: GatewayLayout,
+    children: [
+      {
+        path: "",
+        name: "Binding",
+        component: Binding,
+        meta: {
+          title: "core.binding.title",
+        },
+      },
+    ],
+  },
   {
     path: "/setup",
-    name: "Setup",
-    component: Setup,
-    meta: {
-      title: "core.setup.title",
-    },
+    component: GatewayLayout,
+    children: [
+      {
+        path: "",
+        name: "Setup",
+        component: Setup,
+        meta: {
+          title: "core.setup.title",
+        },
+      },
+    ],
   },
   {
     path: "/setup-initial-data",
@@ -47,11 +84,17 @@ export const routes: Array<RouteRecordRaw> = [
   },
   {
     path: "/reset-password",
-    name: "ResetPassword",
-    component: ResetPassword,
-    meta: {
-      title: "core.reset_password.title",
-    },
+    component: GatewayLayout,
+    children: [
+      {
+        path: "",
+        name: "ResetPassword",
+        component: ResetPassword,
+        meta: {
+          title: "core.reset_password.title",
+        },
+      },
+    ],
   },
 ];
 

diff --git a/...sole-src/modules/system/users/Binding.vue → ui/console-src/views/system/Binding.vue b/...sole-src/modules/system/users/Binding.vue → ui/console-src/views/system/Binding.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { computed, onBeforeMount, onMounted } from "vue";
 import router from "@console/router";
-import IconLogo from "~icons/core/logo?width=5rem&height=2rem";
 import { useUserStore } from "@/stores/user";
 import LoginForm from "@/components/login/LoginForm.vue";
 import { useRoute } from "vue-router";
@@ -51,41 +50,38 @@ function handleChangeType() {
 const isLoginType = computed(() => type.value !== "signup");
 </script>
 <template>
-  <div class="flex h-screen flex-col items-center bg-white/90 pt-[30vh]">
-    <IconLogo class="mb-8" />
-    <div class="flex w-72 flex-col">
-      <SignupForm
-        v-if="type === 'signup'"
-        button-text="core.binding.operations.signup_and_bind.button"
-        @succeed="handleBinding"
-      />
-      <LoginForm
-        v-else
-        button-text="core.binding.operations.login_and_bind.button"
-        @succeed="handleBinding"
-      />
-      <div
-        v-if="globalInfo?.allowRegistration"
-        class="flex justify-center gap-1 pt-3.5 text-xs"
+  <div class="flex w-72 flex-col">
+    <SignupForm
+      v-if="type === 'signup'"
+      button-text="core.binding.operations.signup_and_bind.button"
+      @succeed="handleBinding"
+    />
+    <LoginForm
+      v-else
+      button-text="core.binding.operations.login_and_bind.button"
+      @succeed="handleBinding"
+    />
+    <div
+      v-if="globalInfo?.allowRegistration"
+      class="flex justify-center gap-1 pt-3.5 text-xs"
+    >
+      <span class="text-slate-500">
+        {{
+          isLoginType
+            ? $t("core.login.operations.signup.label")
+            : $t("core.login.operations.return_login.label")
+        }}
+      </span>
+      <span
+        class="cursor-pointer text-secondary hover:text-gray-600"
+        @click="handleChangeType"
       >
-        <span class="text-slate-500">
-          {{
-            isLoginType
-              ? $t("core.login.operations.signup.label")
-              : $t("core.login.operations.return_login.label")
-          }}
-        </span>
-        <span
-          class="cursor-pointer text-secondary hover:text-gray-600"
-          @click="handleChangeType"
-        >
-          {{
-            isLoginType
-              ? $t("core.login.operations.signup.button")
-              : $t("core.login.operations.return_login.button")
-          }}
-        </span>
-      </div>
+        {{
+          isLoginType
+            ? $t("core.login.operations.signup.button")
+            : $t("core.login.operations.return_login.button")
+        }}
+      </span>
     </div>
   </div>
 </template>