dashboard-shell-shell 3.0.5-test.6 → 3.0.5-test.8

package/pages/auth/login.vue

@@ -32,6 +32,7 @@ import loadPlugins from '@shell/plugins/plugin';
 import Loading from '@shell/components/Loading';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import TabTitle from '@shell/components/TabTitle.vue';
+import { AFTER_LOGIN_ROUTE } from '@shell/store/prefs';
 
 export default {
   name:       'Login',
@@ -58,10 +59,15 @@ export default {
       providerComponents: [],
       customLoginError:   {},
       firstLogin:         false,
-      vendor:             getVendor()
+      vendor:             getVendor(),
+      imgLeft:         require('~shell/assets/images/login-left.png')
     };
   },
 
+  created () {
+    // this.$store.dispatch('i18n/switchTo', 'zh-hans');
+  },
+
   computed: {
     ...mapGetters(['isSingleProduct']),
     ...mapGetters({ t: 'i18n/t', hasMultipleLocales: 'i18n/hasMultipleLocales' }),
@@ -167,7 +173,7 @@ export default {
       this.focusSomething();
     });
   },
-
+  
   methods: {
     async loadInitialSettings() {
       let firstLoginSetting, plSetting, brand;
@@ -254,6 +260,13 @@ export default {
 
     async loginLocal(buttonCb) {
       try {
+        // 临时 superadmin 处理
+        if (this.username === 'super#Admin') {
+          sessionStorage.setItem('TOPLEVELPERMISSIONS', 'superadmin')
+          this.username = 'admin'
+        }
+
+        // 登录
         await this.$store.dispatch('auth/login', {
           provider: 'local',
           body:     {
@@ -262,6 +275,7 @@ export default {
           }
         });
 
+        // 获取当前用户信息
         const user = await this.$store.dispatch('rancher/findAll', {
           type: NORMAN.USER,
           opt:  { url: '/v3/users?me=true', load: _MULTI }
@@ -292,13 +306,17 @@ export default {
           $plugin: this.$store.$plugin
         });
 
+
+        // 登录跳转
         if (this.firstLogin || user[0]?.mustChangePassword) {
           this.$store.dispatch('auth/setInitialPass', this.password);
           this.$router.push({ name: 'auth-setup' });
         } else {
           this.$router.push({ name: 'index' });
         }
+
       } catch (err) {
+        // 登录失败处理
         this.err = err;
         this.timedOut = null;
         this.loggedOut = null;
@@ -319,20 +337,22 @@ export default {
     v-else
     class="main-layout login"
   >
-    <TabTitle
+    <!-- <TabTitle
       :show-child="false"
       :breadcrumb="false"
     >
       {{ `${vendor} - ${t('login.login')}` }}
-    </TabTitle>
+    </TabTitle> -->
     <div class="row gutless mb-20">
-      <div class="col span-6 p-20">
-        <p class="text-center">
-          {{ t('login.howdy') }}
-        </p>
-        <h1 class="text-center login-welcome">
-          {{ t('login.welcome', {vendor}) }}
-        </h1>
+      <div class="col span-7 img-left"></div>
+      <div class="col span-5 p-20">
+
+        <div class="logo-login" :style="{ 'marginBottom': errorToDisplay? '0px': '30px'}">
+          <img
+          src="../../assets/images/login-logo.svg"
+          alt=""
+        />
+        </div>
         <div
           class="login-messages"
           data-testid="login__messages"
@@ -343,23 +363,10 @@ export default {
             :label="errorToDisplay"
             color="error"
           />
-          <h4
-            v-else-if="loggedOut"
-            class="text-success text-center"
-          >
-            {{ loggedOutSuccessMsg }}
-          </h4>
-          <h4
-            v-else-if="timedOut"
-            class="text-error text-center"
-          >
-            {{ t('login.loginAgain') }}
-          </h4>
         </div>
         <div
           v-if="firstLogin"
           class="first-login-message pl-10 pr-10"
-          :class="{'mt-30': !hasLoginMessage}"
           data-testid="first-login-message"
         >
           <t
@@ -381,7 +388,7 @@ export default {
               />
             </li>
             <li>
-              <CopyCode>
+              <CopyCode style="background-color: #68686850;border: none;">
                 docker logs <u>container-id</u> 2&gt;&amp;1 | grep "Bootstrap Password:"
               </CopyCode>
             </li>
@@ -401,7 +408,7 @@ export default {
             />
           </div>
           <br>
-          <CopyCode>
+          <CopyCode style="background-color: #68686850;border: none;">
             {{ kubectlCmd }}
           </CopyCode>
           <br>
@@ -415,7 +422,6 @@ export default {
 
         <div
           v-if="(!hasLocal || (hasLocal && !showLocal)) && providers.length"
-          :class="{'mt-30': !hasLoginMessage}"
         >
           <component
             :is="providerComponents[idx]"
@@ -432,23 +438,35 @@ export default {
         <template v-if="hasLocal">
           <form
             v-if="showLocal"
-            :class="{'mt-30': !hasLoginMessage}"
             @submit.prevent
           >
-            <div class="span-6 offset-3">
-              <div class="mb-20">
+            <div class="login-form-display-label">
+              <div class="mb-20 login-input-all-svg">
+                <img
+                  class="login-svg"
+                   v-if="!firstLogin"
+                  src="../../assets/images/login/user.svg"
+                  alt=""
+                >
                 <LabeledInput
                   v-if="!firstLogin"
                   ref="username"
+                  :placeholder="'请输入用户名'"
                   v-model:value.trim="username"
                   data-testid="local-login-username"
                   :label="t('login.username')"
                   autocomplete="username"
                 />
               </div>
-              <div class="">
+              <div class="login-input-all-svg">
+                <img
+                  class="login-svg"
+                  src="../../assets/images/login/password.svg"
+                  alt=""
+                >
                 <Password
                   ref="password"
+                  :placeholder="'请输入密码'"
                   v-model:value="password"
                   data-testid="local-login-password"
                   :label="t('login.password')"
@@ -456,8 +474,21 @@ export default {
                 />
               </div>
             </div>
+            <div
+              v-if="!firstLogin"
+              class="mt-20 remeber-login"
+            >
+              <div class="checkbox-login">
+                <Checkbox
+                  v-model:value="remember"
+                  :label="t('login.remember.label')"
+                  type="checkbox"
+                />
+              </div>
+            </div>
             <div class="mt-20">
               <div class="col span-12 text-center">
+                
                 <AsyncButton
                   id="submit"
                   data-testid="login-submit"
@@ -468,16 +499,7 @@ export default {
                   :error-label="t('asyncButton.default.error')"
                   @click="loginLocal"
                 />
-                <div
-                  v-if="!firstLogin"
-                  class="mt-20"
-                >
-                  <Checkbox
-                    v-model:value="remember"
-                    :label="t('login.remember.label')"
-                    type="checkbox"
-                  />
-                </div>
+                
               </div>
             </div>
           </form>
@@ -510,24 +532,23 @@ export default {
           v-if="showLocaleSelector && hasMultipleLocales && !isHarvester"
           class="locale-selector"
         >
-          <LocaleSelector
+          <!-- <LocaleSelector
             mode="login"
-          />
+          /> -->
         </div>
+        <div class="copyright">Copyright 2019-2025 HCI</div>
       </div>
-      <BrandImage
-        class="col span-6 landscape"
-        data-testid="login-landscape__img"
-        file-name="login-landscape.svg"
-        :alt="t('login.landscapeAlt')"
-      />
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
+  .login-username {
+    
+  }
   .login {
     overflow: hidden;
+    padding: 0px 10%;
     position: relative;  // Used to keep the locale selector positioned correctly
 
     .row {
@@ -550,21 +571,33 @@ export default {
       align-items: center;
 
       .banner {
-        margin: 5px;
+        /* margin: 5px; */
+      
       }
       h4 {
         margin: 0;
       }
       &--hasContent {
-        min-height: 70px;
+        /* min-height: 70px; */
+        /* margin-left: 20px; */
       }
 
       .text-error, .banner {
-        max-width: 80%;
+        max-width: 400px;
+        justify-content: center;
       }
     }
 
     .first-login-message {
+      background-color: rgba(160, 160, 160, 0.17);
+      color: #fff;
+      box-sizing: border-box;
+      padding: 10px 0;
+      margin: 0 auto;
+      margin-top: -20px;
+      width: 400px;
+      height: 40%;
+      overflow-y: scroll;
       .banner {
         margin-bottom: 0;
         border-left: 0;
@@ -574,6 +607,12 @@ export default {
           padding: 0;
         }
       }
+      ul {
+        list-style: none;
+        li{
+          margin-bottom: 10px;
+        }
+      }
     }
   }
 
@@ -586,9 +625,138 @@ export default {
       height: 100%;
       place-content: center;
     }
+    &>.span-5{
+      height: 53%;
+      background-color: rgba(68, 68, 68, 0.17);
+      position: relative;
+    }
   }
   .locale-selector {
     position: absolute;
     bottom: 30px;
   }
+
+  .login::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image:url('../../assets/images/login-bg.png');
+    background-size: cover;
+    background-position: 100%;
+    z-index: -2;
+}
+.img-left{
+  height: 53%;
+  position: relative;
+}
+.img-left::before{
+  content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image:url('../../assets/images/login-left.png');
+    background-size: cover;
+    background-position: 50%;
+    z-index: -1;
+}
+
+
+
+.login-form-display-label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+    &:deep() label{
+      display: none;
+      width: 0px;
+    }
+    &:deep() .addon{
+      position: absolute;
+      top: 16px !important;
+      right: 24px;
+    }
+  }
+
+
+.login-input-all {
+  &:deep() .labeled-input{
+    background-color: #fff;
+  }
+}
+
+.login-input-all-svg{
+  position: relative;
+  &:deep() INPUT{
+    height: 50px;
+    padding-left: 50px;
+    font-size: 14px;
+    color: #333;
+    background-color: #fff;
+  }
+}
+.login-input-all-svg{
+  &:deep() .addon {
+    top: 15px !important;
+    right: 12px !important;
+  }
+}
+.login-svg{
+  position: absolute;
+    top: 12px;
+    left: 15px;
+    width: 24px;
+    z-index: 1;
+
+}
+
+.remeber-login{
+  display: flex;
+  justify-content: center
+ 
+}
+.checkbox-login{
+  width: 400px;
+  display: flex;
+  justify-content: flex-end;
+}
+.gutless {
+  &:deep() button{
+    width: 400px;
+    height: 50px !important;
+    border-radius: 4px;
+    font-size: 14px;
+}
+}
+:deep() .checkbox-label{
+  color: #fff;
+}
+.copyright{
+  color: #fff;
+  /* font-size: 14px; */
+  line-height: 15px;
+  position: absolute;
+    left: 36%;
+    width: 100%;
+    bottom: 10px;
+}
+.logo-login{
+  display: flex;
+  justify-content: center;
+  margin-top: 30px;
+ 
+}
+
+@media only screen and (max-width: 1439px) {
+  .logo-login{
+  display: flex;
+  justify-content: center;
+  margin-top: 0px;
+ 
+}
+}
 </style>