161 user federation landing (#172)

* initial user federation landing page

* builds user federation screen with more info link

* change providers to h2

* remove unused imports and translate text

* updates user fed landing page for new mockup

src/common-messages.json

@@ -17,7 +17,7 @@
     "resourceFile": "Resource file",
     "clearFile": "Clear this file",
     "on": "On",
-    "off":"Off",
+    "off": "Off",
     "enabled": "Enabled",
     "disabled": "Disabled",
     "disable": "Disable",
@@ -30,6 +30,7 @@
     "helpLabel": "More help for {{label}}",
     "documentation": "Documentation",
     "enableHelpMode": "Enable help mode",
+    "learnMore": "Learn more",
 
     "home": "Home",
     "manage": "Manage",

src/i18n.ts

@@ -15,6 +15,7 @@ import users from "./user/messages.json";
 import sessions from "./sessions/messages.json";
 import events from "./events/messages.json";
 import storybook from "./stories/messages.json";
+import userFederation from "./user-federation/messages.json";
 
 const initOptions = {
   defaultNS: "common",
@@ -34,6 +35,7 @@ const initOptions = {
       ...sessions,
       ...events,
       ...storybook,
+      ...userFederation,
     },
   },
   lng: "en",

src/user-federation/UserFederationSection.tsx

@@ -1,5 +1,69 @@
+import {
+  Card,
+  CardTitle,
+  Gallery,
+  PageSection,
+  Split,
+  SplitItem,
+  Text,
+  TextContent,
+  TextVariants,
+} from "@patternfly/react-core";
+import { DatabaseIcon } from "@patternfly/react-icons";
+import { useTranslation } from "react-i18next";
 import React from "react";
+import { ViewHeader } from "../components/view-header/ViewHeader";
 
 export const UserFederationSection = () => {
-  return <>The User Federation Page</>;
+  const { t } = useTranslation("user-federation");
+  const linkArgs = {
+    title: t("common:learnMore"),
+    href: "http://google.com",
+  };
+
+  return (
+    <>
+      <ViewHeader
+        titleKey="user-federation:userFederation"
+        subKey={"user-federation:descriptionLanding"}
+        subKeyLinkProps={linkArgs}
+      />
+      <PageSection>
+        <TextContent>
+          <Text component={TextVariants.p}>
+            {t("userFederationExplanation")}
+          </Text>
+          <Text component={TextVariants.p}>{t("getStarted")}</Text>
+        </TextContent>
+      </PageSection>
+      <PageSection isFilled>
+        <TextContent>
+          <Text component={TextVariants.h2}>{t("providers")}</Text>
+        </TextContent>
+        <hr className="pf-u-mb-lg" />
+        <Gallery hasGutter>
+          <Card isHoverable>
+            <CardTitle>
+              <Split hasGutter>
+                <SplitItem>
+                  <DatabaseIcon size="lg" />
+                </SplitItem>
+                <SplitItem isFilled>{t("addKerberos")}</SplitItem>
+              </Split>
+            </CardTitle>
+          </Card>
+          <Card isHoverable>
+            <CardTitle>
+              <Split hasGutter>
+                <SplitItem>
+                  <DatabaseIcon size="lg" />
+                </SplitItem>
+                <SplitItem isFilled>{t("addLdap")}</SplitItem>
+              </Split>
+            </CardTitle>
+          </Card>
+        </Gallery>
+      </PageSection>
+    </>
+  );
 };

src/user-federation/messages.json

@@ -0,0 +1,55 @@
+{
+  "user-federation": {
+    "userFederation": "User federation",
+    "descriptionLanding": "This is the description for the user federation landing page",
+    "createClient": "Create client",
+    "importClient": "Import client",
+    "clientID": "Client ID",
+    "type": "Type",
+    "homeURL": "Home URL",
+    "description": "Description",
+    "name": "Name",
+    "formatOption": "Format option",
+    "downloadAdaptorTitle": "Download adaptor configs",
+    "details": "Details",
+    "clientList": "Client list",
+    "clientSettings": "Client details",
+    "selectEncryptionType": "Select Encryption type",
+    "generalSettings": "General Settings",
+    "capabilityConfig": "Capability config",
+    "clientsExplain": "Clients are applications and services that can request authentication of a user",
+    "createSuccess": "Client created successfully",
+    "createError": "Could not create client: '{{error}}'",
+    "clientImportError": "Could not import client",
+    "clientSaveSuccess": "Client successfully updated",
+    "clientSaveError": "Client could not be updated:",
+    "clientImportSuccess": "Client imported successfully",
+    "clientDeletedSuccess": "The client has been deleted",
+    "clientDeleteError": "Could not delete client:",
+    "clientDeleteConfirmTitle": "Delete client?",
+    "disableConfirmTitle": "Disable client?",
+    "disableConfirm": "If you disable this client, you cannot initiate a login or obtain access tokens.",
+    "clientDeleteConfirm": "If you delete this client, all associated data will be removed.",
+    "clientAuthentication": "Client authentication",
+    "authentication": "Authentication",
+    "authenticationFlow": "Authentication flow",
+    "standardFlow": "Standard flow",
+    "directAccess": "Direct access",
+    "serviceAccount": "Service account",
+    "enableServiceAccount": "Enable service account",
+    "displayOnClient": "Display client on screen",
+    "consentScreenText": "Client consent screen text",
+    "loginSettings": "Login settings",
+    "accessSettings": "Access settings",
+    "rootUrl": "Root URL",
+    "validRedirectUri": "Valid redirect URIs",
+    "loginTheme": "Login theme",
+    "consentRequired": "Consent required",
+    "searchForClient": "Search for client",
+    "userFederationExplanation": "Keycloak can federate external user databases. Out of the box we have support for LDAP and Active Directory.",
+    "getStarted": "To get started, select a provider from the list below.",
+    "providers": "Add providers",
+    "addKerberos": "Add Kerberos providers",
+    "addLdap": "Add LDAP providers"
+  }
+}