dashboard-shell-shell 1.0.122 → 1.0.1000000082

package/pages/auth/login.vue

@@ -30,21 +30,20 @@ import {
 } from '@shell/config/private-label';
 import loadPlugins from '@shell/plugins/plugin';
 import Loading from '@shell/components/Loading';
-import { getGlobalBannerFontSizes } from '@shell/utils/banners';
 import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
+import TabTitle from '@shell/components/TabTitle.vue';
+import { harvester2cloud } from '@shell/utils/router'
 
 export default {
   name:       'Login',
   components: {
-    LabeledInput, AsyncButton, Checkbox, BrandImage, Banner, InfoBox, CopyCode, Password, LocaleSelector, Loading
+    LabeledInput, AsyncButton, Checkbox, BrandImage, Banner, InfoBox, CopyCode, Password, LocaleSelector, Loading, TabTitle
   },
 
   data() {
-    const username = this.$cookies.get(USERNAME, { parseJSON: false }) || '';
-
     return {
-      username,
-      remember: !!username,
+      username: '',
+      remember: false,
       password: '',
 
       timedOut:           this.$route.query[TIMED_OUT] === _FLAGGED,
@@ -60,7 +59,8 @@ export default {
       providerComponents: [],
       customLoginError:   {},
       firstLogin:         false,
-      vendor:             getVendor()
+      vendor:             getVendor(),
+      imgLeft:         require('~shell/assets/images/login-left.png')
     };
   },
 
@@ -79,7 +79,7 @@ export default {
     },
 
     isHarvester() {
-      return this.isSingleProduct?.productName === HARVESTER;
+      return this.isSingleProduct?.productName === harvester2cloud(HARVESTER);
     },
 
     singleProvider() {
@@ -133,16 +133,14 @@ export default {
     hasLoginMessage() {
       return this.errorToDisplay || this.loggedOut || this.timedOut;
     },
-
-    // Apply bottom margin so that the locale secletor control lifts up to avoid the footer fixed banner, if it is shown
-    localeSelectorStyle() {
-      const globalBannerSettings = getGlobalBannerFontSizes(this.$store);
-
-      return { marginBottom: globalBannerSettings?.footerFont };
-    }
   },
 
   async fetch() {
+    const username = this.$cookies.get(USERNAME, { parseJSON: false }) || '';
+
+    this.username = username;
+    this.remember = !!username;
+
     const { firstLoginSetting } = await this.loadInitialSettings();
     const { value } = await this.$store.dispatch('management/find', { type: MANAGEMENT.SETTING, id: SETTING.BANNERS });
     const drivers = await this.$store.dispatch('auth/getAuthProviders');
@@ -319,18 +317,32 @@ export default {
     v-if="$fetchState.pending"
     mode="relative"
   />
-  <main
+  <div
     v-else
     class="main-layout login"
   >
+    <!-- <TabTitle
+      :show-child="false"
+      :breadcrumb="false"
+    >
+      {{ `${vendor} - ${t('login.login')}` }}
+    </TabTitle> -->
     <div class="row gutless mb-20">
-      <div class="col span-6 p-20">
-        <p class="text-center">
+      <!-- <img :src="imgLeft" alt="" class="col span-7"/> -->
+      <div class="col span-7 img-left"></div>
+      <div class="col span-5 p-20">
+        <!-- <p class="text-center">
           {{ t('login.howdy') }}
         </p>
         <h1 class="text-center login-welcome">
           {{ t('login.welcome', {vendor}) }}
-        </h1>
+        </h1> -->
+        <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"
@@ -341,7 +353,7 @@ export default {
             :label="errorToDisplay"
             color="error"
           />
-          <h4
+          <!-- <h4
             v-else-if="loggedOut"
             class="text-success text-center"
           >
@@ -352,7 +364,7 @@ export default {
             class="text-error text-center"
           >
             {{ t('login.loginAgain') }}
-          </h4>
+          </h4> -->
         </div>
         <div
           v-if="firstLogin"
@@ -433,20 +445,33 @@ export default {
             :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')"
@@ -454,8 +479,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"
@@ -466,16 +504,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>
@@ -509,23 +538,20 @@ export default {
           class="locale-selector"
         >
           <LocaleSelector
-            :style="localeSelectorStyle"
             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"
-      />
     </div>
-  </main>
+  </div>
 </template>
 
 <style lang="scss" scoped>
   .login {
     overflow: hidden;
+    padding: 0px 10%;
+    position: relative;  // Used to keep the locale selector positioned correctly
 
     .row {
       align-items: center;
@@ -547,17 +573,20 @@ 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;
       }
     }
 
@@ -583,9 +612,131 @@ 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;
+      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;
+    background-color: #fff;
+  }
+}
+.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>

package/pages/auth/logout.vue

@@ -28,7 +28,10 @@ export default {
 </script>
 
 <template>
-  <main class="main-layout">
+  <main
+    class="main-layout"
+    :aria-label="t('layouts.logout')"
+  >
     <div>
       <h1 v-t="'logout.message'" />
     </div>

package/pages/auth/setup.vue

@@ -65,7 +65,7 @@ export default {
       v3User:             null,
       serverUrl:          null,
       mcmEnabled:         null,
-      eula:               false,
+      eula:               true,
       principals:         null,
       errors:             []
     };
@@ -148,7 +148,8 @@ export default {
     this['username'] = me?.loginName || 'admin';
     this['isFirstLogin'] = isFirstLogin;
     this['mustChangePassword'] = mustChangePassword;
-    this['current'] = current;
+    // this['current'] = current;
+    this['current'] = 'admin';
     this['v3User'] = v3User;
     this['serverUrl'] = serverUrl;
     this['mcmEnabled'] = mcmEnabled;
@@ -157,6 +158,9 @@ export default {
 
   computed: {
     saveEnabled() {
+      // if ( this.isFirstLogin) {
+      //   return false;
+      // }
       if ( !this.eula && this.isFirstLogin) {
         return false;
       }
@@ -273,27 +277,41 @@ export default {
     @submit.prevent
   >
     <div class="row">
-      <div class="col span-6 form-col">
-        <div>
-          &nbsp;
-        </div>
+      <!-- <BrandImage
+        class="col span-6 landscape"
+        file-name="login-landscape.svg"
+      /> -->
+      <div  class="col span-7  img-left">
+
+      </div>
+      <div class="col span-5 p-20">
         <div>
-          <h1 class="text-center">
+          <!-- <h1 class="text-center">
             {{ t('setup.welcome', {product}) }}
-          </h1>
+          </h1> -->
 
           <template v-if="mustChangePassword">
             <p
               v-clean-html="t(isFirstLogin ? 'setup.setPassword' : 'setup.newUserSetPassword', { username }, true)"
-              class="text-center mb-20 mt-20 setup-title"
+              class="mb-20 mt-20 setup-title"
             />
+            <!-- <Password
+              v-if="!haveCurrent"
+              v-model:value.trim="current"
+              autocomplete="current-password"
+              type="password"
+              :label="t('setup.currentPassword')"
+              class="mb-20 setup-password"
+              :required="true"
+            /> -->
             <Password
               v-if="!haveCurrent"
+              style="display: none;"
               v-model:value.trim="current"
               autocomplete="current-password"
               type="password"
               :label="t('setup.currentPassword')"
-              class="mb-20"
+              class="mb-20 setup-password"
               :required="true"
             />
 
@@ -321,6 +339,7 @@ export default {
                 :disabled="useRandom"
                 data-testid="setup-password-random"
                 label-key="setup.newPassword"
+                class="radom-password"
               >
                 <template
                   v-if="useRandom"
@@ -328,9 +347,10 @@ export default {
                 >
                   <div
                     class="addon"
-                    style="padding: 0 0 0 12px;"
+                    style="padding: 0 0 0 0px;"
                   >
                     <CopyToClipboard
+                      :aria-label="t('setup.copyRandom')"
                       :text="password"
                       class="btn-sm"
                     />
@@ -343,6 +363,7 @@ export default {
                 v-model:value.trim="password"
                 :label="t('setup.newPassword')"
                 data-testid="setup-password"
+                class="setup-password"
                 :required="true"
               />
             </div>
@@ -351,6 +372,7 @@ export default {
               v-model:value.trim="confirm"
               autocomplete="new-password"
               data-testid="setup-password-confirm"
+               class="setup-password"
               :label="t('setup.confirmPassword')"
               :required="true"
             />
@@ -361,6 +383,7 @@ export default {
               <hr
                 v-if="mustChangePassword"
                 class="mt-20 mb-20"
+                role="none"
               >
               <p>
                 <t
@@ -393,7 +416,7 @@ export default {
               </div>
             </template>
 
-            <div class="checkbox pt-10 eula">
+            <!-- <div class="checkbox pt-10 eula">
               <Checkbox
                 id="checkbox-eula"
                 v-model:value="eula"
@@ -407,7 +430,7 @@ export default {
                   />
                 </template>
               </Checkbox>
-            </div>
+            </div> -->
           </template>
 
           <div
@@ -428,7 +451,7 @@ export default {
             <h4
               v-for="(err, i) in errors"
               :key="i"
-              class="text-error text-center"
+              class="text-error "
             >
               {{ err }}
             </h4>
@@ -438,10 +461,7 @@ export default {
           &nbsp;
         </div>
       </div>
-      <BrandImage
-        class="col span-6 landscape"
-        file-name="login-landscape.svg"
-      />
+      
     </div>
   </form>
 </template>
@@ -462,9 +482,23 @@ export default {
     }
   }
 
+  .setup::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;
+}
+
   .setup {
     overflow: hidden;
-
+    height: 100%;
+    width: 100%;
     .row {
       & .checkbox {
         margin: auto
@@ -507,6 +541,8 @@ export default {
       :deep() code {
         font-size: 12px;
         padding: 0;
+        background-color: unset;
+        border: 0px;
       }
     }
 
@@ -518,4 +554,93 @@ export default {
       line-height: 20px;
     }
   }
+  .img-left{
+  height: 60%;
+  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;
+}
+
+.row {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+    padding: 0 10%;
+}
+.span-5{
+      height: 60%;
+      background-color: rgba(68, 68, 68, 0.17);
+      position: relative;
+      margin-left: -10px;
+      width: 41.645%;
+      display: flex;
+    justify-content: center;
+    }
+
+    :deep() .label-input-all{
+      display: unset;
+    }
+    .addon{
+        &:deep() .role-primary{
+          border-radius: 0px;
+        }
+    }
+    :deep() .addon{
+        background-color: unset !important;
+      }
+
+      #submit{
+        position: absolute;
+        bottom: 20px;
+        left: 42%;
+      }
+
+      .setup-password{
+        :deep() .suffix{
+          position: relative;
+          INPUT{
+            background: #fff;
+          }
+        }
+        :deep() .addon{
+          position: absolute;
+          top: 6px;
+          left: 90%;
+        }
+      }
+
+      @media only screen and (max-width: 1439px) {
+      .span-5{
+        margin-left: 0px;
+        width: 48.645%;
+    
+    }
+    .setup-password{
+        :deep() .suffix{
+          position: relative;
+          INPUT{
+            background: #fff;
+          }
+        }
+        :deep() .addon{
+          position: absolute;
+          top: 6px;
+          left: 84%;
+        }
+      }
+    }
+    
 </style>