update login page style

Signed-off-by: cbh778899 <[email protected]>

components/account-page/index.js

@@ -1,5 +1,6 @@
-import capitalizeFirstLetter from "../../tools/capitalizeFirstLetter.js";
 import useUser from '../../global/useUser.js'
+import capitalizeFirstLetter from "../../tools/capitalizeFirstLetter.js";
+import getSVG from "../../tools/svgs.js";
 
 let account_dialog = null, input_details_main = null;
 let current_user = {}, isRegister = false;
@@ -108,7 +109,9 @@ function submitDetails(evt) {
         const new_password = evt.target['new-password'].value;
         const repeat_new_password = evt.target['repeat-new-password'].value;
         const submit_values = {}
-        if(email) submit_values.email = email;
+        if(email && email !== current_user.email) {
+            submit_values.email = email;
+        }
         if(new_password) {
             if(repeat_new_password !== new_password) {
                 evt.target['repeat-new-password'].classList.add('error');
@@ -178,13 +181,35 @@ function createAccountInputFields({
     input.type = type || 'text';
     input.name = index;
     input.value = value;
+    input.placeholder = ' '
+    input.autocomplete = 'off'
     if(readonly) input.readOnly = 'true';
 
+    field_container.onclick = () => input.focus();
     field_container.appendChild(title_element);
     field_container.appendChild(input);
 
     if(type === 'password') {
-        // TODO
+        let show_password = false;
+
+        const eye_icon = document.createElement('div');
+        eye_icon.className = 'password-eye-icon clickable';
+
+        const toggleShowPassword = () => {
+            if(!show_password) {
+                input.type = 'password';
+                eye_icon.innerHTML = getSVG('eye');
+                eye_icon.title = 'Show Password';
+            } else {
+                input.type = 'text';
+                eye_icon.innerHTML = getSVG('eye-slash');
+                eye_icon.title = 'Hide Password';
+            }
+            show_password = !show_password;
+        }
+        toggleShowPassword();
+        eye_icon.onclick = toggleShowPassword;
+        field_container.appendChild(eye_icon);
     }
 
     return field_container;

styles/account_page.css

@@ -29,7 +29,7 @@
 
 .account-main .input-details-main {
     --item-width: 230px;
-    --item-height: 40px;
+    --item-height: 45px;
 
     position: absolute;
     width: calc(var(--details-width) - 20px);
@@ -45,38 +45,70 @@
 }
 
 .input-details-main .account-field-container {
-    width: fit-content;
-    height: fit-content;
+    width: var(--item-width);
+    height: var(--item-height);
     position: relative;
-    margin-bottom: 10px;
+    margin-bottom: 15px;
     max-width: 100%;
+    border: 1px solid gray;
+    border-radius: 5px;
+}
+.input-details-main .account-field-container:hover {
+    cursor: text;
+}
+
+.input-details-main .account-field-container:has(input:focus) {
+    border-color: dodgerblue;
 }
 
 .input-details-main .account-field-container .title {
+    position: absolute;
+    color: gray;
     font-size: 18px;
-    margin-bottom: 5px;
-    font-weight: bold;
-    position: relative;
-    max-width: 100%;
+    width: 100%;
+    height: 100%;
+    line-height: var(--item-height);
+    left: 10px;
+    top: 0px;
+    transition-duration: .5s;
+    transform-origin: top left;
+    user-select: none;
+}
+
+.input-details-main .account-field-container:has(input:focus) .title,
+.input-details-main .account-field-container:has(input:not(:placeholder-shown)) .title
+ {
+    transform: scale(0.6);
+}
+.input-details-main .account-field-container:has(input:focus) .title {
+    color: dodgerblue;
 }
 
 .input-details-main .account-field-container input {
-    width: var(--item-width);
-    height: var(--item-height);
-    border: 1px solid gray;
-    border-radius: 5px;
+    width: 100%;
+    height: 30%;
+    border: none;
     box-sizing: border-box;
     padding: 0px 15px;
     font-size: 16px;
-    position: relative;
+    position: absolute;
     max-width: 100%;
+    bottom: 5px;
+    background-color: transparent;
 }
 .input-details-main .account-field-container input:focus {
     outline: none;
 }
-.input-details-main .account-field-container input.error {
-    border-color: red;
+
+.password-eye-icon {
+    position: absolute;
+    height: var(--item-height);
+    width: var(--item-height);
+    display: flex;
+    align-items: center;
+    right: 0;
 }
+.password-eye-icon svg { margin: auto; }
 
 .input-details-main hr {
     width: var(--item-width);
@@ -89,15 +121,15 @@
 
 .input-details-main .function-btn {
     width: var(--item-width);
-    height: calc(var(--item-height) + 5px);
+    height: calc(var(--item-height) - 3px);
     border-radius: 16px;
     background-color: dodgerblue;
     color: white;
     box-sizing: border-box;
     border: none;
     font-size: 18px;
     font-weight: bold;
-    margin-top: 20px;
+    margin-top: 17px;
     display: block;
     position: relative;
     max-width: 100%;