diff --git a/META-INF/keycloak-themes.json b/META-INF/keycloak-themes.json index 54c0bb4..6241da5 100755 --- a/META-INF/keycloak-themes.json +++ b/META-INF/keycloak-themes.json @@ -1,6 +1,6 @@ { "themes": [{ "name" : "nl-design-system", - "types": [ "login", "account" ] + "types": [ "login", "account", "welcome", "common" ] }] } diff --git a/README.md b/README.md index 14594de..e075714 100644 --- a/README.md +++ b/README.md @@ -58,10 +58,15 @@ In de templates kunnen omgevings variablen omgezet worden naar text. We gebruike Om een indruk te geven van de template worden er wat screenshots beschikbaar gesteld ### Welkom pagina + ![Welkom pagina 1](assets/welkom-setup.png) ![Welkom pagina 2](assets/welkom-toegang.png) ![Welkom pagina 3](assets/welkom-maak-gebruiker.png) ### Login pagina +![Login pagina 1](assets/login.png) +![Login pagina 1](assets/login-taal.png) +![Login pagina 1](assets/login-error.png) + ### Account pagina diff --git a/assets/login-error.png b/assets/login-error.png new file mode 100644 index 0000000..d4889ee Binary files /dev/null and b/assets/login-error.png differ diff --git a/assets/login-taal.png b/assets/login-taal.png new file mode 100644 index 0000000..7eafb0d Binary files /dev/null and b/assets/login-taal.png differ diff --git a/assets/login.png b/assets/login.png new file mode 100644 index 0000000..0a07069 Binary files /dev/null and b/assets/login.png differ diff --git a/theme/nl-design-system/login/messages/messages_en.properties b/theme/nl-design-system/login/messages/messages_en.properties new file mode 100644 index 0000000..e69de29 diff --git a/theme/nl-design-system/login/messages/messages_nl.properties b/theme/nl-design-system/login/messages/messages_nl.properties new file mode 100644 index 0000000..e69de29 diff --git a/theme/nl-design-system/login/resources/css/login.css b/theme/nl-design-system/login/resources/css/login.css new file mode 100644 index 0000000..ad9e674 --- /dev/null +++ b/theme/nl-design-system/login/resources/css/login.css @@ -0,0 +1,31 @@ + + +.language-dropdown { + position: relative; + display: inline; +} + +.language-dropdown-content { + display: none; + position: absolute; + background-color: #f9f9f9; + min-width: 160px; + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + + +.language-dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +.language-dropdown-content a:hover { + background-color: #f1f1f1; +} + +.language-dropdown:hover .language-dropdown-content { + display: block; +} diff --git a/theme/nl-design-system/login/template.ftl b/theme/nl-design-system/login/template.ftl new file mode 100644 index 0000000..20a42d3 --- /dev/null +++ b/theme/nl-design-system/login/template.ftl @@ -0,0 +1,236 @@ +<#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false> + + lang="${locale.currentLanguageTag}"> + + + + + + <#if properties.meta?has_content> + <#list properties.meta?split(' ') as meta> + + + + ${msg("doLogIn")} ${properties.organizationName} - ${realm.displayName} + + <#if properties.stylesCommon?has_content> + <#list properties.stylesCommon?split(' ') as style> + + + + <#if properties.styles?has_content> + <#list properties.styles?split(' ') as style> + + + + <#if properties.scripts?has_content> + <#list properties.scripts?split(' ') as script> + + + + + + <#if scripts??> + <#list scripts as script> + + + + + + + + +
+
+ +
+
+ +
+
+
+ +
+
+ +
+
+
+
+ <#if !(auth?has_content && auth.showUsername() && !auth.showResetCredentials())> + <#if displayRequiredFields> +
+ +
+
+
+ * ${msg("requiredFields")} +
+
+
+
+

<#nested "header">

+ <#else> +

<#nested "header">

+ + <#else> + <#if displayRequiredFields> +
+ +
+
+
+ * ${msg("requiredFields")} +
+
+
+
+ <#nested "show-username"> + + + ${msg("restartLoginTooltip")} + + <#else> + <#nested "show-username"> + + + ${msg("restartLoginTooltip")} + + + + + <#if displayMessage && message?has_content && (message.type != 'warning' || !isAppInitiatedAction??)> + +
+ +
+
${kcSanitize(message.summary)?no_esc}
+
+
+ + + <#nested "form"> + + <#if auth?has_content && auth.showTryAnotherWayLink()> + +
+ +
+

+ +

+
+
+ + + <#nested "socialProviders"> + + <#if displayInfo> + <#nested "info"> + +
+
+
+
+
+ + + diff --git a/theme/nl-design-system/login/theme.properties b/theme/nl-design-system/login/theme.properties index 31b6521..966554d 100644 --- a/theme/nl-design-system/login/theme.properties +++ b/theme/nl-design-system/login/theme.properties @@ -1,4 +1,25 @@ parent=base import=common/keycloak - +common=common/nl-design-system locales=en,nl +stylesCommon=assets/fonts/index.css assets/icons/index.css assets/images/index.css component-library-css/index.css design-tokens/index.css +styles=css/login.css + +meta=viewport==width=device-width,initial-scale=1 + +organizationName=${env.ORGANIZATION:Identiteits service} + +kcBodyClass=rvo-theme rvo-responsive +kcHeaderClass=rvo-header + + +kcFormGroupClass=rvo-form +kcLabelClass=rvo-label +kcInputClass=utrecht-textbox utrecht-textbox--html-input utrecht-textbox--lg +kcInputErrorMessageClass=rvo-alert rvo-alert--error rvo-alert--padding-md +kcButtonClass=utrecht-button utrecht-button--rvo-md +kcButtonPrimaryClass=utrecht-button--primary-action + +kcFormPasswordVisibilityButtonClass=utrecht-button utrecht-button--rvo-tertiary-action utrecht-button--rvo-md +kcFormPasswordVisibilityIconShow=utrecht-icon rvo-icon rvo-icon-info rvo-icon--xl rvo-icon--hemelblauw +kcFormPasswordVisibilityIconHide=utrecht-icon rvo-icon rvo-icon-kruis rvo-icon--xl rvo-icon--hemelblauw