From 470869e0ab36f55a6adad1ed78808075bc784db6 Mon Sep 17 00:00:00 2001
From: cartja <carina@sunet.se>
Date: Mon, 16 Dec 2024 16:59:06 +0100
Subject: [PATCH] hide meter if field empty

---
 .../Dashboard/ChangePasswordCustom.tsx        |  8 +-
 src/styles/_ChangePassword.scss               | 98 ++++++++++---------
 2 files changed, 55 insertions(+), 51 deletions(-)

diff --git a/src/components/Dashboard/ChangePasswordCustom.tsx b/src/components/Dashboard/ChangePasswordCustom.tsx
index 27c1a5131..834675fac 100644
--- a/src/components/Dashboard/ChangePasswordCustom.tsx
+++ b/src/components/Dashboard/ChangePasswordCustom.tsx
@@ -57,13 +57,13 @@ export default function ChangePasswordCustomForm(props: ChangePasswordCustomForm
       render={(formProps) => {
         return (
           <form id="passwords-view-form" onSubmit={formProps.handleSubmit}>
-            <fieldset className="password-format">
-              <label>
+            <fieldset>
+              <legend>
                 <FormattedMessage
                   defaultMessage="Tip: Choose a strong password"
                   description="help text for custom password label"
                 />
-              </label>
+              </legend>
               <ul id="password-custom-help">
                 {[
                   <FormattedMessage
@@ -90,9 +90,7 @@ export default function ChangePasswordCustomForm(props: ChangePasswordCustomForm
                   return <li key={list.key}>{list}</li>;
                 })}
               </ul>
-            </fieldset>
 
-            <fieldset className="change-password-custom-inputs">
               <FinalField
                 name="custom"
                 component={NewPasswordInput}
diff --git a/src/styles/_ChangePassword.scss b/src/styles/_ChangePassword.scss
index b6cf920d1..84ef4880f 100644
--- a/src/styles/_ChangePassword.scss
+++ b/src/styles/_ChangePassword.scss
@@ -19,47 +19,53 @@ fieldset.toggle-change-password-options {
   margin: 1rem;
 }
 
-meter {
-  width: 100%;
-  //height: 2.5rem;
-}
-meter::-webkit-meter-bar {
-  background: $border-gray;
-  border-color: $border-gray;
-  border-width: 2px;
-}
-meter[value="1"]::-webkit-meter-optimum-value {
-  background: $txt-gray;
-  border-top-left-radius: 10px;
-  border-bottom-left-radius: 10px;
-}
-meter[value="2"]::-webkit-meter-optimum-value {
-  background: $txt-gray;
-  border-top-left-radius: 10px;
-  border-bottom-left-radius: 10px;
-}
-meter[value="3"]::-webkit-meter-optimum-value {
-  background: $txt-gray;
-  border-top-left-radius: 10px;
-  border-bottom-left-radius: 10px;
-}
-meter[value="4"]::-webkit-meter-optimum-value {
-  background: $txt-gray;
-  border-top-left-radius: 10px;
-  border-bottom-left-radius: 10px;
-}
+/* Password strength meter */
 
 .meter-wrapper {
-  border: 2px solid $border-gray;
+  //border: 2px solid $border-gray;
   background: $border-gray;
   border-radius: 10px;
   height: 20px;
   overflow: hidden;
   line-height: 0;
+
+  .form-field-error-area:empty + & {
+    display: none;
+  }
+}
+meter {
+  width: 100%;
+  height: 20px;
+  border: none;
 }
 
-/* Gecko based browsers */
+/* Webkit browsers */
+meter::-webkit-meter-bar {
+  height: 20px;
+  //background: $border-gray;
+  background: repeating-linear-gradient(-55deg, $border-gray, $border-gray 10px, $bg-gray 10px, $bg-gray 20px);
+  // border-color: $border-gray;
+  // border-width: 2px;
+}
+meter::-webkit-meter-optimum-value {
+  background: $txt-gray;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+}
+// meter[value="1"]::-webkit-meter-optimum-value {
+//   background: $$error-red;
+// }
+// meter[value="2"]::-webkit-meter-optimum-value {
+//   background: $error-red;
+// }
+// meter[value="3"]::-webkit-meter-optimum-value {
+//   background: $success-green;
+// }
+// meter[value="4"]::-webkit-meter-optimum-value {
+//   background: $success-green;
+// }
 
+/* Gecko browsers */
 :-moz-meter-optimum::-moz-meter-bar {
   background: $txt-gray;
 }
@@ -79,22 +85,22 @@ meter[value="4"]::-webkit-meter-optimum-value {
   }
 }
 
-meter {
-  display: block;
-  margin: 0 auto;
+// meter {
+//   display: block;
+//   margin: 0 auto;
 
-  width: 550px;
-  height: 25px;
+//   width: 550px;
+//   height: 25px;
 
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
+//   -webkit-appearance: none;
+//   -moz-appearance: none;
+//   appearance: none;
 
-  border: 1px solid #ccc;
-  border-radius: 3px;
+//   border: 1px solid #ccc;
+//   border-radius: 3px;
 
-  /* Firefox */
-  background: none; /* Required to get rid of the default background prop. */
-  background-color: whiteSmoke;
-  box-shadow: 0 5px 5px -5px #333 inset;
-}
+//   /* Firefox */
+//   background: none; /* Required to get rid of the default background prop. */
+//   background-color: whiteSmoke;
+//   box-shadow: 0 5px 5px -5px #333 inset;
+// }