Update changelog v4.3.0

feat(*): added login-update-password

CHANGELOG.md

@@ -1,3 +1,10 @@
+## **4.3.0** (2021-12-27)  
+  
+- Merge pull request #72 from praiz/main
+
+feat(*): added login-update-password  
+- feat(*): added login-update-password    
+  
 ### **4.2.21** (2021-12-27)  
   
 - update dependencies    

README.md

@@ -30,6 +30,8 @@
     <img src="https://user-images.githubusercontent.com/6702424/110260457-a1c3d380-7fac-11eb-853a-80459b65626b.png">
 </p>
 
+> **New in v4.3.0**: Feature [`login-update-password.ftl`](https://github.com/InseeFrLab/keycloakify/pull/72)
+
 # Motivations
 
 Keycloak provides [theme support](https://www.keycloak.org/docs/latest/server_development/#_themes) for web pages. This allows customizing the look and feel of end-user facing pages so they can be integrated with your applications.
@@ -85,6 +87,7 @@ If you already have a Keycloak custom theme, it can be easily ported to Keycloak
 -   [Adding custom message (to `i18n/useKcMessage.tsx`)](#adding-custom-message-to-i18nusekcmessagetsx)
 -   [Email domain whitelist](#email-domain-whitelist)
 -   [Changelog highlights](#changelog-highlights)
+    -   [v4.3](#v43)
     -   [v4](#v4)
     -   [v3](#v3)
     -   [v2.5](#v25)
@@ -475,6 +478,10 @@ and `kcRegisterContext["authorizedMailDomains"]` to validate on.
 
 # Changelog highlights
 
+## v4.3
+
+Feature [`login-update-password.ftl`](https://github.com/InseeFrLab/keycloakify/pull/72)
+
 ## v4
 
 -   Out of the box [frontend form validation](#user-profile-and-frontend-form-validation) 🥳

package.json

@@ -1,6 +1,6 @@
 {
     "name": "keycloakify",
-    "version": "4.2.21",
+    "version": "4.3.0",
     "description": "Keycloak theme generator for Reacts app",
     "repository": {
         "type": "git",

src/bin/build-keycloak-theme/generateFtl/generateFtl.ts

@@ -16,6 +16,7 @@ export const pageIds = [
     "terms.ftl",
     "login-otp.ftl",
     "login-update-profile.ftl",
+    "login-update-password.ftl",
     "login-idp-link-confirm.ftl",
 ] as const;
 

src/lib/components/KcApp.tsx

@@ -10,6 +10,7 @@ import { LoginResetPassword } from "./LoginResetPassword";
 import { LoginVerifyEmail } from "./LoginVerifyEmail";
 import { Terms } from "./Terms";
 import { LoginOtp } from "./LoginOtp";
+import { LoginUpdatePassword } from "./LoginUpdatePassword";
 import { LoginUpdateProfile } from "./LoginUpdateProfile";
 import { LoginIdpLinkConfirm } from "./LoginIdpLinkConfirm";
 
@@ -33,6 +34,8 @@ export const KcApp = memo(({ kcContext, ...props }: { kcContext: KcContextBase }
             return <Terms {...{ kcContext, ...props }} />;
         case "login-otp.ftl":
             return <LoginOtp {...{ kcContext, ...props }} />;
+        case "login-update-password.ftl":
+            return <LoginUpdatePassword {...{ kcContext, ...props }} />;
         case "login-update-profile.ftl":
             return <LoginUpdateProfile {...{ kcContext, ...props }} />;
         case "login-idp-link-confirm.ftl":

src/lib/components/LoginUpdatePassword.tsx

@@ -0,0 +1,117 @@
+import { memo } from "react";
+import { Template } from "./Template";
+import type { KcProps } from "./KcProps";
+import type { KcContextBase } from "../getKcContext/KcContextBase";
+import { useKcMessage } from "../i18n/useKcMessage";
+import { useCssAndCx } from "tss-react";
+
+export const LoginUpdatePassword = memo(({ kcContext, ...props }: { kcContext: KcContextBase.LoginUpdatePassword } & KcProps) => {
+    const { cx } = useCssAndCx();
+
+    const { msg, msgStr } = useKcMessage();
+
+    const { url, messagesPerField, isAppInitiatedAction, username } = kcContext;
+
+    return (
+        <Template
+            {...{ kcContext, ...props }}
+            doFetchDefaultThemeResources={true}
+            headerNode={msg("updatePasswordTitle")}
+            formNode={
+                <form id="kc-passwd-update-form" className={cx(props.kcFormClass)} action={url.loginAction} method="post">
+                    <input
+                        type="text"
+                        id="username"
+                        name="username"
+                        value={username}
+                        readOnly={true}
+                        autoComplete="username"
+                        style={{ display: "none" }}
+                    />
+                    <input type="password" id="password" name="password" autoComplete="current-password" style={{ display: "none" }} />
+
+                    <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("password", props.kcFormGroupErrorClass))}>
+                        <div className={cx(props.kcLabelWrapperClass)}>
+                            <label htmlFor="password-new" className={cx(props.kcLabelClass)}>
+                                {msg("passwordNew")}
+                            </label>
+                        </div>
+                        <div className={cx(props.kcInputWrapperClass)}>
+                            <input
+                                type="password"
+                                id="password-new"
+                                name="password-new"
+                                autoFocus
+                                autoComplete="new-password"
+                                className={cx(props.kcInputClass)}
+                            />
+                        </div>
+                    </div>
+
+                    <div className={cx(props.kcFormGroupClass, messagesPerField.printIfExists("password-confirm", props.kcFormGroupErrorClass))}>
+                        <div className={cx(props.kcLabelWrapperClass)}>
+                            <label htmlFor="password-confirm" className={cx(props.kcLabelClass)}>
+                                {msg("passwordConfirm")}
+                            </label>
+                        </div>
+                        <div className={cx(props.kcInputWrapperClass)}>
+                            <input
+                                type="password"
+                                id="password-confirm"
+                                name="password-confirm"
+                                autoComplete="new-password"
+                                className={cx(props.kcInputClass)}
+                            />
+                        </div>
+                    </div>
+
+                    <div className={cx(props.kcFormGroupClass)}>
+                        <div id="kc-form-options" className={cx(props.kcFormOptionsClass)}>
+                            <div className={cx(props.kcFormOptionsWrapperClass)}>
+                                {isAppInitiatedAction && (
+                                    <div className="checkbox">
+                                        <label>
+                                            <input type="checkbox" id="logout-sessions" name="logout-sessions" value="on" checked />
+                                            {msgStr("logoutOtherSessions")}
+                                        </label>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+
+                        <div id="kc-form-buttons" className={cx(props.kcFormButtonsClass)}>
+                            {isAppInitiatedAction ? (
+                                <>
+                                    <input
+                                        className={cx(props.kcButtonClass, props.kcButtonPrimaryClass, props.kcButtonLargeClass)}
+                                        type="submit"
+                                        defaultValue={msgStr("doSubmit")}
+                                    />
+                                    <button
+                                        className={cx(props.kcButtonClass, props.kcButtonDefaultClass, props.kcButtonLargeClass)}
+                                        type="submit"
+                                        name="cancel-aia"
+                                        value="true"
+                                    >
+                                        {msg("doCancel")}
+                                    </button>
+                                </>
+                            ) : (
+                                <input
+                                    className={cx(
+                                        props.kcButtonClass,
+                                        props.kcButtonPrimaryClass,
+                                        props.kcButtonBlockClass,
+                                        props.kcButtonLargeClass,
+                                    )}
+                                    type="submit"
+                                    defaultValue={msgStr("doSubmit")}
+                                />
+                            )}
+                        </div>
+                    </div>
+                </form>
+            }
+        />
+    );
+});

src/lib/getKcContext/KcContextBase.ts

@@ -21,6 +21,7 @@ export type KcContextBase =
     | KcContextBase.LoginVerifyEmail
     | KcContextBase.Terms
     | KcContextBase.LoginOtp
+    | KcContextBase.LoginUpdatePassword
     | KcContextBase.LoginUpdateProfile
     | KcContextBase.LoginIdpLinkConfirm;
 
@@ -192,6 +193,11 @@ export declare namespace KcContextBase {
         };
     };
 
+    export type LoginUpdatePassword = Common & {
+        pageId: "login-update-password.ftl";
+        username: string;
+    };
+
     export type LoginUpdateProfile = Common & {
         pageId: "login-update-profile.ftl";
         user: {

src/lib/getKcContext/kcContextMocks/kcContextMocks.ts

@@ -346,6 +346,11 @@ export const kcContextMocks: KcContextBase[] = [
             ],
         },
     }),
+    id<KcContextBase.LoginUpdatePassword>({
+        ...kcContextCommonMock,
+        "pageId": "login-update-password.ftl",
+        "username": "anUsername",
+    }),
     id<KcContextBase.LoginUpdateProfile>({
         ...kcContextCommonMock,
         "pageId": "login-update-profile.ftl",