From fa75d7a9ca817d6708991679584f08dcbbd8202b Mon Sep 17 00:00:00 2001
From: wambuipixel <kiokowambui015@gmail.com>
Date: Mon, 18 Mar 2024 15:11:32 +0300
Subject: [PATCH 1/8] Add password visibility eye toggle functionality

Signed-off-by: wambuipixel <kiokowambui015@gmail.com>
---
 ui/web/templates/login.html | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/ui/web/templates/login.html b/ui/web/templates/login.html
index eb2aa669..2cbed090 100644
--- a/ui/web/templates/login.html
+++ b/ui/web/templates/login.html
@@ -51,6 +51,7 @@ <h2>Login</h2>
                         id="password"
                         placeholder="Password"
                       />
+                      <span class ="password-toggle-icon"><i class="fas fa-eye"></i></i></span>
                     </div>
                     <div id="passwordError" class="text-danger"></div>
                   </div>
@@ -153,7 +154,8 @@ <h5 class="modal-title" id="forgotPasswordModalLabel">Enter email</h5>
         });
       </script>
       <script>
-        const passwordField = document.querySelector(".password-field");
+        const passwordField = document.getElementById("password");
+        const togglePassword = document.querySelector(".password-toggle-icon i");
         const emailField = document.querySelector(".email-field");
         const loginError = document.getElementById("loginError");
         const pathPrefix = "{{ pathPrefix }}";
@@ -176,11 +178,25 @@ <h5 class="modal-title" id="forgotPasswordModalLabel">Enter email</h5>
                   window.location.href = `${pathPrefix}/tokens/secure`;
                   break;
               }
+              
             })
+        
             .catch((error) => {
               console.error("error submitting login form: ", error);
             });
-        }
+        }  
+        togglePassword.addEventListener("click", function () {
+         if (passwordField.type === "password")  {
+             passwordField.type = "text";
+             togglePassword.classList.remove("fa-eye");
+             togglePassword.classList.add("fa-eye-slash");
+             } else {
+             passwordField.type = "password";
+             togglePassword.classList.remove("fa-eye-slash");
+             togglePassword.classList.add("fa-eye");
+            }
+        })    
+        
 
         function showError(errorMessage) {
           loginError.innerHTML = errorMessage;

From 27968302f1afca3076a23f615b8ea6be297b4e88 Mon Sep 17 00:00:00 2001
From: wambuipixel <kiokowambui015@gmail.com>
Date: Mon, 18 Mar 2024 19:26:06 +0300
Subject: [PATCH 2/8] Add password visibility eye toggle functionality on
 registration, update password and reset password pages

Signed-off-by: wambuipixel <kiokowambui015@gmail.com>
---
 ui/web/templates/registration.html   | 19 +++++++++++++++++--
 ui/web/templates/resetpassword.html  | 21 +++++++++++++++++++++
 ui/web/templates/updatepassword.html | 20 +++++++++++++++++++-
 3 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/ui/web/templates/registration.html b/ui/web/templates/registration.html
index b108f7a2..63860637 100644
--- a/ui/web/templates/registration.html
+++ b/ui/web/templates/registration.html
@@ -59,11 +59,12 @@ <h2>Register</h2>
                       <i class="fas fa-solid fa-lock"></i>
                       <input
                         class="p-3 w-100"
-                        type="password"
+                        type= "password"
                         name="password"
                         id="password"
                         placeholder="Password"
                       />
+                      <span class ="password-toggle-icon"><i class="fas fa-eye"></i></span>
                     </div>
                     <div id="passwordError" class="text-danger"></div>
                   </div>
@@ -126,13 +127,26 @@ <h2>Register</h2>
       </script>
       <script>
         const nameField = document.querySelector(".name-field");
-        const passwordField = document.querySelector(".password-field");
+        const passwordField = document.getElementById("password");
+        const togglePassword = document.querySelector(".password-toggle-icon i");
         const emailField = document.querySelector(".email-field");
         const registrationError = document.getElementById("registrationError");
 
         document.getElementById("register-button").addEventListener("click", () => {
           registrationError.innerHTML = "";
         });
+         //code for toggling the visibility of the password
+        togglePassword.addEventListener("click", function () {
+         if (passwordField.type === "password")  {
+             passwordField.type = "text";
+             togglePassword.classList.remove("fa-eye");
+             togglePassword.classList.add("fa-eye-slash");
+             } else {
+             passwordField.type = "password";
+             togglePassword.classList.remove("fa-eye-slash");
+             togglePassword.classList.add("fa-eye");
+            }
+        })
 
         function submitRegistrationForm() {
           event.preventDefault();
@@ -158,6 +172,7 @@ <h2>Register</h2>
               console.error("error submitting login form: ", error);
             });
         }
+        
 
         function showError(errorMessage) {
           registrationError.innerHTML = errorMessage;
diff --git a/ui/web/templates/resetpassword.html b/ui/web/templates/resetpassword.html
index aa3afb06..2719c01a 100644
--- a/ui/web/templates/resetpassword.html
+++ b/ui/web/templates/resetpassword.html
@@ -39,6 +39,7 @@ <h2>Reset Password</h2>
                         placeholder="Password"
                         required
                       />
+                      <span class ="password-toggle-icon"><i class="fas fa-eye"></i></i></span>
                       <div id="passwordError" class="text-danger"></div>
                     </div>
                   </div>
@@ -53,6 +54,7 @@ <h2>Reset Password</h2>
                         placeholder="confirm Password"
                         required
                       />
+                      <span class ="password-toggle-icon"><i class="fas fa-eye"></i></i></span>
                       <div id="confirmPasswordError" class="text-danger"></div>
                     </div>
                   </div>
@@ -70,6 +72,9 @@ <h2>Reset Password</h2>
           var password = document.getElementById("password").value;
           var confirmPassword = document.getElementById("confirmPassword").value;
 
+          var passwordError = document.getElementById("passwordError");
+          var confirmPasswordError = document.getElementById("confirmPasswordError");
+
           passwordError.innerHTML = "";
           confirmPasswordError.innerHTML = "";
           var isValid = true;
@@ -84,6 +89,22 @@ <h2>Reset Password</h2>
           }
           return isValid;
         }
+        //code for toggling the visibility of the password
+        const togglePassword = document.querySelectorAll(".password-toggle-icon i");
+        togglePassword.forEach(icon => {
+          icon.addEventListener("click", function () {
+            const passwordField = icon.parentElement.previousElementSibling;
+            if (passwordField.type === "password") {
+              passwordField.type = "text";
+              icon.classList.remove("fa-eye");
+              icon.classList.add("fa-eye-slash");
+            } else {
+              passwordField.type = "password";
+              icon.classList.remove("fa-eye-slash");
+              icon.classList.add("fa-eye");
+            }
+          });
+        }) 
       </script>
     </body>
   </html>
diff --git a/ui/web/templates/updatepassword.html b/ui/web/templates/updatepassword.html
index 27420c45..5c61c58a 100644
--- a/ui/web/templates/updatepassword.html
+++ b/ui/web/templates/updatepassword.html
@@ -34,6 +34,7 @@ <h2>Update Password</h2>
                           placeholder="Old password"
                           required
                         />
+                        <span class ="password-toggle-icon"><i class="fas fa-eye"></i></span>
                         <div id="oldpassError" class="text-danger"></div>
                       </div>
                     </div>
@@ -48,6 +49,7 @@ <h2>Update Password</h2>
                           placeholder="New password"
                           required
                         />
+                        <span class ="password-toggle-icon"><i class="fas fa-eye"></i></span>
                         <div id="newpassError" class="text-danger"></div>
                       </div>
                     </div>
@@ -100,7 +102,22 @@ <h2>Update Password</h2>
               return false;
             });
         }
-
+        //code for toggling the visibility of the password
+        const togglePassword = document.querySelectorAll(".password-toggle-icon i");
+        togglePassword.forEach(icon => {
+          icon.addEventListener("click", function () {
+            const passwordField = icon.parentElement.previousElementSibling;
+            if (passwordField.type === "password") {
+              passwordField.type = "text";
+              icon.classList.remove("fa-eye");
+              icon.classList.add("fa-eye-slash");
+            } else {
+              passwordField.type = "password";
+              icon.classList.remove("fa-eye-slash");
+              icon.classList.add("fa-eye");
+            }
+          });
+        })
         function showError(errorMessage) {
           var loginError = document.getElementById("oldpassError");
           loginError.innerHTML = errorMessage;
@@ -109,3 +126,4 @@ <h2>Update Password</h2>
     </body>
   </html>
 {{ end }}
+        
\ No newline at end of file

From 5e1fc511af84007c141e9b51d3eec79be990110a Mon Sep 17 00:00:00 2001
From: wambuipixel <kiokowambui015@gmail.com>
Date: Tue, 19 Mar 2024 11:14:46 +0300
Subject: [PATCH 3/8] Code Formatting

Signed-off-by: wambuipixel <kiokowambui015@gmail.com>
---
 internal/postgres/postgres.go        |  8 ++++----
 package-lock.json                    |  2 +-
 ui/web/templates/login.html          |  1 +
 ui/web/templates/registration.html   | 27 +++++++++++++--------------
 ui/web/templates/updatepassword.html |  9 ++++-----
 5 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/internal/postgres/postgres.go b/internal/postgres/postgres.go
index 20740530..24898e59 100644
--- a/internal/postgres/postgres.go
+++ b/internal/postgres/postgres.go
@@ -20,10 +20,10 @@ var (
 // Config defines the options that are used when connecting to the PostgresSQL instance.
 type Config struct {
 	Host        string `env:"MG_UI_DB_HOST"           envDefault:"localhost"`
-	Port        string `env:"MG_UI_DB_PORT"           envDefault:"5432"`
-	User        string `env:"MG_UI_DB_USER"           envDefault:"magistrala-ui"`
-	Pass        string `env:"MG_UI_DB_PASS"           envDefault:"magistrala-ui"`
-	Name        string `env:"MG_UI_DB_NAME"           envDefault:"dashboards"`
+	Port        string `env:"MG_UI_DB_PORT"           envDefault:"6007"`
+	User        string `env:"MG_UI_DB_USER"           envDefault:"magistrala"`
+	Pass        string `env:"MG_UI_DB_PASS"           envDefault:"magistrala"`
+	Name        string `env:"MG_UI_DB_NAME"           envDefault:"ui"`
 	SSLMode     string `env:"MG_UI_DB_SSL_MODE"       envDefault:"disable"`
 	SSLCert     string `env:"MG_UI_DB_SSL_CERT"       envDefault:""`
 	SSLKey      string `env:"MG_UI_DB_SSL_KEY"        envDefault:""`
diff --git a/package-lock.json b/package-lock.json
index c1aab558..41f450ff 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "magistrala-ui",
+  "name": "magistrala-ui-trial",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
diff --git a/ui/web/templates/login.html b/ui/web/templates/login.html
index 2cbed090..132f6036 100644
--- a/ui/web/templates/login.html
+++ b/ui/web/templates/login.html
@@ -185,6 +185,7 @@ <h5 class="modal-title" id="forgotPasswordModalLabel">Enter email</h5>
               console.error("error submitting login form: ", error);
             });
         }  
+         //code for toggling the visibility of the password
         togglePassword.addEventListener("click", function () {
          if (passwordField.type === "password")  {
              passwordField.type = "text";
diff --git a/ui/web/templates/registration.html b/ui/web/templates/registration.html
index 63860637..b3df4096 100644
--- a/ui/web/templates/registration.html
+++ b/ui/web/templates/registration.html
@@ -59,12 +59,12 @@ <h2>Register</h2>
                       <i class="fas fa-solid fa-lock"></i>
                       <input
                         class="p-3 w-100"
-                        type= "password"
+                        type="password"
                         name="password"
                         id="password"
                         placeholder="Password"
                       />
-                      <span class ="password-toggle-icon"><i class="fas fa-eye"></i></span>
+                      <span class="password-toggle-icon"><i class="fas fa-eye"></i></span>
                     </div>
                     <div id="passwordError" class="text-danger"></div>
                   </div>
@@ -135,18 +135,18 @@ <h2>Register</h2>
         document.getElementById("register-button").addEventListener("click", () => {
           registrationError.innerHTML = "";
         });
-         //code for toggling the visibility of the password
+        //code for toggling the visibility of the password
         togglePassword.addEventListener("click", function () {
-         if (passwordField.type === "password")  {
-             passwordField.type = "text";
-             togglePassword.classList.remove("fa-eye");
-             togglePassword.classList.add("fa-eye-slash");
-             } else {
-             passwordField.type = "password";
-             togglePassword.classList.remove("fa-eye-slash");
-             togglePassword.classList.add("fa-eye");
-            }
-        })
+          if (passwordField.type === "password") {
+            passwordField.type = "text";
+            togglePassword.classList.remove("fa-eye");
+            togglePassword.classList.add("fa-eye-slash");
+          } else {
+            passwordField.type = "password";
+            togglePassword.classList.remove("fa-eye-slash");
+            togglePassword.classList.add("fa-eye");
+          }
+        });
 
         function submitRegistrationForm() {
           event.preventDefault();
@@ -172,7 +172,6 @@ <h2>Register</h2>
               console.error("error submitting login form: ", error);
             });
         }
-        
 
         function showError(errorMessage) {
           registrationError.innerHTML = errorMessage;
diff --git a/ui/web/templates/updatepassword.html b/ui/web/templates/updatepassword.html
index 5c61c58a..bde24827 100644
--- a/ui/web/templates/updatepassword.html
+++ b/ui/web/templates/updatepassword.html
@@ -34,7 +34,7 @@ <h2>Update Password</h2>
                           placeholder="Old password"
                           required
                         />
-                        <span class ="password-toggle-icon"><i class="fas fa-eye"></i></span>
+                        <span class="password-toggle-icon"><i class="fas fa-eye"></i></span>
                         <div id="oldpassError" class="text-danger"></div>
                       </div>
                     </div>
@@ -49,7 +49,7 @@ <h2>Update Password</h2>
                           placeholder="New password"
                           required
                         />
-                        <span class ="password-toggle-icon"><i class="fas fa-eye"></i></span>
+                        <span class="password-toggle-icon"><i class="fas fa-eye"></i></span>
                         <div id="newpassError" class="text-danger"></div>
                       </div>
                     </div>
@@ -104,7 +104,7 @@ <h2>Update Password</h2>
         }
         //code for toggling the visibility of the password
         const togglePassword = document.querySelectorAll(".password-toggle-icon i");
-        togglePassword.forEach(icon => {
+        togglePassword.forEach((icon) => {
           icon.addEventListener("click", function () {
             const passwordField = icon.parentElement.previousElementSibling;
             if (passwordField.type === "password") {
@@ -117,7 +117,7 @@ <h2>Update Password</h2>
               icon.classList.add("fa-eye");
             }
           });
-        })
+        });
         function showError(errorMessage) {
           var loginError = document.getElementById("oldpassError");
           loginError.innerHTML = errorMessage;
@@ -126,4 +126,3 @@ <h2>Update Password</h2>
     </body>
   </html>
 {{ end }}
-        
\ No newline at end of file

From 23b3e86d30ad1541a57df24a835c1268402981dd Mon Sep 17 00:00:00 2001
From: wambuipixel <kiokowambui015@gmail.com>
Date: Tue, 19 Mar 2024 11:43:30 +0300
Subject: [PATCH 4/8] Ports and file name correction

Signed-off-by: wambuipixel <kiokowambui015@gmail.com>
---
 internal/postgres/postgres.go | 8 ++++----
 package-lock.json             | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/internal/postgres/postgres.go b/internal/postgres/postgres.go
index 24898e59..20740530 100644
--- a/internal/postgres/postgres.go
+++ b/internal/postgres/postgres.go
@@ -20,10 +20,10 @@ var (
 // Config defines the options that are used when connecting to the PostgresSQL instance.
 type Config struct {
 	Host        string `env:"MG_UI_DB_HOST"           envDefault:"localhost"`
-	Port        string `env:"MG_UI_DB_PORT"           envDefault:"6007"`
-	User        string `env:"MG_UI_DB_USER"           envDefault:"magistrala"`
-	Pass        string `env:"MG_UI_DB_PASS"           envDefault:"magistrala"`
-	Name        string `env:"MG_UI_DB_NAME"           envDefault:"ui"`
+	Port        string `env:"MG_UI_DB_PORT"           envDefault:"5432"`
+	User        string `env:"MG_UI_DB_USER"           envDefault:"magistrala-ui"`
+	Pass        string `env:"MG_UI_DB_PASS"           envDefault:"magistrala-ui"`
+	Name        string `env:"MG_UI_DB_NAME"           envDefault:"dashboards"`
 	SSLMode     string `env:"MG_UI_DB_SSL_MODE"       envDefault:"disable"`
 	SSLCert     string `env:"MG_UI_DB_SSL_CERT"       envDefault:""`
 	SSLKey      string `env:"MG_UI_DB_SSL_KEY"        envDefault:""`
diff --git a/package-lock.json b/package-lock.json
index 41f450ff..c1aab558 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,5 +1,5 @@
 {
-  "name": "magistrala-ui-trial",
+  "name": "magistrala-ui",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

From 6af57ce1b7a9e0aeb985b525e346bc4230265d9c Mon Sep 17 00:00:00 2001
From: wambuipixel <kiokowambui015@gmail.com>
Date: Tue, 19 Mar 2024 12:13:10 +0300
Subject: [PATCH 5/8] fix lint error

Signed-off-by: wambuipixel <kiokowambui015@gmail.com>
---
 ui/web/templates/login.html         | 12 ++++++------
 ui/web/templates/resetpassword.html |  8 ++++----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/ui/web/templates/login.html b/ui/web/templates/login.html
index 132f6036..9085f0a1 100644
--- a/ui/web/templates/login.html
+++ b/ui/web/templates/login.html
@@ -51,7 +51,7 @@ <h2>Login</h2>
                         id="password"
                         placeholder="Password"
                       />
-                      <span class ="password-toggle-icon"><i class="fas fa-eye"></i></i></span>
+                      <span class="password-toggle-icon"><i class="fas fa-eye"></i></span>
                     </div>
                     <div id="passwordError" class="text-danger"></div>
                   </div>
@@ -178,13 +178,13 @@ <h5 class="modal-title" id="forgotPasswordModalLabel">Enter email</h5>
                   window.location.href = `${pathPrefix}/tokens/secure`;
                   break;
               }
-              
+
             })
-        
+
             .catch((error) => {
               console.error("error submitting login form: ", error);
             });
-        }  
+        }
          //code for toggling the visibility of the password
         togglePassword.addEventListener("click", function () {
          if (passwordField.type === "password")  {
@@ -196,8 +196,8 @@ <h5 class="modal-title" id="forgotPasswordModalLabel">Enter email</h5>
              togglePassword.classList.remove("fa-eye-slash");
              togglePassword.classList.add("fa-eye");
             }
-        })    
-        
+        })
+
 
         function showError(errorMessage) {
           loginError.innerHTML = errorMessage;
diff --git a/ui/web/templates/resetpassword.html b/ui/web/templates/resetpassword.html
index 2719c01a..874203b1 100644
--- a/ui/web/templates/resetpassword.html
+++ b/ui/web/templates/resetpassword.html
@@ -39,7 +39,7 @@ <h2>Reset Password</h2>
                         placeholder="Password"
                         required
                       />
-                      <span class ="password-toggle-icon"><i class="fas fa-eye"></i></i></span>
+                      <span class="password-toggle-icon"><i class="fas fa-eye"></i></span>
                       <div id="passwordError" class="text-danger"></div>
                     </div>
                   </div>
@@ -54,7 +54,7 @@ <h2>Reset Password</h2>
                         placeholder="confirm Password"
                         required
                       />
-                      <span class ="password-toggle-icon"><i class="fas fa-eye"></i></i></span>
+                      <span class="password-toggle-icon"><i class="fas fa-eye"></i></span>
                       <div id="confirmPasswordError" class="text-danger"></div>
                     </div>
                   </div>
@@ -91,7 +91,7 @@ <h2>Reset Password</h2>
         }
         //code for toggling the visibility of the password
         const togglePassword = document.querySelectorAll(".password-toggle-icon i");
-        togglePassword.forEach(icon => {
+        togglePassword.forEach((icon) => {
           icon.addEventListener("click", function () {
             const passwordField = icon.parentElement.previousElementSibling;
             if (passwordField.type === "password") {
@@ -104,7 +104,7 @@ <h2>Reset Password</h2>
               icon.classList.add("fa-eye");
             }
           });
-        }) 
+        });
       </script>
     </body>
   </html>

From 81e4eb4b6d78a93754613014d8f1418f470bf2b6 Mon Sep 17 00:00:00 2001
From: wambuipixel <kiokowambui015@gmail.com>
Date: Tue, 19 Mar 2024 14:53:39 +0300
Subject: [PATCH 6/8] margin fix

Signed-off-by: wambuipixel <kiokowambui015@gmail.com>
---
 ui/web/templates/login.html          | 10 +++++-----
 ui/web/templates/registration.html   | 10 +++++-----
 ui/web/templates/resetpassword.html  | 10 +++++-----
 ui/web/templates/updatepassword.html | 10 +++++-----
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/ui/web/templates/login.html b/ui/web/templates/login.html
index 9085f0a1..f8930f14 100644
--- a/ui/web/templates/login.html
+++ b/ui/web/templates/login.html
@@ -30,9 +30,9 @@ <h2>Login</h2>
                 <div class="col-md-12">
                   <div class="row mb-3">
                     <div class="col-md-12 input-field email-field">
-                      <i class="fas fa-solid fa-envelope"></i>
+                      <i class="fas fa-solid fa-envelope me-2"></i>
                       <input
-                        class="p-3 w-100"
+                        class="p-3 w-100 me-2"
                         type="email"
                         name="email"
                         id="email"
@@ -43,9 +43,9 @@ <h2>Login</h2>
                   </div>
                   <div class="row mb-3">
                     <div class="col-md-12 input-field password-field">
-                      <i class="fas fa-solid fa-lock"></i>
+                      <i class="fas fa-solid fa-lock me-2"></i>
                       <input
-                        class="p-3 w-100"
+                        class="p-3 w-100 me-2"
                         type="password"
                         name="password"
                         id="password"
@@ -185,7 +185,7 @@ <h5 class="modal-title" id="forgotPasswordModalLabel">Enter email</h5>
               console.error("error submitting login form: ", error);
             });
         }
-         //code for toggling the visibility of the password
+         //Code for toggling the visibility of the password
         togglePassword.addEventListener("click", function () {
          if (passwordField.type === "password")  {
              passwordField.type = "text";
diff --git a/ui/web/templates/registration.html b/ui/web/templates/registration.html
index b3df4096..2db7b9a1 100644
--- a/ui/web/templates/registration.html
+++ b/ui/web/templates/registration.html
@@ -43,9 +43,9 @@ <h2>Register</h2>
                   </div>
                   <div class="row mb-3">
                     <div class="col-md-12 input-field email-field">
-                      <i class="fas fa-solid fa-envelope"></i>
+                      <i class="fas fa-solid fa-envelope me-2"></i>
                       <input
-                        class="p-3 w-100"
+                        class="p-3 w-100 me-2"
                         type="email"
                         name="email"
                         id="email"
@@ -56,9 +56,9 @@ <h2>Register</h2>
                   </div>
                   <div class="row mb-3">
                     <div class="col-md-12 input-field password-field">
-                      <i class="fas fa-solid fa-lock"></i>
+                      <i class="fas fa-solid fa-lock me-2"></i>
                       <input
-                        class="p-3 w-100"
+                        class="p-3 w-100 me-2"
                         type="password"
                         name="password"
                         id="password"
@@ -135,7 +135,7 @@ <h2>Register</h2>
         document.getElementById("register-button").addEventListener("click", () => {
           registrationError.innerHTML = "";
         });
-        //code for toggling the visibility of the password
+        //Code for toggling the visibility of the password
         togglePassword.addEventListener("click", function () {
           if (passwordField.type === "password") {
             passwordField.type = "text";
diff --git a/ui/web/templates/resetpassword.html b/ui/web/templates/resetpassword.html
index 874203b1..036d7896 100644
--- a/ui/web/templates/resetpassword.html
+++ b/ui/web/templates/resetpassword.html
@@ -30,9 +30,9 @@ <h2>Reset Password</h2>
                 <div class="col-md-12">
                   <div class="row mb-3">
                     <div class="col-md-12 input-field">
-                      <i class="fas fa-solid fa-lock"></i>
+                      <i class="fas fa-solid fa-lock me-2"></i>
                       <input
-                        class="p-3 w-100"
+                        class="p-3 w-100 me-2"
                         type="password"
                         name="password"
                         id="password"
@@ -45,9 +45,9 @@ <h2>Reset Password</h2>
                   </div>
                   <div class="row mb-3">
                     <div class="col-md-12 input-field">
-                      <i class="fas fa-solid fa-lock"></i>
+                      <i class="fas fa-solid fa-lock me-2"></i>
                       <input
-                        class="p-3 w-100"
+                        class="p-3 w-100 me-2"
                         type="password"
                         name="confirmPassword"
                         id="confirmPassword"
@@ -89,7 +89,7 @@ <h2>Reset Password</h2>
           }
           return isValid;
         }
-        //code for toggling the visibility of the password
+        //Code for toggling the visibility of the password
         const togglePassword = document.querySelectorAll(".password-toggle-icon i");
         togglePassword.forEach((icon) => {
           icon.addEventListener("click", function () {
diff --git a/ui/web/templates/updatepassword.html b/ui/web/templates/updatepassword.html
index bde24827..e7703626 100644
--- a/ui/web/templates/updatepassword.html
+++ b/ui/web/templates/updatepassword.html
@@ -25,9 +25,9 @@ <h2>Update Password</h2>
                   <div class="col-md-12">
                     <div class="row mb-3">
                       <div class="col-md-12 input-field">
-                        <i class="fas fa-solid fa-lock"></i>
+                        <i class="fas fa-solid fa-lock me-2"></i>
                         <input
-                          class="p-3 w-100"
+                          class="p-3 w-100 me-2"
                           type="password"
                           name="oldpass"
                           id="oldpass"
@@ -40,9 +40,9 @@ <h2>Update Password</h2>
                     </div>
                     <div class="row mb-3">
                       <div class="col-md-12 input-field">
-                        <i class="fas fa-solid fa-lock"></i>
+                        <i class="fas fa-solid fa-lock me-2"></i>
                         <input
-                          class="p-3 w-100"
+                          class="p-3 w-100 me-2"
                           type="password"
                           name="newpass"
                           id="newpass"
@@ -102,7 +102,7 @@ <h2>Update Password</h2>
               return false;
             });
         }
-        //code for toggling the visibility of the password
+        //Code for toggling the visibility of the password
         const togglePassword = document.querySelectorAll(".password-toggle-icon i");
         togglePassword.forEach((icon) => {
           icon.addEventListener("click", function () {

From ba96272bbd1d06c60ee04b3d0f80663311492796 Mon Sep 17 00:00:00 2001
From: wambuipixel <kiokowambui015@gmail.com>
Date: Tue, 19 Mar 2024 15:04:01 +0300
Subject: [PATCH 7/8] comment fix

Signed-off-by: wambuipixel <kiokowambui015@gmail.com>
---
 ui/web/templates/login.html          | 2 +-
 ui/web/templates/registration.html   | 2 +-
 ui/web/templates/resetpassword.html  | 2 +-
 ui/web/templates/updatepassword.html | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/web/templates/login.html b/ui/web/templates/login.html
index f8930f14..bb260fcd 100644
--- a/ui/web/templates/login.html
+++ b/ui/web/templates/login.html
@@ -185,7 +185,7 @@ <h5 class="modal-title" id="forgotPasswordModalLabel">Enter email</h5>
               console.error("error submitting login form: ", error);
             });
         }
-         //Code for toggling the visibility of the password
+         // Code for toggling the visibility of the password
         togglePassword.addEventListener("click", function () {
          if (passwordField.type === "password")  {
              passwordField.type = "text";
diff --git a/ui/web/templates/registration.html b/ui/web/templates/registration.html
index 2db7b9a1..5f184f07 100644
--- a/ui/web/templates/registration.html
+++ b/ui/web/templates/registration.html
@@ -135,7 +135,7 @@ <h2>Register</h2>
         document.getElementById("register-button").addEventListener("click", () => {
           registrationError.innerHTML = "";
         });
-        //Code for toggling the visibility of the password
+        // Code for toggling the visibility of the password
         togglePassword.addEventListener("click", function () {
           if (passwordField.type === "password") {
             passwordField.type = "text";
diff --git a/ui/web/templates/resetpassword.html b/ui/web/templates/resetpassword.html
index 036d7896..5a0ec63c 100644
--- a/ui/web/templates/resetpassword.html
+++ b/ui/web/templates/resetpassword.html
@@ -89,7 +89,7 @@ <h2>Reset Password</h2>
           }
           return isValid;
         }
-        //Code for toggling the visibility of the password
+        // Code for toggling the visibility of the password
         const togglePassword = document.querySelectorAll(".password-toggle-icon i");
         togglePassword.forEach((icon) => {
           icon.addEventListener("click", function () {
diff --git a/ui/web/templates/updatepassword.html b/ui/web/templates/updatepassword.html
index e7703626..04a1bb60 100644
--- a/ui/web/templates/updatepassword.html
+++ b/ui/web/templates/updatepassword.html
@@ -102,7 +102,7 @@ <h2>Update Password</h2>
               return false;
             });
         }
-        //Code for toggling the visibility of the password
+        // Code for toggling the visibility of the password
         const togglePassword = document.querySelectorAll(".password-toggle-icon i");
         togglePassword.forEach((icon) => {
           icon.addEventListener("click", function () {

From 092ca78666b075ee78451732ef4511edd083d894 Mon Sep 17 00:00:00 2001
From: wambuipixel <kiokowambui015@gmail.com>
Date: Thu, 21 Mar 2024 18:38:52 +0300
Subject: [PATCH 8/8] UI modal update

Signed-off-by: wambuipixel <kiokowambui015@gmail.com>
---
 ui/web/static/css/styles.css        | 31 ++++++++++++++++++++++-
 ui/web/templates/bootstrap.html     |  2 +-
 ui/web/templates/bootstraps.html    |  2 +-
 ui/web/templates/channelgroups.html |  2 +-
 ui/web/templates/channels.html      |  4 +--
 ui/web/templates/channelthings.html |  2 +-
 ui/web/templates/channelusers.html  |  7 ++++--
 ui/web/templates/group.html         |  2 +-
 ui/web/templates/groups.html        |  5 ++--
 ui/web/templates/groupusers.html    | 12 ++++++---
 ui/web/templates/invitations.html   | 38 ++++++++++++++++-------------
 ui/web/templates/members.html       |  2 +-
 ui/web/templates/thingchannels.html |  2 +-
 13 files changed, 76 insertions(+), 35 deletions(-)

diff --git a/ui/web/static/css/styles.css b/ui/web/static/css/styles.css
index ff7a6bb7..013adeee 100644
--- a/ui/web/static/css/styles.css
+++ b/ui/web/static/css/styles.css
@@ -332,6 +332,7 @@ body .body-button:hover {
   background: transparent;
   border: 0;
   outline: 0;
+  margin-top: 10px;
 }
 
 .login-card .logo {
@@ -540,7 +541,7 @@ button.edit-btn {
   border-radius: var(--border-radius);
   color: #fff;
   font-size: 1rem;
-  border: 1px solid var(--main-color);
+  border: 10px solid var(--main-color);
 }
 
 .domains-table .body-button:hover {
@@ -747,3 +748,31 @@ button.edit-btn {
   margin-right: 5px;
   cursor: pointer;
 }
+
+.custom-select-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.custom-select-wrapper:after {
+  content: "▼";
+  position: absolute;
+  top: 7.5px;
+  right: 15px;
+  pointer-events: none;
+  color: #333;
+}
+
+.custom-select {
+  appearance: none;
+  -webkit-appearance: none;
+  background-color: transparent;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  padding-right: 30px;
+}
+
+.group-title {
+  color: var(--main-color);
+}
diff --git a/ui/web/templates/bootstrap.html b/ui/web/templates/bootstrap.html
index 7a3161c6..fc099a27 100644
--- a/ui/web/templates/bootstrap.html
+++ b/ui/web/templates/bootstrap.html
@@ -231,7 +231,7 @@ <h5 class="modal-title" id="editChannelsModalLabel">Edit Channels</h5>
                         size="5"
                         multiple
                       >
-                        <option disabled>select a channel</option>
+                        <option disabled>Select a Channel</option>
                       </select>
                     </div>
                   </div>
diff --git a/ui/web/templates/bootstraps.html b/ui/web/templates/bootstraps.html
index 5718a860..9fef78ed 100644
--- a/ui/web/templates/bootstraps.html
+++ b/ui/web/templates/bootstraps.html
@@ -113,7 +113,7 @@ <h1 class="modal-title" id="addBootstrapModalLabel">
                                 size="5"
                                 multiple
                               >
-                                <option disabled>select a channel</option>
+                                <option disabled>Select a Channel</option>
                               </select>
                             </div>
                             <div class="row mb-3">
diff --git a/ui/web/templates/channelgroups.html b/ui/web/templates/channelgroups.html
index e239131c..50deeb2d 100644
--- a/ui/web/templates/channelgroups.html
+++ b/ui/web/templates/channelgroups.html
@@ -70,7 +70,7 @@ <h1 class="modal-title" id="addGroupModalLabel">Add Group</h1>
                                   size="5"
                                   required
                                 >
-                                  <option disabled>select a group</option>
+                                  <option disabled>Select a Group</option>
                                 </select>
                               </div>
                             </div>
diff --git a/ui/web/templates/channels.html b/ui/web/templates/channels.html
index 273b1e54..834c5271 100644
--- a/ui/web/templates/channels.html
+++ b/ui/web/templates/channels.html
@@ -64,7 +64,7 @@ <h1 class="modal-title" id="addChannelModalLabel">Add Channel</h1>
                                 class="itemsFilter"
                                 name="parentFilter"
                                 id="parentFilter"
-                                placeholder="Filter by parent name"
+                                placeholder="Filter by Parent Name"
                               />
                               <select
                                 class="form-select"
@@ -72,7 +72,7 @@ <h1 class="modal-title" id="addChannelModalLabel">Add Channel</h1>
                                 id="infiniteScroll"
                                 size="5"
                               >
-                                <option disabled>select a channel</option>
+                                <option disabled>Select a Channel</option>
                               </select>
                             </div>
                             <div class="mb-3">
diff --git a/ui/web/templates/channelthings.html b/ui/web/templates/channelthings.html
index 899f052e..d243761e 100644
--- a/ui/web/templates/channelthings.html
+++ b/ui/web/templates/channelthings.html
@@ -70,7 +70,7 @@ <h1 class="modal-title" id="addThingModalLabel">Add Thing</h1>
                                   size="5"
                                   required
                                 >
-                                  <option disabled>select a thing</option>
+                                  <option disabled>Select a Thing</option>
                                 </select>
                               </div>
                             </div>
diff --git a/ui/web/templates/channelusers.html b/ui/web/templates/channelusers.html
index 2dea9c22..35c94c1d 100644
--- a/ui/web/templates/channelusers.html
+++ b/ui/web/templates/channelusers.html
@@ -22,7 +22,9 @@
                     {{ $shareButton = true }}
                   {{ end }}
                   <div class="d-flex flex-row justify-content-between">
-                    <h4>Channel Users</h4>
+                    <div class="group-title">
+                      <h4>Channel Users</h4>
+                    </div>
                     <button
                       role="button"
                       class="btn body-button"
@@ -62,6 +64,7 @@ <h1 class="modal-title" id="addUserModalLabel">Add User</h1>
                                   name="userFilter"
                                   id="userFilter"
                                   placeholder="Filter by User ID"
+                                  class="ms-5"
                                 />
                                 <select
                                   class="form-select"
@@ -70,7 +73,7 @@ <h1 class="modal-title" id="addUserModalLabel">Add User</h1>
                                   size="5"
                                   required
                                 >
-                                  <option disabled>select a User</option>
+                                  <option disabled>Select a User</option>
                                 </select>
                               </div>
                               <div class="mb-3">
diff --git a/ui/web/templates/group.html b/ui/web/templates/group.html
index f1fa42e8..71e9c95a 100644
--- a/ui/web/templates/group.html
+++ b/ui/web/templates/group.html
@@ -107,7 +107,7 @@
                           <button
                             type="button"
                             class="edit-btn"
-                            data-bs-toggle="modal"
+                            data-bs-toggle=""
                             data-bs-target="#editMetadataModal"
                             {{ if not $editButton }}disabled{{ end }}
                           >
diff --git a/ui/web/templates/groups.html b/ui/web/templates/groups.html
index 6b743aef..27c2186d 100644
--- a/ui/web/templates/groups.html
+++ b/ui/web/templates/groups.html
@@ -65,6 +65,7 @@ <h1 class="modal-title" id="addGroupModalLabel">Add Group</h1>
                                 name="description"
                                 id="description"
                                 placeholder="Group Description"
+                                class="ms-5"
                               />
                             </div>
                             <div class="mb-3">
@@ -74,7 +75,7 @@ <h1 class="modal-title" id="addGroupModalLabel">Add Group</h1>
                                 class="itemsFilter"
                                 name="parentFilter"
                                 id="parentFilter"
-                                placeholder="Filter by parent name"
+                                placeholder="Filter by Parent Name"
                               />
                               <select
                                 class="form-select"
@@ -82,7 +83,7 @@ <h1 class="modal-title" id="addGroupModalLabel">Add Group</h1>
                                 id="infiniteScroll"
                                 size="5"
                               >
-                                <option disabled>select a group</option>
+                                <option disabled>Select a Group</option>
                               </select>
                             </div>
                             <div class="mb-3">
diff --git a/ui/web/templates/groupusers.html b/ui/web/templates/groupusers.html
index 83e19ea2..bbdc3251 100644
--- a/ui/web/templates/groupusers.html
+++ b/ui/web/templates/groupusers.html
@@ -22,7 +22,9 @@
                     {{ $shareButton = true }}
                   {{ end }}
                   <div class="d-flex flex-row justify-content-between">
-                    <h4>Group Users</h4>
+                    <div class="group-title">
+                      <h4>Group Users</h4>
+                    </div>
                     <button
                       role="button"
                       class="btn body-button"
@@ -56,21 +58,23 @@ <h1 class="modal-title fs-5" id="addUserModalLabel">Add User</h1>
                           >
                             <div class="modal-body">
                               <div class="mb-3">
-                                <label for="infiniteScroll" class="form-label">User ID</label>
+                                <label for="infiniteScroll" class="form-label">User Name</label>
                                 <input
                                   type="text"
                                   name="userFilter"
                                   id="userFilter"
-                                  placeholder="Filter by User ID"
+                                  placeholder="Filter by User Name"
+                                  class="ms-5"
                                 />
                                 <select
                                   class="form-select"
                                   name="userID"
                                   id="infiniteScroll"
                                   size="5"
+                                  class="ms-5"
                                   required
                                 >
-                                  <option disabled>select a User</option>
+                                  <option disabled>Select a User</option>
                                 </select>
                               </div>
                               <div class="mb-3">
diff --git a/ui/web/templates/invitations.html b/ui/web/templates/invitations.html
index e8159b4e..094ff555 100644
--- a/ui/web/templates/invitations.html
+++ b/ui/web/templates/invitations.html
@@ -128,16 +128,17 @@ <h1 class="modal-title" id="invitationModalLabel">Invite User</h1>
               </div>
               <form id="invitation-form">
                 <div class="modal-body">
-                  <div class="mb-3">
+                  <div class="mb-3" id="users-select">
                     <label for="users-scroll" class="form-label">User</label>
                     <input
                       type="text"
                       name="userFilter"
                       id="userFilter"
                       placeholder="Filter by User Name"
+                      class="ms-5"
                     />
                     <select class="form-select" name="userID" id="users-scroll" size="5" required>
-                      <option disabled>select a User</option>
+                      <option disabled>Select a User</option>
                     </select>
                   </div>
                   <div class="mb-3" id="domains-select">
@@ -147,6 +148,7 @@ <h1 class="modal-title" id="invitationModalLabel">Invite User</h1>
                       name="domainFilter"
                       id="domainFilter"
                       placeholder="Filter by Domain"
+                      class="ms-5"
                     />
                     <select
                       class="form-select"
@@ -155,25 +157,27 @@ <h1 class="modal-title" id="invitationModalLabel">Invite User</h1>
                       size="5"
                       required
                     >
-                      <option disabled>select a domain</option>
+                      <option disabled>Select a Domain</option>
                     </select>
                   </div>
                   <div class="mb-3">
                     <label for="relation" class="form-label">Relation</label>
-                    <select
-                      class="form-control"
-                      name="relation"
-                      id="relation"
-                      aria-describedby="relationHelp"
-                      required
-                    >
-                      <option value="" disabled>Select relation</option>
-                      {{ range $i, $r := .Relations }}
-                        <option value="{{ $r }}">
-                          {{ $r }}
-                        </option>
-                      {{ end }}
-                    </select>
+                    <div class="custom-select-wrapper">
+                      <select
+                        class="form-control custom-select"
+                        name="relation"
+                        id="relation"
+                        aria-describedby="relationHelp"
+                        required
+                      >
+                        <option value="" disabled selected>Select relation</option>
+                        {{ range $i, $r := .Relations }}
+                          <option value="{{ $r }}">
+                            {{ $r }}
+                          </option>
+                        {{ end }}
+                      </select>
+                    </div>
                     <div id="relationHelp" class="form-text">Select Relation.</div>
                   </div>
                 </div>
diff --git a/ui/web/templates/members.html b/ui/web/templates/members.html
index 7e07ef37..5ea51742 100644
--- a/ui/web/templates/members.html
+++ b/ui/web/templates/members.html
@@ -65,7 +65,7 @@ <h1 class="modal-title" id="addMemberModalLabel">Assign User</h1>
                               size="5"
                               required
                             >
-                              <option disabled>select a User</option>
+                              <option disabled>Select a User</option>
                             </select>
                           </div>
                           <div class="mb-3">
diff --git a/ui/web/templates/thingchannels.html b/ui/web/templates/thingchannels.html
index a3429ed3..cc5c6180 100644
--- a/ui/web/templates/thingchannels.html
+++ b/ui/web/templates/thingchannels.html
@@ -70,7 +70,7 @@ <h1 class="modal-title" id="addChannelModalLabel">Add Channel</h1>
                                   size="5"
                                   required
                                 >
-                                  <option disabled>select a channel</option>
+                                  <option disabled>Select a Channel</option>
                                 </select>
                               </div>
                             </div>