add login style.

2024-12-13 19:11:44 +08:00 · 2024-12-13 19:11:44 +08:00 · a7a6312c0a
commit a7a6312c0a
parent 5d8abdcf28
4 changed files with 119 additions and 36 deletions
--- a/WebApplication/BulmaTheme.cpp
+++ b/WebApplication/BulmaTheme.cpp
@ -122,6 +122,10 @@ void BulmaTheme::apply(Wt::WWidget *widget, Wt::DomElement &element, int element

 void BulmaTheme::applyValidationStyle(Wt::WWidget *widget, const Wt::WValidator::Result &validation,
                                      Wt::WFlags<Wt::ValidationStyleFlag> flags) const {
+    using namespace Wt;
+    if (flags.test(ValidationStyleFlag::InvalidStyle)) {
+        widget->addStyleClass("bulma-is-danger");
+    }
 }

 bool BulmaTheme::canBorderBoxElement(const Wt::DomElement &element) const {
--- a/resources/app.css
+++ b/resources/app.css
@ -29,7 +29,7 @@

 .Wt-itemview th,
 .Wt-itemview th .Wt-tv-br {
-        overflow: hidden
+    overflow: hidden
 }


@ -56,19 +56,19 @@

 .Wt-hrh2,
 .Wt-vsh2 {
-        cursor: row-resize
+    cursor: row-resize
 }

 .Wt-hsh2,
 .Wt-vrh2 {
-        cursor: col-resize
+    cursor: col-resize
 }

 .Wt-hrh2:hover,
 .Wt-hsh2,
 .Wt-vrh2:hover,
 .Wt-vsh2 {
-        background-color: #999
+    background-color: #999
 }


@ -101,4 +101,8 @@

 .Wt-itemview .Wt-tv-sh-down {
    background: url(icons/sort-arrow-down.gif) no-repeat 0 6px
+}
+
+.Wt-error {
+    color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-on-scheme-l));
 }
--- a/resources/auth_css_theme.xml
+++ b/resources/auth_css_theme.xml
@ -3,8 +3,8 @@
  <message id="Wt.Auth.field">
    <![CDATA[
    ${<if:{1}>}
-      <label for="${id:{1}}" class="bulma-label">${tr:Wt.Auth.{1}}
-        ${{1}-info class="Wt-info bulma-help"}
+      <label for="${id:{1}}">${tr:Wt.Auth.{1}}
+        ${{1}-info class="Wt-info"}
      </label>
      ${{1}}
    ${</if:{1}>}
@ -12,22 +12,51 @@
  </message>

  <message id="Wt.Auth.template.login">
-    <div class="Wt-form Wt-auth-login bulma-box">
+    <div class="bulma-box bulma-container bulma-is-max-tablet">
      <h2>${tr:Wt.Auth.login-form-title}</h2>
      <p>${tr:Wt.Auth.login-form-info}</p>

-      <div class="Wt-fields bulma-field">
-        ${<if:passwords>}
-          <label for="${id:user-name}" class="bulma-label">${user-name-label}
-            ${user-name-info class="Wt-info bulma-help"}
-            ${user-confirm-email class="Wt-info"}
-          </label>
-          ${user-name class="bulma-input"}

-          ${block:Wt.Auth.field password}
-          ${block:Wt.Auth.field remember-me}
+        ${<if:passwords>}
+          <div class="bulma-field"> 
+            <label for="${id:user-name}" class="bulma-label">
+              ${user-name-label}
+              ${user-confirm-email class="Wt-info"}
+            </label>
+            <div class="bulma-control bulma-has-icons-left">
+              ${user-name class="bulma-input" type="text"}
+              <span class="bulma-icon bulma-is-small bulma-is-left">
+                <i class="fa-solid fa-user"></i>
+              </span>
+            </div>
+            ${user-name-info class="Wt-info bulma-help"}
+          </div>
+
+          ${<if:password>}
+            <div class="bulma-field"> 
+              <label for="${id:password}" class="bulma-label">
+                ${tr:Wt.Auth.password}
+              </label>
+              <div class="bulma-control bulma-has-icons-left">
+                ${password class="bulma-input"}
+                <span class="bulma-icon bulma-is-small bulma-is-left">
+                  <i class="fa-solid fa-lock"></i>
+                </span>
+              </div>
+              ${password-info class="Wt-info bulma-help"}
+            </div>
+          ${</if:password>}
+
+          ${<if:remember-me>}
+            <label for="${id:remember-me}">
+              ${remember-me}
+              ${tr:Wt.Auth.remember-me}
+              ${remember-me-info class="Wt-info bulma-help"}
+            </label>
+            
+          ${</if:remember-me>}
         ${</if:passwords>}
-      </div>
+

      ${<if:oauth>}

@ -57,16 +86,62 @@

      <div class="Wt-fields">
        ${<if:user-name>}
-          <label for="${id:user-name}">${user-name-label}
-            ${user-name-info class="Wt-info"}
-            ${confirm-is-you class="Wt-info"}
+          <label for="${id:user-name}" class="bulma-label">
+            ${user-name-label}
          </label>
-          ${user-name}
+
+          <div class="bulma-control bulma-has-icons-left">
+            ${user-name class="bulma-input" type="text"}
+            <span class="bulma-icon bulma-is-small bulma-is-left">
+              <i class="fa-solid fa-user"></i>
+            </span>
+          </div>
+          ${user-name-info class="Wt-info bulma-help"}
+          ${confirm-is-you class="Wt-info bulma-help"}
        ${</if:user-name>}

-        ${block:Wt.Auth.field choose-password}
-        ${block:Wt.Auth.field repeat-password}
-        ${block:Wt.Auth.field email}
+        ${<if:choose-password>}
+          <div class="bulma-field">
+            <label for="${id:choose-password}">${tr:Wt.Auth.choose-password}
+              ${choose-password-info class="Wt-info"}
+            </label>
+
+            <div class="bulma-control bulma-has-icons-left">
+              ${choose-password class="bulma-input"}
+              <span class="bulma-icon bulma-is-small bulma-is-left">
+                <i class="fa-solid fa-lock"></i>
+              </span>
+            </div>
+          </div>
+        ${</if:choose-password>}
+
+        ${<if:repeat-password>}
+          <div>
+            <label for="${id:repeat-password}">${tr:Wt.Auth.repeat-password}
+              ${repeat-password-info class="Wt-info"}
+            </label>
+            <div class="bulma-control bulma-has-icons-left">
+              ${repeat-password class="bulma-input"}
+              <span class="bulma-icon bulma-is-small bulma-is-left">
+                <i class="fa-solid fa-lock"></i>
+              </span>
+            </div>
+          </div>
+        ${</if:repeat-password>}
+
+        ${<if:email>}
+          <div>
+            <label for="${id:email}">${tr:Wt.Auth.email}
+              ${email-info class="Wt-info"}
+            </label>
+            <div class="bulma-control bulma-has-icons-left">
+              ${email class="bulma-input"}
+              <span class="bulma-icon bulma-is-small bulma-is-left">
+                <i class="fa-solid fa-envelope"></i>
+              </span>
+            </div>
+          </div>
+        ${</if:email>}
      </div>

      ${<if:oauth>}
--- a/resources/auth_strings_zh.xml
+++ b/resources/auth_strings_zh.xml
@ -66,11 +66,11 @@
  <message id="Wt.Auth.login-form-info"></message>
  <message id="Wt.Auth.user-name">用户名</message>
  <message id="Wt.Auth.user-name-info">请输入您的用户名</message>
-  <message id="Wt.Auth.user-name-invalid">Invalid</message>
-  <message id="Wt.Auth.email">Email address</message>
-  <message id="Wt.Auth.email-info">Enter your email address</message>
+  <message id="Wt.Auth.user-name-invalid">无效的用户名</message>
+  <message id="Wt.Auth.email">电子邮箱</message>
+  <message id="Wt.Auth.email-info">输入您的电子邮箱地址</message>
  <message id="Wt.Auth.optional-email-info">
-    Enter your email address (optional)
+    输入您的电子邮箱地址(可选)
  </message>
  <message id="Wt.Auth.password">密码</message>
  <message id="Wt.Auth.password-info">请输入您的密码</message>
@ -100,16 +100,16 @@

  <message id="Wt.Auth.registration-form-title">注册</message>
  <message id="Wt.Auth.registration-form-info">请填写以下信息进行注册</message>
-  <message id="Wt.Auth.password-registration">Register using a user name and password:</message>
+  <message id="Wt.Auth.password-registration">使用用户名和密码注册:</message>
  <message id="Wt.Auth.oauth-registration">Register with an identity provider:</message>
  <message id="Wt.Auth.or-oauth-registration">Or, register with an identity provider:</message>
-  <message id="Wt.Auth.valid">Valid</message>
-  <message id="Wt.Auth.choose-password">Choose Password</message>
-  <message id="Wt.Auth.choose-password-info">Choose a password</message>
-  <message id="Wt.Auth.repeat-password">Repeat password</message>
-  <message id="Wt.Auth.repeat-password-info">Re-enter your password</message>
-  <message id="Wt.Auth.email-invalid">Invalid email address</message>
-  <message id="Wt.Auth.email-exists">Email already registered</message>
+  <message id="Wt.Auth.valid">有效</message>
+  <message id="Wt.Auth.choose-password">请输入密码</message>
+  <message id="Wt.Auth.choose-password-info">请输入密码</message>
+  <message id="Wt.Auth.repeat-password">重新输入密码</message>
+  <message id="Wt.Auth.repeat-password-info">请重新输入您的密码</message>
+  <message id="Wt.Auth.email-invalid">无效的邮箱地址</message>
+  <message id="Wt.Auth.email-exists">邮箱已经注册</message>
  <message id="Wt.Auth.oauth">Your external account</message>
  <message id="Wt.Auth.oauth-info">Choose one of your accounts</message>
  <message id="Wt.Auth.user-name-exists">User already exists</message>