Identity recovery tweaks - updated layout, scss, repaired some compon…

…ents and icons
Evolveum · Sep 4, 2023 · de84cf4 · de84cf4
1 parent d3186e8
commit de84cf4
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 33 deletions.
diff --git a/gui/admin-gui/src/frontend/scss/_admin-lte-overrides.scss b/gui/admin-gui/src/frontend/scss/_admin-lte-overrides.scss
@@ -7,6 +7,10 @@
 
 .user-panel {
   border-bottom: 0 !important;
+
+  &.info-box {
+    min-height:70px;
+  }
 }
 
 .btn-default {

diff --git a/gui/admin-gui/src/frontend/scss/midpoint.scss b/gui/admin-gui/src/frontend/scss/midpoint.scss
@@ -1745,8 +1745,20 @@ span.yui-skin-sam {
   width: 600px !important;
 }
 
-.login-box {
+@mixin login-box {
   width: 400px !important;
+
+  & .login-card-body .spacer hr {
+    border-color:#dfdfdf;
+  }
+
+  & .login-card-body .spacer span {
+    color:#dfdfdf;
+  }
+
+  & .login-card-body .user-panel.info-box .image img {
+    width:2.4rem;
+  }
 }
 
 .info-box.activity-item-processing > .info-box-content > .progress-description {

diff --git a/...a/com/evolveum/midpoint/gui/impl/page/login/module/PageAbstractAttributeVerification.html b/...a/com/evolveum/midpoint/gui/impl/page/login/module/PageAbstractAttributeVerification.html
@@ -19,7 +19,7 @@
             <label wicket:id="attributeName"></label>
             <div wicket:id="attributeValue"/>
         </div>
-        <div>
+        <div class="mt-4">
             <input type="submit" class="btn btn-primary login-panel-control" wicket:message="value:PageBase.button.send" />
         </div>
     </form>

diff --git a/...va/com/evolveum/midpoint/gui/impl/page/login/module/PageAbstractAuthenticationModule.html b/...va/com/evolveum/midpoint/gui/impl/page/login/module/PageAbstractAuthenticationModule.html
@@ -15,9 +15,9 @@
     <wicket:child/>
 
     <wicket:enclosure child="flowLinkContainer">
-        <div class="d-flex align-items-center my-2">
+        <div class="d-flex align-items-center my-2 py-1 spacer">
             <hr class="w-100" style="border-color: #818d98;">
-            <span class="mx-3 text-secondary">OR</span>
+            <span class="mx-3">OR</span>
             <hr class="w-100" style="border-color: #818d98;">
         </div>
 

diff --git a/...rc/main/java/com/evolveum/midpoint/gui/impl/page/login/module/PageArchetypeSelection.html b/...rc/main/java/com/evolveum/midpoint/gui/impl/page/login/module/PageArchetypeSelection.html
@@ -20,8 +20,8 @@
                 <div class="card mb-0 simple-tile selectable" wicket:id="archetype"/>
             </wicket:container>
         </div>
-        <div>
-            <input type="submit" class="btn btn-primary mt-4 login-panel-control" wicket:message="value:PageBase.button.send" />
+        <div class="mt-4">
+            <input type="submit" class="btn btn-primary login-panel-control" wicket:message="value:PageBase.button.send" />
         </div>
     </form>
 </wicket:extend>

diff --git a/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/impl/page/login/module/PageLogin.html b/gui/admin-gui/src/main/java/com/evolveum/midpoint/gui/impl/page/login/module/PageLogin.html
@@ -16,10 +16,10 @@
             </label>
             <div class="input-group d-flex login-panel-control">
                 <input wicket:id="username" name="username" type="text" class="form-control form-control-sm">
-                <div class="input-group-append">
-                    <div class="input-group-text">
-                        <span class="fas fa-user"></span>
-                    </div>
+                <div class="input-group-prepend">
+                    <span class="input-group-text">
+                        <i class="fas fa-user"></i>
+                    </span>
                 </div>
             </div>
         </div>
@@ -30,9 +30,9 @@
             <div class="input-group d-flex login-panel-control">
                 <input name="password" type="password" class="form-control form-control-sm d-flex flex-wrap gap-2">
                 <div class="input-group-append">
-                    <div class="input-group-text">
-                        <span class="fas fa-lock"></span>
-                    </div>
+                    <span class="input-group-text">
+                        <i class="fas fa-lock"></i>
+                    </span>
                 </div>
             </div>
         </div>
@@ -45,8 +45,6 @@
         <div wicket:id="csrfField"/>
     </form>
 
-
-
 </wicket:extend>
 
 </html>
diff --git a/.../src/main/java/com/evolveum/midpoint/gui/impl/page/lostusername/IdentityDetailsPanel.html b/.../src/main/java/com/evolveum/midpoint/gui/impl/page/lostusername/IdentityDetailsPanel.html
@@ -8,27 +8,29 @@
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org">
 <wicket:panel>
-    <div wicket:id="headerPanel" class="d-flex flex-wrap gap-2 w-100">
-        <div class="image col-md-2 mt-3">
-            <img wicket:id="photo" class="user-image img-circle elevation-2"/>
+    <div wicket:id="headerPanel" class="d-flex flex-wrap gap-1 w-100 align-items-center px-1">
+        <div class="image col-auto pl-2">
+            <img wicket:id="photo" class="user-image img-circle"/>
         </div>
-        <div class="info col-md-8">
-            <div class="text-lg" wicket:id="displayName"/>
-            <div class="text-md" wicket:id="archetypeLabel"/>
+        <div class="info col py-0">
+            <div class="text-md" wicket:id="displayName"/>
+            <div class="text-sm text-secondary" wicket:id="archetypeLabel"/>
         </div>
-        <a class="pull-right col-md-1 mt-3" wicket:id="expandButton">
+        <div class="col-auto">
+        <a class="btn btn-tool pull-right m-0" wicket:id="expandButton">
             <i wicket:id="arrowIcon"></i>
         </a>
+        </div>
     </div>
     <wicket:enclosure child="itemsPanel">
-        <div class="border-top w-100">
-            <div wicket:id="itemsPanel" class="d-flex flex-wrap gap-2 mt-2">
-                <label class="col-md-5" wicket:id="itemName"></label>
+        <div class="border-top d-flex flex-column pt-3 gap-2 w-100">
+            <div wicket:id="itemsPanel" class="d-flex flex-wrap gap-2">
+                <label class="col-md-4 m-0" wicket:id="itemName"></label>
                 <div wicket:id="itemValue"/>
             </div>
         </div>
-        <a wicket:id="confirmIdentity" class="d-flex btn btn-primary justify-content-center w-100 mt-2">
-            <i class="mt-1 mr-2 fa-fw fa fa-check" />
+        <a wicket:id="confirmIdentity" class="d-flex btn btn-primary align-items-center justify-content-center w-100 mt-2">
+            <i class="mr-2 fa fa-check" />
             <wicket:message key="PageIdentityRecovery.confirmIdentity"/>
         </a>
     </wicket:enclosure>

diff --git a/.../src/main/java/com/evolveum/midpoint/gui/impl/page/lostusername/PageIdentityRecovery.html b/.../src/main/java/com/evolveum/midpoint/gui/impl/page/lostusername/PageIdentityRecovery.html
@@ -11,16 +11,19 @@
 <html xmlns:wicket="http://wicket.apache.org">
 <body>
 <wicket:extend>
-    <div wicket:id="recoveredIdentities" class="user-panel info-box my-3 pb-2 ">
-        <div wicket:id="detailsPanel" class="d-flex flex-wrap gap-2 w-100" />
+    <div class="d-flex flex-column gap-2">
+        <div wicket:id="recoveredIdentities" class="user-panel info-box mb-1">
+            <div wicket:id="detailsPanel" class="d-flex flex-wrap gap-2 w-100" />
+        </div>
     </div>
-    <div wicket:id="paging" class="d-flex gap-2 w-100 justify-content-center" />
+    <div wicket:id="paging" class="d-flex gap-2 w-100 justify-content-center mt-3 mb-1" />
     <div>
-        <a wicket:id="restartFlow" class="d-flex btn btn-default justify-content-center w-100 mt-4">
-            <i class="mt-1 mr-2 fa fa-sync-alt" />
+        <a wicket:id="restartFlow" class="d-flex btn btn-default justify-content-center w-100 mt-4 align-items-center">
+            <i class="mr-2 fa fa-sync-alt" />
             <wicket:message key="PageIdentityRecovery.restartFlow"/>
         </a>
-        <a wicket:id="registrationLink" class="d-flex justify-content-center w-100 mt-4">
+        <a wicket:id="registrationLink" class="d-flex btn btn-default justify-content-center w-100 mt-2 align-items-center">
+            <i class="mr-2 fa fa-solid fa-user-plus" />
             <wicket:message key="PageLogin.registerNewAccount"/>
         </a>
     </div>