feat(forms): add password hide / visible button

-

src/components/forms/formGenerator.js

@@ -1,5 +1,8 @@
 import React, { useState } from 'react'
 
+import passwordVisibleImg from '../../images/password-visible.png'
+import passwordHiddenImg from '../../images/password-hidden.png'
+
 /**
  *
  * @param { [ {}, {}, ...{} ] } inputList - list of dicts with info about input
@@ -180,19 +183,29 @@ const TextInputGenerator = ({
 const PasswordInputGenerator = ({
     input, info
 }) => {
+
+    const [contentIsHidden, setContentIsHidden] = useState(true)
+
     return (
         <div className="form-field">
             <label>
-                {input.name}
+                { input.name }
             </label>
-            <input
+            <div className="horizontal-container-input">
-                id={input.name + info.action + info.endpoint + 'Input'}
+                <input
-                autoComplete='off'
+                    id={input.name + info.action + info.endpoint + 'Input'}
-                ref={input.ref}
+                    autoComplete='off'
-                type='password'
+                    ref={input.ref}
-                onChange={input.onChange}
+                    type={ contentIsHidden ? 'password' : 'text' }
-                className={ [ "Empty", "Success"].includes(input.validationInfo) ? "" : "input-incorrect" }
+                    onChange={input.onChange}
-            />
+                    className={ [ "Empty", "Success"].includes(input.validationInfo) ? "" : "input-incorrect" }
+                />
+                <img
+                    src={ contentIsHidden ? passwordHiddenImg : passwordVisibleImg }
+                    className={ [ "Empty", "Success"].includes(input.validationInfo) ? "" : "input-visible-incorrect" }
+                    onClick={ () => { setContentIsHidden(!contentIsHidden) } }
+                />
+            </div>
             <div
                 className="popup"
                 style={ [ "Empty", "Success"].includes(input.validationInfo) ? {"display": "none", "height": "0px"} : {"display": "block"} }
@@ -200,6 +213,7 @@ const PasswordInputGenerator = ({
                 <div className="popup-content">
                     { input.validationInfo }
                 </div>
+
             </div>
         </div>
     )

src/styles/general.scss

@@ -161,6 +161,7 @@ body, html {
     position: relative; // Required for z-index to take effect
 
     .form-field {
+      width: 100%;
       margin-bottom: 15px;
 
       label {
@@ -197,6 +198,28 @@ body, html {
           background: rgba(120,8,0,1);
           border: 1px solid red;
       }
+
+      .horizontal-container-input {
+        display: block;
+
+        input {
+          width: 80%;
+        }
+
+        img {
+          float: right;
+          width: 20px;
+          height: 20px;
+          padding-top: 5%;
+          filter: invert(27%) sepia(97%) saturate(3498%) hue-rotate(97deg) brightness(98%) contrast(103%);
+        }
+
+        // convert hex to filter: https://codepen.io/sosuke/pen/Pjoqqp
+
+        .input-visible-incorrect {
+          filter: invert(8%) sepia(63%) saturate(4888%) hue-rotate(8deg) brightness(113%) contrast(112%);
+        }
+      }
     }
 
     .popup {