feat: 安全登录界面样式优化 (#814)

frontend/components.d.ts

@@ -90,6 +90,7 @@ declare module 'vue' {
     TableSetting: typeof import('./src/components/table-setting/index.vue')['default']
     Terminal: typeof import('./src/components/terminal/index.vue')['default']
     Tooltip: typeof import('./src/components/tooltip/index.vue')['default']
+    Unsafe: typeof import('./src/components/error-message/unsafe.vue')['default']
     Upload: typeof import('./src/components/upload/index.vue')['default']
     VCharts: typeof import('./src/components/v-charts/index.vue')['default']
   }

frontend/src/assets/images/unsafe.svg

@@ -0,0 +1,20 @@
+<svg width="250" height="250" viewBox="0 0 250 250" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_17_668)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M137.1 72.5238C137.1 49.0386 118.062 30 94.5763 30H79.7382C56.2529 30 37.2144 49.0386 37.2144 72.5238V127.805H137.1V72.5238ZM79.7381 46.2857H94.5762L95.1468 46.2918C109.374 46.5953 120.814 58.2236 120.814 72.5238L120.812 111.517H53.5V72.5238L53.5061 71.9532C53.8096 57.7258 65.4379 46.2857 79.7381 46.2857Z" fill="#B5BEC8"/>
+<rect x="6" y="98.6719" width="162.314" height="120.695" rx="3" fill="#D6DAE1"/>
+<path d="M89.3762 198.557C108.914 198.557 124.752 182.719 124.752 163.181C124.752 143.643 108.914 127.805 89.3762 127.805C69.8385 127.805 54 143.643 54 163.181C54 182.719 69.8385 198.557 89.3762 198.557Z" fill="white"/>
+<path d="M94.3999 170.798C95.4168 170.279 96.3558 169.6 97.1781 168.778C99.241 166.715 100.4 163.917 100.4 161C100.4 158.083 99.241 155.285 97.1781 153.222C95.1152 151.159 92.3173 150 89.3999 150C86.4825 150 83.6846 151.159 81.6217 153.222C79.5588 155.285 78.3999 158.083 78.3999 161C78.3999 163.917 79.5588 166.715 81.6217 168.778C82.444 169.6 83.3831 170.279 84.3999 170.798V178C84.3999 179.105 85.2953 180 86.3999 180H92.3999C93.5045 180 94.3999 179.105 94.3999 178V170.798Z" fill="#B5BEC8"/>
+<rect x="187.043" y="77.8623" width="12.4857" height="60.3476" rx="3.45" fill="#B5BEC8"/>
+<path d="M193.286 87C182.243 87 173.291 95.9522 173.291 106.995C173.291 118.038 182.243 126.99 193.286 126.99C204.329 126.99 213.281 118.038 213.281 106.995C213.281 95.9522 204.329 87 193.286 87Z" fill="#B5BEC8"/>
+<path d="M193.286 97.8574C198.332 97.8574 202.424 101.949 202.424 106.996C202.424 112.042 198.332 116.134 193.286 116.134C188.239 116.134 184.147 112.042 184.147 106.996C184.147 101.949 188.239 97.8574 193.286 97.8574Z" fill="white"/>
+<path d="M137.552 134.048H215.724C221.72 134.048 226.581 138.909 226.581 144.905V208.51C226.581 214.506 221.72 219.367 215.724 219.367H126.695V219.367V144.905C126.695 138.909 131.556 134.048 137.552 134.048Z" fill="#D6DAE1"/>
+<rect x="143.343" y="134.048" width="99.8857" height="85.319" rx="3" fill="#E7EBED"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M167.41 179.828C167.41 165.537 178.995 153.952 193.286 153.952C207.577 153.952 219.162 165.537 219.162 179.828C219.162 194.119 207.577 205.705 193.286 205.705C178.995 205.705 167.41 194.119 167.41 179.828ZM217.353 179.828C217.353 166.537 206.578 155.762 193.286 155.762C179.994 155.762 169.219 166.537 169.219 179.828C169.219 193.12 179.994 203.895 193.286 203.895C206.578 203.895 217.353 193.12 217.353 179.828Z" fill="#050B3C"/>
+<path d="M177.234 162.5L213.003 193.794L211.812 195.156L176.042 163.862L177.234 162.5Z" fill="#2E344D"/>
+</g>
+<defs>
+<clipPath id="clip0_17_668">
+<rect width="250" height="250" fill="white"/>
+</clipPath>
+</defs>
+</svg>

frontend/src/components/error-message/unsafe.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="not-container">
+        <img src="@/assets/images/unsafe.svg" class="not-img" alt="404" />
+        <div class="not-detail">
+            <h2>{{ $t('commons.login.notSafe') }}</h2>
+            <h4>{{ $t('commons.login.safeEntrance1') }}</h4>
+            <div>
+                <h4>{{ $t('commons.login.safeEntrance2') }}</h4>
+                <div style="cursor: pointer; float: left">
+                    <el-icon color="#409EFC" style="margin-left: 5px; margin-top: 33px" :size="18" @click="onCopy()">
+                        <DocumentCopy />
+                    </el-icon>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts" name="404">
+import i18n from '@/lang';
+import { MsgSuccess } from '@/utils/message';
+
+const onCopy = () => {
+    let input = document.createElement('input');
+    input.value = '1pcth user-info';
+    document.body.appendChild(input);
+    input.select();
+    document.execCommand('Copy');
+    document.body.removeChild(input);
+    MsgSuccess(i18n.global.t('commons.msg.copySuccess'));
+};
+</script>
+
+<style scoped lang="scss">
+.not-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    .not-img {
+        margin-top: 300px;
+    }
+    .not-detail {
+        margin-top: 300px;
+        display: flex;
+        flex-direction: column;
+        h2,
+        h4 {
+            padding: 0;
+            margin: 0;
+        }
+        h2 {
+            font-size: 60px;
+            color: #434e59;
+        }
+        h4 {
+            margin: 30px 0 20px;
+            float: left;
+            font-size: 19px;
+            font-weight: normal;
+            color: #848587;
+        }
+    }
+}
+</style>

frontend/src/lang/modules/en.ts

@@ -114,8 +114,9 @@ const message = {
             errorMfaInfo: 'Incorrect authentication information, please try again!',
             captchaHelper: 'Captcha',
             errorCaptcha: 'Captcha code error!',
-            safeEntrance:
+            notSafe: 'Access Denied',
-                'The command "1pctl user-info" can be used in SSH terminal to view the panel entrance as the secure login has been enabled in the current environment.',
+            safeEntrance1: 'The secure login has been enabled in the current environment',
+            safeEntrance2: 'Enter the following command on the SSH terminal to view the panel entry: 1pctl user-info',
             codeInput: 'Please enter the 6-digit verification code of the MFA validator',
             mfaTitle: 'MFA Certification',
             mfaCode: 'MFA verification code',

frontend/src/lang/modules/zh.ts

@@ -118,7 +118,9 @@ const message = {
             errorMfaInfo: '错误的验证信息，请重试！',
             captchaHelper: '验证码',
             errorCaptcha: '验证码错误！',
-            safeEntrance: '当前环境已经开启了安全入口登录，在 SSH 终端输入以下命令来查看面板入口: 1pctl user-info',
+            notSafe: '暂无权限访问',
+            safeEntrance1: '当前环境已经开启了安全入口登录',
+            safeEntrance2: '在 SSH 终端输入以下命令来查看面板入口: 1pctl user-info',
             codeInput: '请输入 MFA 验证器的 6 位验证码',
             mfaTitle: 'MFA 认证',
             mfaCode: 'MFA 验证码',

frontend/src/views/login/index.vue

@@ -15,11 +15,8 @@
                 </div>
             </div>
         </div>
-        <div style="margin-left: 50px" v-if="!isSafety">
+        <div v-if="!isSafety">
-            <div class="not-found">
+            <UnSafe />
-                <h1>404 NOT FOUND</h1>
-                <p>{{ $t('commons.login.safeEntrance') }}</p>
-            </div>
         </div>
     </div>
 </template>
@@ -27,11 +24,12 @@
 <script setup lang="ts" name="login">
 import { checkIsSafety } from '@/api/modules/auth';
 import LoginForm from './components/login-form.vue';
+import UnSafe from '@/components/error-message/unsafe.vue';
 import { ref, onMounted } from 'vue';
 import { GlobalStore } from '@/store';
 const globalStore = GlobalStore();
 
-const isSafety = ref(false);
+const isSafety = ref(true);
 const screenWidth = ref(null);
 
 interface Props {
@@ -138,23 +136,4 @@ onMounted(() => {
         }
     }
 }
-
-.not-found {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100vh;
-    .h1 {
-        font-size: 5rem;
-        margin: 0 0 1rem;
-    }
-
-    .p {
-        font-size: 1.2rem;
-        max-width: 500px;
-        text-align: center;
-        margin: 0 0 2rem;
-    }
-}
 </style>