Initial commit
This commit is contained in:
commit
ff5a958e26
GPG key ID:
C0674B105057136C
3
.browserslistrc
Normal file
3
.browserslistrc
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
> 1%
|
||||||
|
last 2 versions
|
||||||
|
not dead
|
||||||
12
.editorconfig
Normal file
12
.editorconfig
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
# EditorConfig is awesome: https://EditorConfig.org
|
||||||
|
|
||||||
|
# top-most EditorConfig file
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
end_of_line = lf
|
||||||
|
charset = utf-8
|
||||||
|
trim_trailing_whitespace = false
|
||||||
|
insert_final_newline = true
|
||||||
1
.eslintcache
Normal file
1
.eslintcache
Normal file
File diff suppressed because one or more lines are too long
40
.eslintrc.json
Normal file
40
.eslintrc.json
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
{
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"es2021": true
|
||||||
|
},
|
||||||
|
"extends": ["plugin:vue/essential", "standard", "prettier"],
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaVersion": "latest",
|
||||||
|
"parser": "@typescript-eslint/parser",
|
||||||
|
"sourceType": "module"
|
||||||
|
},
|
||||||
|
"plugins": ["vue", "@typescript-eslint", "prettier"],
|
||||||
|
"rules": {
|
||||||
|
"prettier/prettier": "error",
|
||||||
|
"max-lines": [
|
||||||
|
"error",
|
||||||
|
{ "max": 300, "skipComments": true, "skipBlankLines": true }
|
||||||
|
],
|
||||||
|
"max-lines-per-function": [
|
||||||
|
"error",
|
||||||
|
{ "max": 30, "skipComments": true, "skipBlankLines": true }
|
||||||
|
],
|
||||||
|
"max-len": ["error", { "code": 120 }],
|
||||||
|
"import/extensions": [
|
||||||
|
"error",
|
||||||
|
"ignorePackages",
|
||||||
|
{
|
||||||
|
"ts": "never",
|
||||||
|
"tsx": "never",
|
||||||
|
"vue": "never",
|
||||||
|
"json": "never"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"settings": {
|
||||||
|
"import/resolver": {
|
||||||
|
"typescript": {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
5
.gitignore
vendored
Normal file
5
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.env
|
||||||
|
|
||||||
|
yarn-error.log
|
||||||
7
.prettierrc.json
Normal file
7
.prettierrc.json
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"singleQuote": false,
|
||||||
|
"quoteProps": "as-needed",
|
||||||
|
"bracketSameLine": true,
|
||||||
|
"arrowParens": "avoid",
|
||||||
|
"semi": true
|
||||||
|
}
|
||||||
52
README.md
Normal file
52
README.md
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
# A modern Keycloak login theme
|
||||||
|
|
||||||
|
keycloak-modern-login is a Keycloak login theme that's build using Vue.js 3 and Typescript. It is easily extensible and bypasses the complexity of FreeMarker templates.
|
||||||
|
|
||||||
|
## State of this project
|
||||||
|
|
||||||
|
I wrote this project mainly for my own Keycloak instance. Since I don't have much time for that, only the pages I see in daily use are currently customized. For all other pages, Keycloak's default theme is used instead.
|
||||||
|
|
||||||
|
## Building a deployable JAR file
|
||||||
|
|
||||||
|
The project's development and building process are tested only on Linux. Node.js as well as Yarn must already be installed.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Install dependencies
|
||||||
|
yarn install
|
||||||
|
|
||||||
|
# Build a deployable JAR file
|
||||||
|
yarn build
|
||||||
|
```
|
||||||
|
|
||||||
|
The final JAR (`theme.jar`) will be located inside the `dist` folder.
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
To be able to test the theme live during development, a Keycloak Docker container is used. The `dist` folder is mounted directly into the container without building a JAR. The theme is not cached, and changes are directly visible.
|
||||||
|
|
||||||
|
The compose file in the root directory starts a preconfigured Keycloak container. A realm named `test` is automatically imported, in which the theme is configured as the default login theme. The admin user in the `master` realm has `admin` as both its username and password.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Install dependencies
|
||||||
|
yarn install
|
||||||
|
|
||||||
|
# Run fist dev build to create the folder structure
|
||||||
|
# Once Webpack has successfully compiled the project, you can cancel the process by pressing CTRL + C
|
||||||
|
yarn dev
|
||||||
|
|
||||||
|
# Start the development Keycloak instance
|
||||||
|
docker compose up -d
|
||||||
|
|
||||||
|
# Start Webpack in dev mode (which watches for changes and rebuilds the project automatically)
|
||||||
|
yarn dev
|
||||||
|
```
|
||||||
|
|
||||||
|
For testing, the account console of the test realm can be used to get a login window: [http://localhost:8080/realms/test/account](http://localhost:8080/realms/test/account)
|
||||||
|
|
||||||
|
### Adding new pages
|
||||||
|
|
||||||
|
If you want to add new pages, there are some things to be aware of.
|
||||||
|
|
||||||
|
- Create a new subfolder for the page in the `views` folder. The name of the new folder must match the name of the FTL file in the [Keycloak base theme](https://github.com/keycloak/keycloak/tree/main/themes/src/main/resources/theme/base/login).
|
||||||
|
- Copy the three `index.*` files of an existing page into the new folder. The page name also needs to be adjusted in the `index.ftl` file within the attribute `pageId` as well as in the path for the script.
|
||||||
|
- Add the new page in `webpack.config.js` in the upper part to the list `customPages`.
|
||||||
15
docker-compose.yaml
Normal file
15
docker-compose.yaml
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
version: "3.3"
|
||||||
|
services:
|
||||||
|
keycloak:
|
||||||
|
image: quay.io/keycloak/keycloak:20.0.3
|
||||||
|
ports:
|
||||||
|
- "8080:8080"
|
||||||
|
volumes:
|
||||||
|
- ./dist/theme/modern-login:/opt/keycloak/themes/modern-login
|
||||||
|
- ./realm-export.json:/opt/keycloak/data/import/realm.json
|
||||||
|
environment:
|
||||||
|
- KEYCLOAK_ADMIN=admin
|
||||||
|
- KEYCLOAK_ADMIN_PASSWORD=admin
|
||||||
|
command:
|
||||||
|
- start-dev
|
||||||
|
- --import-realm
|
||||||
51
package.json
Normal file
51
package.json
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
{
|
||||||
|
"name": "keycloak-modern-login",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"license": "GPL-3.0-or-later",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "webpack",
|
||||||
|
"prod": "webpack --mode=production",
|
||||||
|
"zipjar": "cd dist; zip -r ../dist/theme.jar META-INF theme; cd -",
|
||||||
|
"build": "yarn prod && yarn zipjar",
|
||||||
|
"format": "prettier --write .",
|
||||||
|
"lint": "eslint --cache --report-unused-disable-directives --format codeframe --ext js,ts,vue ."
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.16.7",
|
||||||
|
"@babel/plugin-transform-runtime": "^7.16.8",
|
||||||
|
"@babel/plugin-transform-typescript": "^7.16.8",
|
||||||
|
"@babel/preset-env": "^7.16.8",
|
||||||
|
"@babel/preset-typescript": "^7.16.7",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^5.9.1",
|
||||||
|
"@typescript-eslint/parser": "^5.9.1",
|
||||||
|
"@vue/compiler-sfc": "^3.2.26",
|
||||||
|
"autoprefixer": "^10.4.13",
|
||||||
|
"babel-loader": "^8.2.3",
|
||||||
|
"clean-webpack-plugin": "^4.0.0",
|
||||||
|
"copy-webpack-plugin": "^10.2.4",
|
||||||
|
"css-loader": "^6.5.1",
|
||||||
|
"eslint": "^7.32.0",
|
||||||
|
"eslint-config-prettier": "^8.3.0",
|
||||||
|
"eslint-config-standard": "^16.0.3",
|
||||||
|
"eslint-import-resolver-typescript": "^2.5.0",
|
||||||
|
"eslint-plugin-import": "^2.25.4",
|
||||||
|
"eslint-plugin-node": "^11.1.0",
|
||||||
|
"eslint-plugin-prettier": "^4.0.0",
|
||||||
|
"eslint-plugin-promise": "^5.2.0",
|
||||||
|
"eslint-plugin-vue": "^8.3.0",
|
||||||
|
"html-webpack-plugin": "^5.5.0",
|
||||||
|
"postcss": "^8.4.21",
|
||||||
|
"postcss-loader": "^7.0.2",
|
||||||
|
"prettier": "^2.5.1",
|
||||||
|
"style-loader": "^3.3.1",
|
||||||
|
"tailwindcss": "^3.2.4",
|
||||||
|
"typescript": "^4.5.4",
|
||||||
|
"vue-loader": "^17.0.0",
|
||||||
|
"webpack": "^5.66.0",
|
||||||
|
"webpack-cli": "^4.9.1"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"rfc4648": "^1.5.2",
|
||||||
|
"vue": "^3.2.26"
|
||||||
|
}
|
||||||
|
}
|
||||||
1577
realm-export.json
Normal file
1577
realm-export.json
Normal file
File diff suppressed because it is too large
Load diff
15
src/components/ErrorBox.vue
Normal file
15
src/components/ErrorBox.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="flex flex-row justify-center mt-6 w-full bg-red-100 border border-red-400 text-red-700 p-2 rounded">
|
||||||
|
<p class="text-center">
|
||||||
|
<slot></slot>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from "vue";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "ErrorBox",
|
||||||
|
});
|
||||||
|
</script>
|
||||||
25
src/components/Layout.vue
Normal file
25
src/components/Layout.vue
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:class="
|
||||||
|
'flex flex-col min-h-screen w-full md:w-1/2 lg:w-1/3 max-w-none md:max-w-2xl bg-gray-50 md:rounded-r-3xl shadow-2xl bg-[url(\'' +
|
||||||
|
context.url.resourcesPath +
|
||||||
|
'/img/background.jpg\')] bg-no-repeat bg-center bg-cover font-sans overflow-hidden'
|
||||||
|
">
|
||||||
|
<div class="flex flex-grow flex-col justify-center w-full px-8 md:px-20">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from "vue";
|
||||||
|
import { KcContextBase } from "~/types/context";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "Layout",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
context: (window as any).kcContext as KcContextBase.Common,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
5
src/shims-vue.d.ts
vendored
Normal file
5
src/shims-vue.d.ts
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
declare module "*" {
|
||||||
|
import type { DefineComponent } from "vue";
|
||||||
|
const component: DefineComponent<{}, {}, any>;
|
||||||
|
export default component;
|
||||||
|
}
|
||||||
8
src/static/jar/META-INF/keycloak-themes.json
Normal file
8
src/static/jar/META-INF/keycloak-themes.json
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"themes": [
|
||||||
|
{
|
||||||
|
"name": "modern-login",
|
||||||
|
"types": ["login"]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
237
src/static/login/baselayout.ftl
Normal file
237
src/static/login/baselayout.ftl
Normal file
|
|
@ -0,0 +1,237 @@
|
||||||
|
<#function are_same_path path searchedPath>
|
||||||
|
<#if path?size != searchedPath?size>
|
||||||
|
<#return false>
|
||||||
|
</#if>
|
||||||
|
<#local i=0>
|
||||||
|
<#list path as property>
|
||||||
|
<#local searchedProperty=searchedPath[i]>
|
||||||
|
<#if searchedProperty?is_string && searchedProperty == "*">
|
||||||
|
<#continue>
|
||||||
|
</#if>
|
||||||
|
<#if searchedProperty?is_string && !property?is_string>
|
||||||
|
<#return false>
|
||||||
|
</#if>
|
||||||
|
<#if searchedProperty?is_number && !property?is_number>
|
||||||
|
<#return false>
|
||||||
|
</#if>
|
||||||
|
<#if searchedProperty?string != property?string>
|
||||||
|
<#return false>
|
||||||
|
</#if>
|
||||||
|
<#local i+= 1>
|
||||||
|
</#list>
|
||||||
|
<#return true>
|
||||||
|
</#function>
|
||||||
|
<#function ftl_object_to_js_code_declaring_an_object pageId object path>
|
||||||
|
<#local isHash = "">
|
||||||
|
<#attempt>
|
||||||
|
<#local isHash = object?is_hash || object?is_hash_ex>
|
||||||
|
<#recover>
|
||||||
|
<#return "ABORT: Can't evaluate if " + path?join(".") + " is hash">
|
||||||
|
</#attempt>
|
||||||
|
|
||||||
|
<#if isHash>
|
||||||
|
|
||||||
|
<#if path?size gt 10>
|
||||||
|
<#return "ABORT: Too many recursive calls">
|
||||||
|
</#if>
|
||||||
|
|
||||||
|
<#local keys = "">
|
||||||
|
|
||||||
|
<#attempt>
|
||||||
|
<#local keys = object?keys>
|
||||||
|
<#recover>
|
||||||
|
<#return "ABORT: We can't list keys on this object">
|
||||||
|
</#attempt>
|
||||||
|
|
||||||
|
<#local out_seq = []>
|
||||||
|
<#list keys as key>
|
||||||
|
<#if ["class","declaredConstructors","superclass","declaringClass" ]?seq_contains(key) >
|
||||||
|
<#continue>
|
||||||
|
</#if>
|
||||||
|
|
||||||
|
<#if
|
||||||
|
(
|
||||||
|
["loginUpdatePasswordUrl", "loginUpdateProfileUrl", "loginUsernameReminderUrl", "loginUpdateTotpUrl"]?seq_contains(key) &&
|
||||||
|
are_same_path(path, ["url"])
|
||||||
|
) || (
|
||||||
|
key == "updateProfileCtx" &&
|
||||||
|
are_same_path(path, [])
|
||||||
|
) || (
|
||||||
|
key == "loginAction" &&
|
||||||
|
are_same_path(path, ["url"]) &&
|
||||||
|
["saml-post-form.ftl", "error.ftl", "info.ftl"]?seq_contains(pageId) &&
|
||||||
|
!(auth?has_content && auth.showTryAnotherWayLink())
|
||||||
|
) || (
|
||||||
|
["contextData", "idpConfig", "idp", "authenticationSession"]?seq_contains(key) &&
|
||||||
|
are_same_path(path, ["brokerContext"]) &&
|
||||||
|
["login-idp-link-confirm.ftl", "login-idp-link-email.ftl" ]?seq_contains(pageId)
|
||||||
|
) || (
|
||||||
|
key == "identityProviderBrokerCtx" &&
|
||||||
|
are_same_path(path, []) &&
|
||||||
|
["login-idp-link-confirm.ftl", "login-idp-link-email.ftl" ]?seq_contains(pageId)
|
||||||
|
) || (
|
||||||
|
["masterAdminClient", "delegateForUpdate", "defaultRole"]?seq_contains(key) &&
|
||||||
|
are_same_path(path, ["realm"])
|
||||||
|
)
|
||||||
|
>
|
||||||
|
<#continue>
|
||||||
|
</#if>
|
||||||
|
|
||||||
|
<#if key == "attemptedUsername" && are_same_path(path, ["auth"])>
|
||||||
|
<#attempt>
|
||||||
|
<#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())>
|
||||||
|
<#continue>
|
||||||
|
</#if>
|
||||||
|
<#recover>
|
||||||
|
</#attempt>
|
||||||
|
</#if>
|
||||||
|
|
||||||
|
<#attempt>
|
||||||
|
<#if !object[key]??>
|
||||||
|
<#continue>
|
||||||
|
</#if>
|
||||||
|
<#recover>
|
||||||
|
<#local out_seq += ["/*Couldn't test if '" + key + "' is available on this object*/"]>
|
||||||
|
<#continue>
|
||||||
|
</#attempt>
|
||||||
|
|
||||||
|
<#local propertyValue = "">
|
||||||
|
<#attempt>
|
||||||
|
<#local propertyValue = object[key]>
|
||||||
|
<#recover>
|
||||||
|
<#local out_seq += ["/*Couldn't dereference '" + key + "' on this object*/"]>
|
||||||
|
<#continue>
|
||||||
|
</#attempt>
|
||||||
|
|
||||||
|
<#local rec_out = ftl_object_to_js_code_declaring_an_object(pageId, propertyValue, path + [ key ])>
|
||||||
|
<#if rec_out?starts_with("ABORT:")>
|
||||||
|
<#local errorMessage = rec_out?remove_beginning("ABORT:")>
|
||||||
|
<#if errorMessage != " It's a method" >
|
||||||
|
<#local out_seq += ["/*" + key + ": " + errorMessage + "*/"]>
|
||||||
|
</#if>
|
||||||
|
<#continue>
|
||||||
|
</#if>
|
||||||
|
|
||||||
|
<#local out_seq += ['"' + key + '": ' + rec_out + ","]>
|
||||||
|
</#list>
|
||||||
|
|
||||||
|
<#return (["{"] + out_seq?map(str -> ""?right_pad(4 * (path?size + 1)) + str) + [ ""?right_pad(4 * path?size) + "}"])?join("\n")>
|
||||||
|
|
||||||
|
</#if>
|
||||||
|
|
||||||
|
<#local isMethod = "">
|
||||||
|
<#attempt>
|
||||||
|
<#local isMethod = object?is_method>
|
||||||
|
<#recover>
|
||||||
|
<#return "ABORT: Can't test if it'sa method.">
|
||||||
|
</#attempt>
|
||||||
|
|
||||||
|
<#if isMethod>
|
||||||
|
<#if are_same_path(path, ["auth", "showUsername"])>
|
||||||
|
<#attempt>
|
||||||
|
<#return auth.showUsername()?c>
|
||||||
|
<#recover>
|
||||||
|
<#return "ABORT: Couldn't evaluate auth.showUsername()">
|
||||||
|
</#attempt>
|
||||||
|
</#if>
|
||||||
|
|
||||||
|
<#if are_same_path(path, ["auth", "showResetCredentials"])>
|
||||||
|
<#attempt>
|
||||||
|
<#return auth.showResetCredentials()?c>
|
||||||
|
<#recover>
|
||||||
|
<#return "ABORT: Couldn't evaluate auth.showResetCredentials()">
|
||||||
|
</#attempt>
|
||||||
|
</#if>
|
||||||
|
|
||||||
|
<#if are_same_path(path, ["auth", "showTryAnotherWayLink"])>
|
||||||
|
<#attempt>
|
||||||
|
<#return auth.showTryAnotherWayLink()?c>
|
||||||
|
<#recover>
|
||||||
|
<#return "ABORT: Couldn't evaluate auth.showTryAnotherWayLink()">
|
||||||
|
</#attempt>
|
||||||
|
</#if>
|
||||||
|
|
||||||
|
<#return "ABORT: It's a method">
|
||||||
|
</#if>
|
||||||
|
|
||||||
|
<#local isBoolean = "">
|
||||||
|
<#attempt>
|
||||||
|
<#local isBoolean = object?is_boolean>
|
||||||
|
<#recover>
|
||||||
|
<#return "ABORT: Can't test if it's a boolean">
|
||||||
|
</#attempt>
|
||||||
|
|
||||||
|
<#if isBoolean>
|
||||||
|
<#return object?c>
|
||||||
|
</#if>
|
||||||
|
|
||||||
|
<#local isEnumerable = "">
|
||||||
|
<#attempt>
|
||||||
|
<#local isEnumerable = object?is_enumerable>
|
||||||
|
<#recover>
|
||||||
|
<#return "ABORT: Can't test if it's an enumerable">
|
||||||
|
</#attempt>
|
||||||
|
|
||||||
|
<#if isEnumerable>
|
||||||
|
<#local out_seq = []>
|
||||||
|
<#local i = 0>
|
||||||
|
|
||||||
|
<#list object as array_item>
|
||||||
|
<#if !array_item??>
|
||||||
|
<#local out_seq += ["null,"]>
|
||||||
|
<#continue>
|
||||||
|
</#if>
|
||||||
|
|
||||||
|
<#local rec_out = ftl_object_to_js_code_declaring_an_object(pageId, array_item, path + [ i ])>
|
||||||
|
<#local i = i + 1>
|
||||||
|
|
||||||
|
<#if rec_out?starts_with("ABORT:")>
|
||||||
|
<#local errorMessage = rec_out?remove_beginning("ABORT:")>
|
||||||
|
<#if errorMessage != " It's a method" >
|
||||||
|
<#local out_seq += ["/*" + i?string + ": " + errorMessage + "*/"]>
|
||||||
|
</#if>
|
||||||
|
|
||||||
|
<#continue>
|
||||||
|
</#if>
|
||||||
|
<#local out_seq += [rec_out + ","]>
|
||||||
|
</#list>
|
||||||
|
|
||||||
|
<#return (["["] + out_seq?map(str -> ""?right_pad(4 * (path?size + 1)) + str) + [ ""?right_pad(4 * path?size) + "]"])?join("\n")>
|
||||||
|
</#if>
|
||||||
|
|
||||||
|
<#attempt>
|
||||||
|
<#return '"' + object?js_string + '"'>;
|
||||||
|
<#recover>
|
||||||
|
</#attempt>
|
||||||
|
|
||||||
|
<#return "ABORT: Couldn't convert into string non hash, non method, non boolean, non enumerable object">
|
||||||
|
</#function>
|
||||||
|
|
||||||
|
<#macro baseLayout pageId="template.ftl">
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="robots" content="noindex, nofollow">
|
||||||
|
<title>${msg("loginTitle",(realm.displayName!''))}</title>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background-image: url("${url.resourcesPath}/img/background.jpg");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
window.kcContext = ${ftl_object_to_js_code_declaring_an_object(pageId, .data_model, [])?no_esc}
|
||||||
|
</script>
|
||||||
|
<#nested "head">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<#nested "scripts">
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
</#macro>
|
||||||
BIN
src/static/login/resources/img/background.jpg
Normal file
BIN
src/static/login/resources/img/background.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 316 KiB |
2
src/static/login/theme.properties
Normal file
2
src/static/login/theme.properties
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
locales=en,de
|
||||||
|
parent=keycloak
|
||||||
441
src/types/context.ts
Normal file
441
src/types/context.ts
Normal file
|
|
@ -0,0 +1,441 @@
|
||||||
|
/* eslint-disable */
|
||||||
|
/** Take theses type definition with a grain of salt.
|
||||||
|
* Some values might be undefined on some pages.
|
||||||
|
* (ex: url.loginAction is undefined on error.ftl)
|
||||||
|
*/
|
||||||
|
export type KcContextBase =
|
||||||
|
| KcContextBase.Login
|
||||||
|
| KcContextBase.Register
|
||||||
|
| KcContextBase.RegisterUserProfile
|
||||||
|
| KcContextBase.Error
|
||||||
|
| KcContextBase.LoginResetPassword
|
||||||
|
| KcContextBase.LoginVerifyEmail
|
||||||
|
| KcContextBase.Terms
|
||||||
|
| KcContextBase.LoginOtp
|
||||||
|
| KcContextBase.LoginUsername
|
||||||
|
| KcContextBase.WebauthnAuthenticate
|
||||||
|
| KcContextBase.LoginPassword
|
||||||
|
| KcContextBase.LoginUpdatePassword
|
||||||
|
| KcContextBase.LoginUpdateProfile
|
||||||
|
| KcContextBase.LoginIdpLinkConfirm
|
||||||
|
| KcContextBase.LoginIdpLinkEmail
|
||||||
|
| KcContextBase.LoginPageExpired
|
||||||
|
| KcContextBase.LoginConfigTotp
|
||||||
|
| KcContextBase.LogoutConfirm
|
||||||
|
| KcContextBase.UpdateUserProfile
|
||||||
|
| KcContextBase.IdpReviewUserProfile;
|
||||||
|
|
||||||
|
export type WebauthnAuthenticator = {
|
||||||
|
credentialId: string;
|
||||||
|
label: string;
|
||||||
|
createdAt: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export declare namespace KcContextBase {
|
||||||
|
export type Common = {
|
||||||
|
url: {
|
||||||
|
loginAction: string;
|
||||||
|
resourcesPath: string;
|
||||||
|
resourcesCommonPath: string;
|
||||||
|
loginRestartFlowUrl: string;
|
||||||
|
loginUrl: string;
|
||||||
|
};
|
||||||
|
realm: {
|
||||||
|
name: string;
|
||||||
|
displayName?: string;
|
||||||
|
displayNameHtml?: string;
|
||||||
|
internationalizationEnabled: boolean;
|
||||||
|
registrationEmailAsUsername: boolean;
|
||||||
|
};
|
||||||
|
locale?: {
|
||||||
|
supported: {
|
||||||
|
url: string;
|
||||||
|
label: string;
|
||||||
|
languageTag: string;
|
||||||
|
}[];
|
||||||
|
currentLanguageTag: string;
|
||||||
|
};
|
||||||
|
auth?: {
|
||||||
|
showUsername?: boolean;
|
||||||
|
showResetCredentials?: boolean;
|
||||||
|
showTryAnotherWayLink?: boolean;
|
||||||
|
attemptedUsername?: string;
|
||||||
|
};
|
||||||
|
scripts: string[];
|
||||||
|
message?: {
|
||||||
|
type: "success" | "warning" | "error" | "info";
|
||||||
|
summary: string;
|
||||||
|
};
|
||||||
|
client: {
|
||||||
|
clientId: string;
|
||||||
|
name?: string;
|
||||||
|
description?: string;
|
||||||
|
};
|
||||||
|
isAppInitiatedAction: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Login = Common & {
|
||||||
|
url: {
|
||||||
|
loginResetCredentialsUrl: string;
|
||||||
|
registrationUrl: string;
|
||||||
|
};
|
||||||
|
realm: {
|
||||||
|
loginWithEmailAllowed: boolean;
|
||||||
|
rememberMe: boolean;
|
||||||
|
password: boolean;
|
||||||
|
resetPasswordAllowed: boolean;
|
||||||
|
registrationAllowed: boolean;
|
||||||
|
};
|
||||||
|
auth: {
|
||||||
|
selectedCredential?: string;
|
||||||
|
};
|
||||||
|
registrationDisabled: boolean;
|
||||||
|
login: {
|
||||||
|
username?: string;
|
||||||
|
rememberMe?: boolean;
|
||||||
|
};
|
||||||
|
usernameEditDisabled: boolean;
|
||||||
|
social: {
|
||||||
|
displayInfo: boolean;
|
||||||
|
providers?: {
|
||||||
|
loginUrl: string;
|
||||||
|
alias: string;
|
||||||
|
providerId: string;
|
||||||
|
displayName: string;
|
||||||
|
}[];
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export type RegisterCommon = Common & {
|
||||||
|
url: {
|
||||||
|
registrationAction: string;
|
||||||
|
};
|
||||||
|
passwordRequired: boolean;
|
||||||
|
recaptchaRequired: boolean;
|
||||||
|
recaptchaSiteKey?: string;
|
||||||
|
social: {
|
||||||
|
displayInfo: boolean;
|
||||||
|
providers?: {
|
||||||
|
loginUrl: string;
|
||||||
|
alias: string;
|
||||||
|
providerId: string;
|
||||||
|
displayName: string;
|
||||||
|
}[];
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Register = RegisterCommon & {
|
||||||
|
register: {
|
||||||
|
formData: {
|
||||||
|
firstName?: string;
|
||||||
|
displayName?: string;
|
||||||
|
lastName?: string;
|
||||||
|
email?: string;
|
||||||
|
username?: string;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export type RegisterUserProfile = RegisterCommon & {
|
||||||
|
profile: {
|
||||||
|
context: "REGISTRATION_PROFILE";
|
||||||
|
attributes: Attribute[];
|
||||||
|
attributesByName: Record<string, Attribute>;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Error = Common & {
|
||||||
|
client?: {
|
||||||
|
baseUrl?: string;
|
||||||
|
};
|
||||||
|
message: NonNullable<Common["message"]>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type LoginResetPassword = Common & {
|
||||||
|
realm: {
|
||||||
|
loginWithEmailAllowed: boolean;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export type LoginVerifyEmail = Common & {
|
||||||
|
user?: {
|
||||||
|
email: string;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Terms = Common & {};
|
||||||
|
|
||||||
|
export type LoginOtp = Common & {
|
||||||
|
otpLogin: {
|
||||||
|
userOtpCredentials: { id: string; userLabel: string }[];
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export type LoginUsername = Common & {
|
||||||
|
url: {
|
||||||
|
loginResetCredentialsUrl: string;
|
||||||
|
registrationUrl: string;
|
||||||
|
};
|
||||||
|
realm: {
|
||||||
|
loginWithEmailAllowed: boolean;
|
||||||
|
rememberMe: boolean;
|
||||||
|
password: boolean;
|
||||||
|
resetPasswordAllowed: boolean;
|
||||||
|
registrationAllowed: boolean;
|
||||||
|
};
|
||||||
|
registrationDisabled: boolean;
|
||||||
|
login: {
|
||||||
|
username?: string;
|
||||||
|
rememberMe?: boolean;
|
||||||
|
};
|
||||||
|
usernameHidden?: boolean;
|
||||||
|
social: {
|
||||||
|
displayInfo: boolean;
|
||||||
|
providers?: {
|
||||||
|
loginUrl: string;
|
||||||
|
alias: string;
|
||||||
|
providerId: string;
|
||||||
|
displayName: string;
|
||||||
|
}[];
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export type LoginPassword = Common & {
|
||||||
|
url: {
|
||||||
|
loginResetCredentialsUrl: string;
|
||||||
|
registrationUrl: string;
|
||||||
|
};
|
||||||
|
realm: {
|
||||||
|
resetPasswordAllowed: boolean;
|
||||||
|
};
|
||||||
|
auth?: {
|
||||||
|
showUsername?: boolean;
|
||||||
|
showResetCredentials?: boolean;
|
||||||
|
showTryAnotherWayLink?: boolean;
|
||||||
|
attemptedUsername?: string;
|
||||||
|
};
|
||||||
|
social: {
|
||||||
|
displayInfo: boolean;
|
||||||
|
};
|
||||||
|
login: {
|
||||||
|
password?: string;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export type WebauthnAuthenticate = Common & {
|
||||||
|
authenticators: {
|
||||||
|
authenticators: WebauthnAuthenticator[];
|
||||||
|
};
|
||||||
|
challenge: string;
|
||||||
|
userVerification: UserVerificationRequirement | "not specified";
|
||||||
|
rpId: string;
|
||||||
|
createTimeout: string;
|
||||||
|
isUserIdentified: "true" | "false";
|
||||||
|
shouldDisplayAuthenticators: boolean;
|
||||||
|
social: {
|
||||||
|
displayInfo: boolean;
|
||||||
|
};
|
||||||
|
login: {};
|
||||||
|
};
|
||||||
|
|
||||||
|
export type LoginUpdatePassword = Common & {
|
||||||
|
username: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type LoginUpdateProfile = Common & {
|
||||||
|
user: {
|
||||||
|
editUsernameAllowed: boolean;
|
||||||
|
username?: string;
|
||||||
|
email?: string;
|
||||||
|
firstName?: string;
|
||||||
|
lastName?: string;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export type LoginIdpLinkConfirm = Common & {
|
||||||
|
idpAlias: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type LoginIdpLinkEmail = Common & {
|
||||||
|
brokerContext: {
|
||||||
|
username: string;
|
||||||
|
};
|
||||||
|
idpAlias: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type LoginPageExpired = Common & {
|
||||||
|
pageId: "login-page-expired.ftl";
|
||||||
|
};
|
||||||
|
|
||||||
|
export type LoginConfigTotp = Common & {
|
||||||
|
pageId: "login-config-totp.ftl";
|
||||||
|
mode?: "qr" | "manual" | undefined | null;
|
||||||
|
totp: {
|
||||||
|
totpSecretEncoded: string;
|
||||||
|
qrUrl: string;
|
||||||
|
policy: {
|
||||||
|
supportedApplications: string[];
|
||||||
|
algorithm: "HmacSHA1" | "HmacSHA256" | "HmacSHA512";
|
||||||
|
digits: number;
|
||||||
|
lookAheadWindow: number;
|
||||||
|
} & (
|
||||||
|
| {
|
||||||
|
type: "totp";
|
||||||
|
period: number;
|
||||||
|
}
|
||||||
|
| {
|
||||||
|
type: "hotp";
|
||||||
|
initialCounter: number;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
totpSecretQrCode: string;
|
||||||
|
manualUrl: string;
|
||||||
|
totpSecret: string;
|
||||||
|
otpCredentials: { id: string; userLabel: string }[];
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export type LogoutConfirm = Common & {
|
||||||
|
pageId: "logout-confirm.ftl";
|
||||||
|
url: {
|
||||||
|
logoutConfirmAction: string;
|
||||||
|
};
|
||||||
|
client: {
|
||||||
|
baseUrl?: string;
|
||||||
|
};
|
||||||
|
logoutConfirm: {
|
||||||
|
code: string;
|
||||||
|
skipLink?: boolean;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export type UpdateUserProfile = Common & {
|
||||||
|
pageId: "update-user-profile.ftl";
|
||||||
|
profile: {
|
||||||
|
attributes: Attribute[];
|
||||||
|
attributesByName: Record<string, Attribute>;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export type IdpReviewUserProfile = Common & {
|
||||||
|
pageId: "idp-review-user-profile.ftl";
|
||||||
|
profile: {
|
||||||
|
context: "IDP_REVIEW";
|
||||||
|
attributes: Attribute[];
|
||||||
|
attributesByName: Record<string, Attribute>;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export type Attribute = {
|
||||||
|
name: string;
|
||||||
|
displayName?: string;
|
||||||
|
required: boolean;
|
||||||
|
value?: string;
|
||||||
|
group?: string;
|
||||||
|
groupDisplayHeader?: string;
|
||||||
|
groupDisplayDescription?: string;
|
||||||
|
readOnly: boolean;
|
||||||
|
validators: Validators;
|
||||||
|
annotations: Record<string, string>;
|
||||||
|
groupAnnotations: Record<string, string>;
|
||||||
|
autocomplete?:
|
||||||
|
| "on"
|
||||||
|
| "off"
|
||||||
|
| "name"
|
||||||
|
| "honorific-prefix"
|
||||||
|
| "given-name"
|
||||||
|
| "additional-name"
|
||||||
|
| "family-name"
|
||||||
|
| "honorific-suffix"
|
||||||
|
| "nickname"
|
||||||
|
| "email"
|
||||||
|
| "username"
|
||||||
|
| "new-password"
|
||||||
|
| "current-password"
|
||||||
|
| "one-time-code"
|
||||||
|
| "organization-title"
|
||||||
|
| "organization"
|
||||||
|
| "street-address"
|
||||||
|
| "address-line1"
|
||||||
|
| "address-line2"
|
||||||
|
| "address-line3"
|
||||||
|
| "address-level4"
|
||||||
|
| "address-level3"
|
||||||
|
| "address-level2"
|
||||||
|
| "address-level1"
|
||||||
|
| "country"
|
||||||
|
| "country-name"
|
||||||
|
| "postal-code"
|
||||||
|
| "cc-name"
|
||||||
|
| "cc-given-name"
|
||||||
|
| "cc-additional-name"
|
||||||
|
| "cc-family-name"
|
||||||
|
| "cc-number"
|
||||||
|
| "cc-exp"
|
||||||
|
| "cc-exp-month"
|
||||||
|
| "cc-exp-year"
|
||||||
|
| "cc-csc"
|
||||||
|
| "cc-type"
|
||||||
|
| "transaction-currency"
|
||||||
|
| "transaction-amount"
|
||||||
|
| "language"
|
||||||
|
| "bday"
|
||||||
|
| "bday-day"
|
||||||
|
| "bday-month"
|
||||||
|
| "bday-year"
|
||||||
|
| "sex"
|
||||||
|
| "tel"
|
||||||
|
| "tel-country-code"
|
||||||
|
| "tel-national"
|
||||||
|
| "tel-area-code"
|
||||||
|
| "tel-local"
|
||||||
|
| "tel-extension"
|
||||||
|
| "impp"
|
||||||
|
| "url"
|
||||||
|
| "photo";
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Validators = Partial<{
|
||||||
|
length: Validators.DoIgnoreEmpty & Validators.Range;
|
||||||
|
double: Validators.DoIgnoreEmpty & Validators.Range;
|
||||||
|
integer: Validators.DoIgnoreEmpty & Validators.Range;
|
||||||
|
email: Validators.DoIgnoreEmpty;
|
||||||
|
"up-immutable-attribute": {};
|
||||||
|
"up-attribute-required-by-metadata-value": {};
|
||||||
|
"up-username-has-value": {};
|
||||||
|
"up-duplicate-username": {};
|
||||||
|
"up-username-mutation": {};
|
||||||
|
"up-email-exists-as-username": {};
|
||||||
|
"up-blank-attribute-value": Validators.ErrorMessage & {
|
||||||
|
"fail-on-null": boolean;
|
||||||
|
};
|
||||||
|
"up-duplicate-email": {};
|
||||||
|
"local-date": Validators.DoIgnoreEmpty;
|
||||||
|
pattern: Validators.DoIgnoreEmpty &
|
||||||
|
Validators.ErrorMessage & { pattern: string };
|
||||||
|
"person-name-prohibited-characters": Validators.DoIgnoreEmpty &
|
||||||
|
Validators.ErrorMessage;
|
||||||
|
uri: Validators.DoIgnoreEmpty;
|
||||||
|
"username-prohibited-characters": Validators.DoIgnoreEmpty &
|
||||||
|
Validators.ErrorMessage;
|
||||||
|
options: Validators.Options;
|
||||||
|
}>;
|
||||||
|
|
||||||
|
export declare namespace Validators {
|
||||||
|
export type DoIgnoreEmpty = {
|
||||||
|
"ignore.empty.value"?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type ErrorMessage = {
|
||||||
|
"error-message"?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Range = {
|
||||||
|
min?: `${number}`;
|
||||||
|
max?: `${number}`;
|
||||||
|
};
|
||||||
|
export type Options = {
|
||||||
|
options: string[];
|
||||||
|
};
|
||||||
|
}
|
||||||
6
src/views/login/index.ftl
Normal file
6
src/views/login/index.ftl
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<#import "baselayout.ftl" as layout>
|
||||||
|
<@layout.baseLayout pageId="login.ftl" ; section>
|
||||||
|
<#if section = "scripts">
|
||||||
|
<script typo="module" src="${url.resourcesPath}/js/login.js"></script>
|
||||||
|
</#if>
|
||||||
|
</@layout.baseLayout>
|
||||||
7
src/views/login/index.ts
Normal file
7
src/views/login/index.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { createApp } from "vue";
|
||||||
|
import index from "./index.vue";
|
||||||
|
|
||||||
|
if ((window as any).kcContext) {
|
||||||
|
const app = createApp(index);
|
||||||
|
app.mount("#app");
|
||||||
|
}
|
||||||
103
src/views/login/index.vue
Normal file
103
src/views/login/index.vue
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
<template>
|
||||||
|
<layout>
|
||||||
|
<h1 class="mb-8 text-3xl font-semibold text-center text-gray-700">
|
||||||
|
Login to your account
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
v-if="context.realm.registrationAllowed"
|
||||||
|
class="mt-4 text-sm font-light text-center text-gray-700">
|
||||||
|
Don't have an account yet?
|
||||||
|
<a
|
||||||
|
:href="context.url.registrationUrl"
|
||||||
|
class="font-medium text-blue-500 hover:underline"
|
||||||
|
>Sign up</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<div v-if="context.message?.type == 'error'">
|
||||||
|
<ErrorBox>{{ context.message?.summary }}</ErrorBox>
|
||||||
|
</div>
|
||||||
|
<form
|
||||||
|
class="flex flex-col justify-center mt-6"
|
||||||
|
:action="context.url.loginAction"
|
||||||
|
method="post">
|
||||||
|
<div>
|
||||||
|
<label for="username" class="block text-sm text-gray-800">{{
|
||||||
|
context.realm.loginWithEmailAllowed ? "Email or Username" : "Username"
|
||||||
|
}}</label>
|
||||||
|
<input
|
||||||
|
name="username"
|
||||||
|
type="text"
|
||||||
|
:placeholder="
|
||||||
|
context.realm.loginWithEmailAllowed
|
||||||
|
? 'jane.doe@example.com'
|
||||||
|
: 'JDoe'
|
||||||
|
"
|
||||||
|
:value="context.login.username ? context.login.username : ''"
|
||||||
|
class="block w-full px-4 py-2 mt-2 text-gray-800 bg-white border rounded-md focus:border-blue-500 focus:ring-transparent focus:outline-none focus:ring focus:ring-opacity-40" />
|
||||||
|
</div>
|
||||||
|
<div class="mt-4">
|
||||||
|
<div>
|
||||||
|
<label for="password" class="block text-sm text-gray-800"
|
||||||
|
>Password</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
name="password"
|
||||||
|
placeholder="••••••••••••"
|
||||||
|
class="block w-full px-4 py-2 mt-2 text-gray-800 bg-white border rounded-md focus:border-blue-500 focus:ring-transparent focus:outline-none focus:ring focus:ring-opacity-40" />
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
v-if="context.realm.resetPasswordAllowed"
|
||||||
|
:href="context.url.loginResetCredentialsUrl"
|
||||||
|
class="text-xs text-gray-600 hover:underline"
|
||||||
|
>Forgot Password?</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="context.realm.rememberMe"
|
||||||
|
class="mt-5 flex flex-row items-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
name="rememberMe"
|
||||||
|
class="w-4 h-4 text-blue-500 bg-gray-100 border-gray-400 rounded dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600" />
|
||||||
|
<label for="rememberMe" class="block ml-3 text-sm text-gray-800"
|
||||||
|
>Remember me</label
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="hidden"
|
||||||
|
name="credentialId"
|
||||||
|
:value="
|
||||||
|
context.auth.selectedCredential ? context.auth.selectedCredential : ''
|
||||||
|
" />
|
||||||
|
<button
|
||||||
|
class="w-full mt-6 px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400">
|
||||||
|
Login
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</layout>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from "vue";
|
||||||
|
import Layout from "~/components/Layout.vue";
|
||||||
|
import ErrorBox from "~/components/ErrorBox.vue";
|
||||||
|
import type { KcContextBase } from "~/types/context";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "Login",
|
||||||
|
components: {
|
||||||
|
Layout,
|
||||||
|
ErrorBox,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
context: (window as any).kcContext as KcContextBase.Login,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
</style>
|
||||||
6
src/views/webauthn-authenticate/index.ftl
Normal file
6
src/views/webauthn-authenticate/index.ftl
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<#import "baselayout.ftl" as layout>
|
||||||
|
<@layout.baseLayout pageId="webauthn-authenticate.ftl" ; section>
|
||||||
|
<#if section = "scripts">
|
||||||
|
<script typo="module" src="${url.resourcesPath}/js/webauthn-authenticate.js"></script>
|
||||||
|
</#if>
|
||||||
|
</@layout.baseLayout>
|
||||||
7
src/views/webauthn-authenticate/index.ts
Normal file
7
src/views/webauthn-authenticate/index.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { createApp } from "vue";
|
||||||
|
import index from "./index.vue";
|
||||||
|
|
||||||
|
if ((window as any).kcContext) {
|
||||||
|
const app = createApp(index);
|
||||||
|
app.mount("#app");
|
||||||
|
}
|
||||||
202
src/views/webauthn-authenticate/index.vue
Normal file
202
src/views/webauthn-authenticate/index.vue
Normal file
|
|
@ -0,0 +1,202 @@
|
||||||
|
<template>
|
||||||
|
<layout>
|
||||||
|
<h1
|
||||||
|
v-if="context.isUserIdentified"
|
||||||
|
class="text-3xl font-semibold text-center text-gray-700">
|
||||||
|
Welcome {{ context.auth?.attemptedUsername }}!
|
||||||
|
</h1>
|
||||||
|
<h1 v-else class="text-3xl font-semibold text-center text-gray-700">
|
||||||
|
Welcome!
|
||||||
|
</h1>
|
||||||
|
<div v-if="webauthnSupported && !error">
|
||||||
|
<p class="mt-5 mb-5 text-center">
|
||||||
|
Please use one of your registered devices to continue:
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
v-for="authenticator in context.authenticators.authenticators"
|
||||||
|
:key="authenticator.credentialId"
|
||||||
|
class="w-full h-20 mb-5 bg-white shadow-md rounded-md flex flex-row items-center">
|
||||||
|
<svg
|
||||||
|
class="w-12 h-12 ml-4 text-gray-700"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 16 16">
|
||||||
|
<path
|
||||||
|
d="M6 .5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4H6v-4ZM7 1v1h1V1H7Zm2 0v1h1V1H9ZM5.5 5a.5.5 0 0 0-.5.5V15a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V5.5a.5.5 0 0 0-.5-.5h-6Z" />
|
||||||
|
</svg>
|
||||||
|
<div class="w-full ml-5 flex flex-col">
|
||||||
|
<p>{{ authenticator.label }}</p>
|
||||||
|
<p class="text-sm">
|
||||||
|
Registered: {{ new Date(authenticator.createdAt).toLocaleString() }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
:onclick="prepareAuthenticate"
|
||||||
|
class="w-full px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400">
|
||||||
|
Authenticate
|
||||||
|
</button>
|
||||||
|
<p
|
||||||
|
class="mt-5 text-sm text-center"
|
||||||
|
v-if="context.auth?.showTryAnotherWayLink">
|
||||||
|
Don't have your device at hand?
|
||||||
|
<a
|
||||||
|
:onclick="tryAnotherWay"
|
||||||
|
class="text-blue-500 hover:underline cursor-pointer"
|
||||||
|
>Try another way.</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div v-if="!webauthnSupported">
|
||||||
|
<p class="mt-5 text-center">
|
||||||
|
It seems that your browser doesn't support WebAuthn. Please try logging
|
||||||
|
in with a different browser<span
|
||||||
|
v-if="!context.auth?.showTryAnotherWayLink"
|
||||||
|
>.</span
|
||||||
|
><span v-else
|
||||||
|
>, or try a different login method using the button below.</span
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
v-if="context.auth?.showTryAnotherWayLink"
|
||||||
|
:onclick="tryAnotherWay"
|
||||||
|
class="w-full mt-5 px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400">
|
||||||
|
Try another method
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div v-if="error" class="mt-5 flex flex-col">
|
||||||
|
<ErrorBox
|
||||||
|
>Something went wrong during authentication using your device.</ErrorBox
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
:onclick="retryAuth"
|
||||||
|
class="w-full mt-5 px-4 py-2 tracking-wide text-white transition-colors duration-200 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:bg-blue-400">
|
||||||
|
Retry
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</layout>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from "vue";
|
||||||
|
import Layout from "~/components/Layout.vue";
|
||||||
|
import ErrorBox from "~/components/ErrorBox.vue";
|
||||||
|
import type { KcContextBase } from "~/types/context";
|
||||||
|
import { base64url } from "rfc4648";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "Login",
|
||||||
|
components: {
|
||||||
|
Layout,
|
||||||
|
ErrorBox,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
context: (window as any).kcContext as KcContextBase.WebauthnAuthenticate,
|
||||||
|
webauthnSupported: true,
|
||||||
|
error: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted: function () {
|
||||||
|
if (typeof PublicKeyCredential === "undefined") {
|
||||||
|
this.webauthnSupported = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
tryAnotherWay(e: Event) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.formPost(this.context.url.loginAction, {
|
||||||
|
tryAnotherWay: "on",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
prepareAuthenticate() {
|
||||||
|
if (this.context.isUserIdentified) {
|
||||||
|
const allowedCredentials = new Array<PublicKeyCredentialDescriptor>();
|
||||||
|
this.context.authenticators.authenticators.forEach(authenticator => {
|
||||||
|
allowedCredentials.push({
|
||||||
|
id: base64url.parse(authenticator.credentialId, { loose: true }),
|
||||||
|
type: "public-key",
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.authenticate(allowedCredentials);
|
||||||
|
} else {
|
||||||
|
this.authenticate([]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async authenticate(
|
||||||
|
allowedAuthenticators: Array<PublicKeyCredentialDescriptor>
|
||||||
|
) {
|
||||||
|
const publicKey: PublicKeyCredentialRequestOptions = {
|
||||||
|
rpId: this.context.rpId,
|
||||||
|
challenge: base64url.parse(this.context.challenge, { loose: true }),
|
||||||
|
};
|
||||||
|
if (this.context.createTimeout !== "0")
|
||||||
|
publicKey.timeout = Number(this.context.createTimeout) * 1000;
|
||||||
|
if (allowedAuthenticators.length)
|
||||||
|
publicKey.allowCredentials = allowedAuthenticators;
|
||||||
|
if (this.context.userVerification !== "not specified")
|
||||||
|
publicKey.userVerification = this.context.userVerification;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const resultRaw = await navigator.credentials.get({ publicKey });
|
||||||
|
if (!resultRaw || resultRaw.type !== "public-key") return;
|
||||||
|
const result = resultRaw as PublicKeyCredential;
|
||||||
|
if (!("authenticatorData" in result.response)) return;
|
||||||
|
const response = result.response as AuthenticatorAssertionResponse;
|
||||||
|
const clientDataJSON = response.clientDataJSON;
|
||||||
|
const authenticatorData = response.authenticatorData;
|
||||||
|
const signature = response.signature;
|
||||||
|
|
||||||
|
const postData = {
|
||||||
|
credentialId: result.id,
|
||||||
|
clientDataJSON: base64url.stringify(new Uint8Array(clientDataJSON), {
|
||||||
|
pad: false,
|
||||||
|
}),
|
||||||
|
authenticatorData: base64url.stringify(
|
||||||
|
new Uint8Array(authenticatorData),
|
||||||
|
{ pad: false }
|
||||||
|
),
|
||||||
|
signature: base64url.stringify(new Uint8Array(signature), {
|
||||||
|
pad: false,
|
||||||
|
}),
|
||||||
|
userHandle: base64url.stringify(
|
||||||
|
new Uint8Array(response.userHandle!),
|
||||||
|
{ pad: false }
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
||||||
|
this.formPost(this.context.url.loginAction, postData);
|
||||||
|
} catch (err) {
|
||||||
|
this.error = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
retryAuth() {
|
||||||
|
this.error = false;
|
||||||
|
},
|
||||||
|
formPost(url: string, data: object) {
|
||||||
|
const form = document.createElement("form");
|
||||||
|
form.method = "post";
|
||||||
|
form.action = url;
|
||||||
|
|
||||||
|
for (const key in data) {
|
||||||
|
if (Object.prototype.hasOwnProperty.call(data, key)) {
|
||||||
|
const hiddenField = document.createElement("input");
|
||||||
|
hiddenField.type = "hidden";
|
||||||
|
hiddenField.name = key;
|
||||||
|
hiddenField.value = data[key];
|
||||||
|
|
||||||
|
form.appendChild(hiddenField);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.body.appendChild(form);
|
||||||
|
form.submit();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
</style>
|
||||||
8
tailwind.config.js
Normal file
8
tailwind.config.js
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: ["./src/**/*.vue"],
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
119
tsconfig.json
Normal file
119
tsconfig.json
Normal file
|
|
@ -0,0 +1,119 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
/* Visit https://aka.ms/tsconfig.json to read more about this file */
|
||||||
|
|
||||||
|
/* Projects */
|
||||||
|
"incremental": true /* Enable incremental compilation */,
|
||||||
|
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
|
||||||
|
// "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */
|
||||||
|
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */
|
||||||
|
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
|
||||||
|
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
|
||||||
|
|
||||||
|
/* Language and Environment */
|
||||||
|
"target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
|
||||||
|
"lib": [
|
||||||
|
"esnext",
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"scripthost"
|
||||||
|
] /* Specify a set of bundled library declaration files that describe the target runtime environment. */,
|
||||||
|
"jsx": "preserve" /* Specify what JSX code is generated. */,
|
||||||
|
// "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
|
||||||
|
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
|
||||||
|
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
|
||||||
|
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
|
||||||
|
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
|
||||||
|
// "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
|
||||||
|
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
|
||||||
|
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
|
||||||
|
|
||||||
|
/* Modules */
|
||||||
|
"module": "commonjs" /* Specify what module code is generated. */,
|
||||||
|
// "rootDir": "./", /* Specify the root folder within your source files. */
|
||||||
|
"moduleResolution": "node" /* Specify how TypeScript looks up a file from a given module specifier. */,
|
||||||
|
"baseUrl": "./src" /* Specify the base directory to resolve non-relative module names. */,
|
||||||
|
"paths": {
|
||||||
|
"~/*": ["./*"]
|
||||||
|
} /* Specify a set of entries that re-map imports to additional lookup locations. */,
|
||||||
|
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
|
||||||
|
"typeRoots": [
|
||||||
|
"./node_modules/@types",
|
||||||
|
"./src/@types"
|
||||||
|
] /* Specify multiple folders that act like `./node_modules/@types`. */,
|
||||||
|
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
|
||||||
|
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
|
||||||
|
// "resolveJsonModule": true, /* Enable importing .json files */
|
||||||
|
// "noResolve": true, /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
|
||||||
|
|
||||||
|
/* JavaScript Support */
|
||||||
|
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
|
||||||
|
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
|
||||||
|
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
|
||||||
|
|
||||||
|
/* Emit */
|
||||||
|
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
|
||||||
|
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
|
||||||
|
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
|
||||||
|
"sourceMap": true /* Create source map files for emitted JavaScript files. */,
|
||||||
|
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
|
||||||
|
// "outDir": "./", /* Specify an output folder for all emitted files. */
|
||||||
|
// "removeComments": true, /* Disable emitting comments. */
|
||||||
|
// "noEmit": true, /* Disable emitting files from a compilation. */
|
||||||
|
"importHelpers": true /* Allow importing helper functions from tslib once per project, instead of including them per-file. */,
|
||||||
|
// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */
|
||||||
|
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
|
||||||
|
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
|
||||||
|
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||||
|
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
|
||||||
|
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
|
||||||
|
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
|
||||||
|
// "newLine": "crlf", /* Set the newline character for emitting files. */
|
||||||
|
// "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
|
||||||
|
// "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */
|
||||||
|
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
|
||||||
|
// "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */
|
||||||
|
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
|
||||||
|
// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
|
||||||
|
|
||||||
|
/* Interop Constraints */
|
||||||
|
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
|
||||||
|
"allowSyntheticDefaultImports": true /* Allow 'import x from y' when a module doesn't have a default export. */,
|
||||||
|
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
|
||||||
|
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
|
||||||
|
"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
|
||||||
|
|
||||||
|
/* Type Checking */
|
||||||
|
"strict": true /* Enable all strict type-checking options. */,
|
||||||
|
"noImplicitAny": false /* Enable error reporting for expressions and declarations with an implied `any` type.. */,
|
||||||
|
// "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */
|
||||||
|
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
|
||||||
|
// "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
|
||||||
|
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
|
||||||
|
// "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */
|
||||||
|
// "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */
|
||||||
|
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
|
||||||
|
// "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */
|
||||||
|
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */
|
||||||
|
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
|
||||||
|
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
|
||||||
|
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
|
||||||
|
// "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */
|
||||||
|
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
|
||||||
|
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */
|
||||||
|
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
|
||||||
|
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
|
||||||
|
|
||||||
|
/* Completeness */
|
||||||
|
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
|
||||||
|
"skipLibCheck": true /* Skip type checking all .d.ts files. */
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*.ts",
|
||||||
|
"src/**/*.tsx",
|
||||||
|
"src/**/*.vue",
|
||||||
|
"tests/**/*.ts",
|
||||||
|
"tests/**/*.tsx"
|
||||||
|
],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
125
webpack.config.js
Normal file
125
webpack.config.js
Normal file
|
|
@ -0,0 +1,125 @@
|
||||||
|
const path = require("path");
|
||||||
|
const { VueLoaderPlugin } = require("vue-loader");
|
||||||
|
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||||
|
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
|
||||||
|
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
||||||
|
|
||||||
|
const THEME_NAME = "modern-login";
|
||||||
|
const customPages = ["login", "webauthn-authenticate"];
|
||||||
|
|
||||||
|
module.exports = function (env, argv) {
|
||||||
|
const isDevelopment = argv.mode !== "production";
|
||||||
|
return {
|
||||||
|
entry: () => {
|
||||||
|
const entryList = {};
|
||||||
|
for (const entry of customPages) {
|
||||||
|
entryList[entry] = path.resolve(
|
||||||
|
__dirname,
|
||||||
|
"src",
|
||||||
|
"views",
|
||||||
|
entry,
|
||||||
|
"index.ts"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return entryList;
|
||||||
|
},
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, "dist", "theme", THEME_NAME, "login"),
|
||||||
|
filename: "resources/js/[name].js",
|
||||||
|
publicPath: "/",
|
||||||
|
},
|
||||||
|
devtool: "inline-cheap-module-source-map",
|
||||||
|
resolve: {
|
||||||
|
extensions: [".ts", ".tsx", ".js", ".vue", ".json", ".scss"],
|
||||||
|
alias: {
|
||||||
|
"~": path.resolve(__dirname, "src"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mode: isDevelopment ? "development" : "production",
|
||||||
|
watch: isDevelopment,
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.vue$/,
|
||||||
|
loader: "vue-loader",
|
||||||
|
options: {
|
||||||
|
sourceMap: isDevelopment,
|
||||||
|
extract: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(ts|tsx)$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
use: {
|
||||||
|
loader: "babel-loader",
|
||||||
|
options: {
|
||||||
|
presets: ["@babel/preset-env", "@babel/preset-typescript"],
|
||||||
|
plugins: [
|
||||||
|
"@babel/plugin-transform-runtime",
|
||||||
|
"@babel/plugin-transform-typescript",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: [
|
||||||
|
"style-loader",
|
||||||
|
"css-loader",
|
||||||
|
{
|
||||||
|
loader: "postcss-loader",
|
||||||
|
options: {
|
||||||
|
postcssOptions: {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new CleanWebpackPlugin(),
|
||||||
|
new VueLoaderPlugin(),
|
||||||
|
...customPages.map(
|
||||||
|
entry =>
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
inject: false,
|
||||||
|
template: path.resolve(
|
||||||
|
__dirname,
|
||||||
|
"src",
|
||||||
|
"views",
|
||||||
|
entry,
|
||||||
|
"index.ftl"
|
||||||
|
),
|
||||||
|
filename: `${entry}.ftl`,
|
||||||
|
minify: false,
|
||||||
|
})
|
||||||
|
),
|
||||||
|
new CopyWebpackPlugin({
|
||||||
|
patterns: [
|
||||||
|
{
|
||||||
|
from: path.resolve(__dirname, "src", "static", "login"),
|
||||||
|
to: path.resolve(__dirname, "dist", "theme", THEME_NAME, "login"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
from: path.resolve(__dirname, "src", "static", "jar"),
|
||||||
|
to: path.resolve(__dirname, "dist"),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
...(isDevelopment
|
||||||
|
? {}
|
||||||
|
: {
|
||||||
|
optimization: {
|
||||||
|
removeAvailableModules: false,
|
||||||
|
removeEmptyChunks: false,
|
||||||
|
splitChunks: false,
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
};
|
||||||
Loading…
Reference in a new issue