fix auth and add settings page (#117)

* fix auth and add settings page

* add keycloak theme builder

* re-implement base components

* fix build

* update after rebase

---------

Co-authored-by: Kostya Zamurnyak <[email protected]>

frontend/keycloak-theme/.eslintrc.cjs

@@ -0,0 +1,27 @@
+module.exports = {
+    root: true,
+    env: { browser: true, es2020: true },
+    extends: [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react-hooks/recommended",
+        "plugin:storybook/recommended"
+    ],
+    ignorePatterns: ["dist", ".eslintrc.cjs"],
+    parser: "@typescript-eslint/parser",
+    plugins: ["react-refresh"],
+    rules: {
+        "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+        "react-hooks/exhaustive-deps": "off",
+        "@typescript-eslint/no-redeclare": "off",
+        "no-labels": "off"
+    },
+    overrides: [
+        {
+            files: ["**/*.stories.*"],
+            rules: {
+                "import/no-anonymous-default-export": "off"
+            }
+        }
+    ]
+};

frontend/keycloak-theme/.gitignore

@@ -0,0 +1,57 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# yarn cache directory
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+
+# Optional REPL history
+.node_repl_history
+
+.vscode
+
+.DS_Store
+
+/dist
+
+/dist_keycloak
+/build
+/storybook-static

frontend/keycloak-theme/.prettierignore

@@ -0,0 +1,6 @@
+node_modules/
+/dist/
+/dist_keycloak/
+/public/keycloakify-dev-resources/
+/.vscode/
+/.yarn_home/

frontend/keycloak-theme/.prettierrc.json

@@ -0,0 +1,25 @@
+{
+    "printWidth": 90,
+    "tabWidth": 4,
+    "useTabs": false,
+    "semi": true,
+    "singleQuote": false,
+    "trailingComma": "none",
+    "bracketSpacing": true,
+    "arrowParens": "avoid",
+    "overrides": [
+        {
+            "files": [
+                "**/login/pages/*.tsx",
+                "**/account/pages/*.tsx",
+                "**/login/Template.tsx",
+                "**/account/Template.tsx",
+                "**/login/UserProfileFormFields.tsx",
+                "KcApp.tsx"
+            ],
+            "options": {
+                "printWidth": 150
+            }
+        }
+    ]
+}

frontend/keycloak-theme/.storybook/main.ts

@@ -0,0 +1,12 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [],
+    framework: {
+        name: "@storybook/react-vite",
+        options: {}
+    },
+    staticDirs: ["../public"]
+};
+export default config;

frontend/keycloak-theme/.storybook/preview-head.html

@@ -0,0 +1,25 @@
+<style>
+    body.sb-show-main.sb-main-padded {
+        padding: 0;
+    }
+
+    /* Following styles are just meant to avoid white flash when switching from one story to another */
+    @keyframes fadeToTransparent {
+        from {
+            background-color: #393939;
+        }
+
+        to {
+            background-color: transparent;
+        }
+    }
+    html {
+        animation: fadeToTransparent 500ms forwards ease-in;
+    }
+    body > .sb-preparing-docs {
+        visibility: hidden;
+    }
+    body > .sb-preparing-story {
+        visibility: hidden;
+    }
+</style>

frontend/keycloak-theme/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i
+            }
+        }
+    }
+};
+
+export default preview;

frontend/keycloak-theme/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 GitHub user u/garronej
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

frontend/keycloak-theme/README.md

@@ -0,0 +1,60 @@
+<p align="center">
+    <i>🚀 <a href="https://keycloakify.dev">Keycloakify</a> v11 starter 🚀</i>
+    <br/>
+    <br/>
+</p>
+
+This starter is based on Vite. There is also [a Webpack based starter](https://github.com/keycloakify/keycloakify-starter-webpack).
+
+# Quick start
+
+```bash
+git clone https://github.com/keycloakify/keycloakify-starter
+cd keycloakify-starter
+yarn install # Or use an other package manager, just be sure to delete the yarn.lock if you use another package manager.
+```
+
+# Testing the theme locally
+
+[Documentation](https://docs.keycloakify.dev/v/v10/testing-your-theme)
+
+# How to customize the theme
+
+[Documentation](https://docs.keycloakify.dev/v/v10/customization-strategies)
+
+# Building the theme
+
+You need to have [Maven](https://maven.apache.org/) installed to build the theme (Maven >= 3.1.1, Java >= 7).  
+The `mvn` command must be in the $PATH.
+
+-   On macOS: `brew install maven`
+-   On Debian/Ubuntu: `sudo apt-get install maven`
+-   On Windows: `choco install openjdk` and `choco install maven` (Or download from [here](https://maven.apache.org/download.cgi))
+
+```bash
+npm run build-keycloak-theme
+```
+
+Note that by default Keycloakify generates multiple .jar files for different versions of Keycloak.  
+You can customize this behavior, see documentation [here](https://docs.keycloakify.dev/targeting-specific-keycloak-versions).
+
+# Initializing the account theme
+
+```bash
+npx keycloakify initialize-account-theme
+```
+
+# Initializing the email theme
+
+```bash
+npx keycloakify initialize-email-theme
+```
+
+# GitHub Actions
+
+The starter comes with a generic GitHub Actions workflow that builds the theme and publishes
+the jars [as GitHub releases artifacts](https://github.com/keycloakify/keycloakify-starter/releases/tag/v10.0.0).  
+To release a new version **just update the `package.json` version and push**.
+
+To enable the workflow go to your fork of this repository on GitHub then navigate to:
+`Settings` > `Actions` > `Workflow permissions`, select `Read and write permissions`.

frontend/keycloak-theme/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    </head>
+
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>

frontend/keycloak-theme/package.json

@@ -0,0 +1,59 @@
+{
+    "name": "keycloakify-starter",
+    "version": "0.0.0",
+    "description": "Starter for Keycloakify 11",
+    "repository": {
+        "type": "git",
+        "url": "git://github.com/codegouvfr/keycloakify-starter.git"
+    },
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "build-keycloak-theme": "npm run build && keycloakify build",
+        "storybook": "storybook dev -p 6006",
+        "format": "prettier . --write"
+    },
+    "license": "MIT",
+    "keywords": [],
+    "dependencies": {
+        "keycloakify": "^11.3.11",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "@patternfly/patternfly": "^5.4.0",
+        "@patternfly/react-core": "^5.4.1",
+        "@patternfly/react-icons": "^5.4.0",
+        "@patternfly/react-table": "^5.4.1",
+        "i18next": "^23.15.1",
+        "i18next-http-backend": "^2.6.1",
+        "lodash-es": "^4.17.21",
+        "react-hook-form": "7.53.0",
+        "react-i18next": "^15.0.2",
+        "react-router-dom": "^6.26.2",
+        "keycloak-js": "26.0.0",
+        "@patternfly/react-styles": "^5.4.0",
+        "@keycloak/keycloak-admin-client": "26.0.0",
+        "@keycloakify/keycloak-account-ui": "26.0.0-rc.2"
+    },
+    "devDependencies": {
+        "storybook": "^8.1.10",
+        "@storybook/react": "^8.1.10",
+        "@storybook/react-vite": "^8.1.10",
+        "@types/react": "^18.2.43",
+        "@types/react-dom": "^18.2.17",
+        "@typescript-eslint/eslint-plugin": "^6.14.0",
+        "@typescript-eslint/parser": "^6.14.0",
+        "@vitejs/plugin-react": "^4.2.1",
+        "eslint": "^8.55.0",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-react-refresh": "^0.4.5",
+        "eslint-plugin-storybook": "^0.8.0",
+        "prettier": "3.3.1",
+        "typescript": "^5.2.2",
+        "vite": "^5.0.8",
+        "@types/lodash-es": "^4.17.12"
+    },
+    "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+    }
+}

frontend/keycloak-theme/src/account/KcContext.ts

@@ -0,0 +1,7 @@
+import type { KcContextLike } from "@keycloakify/keycloak-account-ui";
+import type { KcEnvName } from "../kc.gen";
+
+export type KcContext = KcContextLike & {
+    themeType: "account";
+    properties: Record<KcEnvName, string>;
+};

frontend/keycloak-theme/src/account/KcPage.tsx

@@ -0,0 +1,11 @@
+import { lazy } from "react";
+import { KcAccountUiLoader } from "@keycloakify/keycloak-account-ui";
+import type { KcContext } from "./KcContext";
+
+const KcAccountUi = lazy(() => import("@keycloakify/keycloak-account-ui/KcAccountUi"));
+
+export default function KcPage(props: { kcContext: KcContext }) {
+    const { kcContext } = props;
+
+    return <KcAccountUiLoader kcContext={kcContext} KcAccountUi={KcAccountUi} />;
+}