Home Esplora Aiuto
Registrati Accedi
lihao16
/
smsb-web-develop
1
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

refactor(keycloak): theme

Casper Dai 3 anni fa
parent
3241572ae0
commit
1d8a553be7
10 ha cambiato i file con 884 aggiunte e 537 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 100 2
      keycloak-theme/login/error.ftl
  2. 100 2
      keycloak-theme/login/info.ftl
  3. 200 40
      keycloak-theme/login/login-config-totp.ftl
  4. 147 1
      keycloak-theme/login/login-otp.ftl
  5. 154 1
      keycloak-theme/login/login-update-password.ftl
  6. 183 2
      keycloak-theme/login/login.ftl
  7. 0 180
      keycloak-theme/login/resources/css/login.css
  8. 0 151
      keycloak-theme/login/resources/css/password.css
  9. 0 158
      keycloak-theme/login/resources/css/totp.css
  10. BIN
      keycloak-theme/login/resources/img/applet.png

+ 100 - 2
keycloak-theme/login/error.ftl
Vedi File 

@@ -4,14 +4,112 @@
 
   <meta charset="utf-8" />
 
   <meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' />
 
   <title>${realm.displayName}</title>
 
-  <link rel="stylesheet" href="${url.resourcesPath}/css/totp.css" />
 
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+
 
+    html,
 
+    body {
 
+      width: 100%;
 
+      height: 100%;
 
+    }
 
+
 
+    body {
 
+      box-sizing: border-box;
 
+      -moz-osx-font-smoothing: grayscale;
 
+      -webkit-font-smoothing: antialiased;
 
+      text-rendering: optimizeLegibility;
 
+      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 
+      background-color: #F4F7FB;
 
+    }
 
+
 
+    *,
 
+    *::before,
 
+    *::after {
 
+      box-sizing: inherit;
 
+    }
 
+
 
+    a {
 
+      border: none;
 
+      outline: none;
 
+      text-decoration: none;
 
+      -webkit-touch-callout: none;
 
+      -webkit-tap-highlight-color: transparent;
 
+    }
 
+
 
+    .c-login {
 
+      display: flex;
 
+      min-height: 100%;
 
+      width: 100%;
 
+    }
 
+
 
+    .c-login__img {
 
+      flex: 1 0 400px;
 
+      display: inline-block;
 
+      max-width: 800px;
 
+      background: url("${url.resourcesPath}/img/illustration.png") 50% 50% / 757px 613px no-repeat;
 
+    }
 
+
 
+    .c-login__main {
 
+      flex: 1 0 auto;
 
+    }
 
+
 
+    .c-login-form {
 
+      display: inline-flex;
 
+      flex-direction: column;
 
+      justify-content: center;
 
+      align-items: center;
 
+      padding: 40px 0 80px;
 
+      background-color: #FFFFFF;
 
+      overflow: auto;
 
+    }
 
+
 
+    .c-login-form__header {
 
+      display: inline-flex;
 
+      align-items: center;
 
+    }
 
+
 
+    .c-login-form__logo {
 
+      flex: none;
 
+    }
 
+
 
+    .c-login-form__name {
 
+      margin-left: 16px;
 
+      color: #1C5CB0;
 
+      font-size: 28px;
 
+      font-weight: bold;
 
+      line-height: 1;
 
+    }
 
+
 
+    .c-login-form__title {
 
+      padding: 36px 0 24px;
 
+      color: #1C5CB0;
 
+      font-size: 18px;
 
+      font-weight: bold;
 
+    }
 
+
 
+    .c-login-form__info {
 
+      width: 400px;
 
+      color: #333333;
 
+      font-size: 16px;
 
+      line-height: 20px;
 
+    }
 
+
 
+    @media screen and (max-width: 900px) {
 
+      .c-login__img {
 
+        display: none;
 
+      }
 
+    }
 
+  </style>
 
 </head>
 
 <body>
 
   <div class="c-login">
 
     <div class="c-login__img"></div>
 
     <div class="c-login__main c-login-form">
 
       <div class="c-login-form__header">
 
-        <img class="c-login-form__logo" src="${url.resourcesPath}/img/logo/${realm.displayNameHtml}">
 
+        <img class="c-login-form__logo" src="${url.resourcesPath}/img/logo/${realm.displayNameHtml!'inspur.png'}">
 
         <div class="c-login-form__name">${realm.displayName}</div>
 
       </div>
 
       <div class="c-login-form__title">很抱歉...</div>

+ 100 - 2
keycloak-theme/login/info.ftl
Vedi File 

@@ -4,14 +4,112 @@
 
   <meta charset="utf-8" />
 
   <meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' />
 
   <title>${realm.displayName}</title>
 
-  <link rel="stylesheet" href="${url.resourcesPath}/css/totp.css" />
 
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+
 
+    html,
 
+    body {
 
+      width: 100%;
 
+      height: 100%;
 
+    }
 
+
 
+    body {
 
+      box-sizing: border-box;
 
+      -moz-osx-font-smoothing: grayscale;
 
+      -webkit-font-smoothing: antialiased;
 
+      text-rendering: optimizeLegibility;
 
+      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 
+      background-color: #F4F7FB;
 
+    }
 
+
 
+    *,
 
+    *::before,
 
+    *::after {
 
+      box-sizing: inherit;
 
+    }
 
+
 
+    a {
 
+      border: none;
 
+      outline: none;
 
+      text-decoration: none;
 
+      -webkit-touch-callout: none;
 
+      -webkit-tap-highlight-color: transparent;
 
+    }
 
+
 
+    .c-login {
 
+      display: flex;
 
+      min-height: 100%;
 
+      width: 100%;
 
+    }
 
+
 
+    .c-login__img {
 
+      flex: 1 0 400px;
 
+      display: inline-block;
 
+      max-width: 800px;
 
+      background: url("${url.resourcesPath}/img/illustration.png") 50% 50% / 757px 613px no-repeat;
 
+    }
 
+
 
+    .c-login__main {
 
+      flex: 1 0 auto;
 
+    }
 
+
 
+    .c-login-form {
 
+      display: inline-flex;
 
+      flex-direction: column;
 
+      justify-content: center;
 
+      align-items: center;
 
+      padding: 40px 0 80px;
 
+      background-color: #FFFFFF;
 
+      overflow: auto;
 
+    }
 
+
 
+    .c-login-form__header {
 
+      display: inline-flex;
 
+      align-items: center;
 
+    }
 
+
 
+    .c-login-form__logo {
 
+      flex: none;
 
+    }
 
+
 
+    .c-login-form__name {
 
+      margin-left: 16px;
 
+      color: #1C5CB0;
 
+      font-size: 28px;
 
+      font-weight: bold;
 
+      line-height: 1;
 
+    }
 
+
 
+    .c-login-form__title {
 
+      padding: 36px 0 24px;
 
+      color: #1C5CB0;
 
+      font-size: 18px;
 
+      font-weight: bold;
 
+    }
 
+
 
+    .c-login-form__info {
 
+      width: 400px;
 
+      color: #333333;
 
+      font-size: 16px;
 
+      line-height: 20px;
 
+    }
 
+
 
+    @media screen and (max-width: 900px) {
 
+      .c-login__img {
 
+        display: none;
 
+      }
 
+    }
 
+  </style>
 
 </head>
 
 <body>
 
   <div class="c-login">
 
     <div class="c-login__img"></div>
 
     <div class="c-login__main c-login-form">
 
       <div class="c-login-form__header">
 
-        <img class="c-login-form__logo" src="${url.resourcesPath}/img/logo/${realm.displayNameHtml}">
 
+        <img class="c-login-form__logo" src="${url.resourcesPath}/img/logo/${realm.displayNameHtml!'inspur.png'}">
 
         <div class="c-login-form__name">${realm.displayName}</div>
 
       </div>
 
       <div class="c-login-form__title">${message.summary}</div>

+ 200 - 40
keycloak-theme/login/login-config-totp.ftl
Vedi File 

@@ -4,67 +4,227 @@
 
   <meta charset="utf-8" />
 
   <meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' />
 
   <title>${realm.displayName}</title>
 
-  <link rel="stylesheet" href="${url.resourcesPath}/css/totp.css" />
 
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+
 
+    html,
 
+    body {
 
+      width: 100%;
 
+      height: 100%;
 
+    }
 
+
 
+    body {
 
+      box-sizing: border-box;
 
+      -moz-osx-font-smoothing: grayscale;
 
+      -webkit-font-smoothing: antialiased;
 
+      text-rendering: optimizeLegibility;
 
+      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 
+      background-color: #F4F7FB;
 
+    }
 
+
 
+    *,
 
+    *::before,
 
+    *::after {
 
+      box-sizing: inherit;
 
+    }
 
+
 
+    a {
 
+      border: none;
 
+      outline: none;
 
+      text-decoration: none;
 
+      -webkit-touch-callout: none;
 
+      -webkit-tap-highlight-color: transparent;
 
+    }
 
+
 
+    .c-login {
 
+      display: flex;
 
+      min-height: 100%;
 
+      width: 100%;
 
+    }
 
+
 
+    .c-login__img {
 
+      flex: 1 0 400px;
 
+      display: inline-block;
 
+      max-width: 800px;
 
+      background: url("${url.resourcesPath}/img/illustration.png") 50% 50% / 757px 613px no-repeat;
 
+    }
 
+
 
+    .c-login__main {
 
+      flex: 1 0 auto;
 
+    }
 
+
 
+    .c-login-form {
 
+      display: inline-flex;
 
+      flex-direction: column;
 
+      justify-content: center;
 
+      align-items: center;
 
+      padding: 40px 0 80px;
 
+      background-color: #FFFFFF;
 
+      overflow: auto;
 
+    }
 
+
 
+    .c-login-form__header {
 
+      display: inline-flex;
 
+      align-items: center;
 
+    }
 
+
 
+    .c-login-form__logo {
 
+      flex: none;
 
+    }
 
+
 
+    .c-login-form__name {
 
+      margin-left: 16px;
 
+      color: #1C5CB0;
 
+      font-size: 28px;
 
+      font-weight: bold;
 
+      line-height: 1;
 
+    }
 
+
 
+    .c-login-form__title {
 
+      padding: 36px 0 24px;
 
+      color: #1C5CB0;
 
+      font-size: 18px;
 
+      font-weight: bold;
 
+    }
 
+
 
+    .c-login-form__info {
 
+      width: 400px;
 
+      color: #333333;
 
+      font-size: 14px;
 
+      line-height: 20px;
 
+    }
 
+
 
+    .c-login-form__info ol {
 
+      line-height: 24px;
 
+    }
 
+
 
+    .c-login-form__qr {
 
+      width: 144px;
 
+      height: 144px;
 
+    }
 
+
 
+    .c-login-form__retry {
 
+      color: #1C5CB0;
 
+      font-size: 12px;
 
+    }
 
+
 
+    .c-login-form__required {
 
+      color: #EF1D1D;
 
+    }
 
+
 
+    .c-login-form__required ::before {
 
+      content: "*";
 
+      color: #FF0000;
 
+      font-size: 14px;
 
+    }
 
+
 
+    .c-login-form__input {
 
+      padding: 0 10px;
 
+      margin-top: 6px;
 
+      width: 240px;
 
+      height: 30px;
 
+      font-size: 14px;
 
+      line-height: 30px;
 
+      border: 1px solid #C4C4C4;
 
+      outline: none;
 
+    }
 
+
 
+    .c-login-form__error {
 
+      height: 30px;
 
+      color: #F56C6C;
 
+      font-size: 12px;
 
+      line-height: 24px;
 
+      white-space: nowrap;
 
+    }
 
+
 
+    .c-login-form__submit {
 
+      display: inline-flex;
 
+      justify-content: center;
 
+      align-items: center;
 
+      height: 40px;
 
+      padding: 0 40px;
 
+      color: #ffffff;
 
+      font-size: 18px;
 
+      border: none;
 
+      background-color: #1C5CB0;
 
+      border-radius: 8px;
 
+      cursor: pointer;
 
+    }
 
+
 
+    .c-login-form__submit[disabled] {
 
+      background-color: #C4C4C4;
 
+    }
 
+
 
+    .l-flex {
 
+      display: flex;
 
+      align-items: flex-start;
 
+      gap: 16px;
 
+    }
 
+
 
+    @media screen and (max-width: 900px) {
 
+      .c-login__img {
 
+        display: none;
 
+      }
 
+    }
 
+
 
+    @media screen and (max-height: 800px) {
 
+      .c-login-form {
 
+        padding: 0;
 
+      }
 
+
 
+      .c-login-form__title {
 
+        padding: 24px 0 16px;
 
+      }
 
+    }
 
+  </style>
 
 </head>
 
 <body>
 
   <div class="c-login">
 
     <div class="c-login__img"></div>
 
-    <form
 
-      class="c-login__main c-login-form"
 
-      action="${url.loginAction}"
 
-      method="post"
 
-      onsubmit="login.disabled = true; return true;"
 
-    >
 
-      <input id="totpSecret" type="hidden"  name="totpSecret" value="${totp.totpSecret}" />
 
+    <form class="c-login__main c-login-form" action="${url.loginAction}" method="post"
 
+      onsubmit="login.disabled = true; return true;">
 
+      <input id="totpSecret" type="hidden" name="totpSecret" value="${totp.totpSecret}" />
 
       <#if mode??>
 
         <input id="mode" type="hidden" name="mode" value="${mode}" />
 
       </#if>
 
       <div class="c-login-form__header">
 
-        <img class="c-login-form__logo" src="${url.resourcesPath}/img/logo/${realm.displayNameHtml}">
 
+        <img class="c-login-form__logo" src="${url.resourcesPath}/img/logo/${realm.displayNameHtml!'inspur.png'}" />
 
         <div class="c-login-form__name">${realm.displayName}</div>
 
-      </img>
 
+      </div>
 
       <div class="c-login-form__title">手机验证</div>
 
       <div class="c-login-form__info">
 
-        <p>1、请先使用微信搜索小程序“数盾OTP”，或下载安装 “FreeOTP” 、“Goole Authenticator” 应用。</p>
 
-        <br />
 
-        <p>2、打开应用扫描二维码</p>
 
-        <br />
 
-        <img
 
-          class="c-login-form__qr"
 
-          src="data:image/png;base64, ${totp.totpSecretQrCode}"
 
-        />
 
+        <ol>
 
+          <li>请先使用微信搜索小程序“浪潮安播云”进入“我的-OTP”，或扫描下面右侧小程序码。</li>
 
+          <li>打开应用后扫描下面左侧二维码。</li>
 
+          <li>输入应用提供的一次性码，点击提交完成验证。</li>
 
+        </ol>
 
         <br />
 
-        <p>
 
-          <a
 
-            class="c-login-form__retry"
 
-            href="${totp.manualUrl}"
 
-          >
 
-            无法扫码
 
-          </a>
 
-        </p>
 
-        <br />
 
-        <p>3、输入应用提供的一次性码，点击提交完成验证。</p>
 
+        <div class="l-flex">
 
+          <div>
 
+            <img class="c-login-form__qr" src="data:image/png;base64,${totp.totpSecretQrCode}" />
 
+            <p>
 
+              <a class="c-login-form__retry" href="${totp.manualUrl}">
 
+                无法扫码
 
+              </a>
 
+            </p>
 
+          </div>
 
+          <img class="c-login-form__qr" src="${url.resourcesPath}/img/applet.png" />
 
+        </div>
 
         <br />
 
         <p class="c-login-form__required">一次性验证码</p>
 
-        <input
 
-          type="text"
 
-          name="totp"
 
-          class="c-login-form__input"
 
-          autocomplete="off"
 
-        />
 
+        <input type="text" name="totp" class="c-login-form__input" autocomplete="off" />
 
         <div class="c-login-form__error">
 
           <#if messagesPerField.existsError('totp')>
 
             ${kcSanitize(messagesPerField.get('totp'))?no_esc}
 
           </#if>
 
         </div>
 
-        <input
 
-          type="submit"
 
-          name="login"
 
-          class="c-login-form__submit"
 
-          value="提交"
 
-        >
 
+        <input type="submit" name="login" class="c-login-form__submit" value="提交">
 
       </div>
 
     </form>
 
   </div>
 
 </body>
 
+
 
 </html>

+ 147 - 1
keycloak-theme/login/login-otp.ftl
Vedi File 

@@ -5,6 +5,152 @@
 
   <meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' />
 
   <title>${realm.displayName}</title>
 
   <link rel="stylesheet" href="${url.resourcesPath}/css/totp.css" />
 
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+
 
+    html,
 
+    body {
 
+      width: 100%;
 
+      height: 100%;
 
+    }
 
+
 
+    body {
 
+      box-sizing: border-box;
 
+      -moz-osx-font-smoothing: grayscale;
 
+      -webkit-font-smoothing: antialiased;
 
+      text-rendering: optimizeLegibility;
 
+      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 
+      background-color: #F4F7FB;
 
+    }
 
+
 
+    *,
 
+    *::before,
 
+    *::after {
 
+      box-sizing: inherit;
 
+    }
 
+
 
+    a {
 
+      border: none;
 
+      outline: none;
 
+      text-decoration: none;
 
+      -webkit-touch-callout: none;
 
+      -webkit-tap-highlight-color: transparent;
 
+    }
 
+
 
+    .c-login {
 
+      display: flex;
 
+      min-height: 100%;
 
+      width: 100%;
 
+    }
 
+
 
+    .c-login__img {
 
+      flex: 1 0 400px;
 
+      display: inline-block;
 
+      max-width: 800px;
 
+      background: url("${url.resourcesPath}/img/illustration.png") 50% 50% / 757px 613px no-repeat;
 
+    }
 
+
 
+    .c-login__main {
 
+      flex: 1 0 auto;
 
+    }
 
+
 
+    .c-login-form {
 
+      display: inline-flex;
 
+      flex-direction: column;
 
+      justify-content: center;
 
+      align-items: center;
 
+      padding: 40px 0 80px;
 
+      background-color: #FFFFFF;
 
+      overflow: auto;
 
+    }
 
+
 
+    .c-login-form__header {
 
+      display: inline-flex;
 
+      align-items: center;
 
+    }
 
+
 
+    .c-login-form__logo {
 
+      flex: none;
 
+    }
 
+
 
+    .c-login-form__name {
 
+      margin-left: 16px;
 
+      color: #1C5CB0;
 
+      font-size: 28px;
 
+      font-weight: bold;
 
+      line-height: 1;
 
+    }
 
+
 
+    .c-login-form__title {
 
+      padding: 36px 0 24px;
 
+      color: #1C5CB0;
 
+      font-size: 18px;
 
+      font-weight: bold;
 
+    }
 
+
 
+    .c-login-form__info {
 
+      width: 400px;
 
+      color: #333333;
 
+      font-size: 16px;
 
+      line-height: 20px;
 
+    }
 
+
 
+    .c-login-form__required {
 
+      color: #EF1D1D;
 
+    }
 
+
 
+    .c-login-form__required ::before {
 
+      content: "*";
 
+      color: #FF0000;
 
+      font-size: 14px;
 
+    }
 
+
 
+    .c-login-form__input {
 
+      padding: 0 10px;
 
+      margin-top: 6px;
 
+      width: 240px;
 
+      height: 30px;
 
+      font-size: 14px;
 
+      line-height: 30px;
 
+      border: 1px solid #C4C4C4;
 
+      outline: none;
 
+    }
 
+
 
+    .c-login-form__error {
 
+      height: 30px;
 
+      color: #F56C6C;
 
+      font-size: 12px;
 
+      line-height: 24px;
 
+      white-space: nowrap;
 
+    }
 
+
 
+    .c-login-form__submit {
 
+      display: inline-flex;
 
+      justify-content: center;
 
+      align-items: center;
 
+      height: 40px;
 
+      padding: 0 40px;
 
+      color: #ffffff;
 
+      font-size: 18px;
 
+      border: none;
 
+      background-color: #1C5CB0;
 
+      border-radius: 8px;
 
+      cursor: pointer;
 
+    }
 
+
 
+    .c-login-form__submit[disabled] {
 
+      background-color: #C4C4C4;
 
+    }
 
+
 
+    @media screen and (max-width: 900px) {
 
+      .c-login__img {
 
+        display: none;
 
+      }
 
+    }
 
+  </style>
 
 </head>
 
 <body>
 
   <div class="c-login">
 
@@ -16,7 +162,7 @@
 
       onsubmit="login.disabled = true; return true;"
 
     >
 
       <div class="c-login-form__header">
 
-        <img class="c-login-form__logo" src="${url.resourcesPath}/img/logo/${realm.displayNameHtml}">
 
+        <img class="c-login-form__logo" src="${url.resourcesPath}/img/logo/${realm.displayNameHtml!'inspur.png'}">
 
         <div class="c-login-form__name">${realm.displayName}</div>
 
       </div>
 
       <div class="c-login-form__title">手机验证</div>

+ 154 - 1
keycloak-theme/login/login-update-password.ftl
Vedi File 

@@ -4,7 +4,160 @@
 
   <meta charset="utf-8" />
 
   <meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' />
 
   <title>${realm.displayName}</title>
 
-  <link rel="stylesheet" href="${url.resourcesPath}/css/password.css" />
 
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+
 
+    html,
 
+    body {
 
+      width: 100%;
 
+      height: 100%;
 
+    }
 
+
 
+    body {
 
+      box-sizing: border-box;
 
+      -moz-osx-font-smoothing: grayscale;
 
+      -webkit-font-smoothing: antialiased;
 
+      text-rendering: optimizeLegibility;
 
+      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 
+      background-color: #FFFFFF;
 
+    }
 
+
 
+    *,
 
+    *::before,
 
+    *::after {
 
+      box-sizing: inherit;
 
+    }
 
+
 
+    a {
 
+      border: none;
 
+      outline: none;
 
+      text-decoration: none;
 
+      -webkit-touch-callout: none;
 
+      -webkit-tap-highlight-color: transparent;
 
+    }
 
+
 
+    .c-login {
 
+      display: flex;
 
+      justify-content: center;
 
+      align-items: center;
 
+      min-height: 100%;
 
+      width: 100%;
 
+    }
 
+
 
+    .c-login__main {
 
+      flex: 1 0 auto;
 
+    }
 
+
 
+    .c-login-form {
 
+      display: inline-flex;
 
+      flex-direction: column;
 
+      justify-content: center;
 
+      align-items: center;
 
+      padding: 0 0 40px;
 
+      overflow: auto;
 
+    }
 
+
 
+    .c-login-form__header {
 
+      color: #1C5CB0;
 
+      font-size: 28px;
 
+      font-weight: bold;
 
+      text-align: center;
 
+    }
 
+
 
+    .c-login-form__tip {
 
+      padding: 20px;
 
+      height: 60px;
 
+    }
 
+
 
+    .c-login-form__tip .success {
 
+      color: #67C23A;
 
+    }
 
+
 
+    .c-login-form__tip .warning {
 
+      color: #E6A23C;
 
+    }
 
+
 
+    .c-login-form__tip .error {
 
+      color: #F56C6C;
 
+    }
 
+
 
+    .c-login-form__tip .info {
 
+      color: #409EFF;
 
+    }
 
+
 
+    .c-login-form__section {
 
+      display: flex;
 
+      flex-direction: column;
 
+      align-items: center;
 
+    }
 
+
 
+    .c-login-form__wrapper {
 
+      display: flex;
 
+      align-items: center;
 
+    }
 
+
 
+    .c-login-form__label {
 
+      width: 150px;
 
+      margin-right: 20px;
 
+      color: #333333;
 
+      font-size: 16px;
 
+      text-align: right;
 
+    }
 
+
 
+    .c-login-form__label::before {
 
+      content: "*";
 
+      color: #FF0000;
 
+      font-size: 14px;
 
+    }
 
+
 
+    .c-login-form__input {
 
+      padding: 0 10px;
 
+      width: 320px;
 
+      height: 30px;
 
+      font-size: 14px;
 
+      line-height: 30px;
 
+      border: 1px solid #C4C4C4;
 
+      outline: none;
 
+    }
 
+
 
+    .c-login-form__input.password {
 
+      -webkit-text-security: disc;
 
+    }
 
+
 
+    .c-login-form__error {
 
+      display: inline-block;
 
+      width: 320px;
 
+      height: 30px;
 
+      margin-left: 170px;
 
+      color: #F56C6C;
 
+      font-size: 12px;
 
+      line-height: 24px;
 
+      white-space: nowrap;
 
+    }
 
+
 
+    .c-login-form__submit {
 
+      display: inline-flex;
 
+      justify-content: center;
 
+      align-items: center;
 
+      height: 40px;
 
+      padding: 0 40px;
 
+      margin-top: 60px;
 
+      color: #ffffff;
 
+      font-size: 18px;
 
+      border: none;
 
+      background-color: #1C5CB0;
 
+      border-radius: 8px;
 
+      cursor: pointer;
 
+    }
 
+
 
+    .c-login-form__submit[disabled] {
 
+      background-color: #C4C4C4;
 
+    }
 
+
 
+  </style>
 
 </head>
 
 <body>
 
   <div class="c-login">

+ 183 - 2
keycloak-theme/login/login.ftl
Vedi File 

@@ -4,7 +4,188 @@
 
   <meta charset="utf-8" />
 
   <meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' />
 
   <title>${realm.displayName}</title>
 
-  <link rel="stylesheet" href="${url.resourcesPath}/css/login.css" />
 
+  <style>
 
+    * {
 
+      margin: 0;
 
+      padding: 0;
 
+    }
 
+
 
+    html,
 
+    body {
 
+      width: 100%;
 
+      height: 100%;
 
+    }
 
+
 
+    body {
 
+      box-sizing: border-box;
 
+      -moz-osx-font-smoothing: grayscale;
 
+      -webkit-font-smoothing: antialiased;
 
+      text-rendering: optimizeLegibility;
 
+      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 
+      background-color: #F4F7FB;
 
+    }
 
+
 
+    *,
 
+    *::before,
 
+    *::after {
 
+      box-sizing: inherit;
 
+    }
 
+
 
+    a {
 
+      border: none;
 
+      outline: none;
 
+      text-decoration: none;
 
+      -webkit-touch-callout: none;
 
+      -webkit-tap-highlight-color: transparent;
 
+    }
 
+
 
+    .c-login {
 
+      display: flex;
 
+      min-height: 100%;
 
+      width: 100%;
 
+    }
 
+
 
+    .c-login__img {
 
+      flex: 1 0 400px;
 
+      display: inline-block;
 
+      max-width: 800px;
 
+      background: url("${url.resourcesPath}/img/illustration.png") 50% 50% / 757px 613px no-repeat;
 
+    }
 
+
 
+    .c-login__main {
 
+      flex: 1 0 auto;
 
+    }
 
+
 
+    @media screen and (max-width: 900px) {
 
+      .c-login__img {
 
+        display: none;
 
+      }
 
+    }
 
+
 
+    .c-login-form {
 
+      display: inline-flex;
 
+      flex-direction: column;
 
+      justify-content: center;
 
+      align-items: center;
 
+      padding: 40px 0 80px;
 
+      background-color: #FFFFFF;
 
+      overflow: auto;
 
+    }
 
+
 
+    .c-login-form__header {
 
+      display: inline-flex;
 
+      align-items: center;
 
+    }
 
+
 
+    .c-login-form__logo {
 
+      flex: none;
 
+    }
 
+
 
+    .c-login-form__name {
 
+      margin-left: 16px;
 
+      color: #1C5CB0;
 
+      font-size: 28px;
 
+      font-weight: bold;
 
+      line-height: 1;
 
+    }
 
+
 
+    .c-login-form__tip {
 
+      padding: 20px;
 
+      height: 100px;
 
+    }
 
+
 
+    .c-login-form__tip .success {
 
+      color: #67C23A;
 
+    }
 
+
 
+    .c-login-form__tip .warning {
 
+      color: #E6A23C;
 
+    }
 
+
 
+    .c-login-form__tip .error {
 
+      color: #F56C6C;
 
+    }
 
+
 
+    .c-login-form__tip .info {
 
+      color: #409EFF;
 
+    }
 
+
 
+    .c-login-form__wrapper {
 
+      display: inline-flex;
 
+      flex-direction: column;
 
+      color: #C4C4C4;
 
+    }
 
+
 
+    .c-login-form__error {
 
+      height: 30px;
 
+      color: #F56C6C;
 
+      font-size: 12px;
 
+      line-height: 24px;
 
+      white-space: nowrap;
 
+    }
 
+
 
+    .c-login-form__label {
 
+      font-size: 24px;
 
+      line-height: 1;
 
+    }
 
+
 
+    .c-login-form__section {
 
+      display: inline-flex;
 
+      align-items: center;
 
+      padding: 8px 0 2px;
 
+      border-bottom: 1px solid currentColor;
 
+    }
 
+
 
+    .c-login-form__input {
 
+      width: 320px;
 
+      height: 30px;
 
+      font-size: 18px;
 
+      line-height: 30px;
 
+      border: none;
 
+      outline: none;
 
+    }
 
+
 
+    .c-login-form__input.password {
 
+      -webkit-text-security: disc;
 
+    }
 
+
 
+    .c-login-form__icon {
 
+      display: inline-block;
 
+      margin-left: 10px;
 
+      width: 30px;
 
+      height: 30px;
 
+      background-position: 0 0;
 
+      background-size: 100% 100%;
 
+      background-repeat: no-repeat;
 
+    }
 
+
 
+    .c-login-form__icon.user {
 
+      background-image: url("${url.resourcesPath}/img/icon_user.png");
 
+    }
 
+
 
+    .c-login-form__icon.lock {
 
+      background-image: url("${url.resourcesPath}/img/icon_lock.png");
 
+    }
 
+
 
+    .c-login-form__submit {
 
+      display: inline-flex;
 
+      justify-content: center;
 
+      align-items: center;
 
+      width: 360px;
 
+      height: 40px;
 
+      margin-top: 50px;
 
+      color: #ffffff;
 
+      font-size: 18px;
 
+      border: none;
 
+      background-color: #1C5CB0;
 
+      border-radius: 8px;
 
+      cursor: pointer;
 
+    }
 
+
 
+    .c-login-form__submit[disabled] {
 
+      background-color: #C4C4C4;
 
+    }
 
+  </style>
 
 </head>
 
 <body>
 
   <div class="c-login">
 
@@ -17,7 +198,7 @@
 
       onsubmit="login.disabled = true; return false;"
 
     >
 
       <div class="c-login-form__header">
 
-        <img class="c-login-form__logo" src="${url.resourcesPath}/img/logo/${realm.displayNameHtml}">
 
+        <img class="c-login-form__logo" src="${url.resourcesPath}/img/logo/${realm.displayNameHtml!'inspur.png'}">
 
         <div class="c-login-form__name">${realm.displayName}</div>
 
       </div>
 
       <div class="c-login-form__tip">

+ 0 - 180
keycloak-theme/login/resources/css/login.css
Vedi File 

@@ -1,180 +0,0 @@
 
-* {
 
-  margin: 0;
 
-  padding: 0;
 
-}
 
-
 
-html,
 
-body {
 
-  width: 100%;
 
-  height: 100%;
 
-}
 
-
 
-body {
 
-  box-sizing: border-box;
 
-  -moz-osx-font-smoothing: grayscale;
 
-  -webkit-font-smoothing: antialiased;
 
-  text-rendering: optimizeLegibility;
 
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 
-  background-color: #F4F7FB;
 
-}
 
-
 
-*,
 
-*::before,
 
-*::after {
 
-  box-sizing: inherit;
 
-}
 
-
 
-a {
 
-  border: none;
 
-  outline: none;
 
-  text-decoration: none;
 
-  -webkit-touch-callout: none;
 
-  -webkit-tap-highlight-color: transparent;
 
-}
 
-
 
-.c-login {
 
-  display: flex;
 
-  min-height: 100%;
 
-  width: 100%;
 
-}
 
-
 
-.c-login__img {
 
-  flex: 1 0 400px;
 
-  display: inline-block;
 
-  max-width: 800px;
 
-  background: url("../img/illustration.png") 50% 50% / 757px 613px no-repeat;
 
-}
 
-
 
-.c-login__main {
 
-  flex: 1 0 auto;
 
-}
 
-
 
-@media screen and (max-width: 900px) {
 
-  .c-login__img {
 
-    display: none;
 
-  }
 
-}
 
-
 
-.c-login-form {
 
-  display: inline-flex;
 
-  flex-direction: column;
 
-  justify-content: center;
 
-  align-items: center;
 
-  padding: 40px 0 80px;
 
-  background-color: #FFFFFF;
 
-  overflow: auto;
 
-}
 
-
 
-.c-login-form__header {
 
-  display: inline-flex;
 
-  align-items: center;
 
-}
 
-
 
-.c-login-form__logo {
 
-  flex: none;
 
-}
 
-
 
-.c-login-form__name {
 
-  margin-left: 16px;
 
-  color: #1C5CB0;
 
-  font-size: 28px;
 
-  font-weight: bold;
 
-  line-height: 1;
 
-}
 
-
 
-.c-login-form__tip {
 
-  padding: 20px;
 
-  height: 100px;
 
-}
 
-
 
-.c-login-form__tip .success {
 
-  color: #67C23A;
 
-}
 
-
 
-.c-login-form__tip .warning {
 
-  color: #E6A23C;
 
-}
 
-
 
-.c-login-form__tip .error {
 
-  color: #F56C6C;
 
-}
 
-
 
-.c-login-form__tip .info {
 
-  color: #409EFF;
 
-}
 
-
 
-.c-login-form__wrapper {
 
-  display: inline-flex;
 
-  flex-direction: column;
 
-  color: #C4C4C4;
 
-}
 
-
 
-.c-login-form__error {
 
-  height: 30px;
 
-  color: #F56C6C;
 
-  font-size: 12px;
 
-  line-height: 24px;
 
-  white-space: nowrap;
 
-}
 
-
 
-.c-login-form__label {
 
-  font-size: 24px;
 
-  line-height: 1;
 
-}
 
-
 
-.c-login-form__section {
 
-  display: inline-flex;
 
-  align-items: center;
 
-  padding: 8px 0 2px;
 
-  border-bottom: 1px solid currentColor;
 
-}
 
-
 
-.c-login-form__input {
 
-  width: 320px;
 
-  height: 30px;
 
-  font-size: 18px;
 
-  line-height: 30px;
 
-  border: none;
 
-  outline: none;
 
-}
 
-
 
-.c-login-form__input.password {
 
-  -webkit-text-security: disc;
 
-}
 
-
 
-.c-login-form__icon {
 
-  display: inline-block;
 
-  margin-left: 10px;
 
-  width: 30px;
 
-  height: 30px;
 
-  background-position: 0 0;
 
-  background-size: 100% 100%;
 
-  background-repeat: no-repeat;
 
-}
 
-
 
-.c-login-form__icon.user {
 
-  background-image: url("../img/icon_user.png");
 
-}
 
-
 
-.c-login-form__icon.lock {
 
-  background-image: url("../img/icon_lock.png");
 
-}
 
-
 
-.c-login-form__submit {
 
-  display: inline-flex;
 
-  justify-content: center;
 
-  align-items: center;
 
-  width: 360px;
 
-  height: 40px;
 
-  margin-top: 50px;
 
-  color: #ffffff;
 
-  font-size: 18px;
 
-  border: none;
 
-  background-color: #1C5CB0;
 
-  border-radius: 8px;
 
-  cursor: pointer;
 
-}
 
-
 
-.c-login-form__submit[disabled] {
 
-  background-color: #C4C4C4;
 
-}

+ 0 - 151
keycloak-theme/login/resources/css/password.css
Vedi File 

@@ -1,151 +0,0 @@
 
-* {
 
-  margin: 0;
 
-  padding: 0;
 
-}
 
-
 
-html,
 
-body {
 
-  width: 100%;
 
-  height: 100%;
 
-}
 
-
 
-body {
 
-  box-sizing: border-box;
 
-  -moz-osx-font-smoothing: grayscale;
 
-  -webkit-font-smoothing: antialiased;
 
-  text-rendering: optimizeLegibility;
 
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 
-  background-color: #FFFFFF;
 
-}
 
-
 
-*,
 
-*::before,
 
-*::after {
 
-  box-sizing: inherit;
 
-}
 
-
 
-a {
 
-  border: none;
 
-  outline: none;
 
-  text-decoration: none;
 
-  -webkit-touch-callout: none;
 
-  -webkit-tap-highlight-color: transparent;
 
-}
 
-
 
-.c-login {
 
-  display: flex;
 
-  justify-content: center;
 
-  align-items: center;
 
-  min-height: 100%;
 
-  width: 100%;
 
-}
 
-
 
-.c-login__main {
 
-  flex: 1 0 auto;
 
-}
 
-
 
-.c-login-form {
 
-  display: inline-flex;
 
-  flex-direction: column;
 
-  justify-content: center;
 
-  align-items: center;
 
-  padding: 0 0 40px;
 
-  overflow: auto;
 
-}
 
-
 
-.c-login-form__header {
 
-  color: #1C5CB0;
 
-  font-size: 28px;
 
-  font-weight: bold;
 
-  text-align: center;
 
-}
 
-
 
-.c-login-form__tip {
 
-  padding: 20px;
 
-  height: 60px;
 
-}
 
-
 
-.c-login-form__tip .success {
 
-  color: #67C23A;
 
-}
 
-
 
-.c-login-form__tip .warning {
 
-  color: #E6A23C;
 
-}
 
-
 
-.c-login-form__tip .error {
 
-  color: #F56C6C;
 
-}
 
-
 
-.c-login-form__tip .info {
 
-  color: #409EFF;
 
-}
 
-
 
-.c-login-form__section {
 
-  display: flex;
 
-  flex-direction: column;
 
-  align-items: center;
 
-}
 
-
 
-.c-login-form__wrapper {
 
-  display: flex;
 
-  align-items: center;
 
-}
 
-
 
-.c-login-form__label {
 
-  width: 150px;
 
-  margin-right: 20px;
 
-  color: #333333;
 
-  font-size: 16px;
 
-  text-align: right;
 
-}
 
-
 
-.c-login-form__label::before {
 
-  content: "*";
 
-  color: #FF0000;
 
-  font-size: 14px;
 
-}
 
-
 
-.c-login-form__input {
 
-  padding: 0 10px;
 
-  width: 320px;
 
-  height: 30px;
 
-  font-size: 14px;
 
-  line-height: 30px;
 
-  border: 1px solid #C4C4C4;
 
-  outline: none;
 
-}
 
-
 
-.c-login-form__input.password {
 
-  -webkit-text-security: disc;
 
-}
 
-
 
-.c-login-form__error {
 
-  display: inline-block;
 
-  width: 320px;
 
-  height: 30px;
 
-  margin-left: 170px;
 
-  color: #F56C6C;
 
-  font-size: 12px;
 
-  line-height: 24px;
 
-  white-space: nowrap;
 
-}
 
-
 
-.c-login-form__submit {
 
-  display: inline-flex;
 
-  justify-content: center;
 
-  align-items: center;
 
-  height: 40px;
 
-  padding: 0 40px;
 
-  margin-top: 60px;
 
-  color: #ffffff;
 
-  font-size: 18px;
 
-  border: none;
 
-  background-color: #1C5CB0;
 
-  border-radius: 8px;
 
-  cursor: pointer;
 
-}
 
-
 
-.c-login-form__submit[disabled] {
 
-  background-color: #C4C4C4;
 
-}

+ 0 - 158
keycloak-theme/login/resources/css/totp.css
Vedi File 

@@ -1,158 +0,0 @@
 
-* {
 
-  margin: 0;
 
-  padding: 0;
 
-}
 
-
 
-html,
 
-body {
 
-  width: 100%;
 
-  height: 100%;
 
-}
 
-
 
-body {
 
-  box-sizing: border-box;
 
-  -moz-osx-font-smoothing: grayscale;
 
-  -webkit-font-smoothing: antialiased;
 
-  text-rendering: optimizeLegibility;
 
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 
-  background-color: #F4F7FB;
 
-}
 
-
 
-*,
 
-*::before,
 
-*::after {
 
-  box-sizing: inherit;
 
-}
 
-
 
-a {
 
-  border: none;
 
-  outline: none;
 
-  text-decoration: none;
 
-  -webkit-touch-callout: none;
 
-  -webkit-tap-highlight-color: transparent;
 
-}
 
-
 
-.c-login {
 
-  display: flex;
 
-  min-height: 100%;
 
-  width: 100%;
 
-}
 
-
 
-.c-login__img {
 
-  flex: 1 0 400px;
 
-  display: inline-block;
 
-  max-width: 800px;
 
-  background: url("../img/illustration.png") 50% 50% / 757px 613px no-repeat;
 
-}
 
-
 
-.c-login__main {
 
-  flex: 1 0 auto;
 
-}
 
-
 
-@media screen and (max-width: 900px) {
 
-  .c-login__img {
 
-    display: none;
 
-  }
 
-}
 
-
 
-.c-login-form {
 
-  display: inline-flex;
 
-  flex-direction: column;
 
-  justify-content: center;
 
-  align-items: center;
 
-  padding: 40px 0 80px;
 
-  background-color: #FFFFFF;
 
-  overflow: auto;
 
-}
 
-
 
-.c-login-form__header {
 
-  display: inline-flex;
 
-  align-items: center;
 
-}
 
-
 
-.c-login-form__logo {
 
-  flex: none;
 
-}
 
-
 
-.c-login-form__name {
 
-  margin-left: 16px;
 
-  color: #1C5CB0;
 
-  font-size: 28px;
 
-  font-weight: bold;
 
-  line-height: 1;
 
-}
 
-
 
-.c-login-form__title {
 
-  padding: 60px 0 40px;
 
-  color: #1C5CB0;
 
-  font-size: 18px;
 
-  font-weight: bold;
 
-}
 
-
 
-.c-login-form__info {
 
-  width: 400px;
 
-  color: #333333;
 
-  font-size: 16px;
 
-  line-height: 20px;
 
-}
 
-
 
-.c-login-form__info p {
 
-  line-height: 24px;
 
-}
 
-
 
-.c-login-form__qr {
 
-  max-width: 150px;
 
-  max-height: 150px;
 
-}
 
-
 
-.c-login-form__retry {
 
-  color: #1C5CB0;
 
-  font-size: 12px;
 
-}
 
-
 
-.c-login-form__required {
 
-  color: #EF1D1D;
 
-}
 
-
 
-.c-login-form__required ::before {
 
-  content: "*";
 
-  color: #FF0000;
 
-  font-size: 14px;
 
-}
 
-
 
-.c-login-form__input {
 
-  padding: 0 10px;
 
-  margin-top: 6px;
 
-  width: 240px;
 
-  height: 30px;
 
-  font-size: 14px;
 
-  line-height: 30px;
 
-  border: 1px solid #C4C4C4;
 
-  outline: none;
 
-}
 
-
 
-.c-login-form__error {
 
-  height: 30px;
 
-  color: #F56C6C;
 
-  font-size: 12px;
 
-  line-height: 24px;
 
-  white-space: nowrap;
 
-}
 
-
 
-.c-login-form__submit {
 
-  display: inline-flex;
 
-  justify-content: center;
 
-  align-items: center;
 
-  height: 40px;
 
-  padding: 0 40px;
 
-  color: #ffffff;
 
-  font-size: 18px;
 
-  border: none;
 
-  background-color: #1C5CB0;
 
-  border-radius: 8px;
 
-  cursor: pointer;
 
-}
 
-
 
-.c-login-form__submit[disabled] {
 
-  background-color: #C4C4C4;
 
-}

BIN
keycloak-theme/login/resources/img/applet.png
Vedi File