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

package/pages/auth/login.vue

@@ -32,7 +32,6 @@ 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',
@@ -59,15 +58,10 @@ export default {
       providerComponents: [],
       customLoginError:   {},
       firstLogin:         false,
-      vendor:             getVendor(),
-      imgLeft:         require('~shell/assets/images/login-left.png')
+      vendor:             getVendor()
     };
   },
 
-  created () {
-    // this.$store.dispatch('i18n/switchTo', 'zh-hans');
-  },
-
   computed: {
     ...mapGetters(['isSingleProduct']),
     ...mapGetters({ t: 'i18n/t', hasMultipleLocales: 'i18n/hasMultipleLocales' }),
@@ -173,7 +167,7 @@ export default {
       this.focusSomething();
     });
   },
-  
+
   methods: {
     async loadInitialSettings() {
       let firstLoginSetting, plSetting, brand;
@@ -260,13 +254,6 @@ 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:     {
@@ -275,7 +262,6 @@ export default {
           }
         });
 
-        // 获取当前用户信息
         const user = await this.$store.dispatch('rancher/findAll', {
           type: NORMAN.USER,
           opt:  { url: '/v3/users?me=true', load: _MULTI }
@@ -306,17 +292,13 @@ 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;
@@ -337,22 +319,20 @@ 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-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="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="login-messages"
           data-testid="login__messages"
@@ -363,10 +343,23 @@ 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
@@ -388,7 +381,7 @@ export default {
               />
             </li>
             <li>
-              <CopyCode style="background-color: #68686850;border: none;">
+              <CopyCode>
                 docker logs <u>container-id</u> 2&gt;&amp;1 | grep "Bootstrap Password:"
               </CopyCode>
             </li>
@@ -408,7 +401,7 @@ export default {
             />
           </div>
           <br>
-          <CopyCode style="background-color: #68686850;border: none;">
+          <CopyCode>
             {{ kubectlCmd }}
           </CopyCode>
           <br>
@@ -422,6 +415,7 @@ export default {
 
         <div
           v-if="(!hasLocal || (hasLocal && !showLocal)) && providers.length"
+          :class="{'mt-30': !hasLoginMessage}"
         >
           <component
             :is="providerComponents[idx]"
@@ -438,35 +432,23 @@ export default {
         <template v-if="hasLocal">
           <form
             v-if="showLocal"
+            :class="{'mt-30': !hasLoginMessage}"
             @submit.prevent
           >
-            <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=""
-                >
+            <div class="span-6 offset-3">
+              <div class="mb-20">
                 <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="login-input-all-svg">
-                <img
-                  class="login-svg"
-                  src="../../assets/images/login/password.svg"
-                  alt=""
-                >
+              <div class="">
                 <Password
                   ref="password"
-                  :placeholder="'请输入密码'"
                   v-model:value="password"
                   data-testid="local-login-password"
                   :label="t('login.password')"
@@ -474,21 +456,8 @@ 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"
@@ -499,7 +468,16 @@ 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>
@@ -532,23 +510,24 @@ 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 {
@@ -571,33 +550,21 @@ export default {
       align-items: center;
 
       .banner {
-        /* margin: 5px; */
-      
+        margin: 5px;
       }
       h4 {
         margin: 0;
       }
       &--hasContent {
-        /* min-height: 70px; */
-        /* margin-left: 20px; */
+        min-height: 70px;
       }
 
       .text-error, .banner {
-        max-width: 400px;
-        justify-content: center;
+        max-width: 80%;
       }
     }
 
     .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;
@@ -607,12 +574,6 @@ export default {
           padding: 0;
         }
       }
-      ul {
-        list-style: none;
-        li{
-          margin-bottom: 10px;
-        }
-      }
     }
   }
 
@@ -625,138 +586,9 @@ 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>