add login style.

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 {

resources/app.css

@@ -102,3 +102,7 @@
 .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));
+}

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}}
+      <label for="${id:{1}}">${tr:Wt.Auth.{1}}
-        ${{1}-info class="Wt-info bulma-help"}
+        ${{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}
+          <div class="bulma-field"> 
-            ${user-name-info class="Wt-info bulma-help"}
+            <label for="${id:user-name}" class="bulma-label">
+              ${user-name-label}
               ${user-confirm-email class="Wt-info"}
             </label>
-          ${user-name class="bulma-input"}
+            <div class="bulma-control bulma-has-icons-left">
-
+              ${user-name class="bulma-input" type="text"}
-          ${block:Wt.Auth.field password}
+              <span class="bulma-icon bulma-is-small bulma-is-left">
-          ${block:Wt.Auth.field remember-me}
+                <i class="fa-solid fa-user"></i>
-         ${</if:passwords>}
+              </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>}
+
 
       ${<if:oauth>}
 
@@ -57,16 +86,62 @@
 
       <div class="Wt-fields">
         ${<if:user-name>}
-          <label for="${id:user-name}">${user-name-label}
+          <label for="${id:user-name}" class="bulma-label">
-            ${user-name-info class="Wt-info"}
+            ${user-name-label}
-            ${confirm-is-you class="Wt-info"}
           </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}
+        ${<if:choose-password>}
-        ${block:Wt.Auth.field repeat-password}
+          <div class="bulma-field">
-        ${block:Wt.Auth.field email}
+            <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>}

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.user-name-invalid">无效的用户名</message>
-  <message id="Wt.Auth.email">Email address</message>
+  <message id="Wt.Auth.email">电子邮箱</message>
-  <message id="Wt.Auth.email-info">Enter your email address</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.valid">有效</message>
-  <message id="Wt.Auth.choose-password">Choose Password</message>
+  <message id="Wt.Auth.choose-password">请输入密码</message>
-  <message id="Wt.Auth.choose-password-info">Choose a password</message>
+  <message id="Wt.Auth.choose-password-info">请输入密码</message>
-  <message id="Wt.Auth.repeat-password">Repeat password</message>
+  <message id="Wt.Auth.repeat-password">重新输入密码</message>
-  <message id="Wt.Auth.repeat-password-info">Re-enter your password</message>
+  <message id="Wt.Auth.repeat-password-info">请重新输入您的密码</message>
-  <message id="Wt.Auth.email-invalid">Invalid email address</message>
+  <message id="Wt.Auth.email-invalid">无效的邮箱地址</message>
-  <message id="Wt.Auth.email-exists">Email already registered</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>