From 9be594f9dc83716114e7c4279bc96ec5f3d9e4a1 Mon Sep 17 00:00:00 2001
From: 0xJacky <me@jackyu.cn>
Date: Tue, 2 Aug 2022 14:03:35 +0800
Subject: [PATCH] [frontend-next] Refactored install and 404 pages

---
 frontend/src/api/index.ts                     |  12 ++
 .../StdDataDisplay/StdPagination.vue          |   1 -
 frontend/src/lib/http/index.ts                |  10 +-
 frontend/src/routes/index.ts                  |  33 +---
 frontend/src/views/other/Error.vue            |  20 +-
 frontend/src/views/other/Install.vue          | 186 ++++++++++--------
 frontend/src/views/other/Login.vue            |  15 +-
 server/api/install.go                         | 105 +++++-----
 8 files changed, 199 insertions(+), 183 deletions(-)
 create mode 100644 frontend/src/api/index.ts

diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
new file mode 100644
index 00000000..4f15603f
--- /dev/null
+++ b/frontend/src/api/index.ts
@@ -0,0 +1,12 @@
+import http from '@/lib/http'
+
+const install = {
+    get_lock() {
+        return http.get('/install')
+    },
+    install_nginx_ui(data: any) {
+        return http.post('/install', data)
+    }
+}
+
+export default install
diff --git a/frontend/src/components/StdDataDisplay/StdPagination.vue b/frontend/src/components/StdDataDisplay/StdPagination.vue
index 1b5c124a..7ae71be3 100644
--- a/frontend/src/components/StdDataDisplay/StdPagination.vue
+++ b/frontend/src/components/StdDataDisplay/StdPagination.vue
@@ -17,7 +17,6 @@ function changePage(num: number) {
             :pageSize="pagination.per_page"
             :size="size"
             :total="pagination.total"
-            :show-total="(total, range) => `当前显示${range[0]}-${range[1]}条数据，共${total}条数据`"
             class="pagination"
             @change="changePage"
         />
diff --git a/frontend/src/lib/http/index.ts b/frontend/src/lib/http/index.ts
index 9338e512..f1b2cb09 100644
--- a/frontend/src/lib/http/index.ts
+++ b/frontend/src/lib/http/index.ts
@@ -2,15 +2,12 @@ import axios, {AxiosRequestConfig} from 'axios'
 import {useUserStore} from '@/pinia'
 import {storeToRefs} from 'pinia'
 
+import router from '@/routes'
+
 const user = useUserStore()
 
 const {token} = storeToRefs(user)
 
-declare module 'axios' {
-    export interface AxiosResponse<T = any> extends Promise<T> {
-    }
-}
-
 let instance = axios.create({
     baseURL: import.meta.env.VITE_API_ROOT,
     timeout: 50000,
@@ -38,7 +35,6 @@ instance.interceptors.request.use(
     }
 )
 
-
 instance.interceptors.response.use(
     response => {
         return Promise.resolve(response.data)
@@ -47,6 +43,8 @@ instance.interceptors.response.use(
         switch (error.response.status) {
             case 401:
             case 403:
+                user.logout()
+                await router.push('/login')
                 break
         }
         return Promise.reject(error.response.data)
diff --git a/frontend/src/routes/index.ts b/frontend/src/routes/index.ts
index 6d6ebac2..9506f40e 100644
--- a/frontend/src/routes/index.ts
+++ b/frontend/src/routes/index.ts
@@ -100,7 +100,7 @@ export const routes = [
     {
         path: '/install',
         name: () => $gettext('Install'),
-        // component: () => import('@/views/other/Install.vue'),
+        component: () => import('@/views/other/Install.vue'),
         meta: {noAuth: true}
     },
     {
@@ -110,16 +110,10 @@ export const routes = [
         meta: {noAuth: true}
     },
     {
-        path: '/404',
-        name: () => $gettext('404 Not Found'),
-        component: () => import('@/views/other/Error.vue'),
-        meta: {noAuth: true, status_code: 404, error: 'Not Found'}
-    },
-    {
-        path: '/*',
+        path: '/:pathMatch(.*)*',
         name: () => $gettext('Not Found'),
-        redirect: '/404',
-        meta: {noAuth: true}
+        component: () => import('@/views/other/Error.vue'),
+        meta: {noAuth: true, status_code: 404, error: () => $gettext('Not Found')}
     }
 ]
 
@@ -130,25 +124,8 @@ const router = createRouter({
 })
 
 router.beforeEach((to, from, next) => {
-
     // @ts-ignore
-    document.title = to.name() + ' | Nginx UI'
-
-    if (import.meta.env.MODE === 'production') {
-        // axios.get('/version.json?' + Date.now()).then(r => {
-        //     if (!(process.env.VUE_APP_VERSION === r.data.version
-        //         && Number(process.env.VUE_APP_BUILD_ID) === r.data.build_id)) {
-        //         Vue.prototype.$info({
-        //             title: $gettext('System message'),
-        //             content: $gettext('Detected version update, this page will refresh.'),
-        //             onOk() {
-        //                 location.reload()
-        //             },
-        //             okText: $gettext('OK')
-        //         })
-        //     }
-        // })
-    }
+    document.title = to.name?.() + ' | Nginx UI'
 
     const user = useUserStore()
     const {is_login} = user
diff --git a/frontend/src/views/other/Error.vue b/frontend/src/views/other/Error.vue
index dce22d36..fea174f7 100644
--- a/frontend/src/views/other/Error.vue
+++ b/frontend/src/views/other/Error.vue
@@ -1,16 +1,17 @@
+<script setup lang="ts">
+import {useGettext} from 'vue3-gettext'
+
+const {$gettext} = useGettext()
+</script>
+
 <template>
     <div class="wrapper">
-        <h1 class="title">{{ $route.meta.status_code ? $route.meta.status_code : 404 }}</h1>
-        <p>{{ $route.meta.error ? $route.meta.error : $gettext('File Not Found') }}</p>
+        <h1 class="title">{{ $route.meta.status_code || 404 }}</h1>
+        <p>{{ $route.meta.error?.() ?? $gettext('File Not Found') }}</p>
+        <a-button type="primary" v-translate @click="$router.push('/')">Back Home</a-button>
     </div>
 </template>
 
-<script>
-export default {
-    name: 'Error'
-}
-</script>
-
 <style lang="less" scoped>
 body, div, h1, html {
     padding: 0;
@@ -27,7 +28,8 @@ body, html {
 
 h1 {
     font-size: 8em;
-    font-weight: 100
+    font-weight: 100;
+    margin: 10px 0;
 }
 
 a {
diff --git a/frontend/src/views/other/Install.vue b/frontend/src/views/other/Install.vue
index 83763462..e19a7bf5 100644
--- a/frontend/src/views/other/Install.vue
+++ b/frontend/src/views/other/Install.vue
@@ -1,72 +1,130 @@
+<script setup lang="ts">
+import {Form, message} from 'ant-design-vue'
+import SetLanguage from '@/components/SetLanguage/SetLanguage.vue'
+import {reactive, ref} from 'vue'
+import gettext from '@/gettext'
+import install from '@/api'
+import {useRoute, useRouter} from 'vue-router'
+import {MailOutlined, UserOutlined, LockOutlined, DatabaseOutlined} from '@ant-design/icons-vue'
+
+const {$gettext, interpolate} = gettext
+
+const thisYear = new Date().getFullYear()
+const loading = ref(false)
+
+const route = useRoute()
+const router = useRouter()
+
+install.get_lock().then(async (r: { lock: boolean }) => {
+    if (r.lock) {
+        await router.push('/login')
+    }
+})
+
+const modelRef = reactive({
+    email: '',
+    username: '',
+    password: '',
+    database: ''
+})
+
+const rulesRef = reactive({
+    email: [
+        {
+            required: true,
+            type: 'email',
+            message: () => $gettext('Please input your E-mail!'),
+        }
+    ],
+    username: [
+        {
+            required: true,
+            message: () => $gettext('Please input your username!'),
+        }
+    ],
+    password: [
+        {
+            required: true,
+            message: () => $gettext('Please input your password!'),
+        }
+    ],
+    database: [
+        {
+            message: () => interpolate(
+                $gettext('The filename cannot contain the following characters: %{c}'),
+                {c: '& &quot; ? < > # {} % ~ / \\'}
+            ),
+        }
+    ],
+})
+
+const {validate, validateInfos} = Form.useForm(modelRef, rulesRef)
+
+const onSubmit = () => {
+    validate().then(() => {
+        // modelRef
+        loading.value = true
+        install.install_nginx_ui(modelRef).then(async () => {
+            message.success($gettext('Install successfully'))
+            await router.push('/login')
+        }).catch(e => {
+            message.error(e.message ?? $gettext('Server error'))
+        }).finally(() => {
+            loading.value = false
+        })
+    })
+}
+</script>
+
 <template>
     <div class="login-form">
         <div class="project-title">
             <h1>Nginx UI</h1>
         </div>
-        <a-form
-            id="components-form-install"
-            :form="form"
-            class="login-form"
-            @submit="handleSubmit"
-        >
-            <a-form-item>
+        <a-form id="components-form-install" class="login-form">
+            <a-form-item v-bind="validateInfos.email">
                 <a-input
-                    v-decorator="[
-          'email',
-          { rules: [{
-                type: 'email',
-                message: $gettext('Invalid E-mail!'),
-              },
-              {
-                required: true,
-                message: $gettext('Please input your E-mail!'),
-              },] },
-        ]"
+                    v-model:value="modelRef.email"
                     :placeholder="$gettext('Email (*)')"
                 >
-                    <a-icon slot="prefix" type="mail" style="color: rgba(0,0,0,.25)"/>
+                    <template #prefix>
+                        <MailOutlined/>
+                    </template>
                 </a-input>
             </a-form-item>
-            <a-form-item>
+            <a-form-item v-bind="validateInfos.username">
                 <a-input
-                    v-decorator="[
-          'username',
-          { rules: [{ required: true, message: $gettext('Please input your username!') }] },
-        ]"
+                    v-model:value="modelRef.username"
                     :placeholder="$gettext('Username (*)')"
                 >
-                    <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
+                    <template #prefix>
+                        <UserOutlined/>
+                    </template>
                 </a-input>
             </a-form-item>
-            <a-form-item>
-                <a-input
-                    v-decorator="[
-          'password',
-          { rules: [{ required: true, message: $gettext('Please input your password!') }] },
-        ]"
-                    type="password"
+            <a-form-item v-bind="validateInfos.password">
+                <a-input-password
+                    v-model:value="modelRef.password"
                     :placeholder="$gettext('Password (*)')"
                 >
-                    <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
-                </a-input>
+                    <template #prefix>
+                        <LockOutlined/>
+                    </template>
+                </a-input-password>
             </a-form-item>
             <a-form-item>
                 <a-input
-                    v-decorator="[
-          'database',
-          { rules: [{ pattern: /^[^\\/:*?\x22<>|]{1,120}$/,
-          message: $gettextInterpolate(
-              $gettext('The filename cannot contain the following characters: %{c}'),
-              {c: '& &quot; ? < > # {} % ~ / \\'}
-          )}] },
-        ]"
+                    v-bind="validateInfos.database"
+                    v-model:value="modelRef.database"
                     :placeholder="$gettext('Database (Optional, default: database)')"
                 >
-                    <a-icon slot="prefix" type="database" style="color: rgba(0,0,0,.25)"/>
+                    <template #prefix>
+                        <DatabaseOutlined/>
+                    </template>
                 </a-input>
             </a-form-item>
             <a-form-item>
-                <a-button type="primary" :block="true" html-type="submit" :loading="loading">
+                <a-button type="primary" :block="true" @click="onSubmit" html-type="submit" :loading="loading">
                     <translate>Install</translate>
                 </a-button>
             </a-form-item>
@@ -79,46 +137,6 @@
 
 </template>
 
-<script>
-import SetLanguage from '@/components/SetLanguage/SetLanguage'
-
-export default {
-    name: 'Login',
-    components: {SetLanguage},
-    data() {
-        return {
-            form: {},
-            lock: true,
-            thisYear: new Date().getFullYear(),
-            loading: false
-        }
-    },
-    created() {
-        this.form = this.$form.createForm(this)
-    },
-    mounted() {
-        this.$api.install.get_lock().then(r => {
-            if (r.lock) {
-                this.$router.push('/login')
-            }
-        })
-    },
-    methods: {
-        handleSubmit: async function (e) {
-            e.preventDefault()
-            this.loading = true
-            await this.form.validateFields(async (err, values) => {
-                if (!err) {
-                    this.$api.install.install_nginx_ui(values).then(() => {
-                        this.$router.push('/login')
-                    })
-                }
-                this.loading = false
-            })
-        },
-    },
-}
-</script>
 <style lang="less">
 .project-title {
     margin: 50px;
diff --git a/frontend/src/views/other/Login.vue b/frontend/src/views/other/Login.vue
index eb552cc3..7753f205 100644
--- a/frontend/src/views/other/Login.vue
+++ b/frontend/src/views/other/Login.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import {useUserStore} from '@/pinia'
+
 const thisYear = new Date().getFullYear()
 
 import {LockOutlined, UserOutlined} from '@ant-design/icons-vue'
@@ -23,13 +25,13 @@ const rulesRef = reactive({
     username: [
         {
             required: true,
-            message: $gettext('Please input your username!'),
+            message: () => $gettext('Please input your username!'),
         }
     ],
     password: [
         {
             required: true,
-            message: $gettext('Please input your password!'),
+            message: () => $gettext('Please input your password!'),
         }
     ]
 })
@@ -44,11 +46,18 @@ const onSubmit = () => {
             const next = (route.query?.next || '').toString() || '/'
             await router.push(next)
         }).catch(e => {
-            message.error(e.message)
+            message.error(e.message ?? $gettext('Server error'))
         })
     })
 }
 
+const user = useUserStore()
+
+if (user.is_login) {
+    const next = (route.query?.next || '').toString() || '/dashboard'
+    router.push(next)
+}
+
 </script>
 
 <template>
diff --git a/server/api/install.go b/server/api/install.go
index 613e356a..9ca36958 100644
--- a/server/api/install.go
+++ b/server/api/install.go
@@ -1,73 +1,74 @@
 package api
 
 import (
-    "github.com/0xJacky/Nginx-UI/server/model"
-    "github.com/0xJacky/Nginx-UI/server/settings"
-    "github.com/gin-gonic/gin"
-    "github.com/google/uuid"
-    "golang.org/x/crypto/bcrypt"
-    "net/http"
+	"github.com/0xJacky/Nginx-UI/server/model"
+	"github.com/0xJacky/Nginx-UI/server/settings"
+	"github.com/gin-gonic/gin"
+	"github.com/google/uuid"
+	"golang.org/x/crypto/bcrypt"
+	"net/http"
 )
 
 func installLockStatus() bool {
-    return "" != settings.ServerSettings.JwtSecret
+	return "" != settings.ServerSettings.JwtSecret
 }
 
 func InstallLockCheck(c *gin.Context) {
-    c.JSON(http.StatusOK, gin.H{
-        "lock": installLockStatus(),
-    })
+	c.JSON(http.StatusOK, gin.H{
+		"lock": installLockStatus(),
+	})
 }
 
 type InstallJson struct {
-    Email    string `json:"email" binding:"required,email"`
-    Username string `json:"username" binding:"required,max=255"`
-    Password string `json:"password" binding:"required,max=255"`
-    Database string `json:"database"`
+	Email    string `json:"email" binding:"required,email"`
+	Username string `json:"username" binding:"required,max=255"`
+	Password string `json:"password" binding:"required,max=255"`
+	Database string `json:"database"`
 }
 
 func InstallNginxUI(c *gin.Context) {
-    // 安装过就别访问了
-    if installLockStatus() {
-        c.JSON(http.StatusForbidden, gin.H{
-            "message": "installed",
-        })
-        return
-    }
-    var json InstallJson
-    ok := BindAndValid(c, &json)
-    if !ok {
-        return
-    }
+	// Visit this api after installed is forbidden
+	if installLockStatus() {
+		c.JSON(http.StatusForbidden, gin.H{
+			"error": "installed",
+		})
+		return
+	}
+	var json InstallJson
+	ok := BindAndValid(c, &json)
+	if !ok {
+		return
+	}
 
-    settings.ServerSettings.JwtSecret = uuid.New().String()
-    settings.ServerSettings.Email = json.Email
-    if "" != json.Database {
-        settings.ServerSettings.Database = json.Database
-    }
-    settings.ReflectFrom()
+	settings.ServerSettings.JwtSecret = uuid.New().String()
+	settings.ServerSettings.Email = json.Email
+	if "" != json.Database {
+		settings.ServerSettings.Database = json.Database
+	}
+	settings.ReflectFrom()
 
-    err := settings.Save()
-    if err != nil {
-        ErrHandler(c, err)
-        return
-    }
+	err := settings.Save()
+	if err != nil {
+		ErrHandler(c, err)
+		return
+	}
 
-    // Init model
-    model.Init()
+	// Init model
+	model.Init()
 
-    curd := model.NewCurd(&model.Auth{})
-    pwd, _ := bcrypt.GenerateFromPassword([]byte(json.Password), bcrypt.DefaultCost)
-    err = curd.Add(&model.Auth{
-        Name:     json.Username,
-        Password: string(pwd),
-    })
-    if err != nil {
-        ErrHandler(c, err)
-        return
-    }
-    c.JSON(http.StatusOK, gin.H{
-        "message": "ok",
-    })
+	curd := model.NewCurd(&model.Auth{})
+	pwd, _ := bcrypt.GenerateFromPassword([]byte(json.Password), bcrypt.DefaultCost)
+	err = curd.Add(&model.Auth{
+		Name:     json.Username,
+		Password: string(pwd),
+	})
+
+	if err != nil {
+		ErrHandler(c, err)
+		return
+	}
+	c.JSON(http.StatusOK, gin.H{
+		"message": "ok",
+	})
 
 }