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

package/pages/account/pri.vue

@@ -0,0 +1,229 @@
+<script>
+import { NORMAN } from '@shell/config/types';
+
+export default {
+  props: {
+    value: {
+      type:     String,
+      required: true,
+    },
+
+    useMuted: {
+      type:    Boolean,
+      default: true,
+    },
+
+    showLabels: {
+      type:    Boolean,
+      default: false,
+    },
+    isShowPass: {
+      type:    Boolean,
+      default: false,
+    }
+  },
+
+  async fetch() {
+    this.principal = this.$store.getters['rancher/byId'](NORMAN.PRINCIPAL, this.value);
+
+    if ( this.principal ) {
+      return;
+    }
+
+    const principalId = escape(this.value).replace(/\//g, '%2F');
+
+    try {
+      this.principal = await this.$store.dispatch('rancher/find', {
+        type: NORMAN.PRINCIPAL,
+        id:   this.value,
+        opt:  { url: `/v3/principals/${ principalId }` }
+      });
+    } catch (e) {
+      console.error('Failed to fetch principal', this.value, principalId); // eslint-disable-line no-console
+    }
+  },
+
+  data() {
+    // Load from cache immediately if possible
+    return { principal: null };
+  },
+
+  computed: {
+    showBoth() {
+      const p = this.principal;
+
+      return p.name && p.loginName && p.name.trim().toLowerCase() !== p.loginName.trim().toLowerCase();
+    }
+  },
+};
+</script>
+
+<template>
+  <div
+    class="principal"
+    :class="{'showLabels': showLabels}"
+  >
+    <template v-if="!principal && $fetchState.pending">
+      <div class="avatar">
+        <div class="empty">
+          <i class="icon icon-spinner icon-lg" />
+        </div>
+      </div>
+      <div
+        v-clean-html="t('principal.loading', null, true)"
+        class="name"
+        :class="{'text-muted': useMuted}"
+      />
+      <div class="description" />
+    </template>
+
+    <template v-else-if="principal">
+      <div class="avatar">
+        <img
+          src="@shell/assets/images/user.png"
+        >
+      </div>
+      <div
+        v-if="showLabels"
+        class="name"
+      >
+        <table>
+          <tr class="mb-10">
+            <td>{{ t('principal.name') }}: </td><td>{{ principal.name || principal.loginName }}</td>
+          </tr>
+          <tr class="mb-10">
+            <td>{{ t('principal.loginName') }}: </td><td>{{ principal.loginName }}</td>
+          </tr>
+          <tr
+            v-if="isShowPass"
+            class="mb-10"
+          >
+            <td>修改密码: </td><td>****** <slot name="edit" /></td>
+          </tr>
+          <tr><td>{{ t('principal.type') }}: </td><td>{{ principal.displayType }}</td></tr>
+        </table>
+      </div>
+      <template v-else>
+        <div class="name">
+          <template v-if="showBoth">
+            {{ principal.name }}
+            <span
+              v-if="principal.loginName"
+              :class="{'text-muted': useMuted}"
+            >({{ principal.loginName }})</span>
+          </template>
+          <template v-else-if="principal.name">
+            {{ principal.name }}
+          </template>
+          <template v-else>
+            {{ principal.loginName }}
+          </template>
+        </div>
+        <div
+          class="description"
+          :class="{'text-muted': useMuted}"
+        >
+          {{ principal.displayType }}
+        </div>
+      </template>
+    </template>
+
+    <template v-else>
+      <div class="avatar">
+        <div
+          class="empty"
+          :class="{'text-muted': useMuted}"
+        >
+          <i class="icon icon-warning icon-lg" />
+        </div>
+      </div>
+      <div
+        v-t="'principal.error'"
+        class="name text-error"
+      />
+      <div
+        class="description"
+        :class="{'text-muted': useMuted}"
+      >
+        {{ value }}
+      </div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+  $size: 79px;
+
+  .principal {
+    display: grid;
+    grid-template-areas:
+      "avatar name"
+      "avatar description";
+    grid-template-columns: $size auto;
+    grid-template-rows: auto math.div($size, 2);
+    column-gap: 10px;
+
+    th {
+      text-align: left;
+      font-weight: normal;
+      padding-right: 10px;
+    }
+
+    &.showLabels {
+      /* grid-template-areas:
+        "avatar name";
+      grid-template-columns: 60px auto;
+      grid-template-rows: 60px;
+      column-gap: 0; */
+      display: flex;
+      column-gap:0;
+      .name {
+        display: flex;
+        line-height: unset;
+      }
+      table tr {
+        display: block;
+      }
+      table tr td:not(:first-of-type) {
+        padding-left: 10px;
+      }
+      table tr td:not(:last-of-type) {
+        width: 100px;
+      }
+    }
+
+    .avatar {
+      /* grid-area: avatar;
+      text-align: center; */
+      width: 287px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      DIV.empty {
+        border: 1px solid var(--border);
+        line-height: $size;
+      }
+
+      IMG {
+        width: $size;
+        height: $size;
+      }
+
+      DIV.round, IMG.round {
+        border-radius: 50%;
+      }
+    }
+
+    .name {
+      grid-area: name;
+      line-height: math.div($size, 2);
+      overflow-wrap: anywhere;
+    }
+
+    .description {
+      grid-area: description;
+      line-height: math.div($size, 2);
+    }
+  }
+</style>

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' }),
@@ -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,6 +306,7 @@ 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' });
@@ -299,6 +314,7 @@ export default {
           this.$router.push({ name: 'index' });
         }
       } catch (err) {
+        // 登录失败处理
         this.err = err;
         this.timedOut = null;
         this.loggedOut = null;
@@ -319,20 +335,24 @@ 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 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,30 +438,54 @@ 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
+                  v-if="!firstLogin"
+                  class="login-svg"
+                  src="../../assets/images/login/user.svg"
+                  alt=""
+                >
                 <LabeledInput
                   v-if="!firstLogin"
                   ref="username"
                   v-model:value.trim="username"
+                  :placeholder="'请输入用户名'"
                   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"
                   v-model:value="password"
+                  :placeholder="'请输入密码'"
                   data-testid="local-login-password"
                   :label="t('login.password')"
                   autocomplete="current-password"
                 />
               </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
@@ -468,16 +498,6 @@ 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 +530,25 @@ export default {
           v-if="showLocaleSelector && hasMultipleLocales && !isHarvester"
           class="locale-selector"
         >
-          <LocaleSelector
+          <!-- <LocaleSelector
             mode="login"
-          />
+          /> -->
+        </div>
+        <div class="copyright">
+          Copyright 2019-2025 云翼
         </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,135 @@ 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>