bugfix(login theme): fix registration shared theme layout issue (#11)

Description Fixed screen layout for wide displays. Why On wide displays the login dialog did look broken. Restrict width to a maximum value. Issue n/a
eclipse-tractusx · Jul 5, 2023 · 3158853 · 3158853
1 parent 91fabb2
commit 3158853
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/import/keycloak-themes/catenax-shared/login/resources/css/Main.css b/import/keycloak-themes/catenax-shared/login/resources/css/Main.css
@@ -76,7 +76,7 @@ section {
   box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
   rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
   rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
-
+  max-width: 520px;
   text-align: center;
 }
 

diff --git a/import/keycloak-themes/catenax-shared/login/resources/js/Main.js b/import/keycloak-themes/catenax-shared/login/resources/js/Main.js
@@ -295,8 +295,8 @@ class FormLogin extends Form {
     constructor(form) {
         super(
             N('div', [
-                N('h3', 'Register to Catena-X' ),
-                N('p', 'Finish the company registration form to join Catena-X automotive network. Please use your email address as username and enter your password.' ),
+                N('h3', 'Register to Catena-X'),
+                N('p', 'Finish the company registration form to join Catena-X automotive network. Please use your email address as username and enter your password.'),
                 form
             ])
         )
@@ -331,8 +331,8 @@ class FormUpdate extends Form {
     constructor(form) {
         super(
             N('div', [
-                N('h3', 'Update your password' ),
-                N('p', 'Enter a new login password and confirm it.' ),
+                N('h3', 'Update your password'),
+                N('p', 'Enter a new login password and confirm it.'),
                 form
             ])
         )
@@ -396,7 +396,13 @@ class FormUpdate extends Form {
 class FormReset extends Form {
 
     constructor(form) {
-        super(form)
+        super(
+            N('div', [
+                N('h3', 'Reset your password'),
+                N('p', 'Enter your username or email address.'),
+                form
+            ])
+        )
     }
 
 }
@@ -408,7 +414,7 @@ class Section extends Viewable {
             N('section',
                 N('div', [
                     N('div', null, { class: 'user-icon' }),
-                ], { class: 'section-header' } )
+                ], { class: 'section-header' })
             )
         )
     }