Add Federated Identity screen

Author: sukso96100

package.json

@@ -1,7 +1,7 @@
 {
     "name": "ubuntukr-keycloakify-theme",
     "homepage": "https://github.com/ubuntu-kr/ubuntukr-keycloakify-theme",
-    "version": "0.0.5",
+    "version": "0.0.6",
     "description": "Keycloak theme for Ubuntu Korea",
     "repository": {
         "type": "git",
@@ -26,7 +26,8 @@
         "extraLoginPages": [
         ],
         "extraAccountPages": [
-            "sessions.ftl"
+            "sessions.ftl",
+            "federatedIdentity.ftl"
         ],
         "keycloakVersionDefaultAssets": "21.0.1"
     },

src/account/KcApp.tsx

@@ -13,6 +13,7 @@ const Password = lazy(() => import("./pages/Password"));
 const MyExtraPage1 = lazy(() => import("./pages/MyExtraPage1"));
 const MyExtraPage2 = lazy(() => import("./pages/MyExtraPage2"));
 const Sessions = lazy(() => import("./pages/Sessions"));
+const FederatedIdentity = lazy(() => import("./pages/FederatedIdentity"));
 const Fallback = lazy(()=> import("keycloakify/account"));
 
 const classes: PageProps<any, any>["classes"] = {
@@ -38,6 +39,7 @@ export default function App(props: { kcContext: KcContext; }) {
                     case "my-extra-page-1.ftl": return <MyExtraPage1 {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={true} />;
                     case "my-extra-page-2.ftl": return <MyExtraPage2 {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={true} />;
                     case "sessions.ftl": return <Sessions {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={true} />;
+                    case "federatedIdentity.ftl" : return <FederatedIdentity {...{ kcContext, i18n, Template, classes }} doUseDefaultCss={true} />;
                     default: return <Fallback {...{ kcContext, i18n, classes }} Template={Template} doUseDefaultCss={true} />;
                 }
             })()}

src/account/i18n.ts

@@ -5,7 +5,7 @@ export const { useI18n } = createUseI18n({
     "ko": {
         "account":"계정",
         "authenticator":"인증기",
-        "federatedIdentity":"소셜 로그인",
+        "federatedIdentity":"통합 인증",
         "sessions":"세션",
         "applications":"애플리케이션",
         "log":"로그",
@@ -34,6 +34,9 @@ export const { useI18n } = createUseI18n({
         "clients": "클라이언트",
         "doLogOutAllSessions": "모든 세션 로그아웃",
 
+        "federatedIdentitiesHtmlTitle": "통합 인증",
+        "doRemove": "삭제",
+        "doAdd": "추가",
     }
 });
 

src/account/kcContext.ts

@@ -16,6 +16,19 @@ export type KcContextExtension =
 				clients: string[];
 			}[];
 		}
+	}
+	| {
+		pageId: "federatedIdentity.ftl";
+		stateChecker: string;
+		federatedIdentity: {
+			identities: {
+				userName: string;
+				displayName: string;
+				providerId: string;
+				connected: boolean;
+			}[];
+			removeLinkPossible: boolean;
+		}
 	};
 
 export const { kcContext } = getKcContext<KcContextExtension>({

src/account/pages/FederatedIdentity.tsx

@@ -0,0 +1,59 @@
+import { clsx } from "keycloakify/tools/clsx";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
+import type { KcContext } from "../kcContext";
+import type { I18n } from "../i18n";
+import { Form, Button, Input, Card, Col, Row } from "@canonical/react-components";
+
+export default function FederatedIdentity(props: PageProps<Extract<KcContext, { pageId: "federatedIdentity.ftl" }>, I18n>) {
+    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+
+    const { getClassName } = useGetClassName({
+        doUseDefaultCss,
+        "classes": {
+            ...classes,
+            "kcBodyClass": clsx(classes?.kcBodyClass, "user")
+        }
+    });
+
+    const { url, realm, messagesPerField, stateChecker, federatedIdentity } = kcContext;
+
+    const { msg, msgStr } = i18n;
+
+    return (
+        <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="social">
+
+            <h2>{msg("federatedIdentitiesHtmlTitle")}</h2>
+            <Row>
+                {federatedIdentity.identities.map((identity, index) => (
+                    <Col size={4}>
+                        <Card title={identity.displayName}>
+                            <h4>{identity.userName}</h4>
+                            {identity.connected && federatedIdentity.removeLinkPossible ? (
+                                <Form action={url.socialUrl} method="post">
+                                    <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
+                                    <input type="hidden" id="action" name="action" value="remove" />
+                                    <input type="hidden" id="providerId" name="providerId" value={identity.providerId!} />
+                                    <Button hasIcon id={`remove-link-${identity.providerId!}`} appearance="negative">
+                                        <i className="p-icon--delete"></i>
+                                        <span>{msg("doRemove")}</span>
+                                    </Button>
+                                </Form>
+                            ) : (
+                                <Form action={url.socialUrl} method="post">
+                                    <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
+                                    <input type="hidden" id="action" name="action" value="add" />
+                                    <input type="hidden" id="providerId" name="providerId" value={identity.providerId!} />
+                                    <Button hasIcon id={`remove-link-${identity.providerId!}`} appearance="positive">
+                                        <i className="p-icon--plus"></i>
+                                        <span>{msg("doAdd")}</span>
+                                    </Button>
+                                </Form>
+                            )}
+                        </Card>
+                    </Col>
+                ))}
+            </Row>
+        </Template>
+    );
+}