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

package/list/management.cattle.io.user.vue

@@ -142,10 +142,9 @@ export default {
           :to="{ name: 'c-cluster-auth-user.retention'}"
           class="btn role-link btn-sm btn-user-retention"
           data-testid="router-link-user-retention"
-          style="text-align: left;min-width: auto !important;width: auto;"
         >
-          <!-- <i class="icon icon-gear" />
-          {{ t('user.retention.button.label') }} -->
+          <i class="icon icon-gear" />
+          {{ t('user.retention.button.label') }}
         </router-link>
       </template>
     </Masthead>
@@ -172,11 +171,8 @@ export default {
 
 <style lang="scss">
   .btn-user-retention {
-    display: block;
+    display: flex;
     gap: 0.25rem;
     padding: 0;
   }
-  .btn-user-retention:hover {
-    color: #333 !important;
-  }
 </style>

package/list/namespace.vue

@@ -42,9 +42,6 @@ export default {
     headers() {
       const headersFromSchema = this.$store.getters['type-map/headersFor'](this.schema);
 
-      [headersFromSchema[0], headersFromSchema[1]] = [headersFromSchema[1], headersFromSchema[0]];
-      headersFromSchema[0].width = '200px';
-      headersFromSchema[1].width = '100px';
       // harvester is reusing this namespace.js to render ns page, we need to make sure harvester backend support quota schema to show this column.
       if (this.hasHarvesterResourceQuotaSchema && Array.isArray(headersFromSchema) && headersFromSchema.length > 1) {
         const columnIdx = headersFromSchema.length - 1;

package/list/provisioning.cattle.io.cluster.vue

@@ -307,18 +307,19 @@ export default {
         <router-link
           v-if="row.mgmt && row.mgmt.isReady && !row.hasError"
           data-testid="cluster-manager-list-explore-management"
+          class="btn btn-sm role-secondary"
           :to="{name: 'c-cluster', params: {cluster: row.mgmt.id}}"
         >
-          <a href="javascript:;">
-            {{ t('cluster.explore') }}
-          </a>
+          {{ t('cluster.explore') }}
         </router-link>
-        <span
-          data-testid="cluster-manager-list-explore"
+        <button
           v-else
+          data-testid="cluster-manager-list-explore"
+          :disabled="true"
+          class="btn btn-sm role-secondary"
         >
           {{ t('cluster.explore') }}
-        </span>
+        </button>
       </template>
     </ResourceTable>
   </div>

package/mixins/brand.js

@@ -175,24 +175,7 @@ export default {
       const vars = createCssVars(color, this.theme, name);
 
       for (const prop in vars) {
-
         document.body.style.setProperty(prop, vars[prop]);
-
-        // 主色调hover值动态
-        if (prop === '--primary-hover-bg') {
-          // 如果是你要设置透明度的变量，比如 hover
-          let value = '#E8F4FF';
-          if (vars[prop]) {
-            const match = vars[prop].match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
-            if (match) {
-              const [_, r, g, b] = match;
-              value = `rgba(${r}, ${g}, ${b}, 0.15)`;
-            }
-          }
-
-          document.body.style.setProperty('--nav-hover-color', vars[prop]);
-          document.body.style.setProperty('--nav-active', value);
-        }
       }
     },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dashboard-shell-shell",
-  "version": "3.0.5-test.4",
+  "version": "3.0.5-test.6",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancherlabs/dashboard",
   "license": "Apache-2.0",

package/pages/account/index.vue

@@ -151,37 +151,21 @@ export default {
 <template>
   <Loading v-if="$fetchState.pending" />
   <div v-else>
-    <!-- <BackLink :link="backLink" />
+    <BackLink :link="backLink" />
     <h1>
       <TabTitle breadcrumb="vendor-only">
         {{ t('accountAndKeys.title') }}
       </TabTitle>
-    </h1> -->
-    <div class="api-key-title mb-20">
-      {{ t('accountAndKeys.title') }}
-    </div>
+    </h1>
 
-    <!-- <h2 v-t="'accountAndKeys.account.title'" /> -->
+    <h2 v-t="'accountAndKeys.account.title'" />
     <div class="account">
-      <div class="account-title">
-        {{ t('accountAndKeys.account.title') }}
-      </div>
       <Principal
         :value="principal.id"
         :use-muted="false"
         :show-labels="true"
-        :isShowPass="true"
-      >
-      <template #edit>
-          <span
-            v-if="canChangePassword"
-            class="edit-pass-txt"
-            @click="$refs.promptChangePassword.show(true)"
-          >修改
-          </span>
-        </template>
-    </Principal>
-      <!-- <div>
+      />
+      <div>
         <button
           v-if="canChangePassword"
           role="button"
@@ -193,20 +177,13 @@ export default {
         >
           {{ t("accountAndKeys.account.change") }}
         </button>
-      </div> -->
+      </div>
     </div>
 
-    <!-- <hr role="none"> -->
-     <div  
-     style=" border: 1px solid #d7d7d7;padding: 20px 20px 0px 20px;"
-     class="mt-20">
+    <hr role="none">
     <div class="keys-header">
       <div>
-        <!-- <h2 v-t="'accountAndKeys.apiKeys.title'" /> -->
-        <div
-            v-t="'accountAndKeys.apiKeys.title'"
-            class="account-title mb-20"
-          />
+        <h2 v-t="'accountAndKeys.apiKeys.title'" />
         <div class="api-url">
           <span>{{ t("accountAndKeys.apiKeys.apiEndpoint") }}</span>
           <CopyToClipboardText
@@ -228,7 +205,7 @@ export default {
     </div>
     <div
       v-if="apiKeySchema"
-      class="keys mb-20"
+      class="keys"
     >
       <ResourceTable
         :schema="apiKeySchema"
@@ -239,20 +216,7 @@ export default {
         :search="true"
         :row-actions="true"
         :table-actions="true"
-      >
-      <template #header-right>
-        <button
-        v-if="apiKeySchema"
-        role="button"
-        :aria-label="t('accountAndKeys.apiKeys.add.label')"
-        class="btn role-primary add mb-20"
-        data-testid="account_create_api_keys"
-        @click="addKey"
-      >
-        {{ t('accountAndKeys.apiKeys.add.label') }}
-      </button>
-          </template>
-    </ResourceTable>
+      />
     </div>
     <div v-else>
       <Banner
@@ -261,7 +225,6 @@ export default {
       />
     </div>
   </div>
-  </div>
 </template>
 
 <style lang='scss' scoped>
@@ -270,12 +233,8 @@ export default {
   }
 
   .account {
-    /* display: flex;
-    justify-content: space-between */
-    border: 1px solid #D7D7D7;
-    padding: 20px;
-    box-sizing: border-box;
-
+    display: flex;
+    justify-content: space-between
   }
 
   .keys-header {
@@ -288,10 +247,8 @@ export default {
   .keys {
     display: flex;
     flex-direction: column;
-    margin-top: 20px;
     .add {
       align-self: flex-end;
-      margin-left: 10px
     }
   }
 
@@ -302,23 +259,4 @@ export default {
       margin-right: 6px;
     }
   }
-  .api-key-title{
-    font-size: 26px;
-    /* line-height: 20px; */
-    font-weight: 400;
-  }
-
-  .edit-pass-txt{
-    cursor: pointer;
-    color: var(--primary);
-  }
-
-  .table-account{
-    border: 1px solid #d7d7d7;
-  }
-  .account-title{
-      font-size: 14px;
-      line-height: 19px;
-      margin-bottom: 16px;
-    }
 </style>

package/pages/auth/login.vue

@@ -58,8 +58,7 @@ export default {
       providerComponents: [],
       customLoginError:   {},
       firstLogin:         false,
-      vendor:             getVendor(),
-      imgLeft:         require('~shell/assets/images/login-left.png')
+      vendor:             getVendor()
     };
   },
 
@@ -255,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:     {
@@ -270,7 +262,6 @@ export default {
           }
         });
 
-        // 获取当前用户信息
         const user = await this.$store.dispatch('rancher/findAll', {
           type: NORMAN.USER,
           opt:  { url: '/v3/users?me=true', load: _MULTI }
@@ -301,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;
@@ -332,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"
@@ -358,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
@@ -383,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>
@@ -403,7 +401,7 @@ export default {
             />
           </div>
           <br>
-          <CopyCode style="background-color: #68686850;border: none;">
+          <CopyCode>
             {{ kubectlCmd }}
           </CopyCode>
           <br>
@@ -417,6 +415,7 @@ export default {
 
         <div
           v-if="(!hasLocal || (hasLocal && !showLocal)) && providers.length"
+          :class="{'mt-30': !hasLoginMessage}"
         >
           <component
             :is="providerComponents[idx]"
@@ -433,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')"
@@ -469,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"
@@ -494,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>
@@ -527,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 {
@@ -566,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;
@@ -602,12 +574,6 @@ export default {
           padding: 0;
         }
       }
-      ul {
-        list-style: none;
-        li{
-          margin-bottom: 10px;
-        }
-      }
     }
   }
 
@@ -620,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>