agtic/keycloak_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

many small fixes

Browse Source
This commit is contained in:
Joseph Garrone
2021-03-08 00:09:52 +01:00
parent b93003e76d
commit 12e83c9468
16 changed files with 298 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/lib/components/Error.tsx
View File

@ -3,24 +3,20 @@ import { memo } from "react";
import { Template } from "./Template";
import type { KcProps } from "./KcProps";
import { assert } from "../tools/assert";
import { kcContext } from "../kcContext";
import type { KcContext } from "../KcContext";
import { useKcMessage } from "../i18n/useKcMessage";
export const Error = memo((props: KcProps) => {
export const Error = memo(({ kcContext, ...props }: { kcContext: KcContext.Error; } & KcProps) => {
const { msg } = useKcMessage();
assert(
kcContext !== undefined &&
kcContext.pageId === "error.ftl" &&
kcContext.message !== undefined
);
assert(kcContext.message !== undefined);
const { message, client } = kcContext;
return (
<Template
{...props}
{...{ kcContext, ...props }}
displayMessage={false}
headerNode={msg("errorTitle")}
formNode={

12
src/lib/components/Info.tsx
View File

@ -3,18 +3,14 @@ import { memo } from "react";
import { Template } from "./Template";
import type { KcProps } from "./KcProps";
import { assert } from "../tools/assert";
import { kcContext } from "../kcContext";
import type { KcContext } from "../KcContext";
import { useKcMessage } from "../i18n/useKcMessage";
export const Info = memo((props: KcProps) => {
export const Info = memo(({ kcContext, ...props }: { kcContext: KcContext.Info; } & KcProps) => {
const { msg } = useKcMessage();
assert(
kcContext !== undefined &&
kcContext.pageId === "info.ftl" &&
kcContext.message !== undefined
);
assert(kcContext.message !== undefined);
const {
messageHeader,
@ -28,7 +24,7 @@ export const Info = memo((props: KcProps) => {
return (
<Template
{...props}
{...{ kcContext, ...props }}
displayMessage={false}
headerNode={
messageHeader !== undefined ?

21
src/lib/components/KcApp.tsx
View File

@ -1,7 +1,6 @@
import { memo } from "react";
import { kcContext } from "../kcContext";
import { assert } from "../tools/assert";
import type { KcContext } from "../KcContext";
import type { KcProps } from "./KcProps";
import { Login } from "./Login";
import { Register } from "./Register";
@ -10,17 +9,13 @@ import { Error } from "./Error";
import { LoginResetPassword } from "./LoginResetPassword";
import { LoginVerifyEmail } from "./LoginVerifyEmail";
export const KcApp = memo((props: KcProps) => {
assert(kcContext !== undefined, "App is not currently served by a Keycloak server");
export const KcApp = memo(({ kcContext, ...props }: { kcContext: KcContext; } & KcProps ) => {
switch (kcContext.pageId) {
case "login.ftl": return <Login {...props} />;
case "register.ftl": return <Register {...props} />;
case "info.ftl": return <Info {...props} />;
case "error.ftl": return <Error {...props} />;
case "login-reset-password.ftl": return <LoginResetPassword {...props} />;
case "login-verify-email.ftl": return <LoginVerifyEmail {...props} />;
case "login.ftl": return <Login {...{ kcContext, ...props }} />;
case "register.ftl": return <Register {...{ kcContext, ...props }} />;
case "info.ftl": return <Info {...{ kcContext, ...props }} />;
case "error.ftl": return <Error {...{ kcContext, ...props }} />;
case "login-reset-password.ftl": return <LoginResetPassword {...{ kcContext, ...props }} />;
case "login-verify-email.ftl": return <LoginVerifyEmail {...{ kcContext, ...props }} />;
}
});

14
src/lib/components/Login.tsx
View File

@ -2,21 +2,15 @@
import { useState, memo } from "react";
import { Template } from "./Template";
import type { KcProps } from "./KcProps";
import { assert } from "../tools/assert";
import { kcContext } from "../kcContext";
import type { KcContext } from "../KcContext";
import { useKcMessage } from "../i18n/useKcMessage";
import { cx } from "tss-react";
import { useConstCallback } from "powerhooks";
export const Login = memo((props: KcProps) => {
export const Login = memo(({ kcContext, ...props }: { kcContext: KcContext.Login; } & KcProps) => {
const { msg, msgStr } = useKcMessage();
assert(
kcContext !== undefined &&
kcContext.pageId === "login.ftl"
);
const {
social, realm, url,
usernameEditDisabled, login,
@ -31,7 +25,7 @@ export const Login = memo((props: KcProps) => {
return (
<Template
{...props}
{...{ kcContext, ...props }}
displayInfo={social.displayInfo}
displayWide={realm.password && social.providers !== undefined}
headerNode={msg("doLogIn")}
@ -68,7 +62,7 @@ export const Login = memo((props: KcProps) => {
name="username"
defaultValue={login.username ?? ''}
type="text"
{...(usernameEditDisabled ? { "disabled": true } : { "autoFocus": true, "autocomplete": "off" })}
{...(usernameEditDisabled ? { "disabled": true } : { "autoFocus": true, "autoComplete": "off" })}
/>
</div>
<div className={cx(props.kcFormGroupClass)}>

12
src/lib/components/LoginResetPassword.tsx
View File

@ -2,20 +2,14 @@
import { memo } from "react";
import { Template } from "./Template";
import type { KcProps } from "./KcProps";
import { assert } from "../tools/assert";
import { kcContext } from "../kcContext";
import type { KcContext } from "../KcContext";
import { useKcMessage } from "../i18n/useKcMessage";
import { cx } from "tss-react";
export const LoginResetPassword = memo((props: KcProps) => {
export const LoginResetPassword = memo(({ kcContext, ...props }: { kcContext: KcContext.LoginResetPassword; } & KcProps) => {
const { msg, msgStr } = useKcMessage();
assert(
kcContext !== undefined &&
kcContext.pageId === "login-reset-password.ftl"
);
const {
url,
realm,
@ -24,7 +18,7 @@ export const LoginResetPassword = memo((props: KcProps) => {
return (
<Template
{...props}
{...{ kcContext, ...props }}
displayMessage={false}
headerNode={msg("emailForgotTitle")}
formNode={

12
src/lib/components/LoginVerifyEmail.tsx
View File

@ -2,26 +2,20 @@
import { memo } from "react";
import { Template } from "./Template";
import type { KcProps } from "./KcProps";
import { assert } from "../tools/assert";
import { kcContext } from "../kcContext";
import type { KcContext } from "../KcContext";
import { useKcMessage } from "../i18n/useKcMessage";
export const LoginVerifyEmail = memo((props: KcProps) => {
export const LoginVerifyEmail = memo(({ kcContext, ...props }: { kcContext: KcContext.LoginVerifyEmail; } & KcProps) => {
const { msg } = useKcMessage();
assert(
kcContext !== undefined &&
kcContext.pageId === "login-verify-email.ftl"
);
const {
url
} = kcContext;
return (
<Template
{...props}
{...{ kcContext, ...props }}
displayMessage={false}
headerNode={msg("emailVerifyTitle")}
formNode={

12
src/lib/components/Register.tsx
View File

@ -1,20 +1,14 @@
import { memo } from "react";
import { Template } from "./Template";
import type { KcProps } from "./KcProps";
import { assert } from "../tools/assert";
import { kcContext } from "../kcContext";
import type { KcContext } from "../KcContext";
import { useKcMessage } from "../i18n/useKcMessage";
import { cx } from "tss-react";
export const Register = memo((props: KcProps) => {
export const Register = memo(({ kcContext, ...props }: { kcContext: KcContext.Register; } & KcProps) => {
const { msg, msgStr } = useKcMessage();
assert(
kcContext !== undefined &&
kcContext.pageId === "register.ftl"
);
const {
url,
messagesPerField,
@ -27,7 +21,7 @@ export const Register = memo((props: KcProps) => {
return (
<Template
{...props}
{...{ kcContext, ...props }}
headerNode={msg("registerTitle")}
formNode={
<form id="kc-register-form" className={cx(props.kcFormClass)} action={url.registrationAction} method="post">

13
src/lib/components/Template.tsx
View File

@ -3,7 +3,7 @@ import { useReducer, useEffect, memo } from "react";
import type { ReactNode } from "react";
import { useKcMessage } from "../i18n/useKcMessage";
import { useKcLanguageTag } from "../i18n/useKcLanguageTag";
import { kcContext } from "../kcContext";
import type { KcContext } from "../KcContext";
import { assert } from "../tools/assert";
import { cx } from "tss-react";
import type { KcLanguageTag } from "../i18n/KcLanguageTag";
@ -25,7 +25,7 @@ export type TemplateProps = {
showUsernameNode?: ReactNode;
formNode: ReactNode;
infoNode?: ReactNode;
} & KcTemplateProps;
} & { kcContext: KcContext.Template; } & KcTemplateProps;
export const Template = memo((props: TemplateProps) => {
@ -39,7 +39,8 @@ export const Template = memo((props: TemplateProps) => {
headerNode,
showUsernameNode = null,
formNode,
infoNode = null
infoNode = null,
kcContext
} = props;
useEffect(() => { console.log("Rendering this page with react using keycloakify") }, []);
@ -58,8 +59,6 @@ export const Template = memo((props: TemplateProps) => {
(document.forms["kc-select-try-another-way-form" as never].submit(), false)
);
assert(kcContext !== undefined);
const {
realm, locale, auth,
url, message, isAppInitiatedAction
@ -153,8 +152,8 @@ export const Template = memo((props: TemplateProps) => {
<ul>
{
locale.supported.map(
({ languageTag }) =>
<li className="kc-dropdown-item">
({ languageTag }) =>
<li key={languageTag} className="kc-dropdown-item">
<a href="#" onClick={onChangeLanguageClickFactory(languageTag)}>
{getKcLanguageTagLabel(languageTag)}
</a>