feat: add login password and login username pages (#38)

Co-authored-by: Anthony Lukin <anthony@lukin.dev>

README.md

@@ -13,11 +13,13 @@ Keywind is a component-based Keycloak Login Theme built with [Tailwind CSS](http
 - Login OAuth Grant
 - Login OTP
 - Login Page Expired
+- Login Password
 - Login Recovery Authn Code Config
 - Login Recovery Authn Code Input
 - Login Reset Password
 - Login Update Password
 - Login Update Profile
+- Login Username
 - Logout Confirm
 - Register
 - Select Authenticator

theme/keywind/login/login-password.ftl

@@ -0,0 +1,39 @@
+<#import "template.ftl" as layout>
+<#import "components/atoms/button.ftl" as button>
+<#import "components/atoms/button-group.ftl" as buttonGroup>
+<#import "components/atoms/form.ftl" as form>
+<#import "components/atoms/input.ftl" as input>
+<#import "components/atoms/link.ftl" as link>
+
+<@layout.registrationLayout displayMessage=!messagesPerField.existsError("password"); section>
+  <#if section="header">
+    ${msg("doLogIn")}
+  <#elseif section="form">
+    <@form.kw
+      action=url.loginAction
+      method="post"
+      onsubmit="login.disabled = true; return true;"
+    >
+      <@input.kw
+        autofocus=true
+        invalid=messagesPerField.existsError("password")
+        label=msg("password")
+        message=kcSanitize(messagesPerField.get("password"))?no_esc
+        name="password"
+        type="password"
+      />
+      <#if realm.resetPasswordAllowed>
+        <div class="flex items-center justify-between">
+          <@link.kw color="primary" href=url.loginResetCredentialsUrl size="small">
+            ${msg("doForgotPassword")}
+          </@link.kw>
+        </div>
+      </#if>
+      <@buttonGroup.kw>
+        <@button.kw color="primary" name="login" type="submit">
+          ${msg("doLogIn")}
+        </@button.kw>
+      </@buttonGroup.kw>
+    </@form.kw>
+  </#if>
+</@layout.registrationLayout>

theme/keywind/login/login-username.ftl

@@ -0,0 +1,71 @@
+<#import "template.ftl" as layout>
+<#import "components/atoms/button.ftl" as button>
+<#import "components/atoms/button-group.ftl" as buttonGroup>
+<#import "components/atoms/checkbox.ftl" as checkbox>
+<#import "components/atoms/form.ftl" as form>
+<#import "components/atoms/input.ftl" as input>
+<#import "components/atoms/link.ftl" as link>
+<#import "components/molecules/identity-provider.ftl" as identityProvider>
+<#import "features/labels/username.ftl" as usernameLabel>
+
+<#assign usernameLabel><@usernameLabel.kw /></#assign>
+
+<@layout.registrationLayout
+  displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??
+  displayMessage=!messagesPerField.existsError("username")
+  ;
+  section
+>
+  <#if section="header">
+    ${msg("loginAccountTitle")}
+  <#elseif section="form">
+    <#if realm.password>
+      <@form.kw
+        action=url.loginAction
+        method="post"
+        onsubmit="login.disabled = true; return true;"
+      >
+        <#if !usernameHidden??>
+          <@input.kw
+            autocomplete=realm.loginWithEmailAllowed?string("email", "username")
+            autofocus=true
+            disabled=usernameEditDisabled??
+            invalid=messagesPerField.existsError("username")
+            label=usernameLabel
+            message=kcSanitize(messagesPerField.get("username"))?no_esc
+            name="username"
+            type="text"
+            value=(login.username)!''
+          />
+        </#if>
+        <#if realm.rememberMe && !usernameHidden??>
+          <div class="flex items-center justify-between">
+            <@checkbox.kw
+              checked=login.rememberMe??
+              label=msg("rememberMe")
+              name="rememberMe"
+            />
+          </div>
+        </#if>
+        <@buttonGroup.kw>
+          <@button.kw color="primary" name="login" type="submit">
+            ${msg("doLogIn")}
+          </@button.kw>
+        </@buttonGroup.kw>
+      </@form.kw>
+    </#if>
+  <#elseif section="info">
+    <#if realm.password && realm.registrationAllowed && !registrationDisabled??>
+      <div class="text-center">
+        ${msg("noAccount")}
+        <@link.kw color="primary" href=url.registrationUrl>
+          ${msg("doRegister")}
+        </@link.kw>
+      </div>
+    </#if>
+  <#elseif section="socialProviders">
+    <#if realm.password && social.providers??>
+      <@identityProvider.kw providers=social.providers />
+    </#if>
+  </#if>
+</@layout.registrationLayout>

theme/keywind/login/login.ftl

@@ -70,9 +70,6 @@
         </@buttonGroup.kw>
       </@form.kw>
     </#if>
-    <#if realm.password && social.providers??>
-      <@identityProvider.kw providers=social.providers />
-    </#if>
   <#elseif section="info">
     <#if realm.password && realm.registrationAllowed && !registrationDisabled??>
       <div class="text-center">
@@ -82,5 +79,9 @@
         </@link.kw>
       </div>
     </#if>
+  <#elseif section="socialProviders">
+    <#if realm.password && social.providers??>
+      <@identityProvider.kw providers=social.providers />
+    </#if>
   </#if>
 </@layout.registrationLayout>

theme/keywind/login/template.ftl

@@ -56,6 +56,7 @@
         </@button.kw>
       </form>
     </#if>
+    <#nested "socialProviders">
   </#assign>
 
   <#assign cardFooter>