Add login styling

META-INF/keycloak-themes.json

@@ -1,6 +1,6 @@
 {
     "themes": [{
         "name" : "nl-design-system",
-        "types": [ "login", "account" ]
+        "types": [ "login", "account", "welcome", "common" ]
     }]
 }

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

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;
+}

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