diff --git a/.editorconfig b/.editorconfig deleted file mode 100644 index 7c1e13a68..000000000 --- a/.editorconfig +++ /dev/null @@ -1,11 +0,0 @@ -# EditorConfig is awesome: https://EditorConfig.org - -# top-most EditorConfig file -root = true - -[*] -end_of_line = lf -indent_size = 2 -indent_style = space -insert_final_newline = true -trim_trailing_whitespace = true diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml new file mode 100644 index 000000000..1f177f35c --- /dev/null +++ b/.github/workflows/ci.yaml @@ -0,0 +1,41 @@ +name: CI/CD + +on: push + +jobs: + ci_cd: + runs-on: ubuntu-latest + timeout-minutes: 10 + env: + CI: true + steps: + - name: Checkout ${{ github.sha }} + uses: actions/checkout@v3 + - name: Use Node.js + uses: actions/setup-node@v3 + with: + node-version: 20 + registry-url: https://registry.npmjs.org/ + - name: Use Java + uses: actions/setup-java@v4 + with: + java-version: 21 + distribution: temurin + - name: Install NPM dependencies + run: npm ci + - name: Lint + run: npm run lint --if-present + - name: Build + run: npm run build --if-present + - name: Test + run: npm run test --if-present + - name: Upload jar + uses: actions/upload-artifact@v4 + with: + path: dist/bluedot-keycloak-theme.jar + + - name: Release + if: startsWith(github.ref, 'refs/tags/') + uses: softprops/action-gh-release@v2 + with: + files: dist/bluedot-keycloak-theme.jar \ No newline at end of file diff --git a/.gitignore b/.gitignore index 503ea077e..af7639108 100644 --- a/.gitignore +++ b/.gitignore @@ -1,10 +1,5 @@ -# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - # build -out/ +dist/ # dependencies node_modules/ - -# misc -.DS_Store diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index 5ac85e271..000000000 --- a/.prettierrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "printWidth": 100, - "singleQuote": true -} diff --git a/README.md b/README.md index 03f842c16..6df5b76ee 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,15 @@ -# :wind_face: Keywind +# bluedot-keycloak-theme -Keywind is a component-based Keycloak Login Theme built with [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) and [Alpine.js](https://github.com/alpinejs/alpine). +This is a component-based [Keycloak](https://www.keycloak.org/) login theme built with [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) and [Alpine.js](https://github.com/alpinejs/alpine). It's a fork of [Keywind](https://github.com/lukin/keywind). -![Preview](./preview.png) +![Screenshot of styled login page](./preview.png) -### Styled Pages +We're taking a 'good enough' approach to theming here. Notably: +- We have not set up custom fonts +- We are not using our React component library (because Keycloak wants weird ftl templates) + - We decided not to use [Keycloakify](https://www.keycloakify.dev/) as this looked far more complex, and more work to edit from than Keywind + +## Styled Pages - Error - Login @@ -29,86 +34,38 @@ Keywind is a component-based Keycloak Login Theme built with [Tailwind CSS](http - WebAuthn Error - WebAuthn Register -### Identity Provider Icons - -- Apple -- Bitbucket -- Discord -- Facebook -- GitHub -- GitLab -- Google -- Instagram -- LinkedIn -- Microsoft -- OpenID -- Red Hat OpenShift -- PayPal -- Slack -- Stack Overflow -- Twitter - ## Installation -Keywind has been designed with component-based architecture from the start, and **you can customize as little or as much Keywind as you need**: - -1. [Deploy Keywind Login Theme](https://www.keycloak.org/docs/latest/server_development/#deploying-themes) -2. [Create your own Login Theme](https://www.keycloak.org/docs/latest/server_development/#creating-a-theme) -3. Specify parent theme in [theme properties](https://www.keycloak.org/docs/latest/server_development/#theme-properties): - -``` -parent=keywind -``` - -4. Brand and customize components with [FreeMarker](https://freemarker.apache.org/docs/dgui_quickstart_template.html) - -## Customization - -### Theme - -When you do need to customize a palette, you can configure your colors under the `colors` key in the `theme` section of Tailwind config file: - -`tailwind.config.js` - -```js -module.exports = { - theme: { - extend: { - colors: { - primary: colors.red, - }, - }, - }, -}; -``` - -Read more about Tailwind CSS configuration in the [documentation](https://tailwindcss.com/docs/configuration). - -### Components - -You can update Keywind components in your own child theme. For example, create a copy of the `body` component and change the background: - -`theme/mytheme/login/components/atoms/body.ftl` - -``` -<#macro kw> -
- <#nested> - -#macro> +1. Download the jar from the [releases page](https://github.com/bluedot/bluedot-keycloak-theme/releases). +2. Copy it into your `providers` folder. +3. In Keycloak, navigate to 'Realm settings > Themes', and set the 'Login theme' to 'bluedot-keycloak-theme'. + +Install one of the following applications on your mobile:
-Open the application and scan the barcode:
Unable to scan?Grant Access to null
-Make sure to print, download, or copy them to a password manager and keep them save. Canceling this setup will remove these recovery codes from your account.
-Do you want to log out?
- - -