Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AMDM-142 - Update of the UI Modals. #258

Draft
wants to merge 8 commits into
base: main
Choose a base branch
from
Draft

AMDM-142 - Update of the UI Modals. #258

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fa75d7a
Add password visibility eye toggle functionality
wambui-pixel Mar 18, 2024
2796830
Add password visibility eye toggle functionality on registration, upd…
wambui-pixel Mar 18, 2024
5e1fc51
Code Formatting
wambui-pixel Mar 19, 2024
23b3e86
Ports and file name correction
wambui-pixel Mar 19, 2024
6af57ce
fix lint error
wambui-pixel Mar 19, 2024
81e4eb4
margin fix
wambui-pixel Mar 19, 2024
ba96272
comment fix
wambui-pixel Mar 19, 2024
092ca78
UI modal update
wambui-pixel Mar 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 30 additions & 1 deletion ui/web/static/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,6 +332,7 @@ body .body-button:hover {
background: transparent;
border: 0;
outline: 0;
margin-top: 10px;
}

.login-card .logo {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
}
2 changes: 1 addition & 1 deletion ui/web/templates/bootstrap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion ui/web/templates/bootstraps.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion ui/web/templates/channelgroups.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions ui/web/templates/channels.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,15 +64,15 @@ <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"
name="parentID"
id="infiniteScroll"
size="5"
>
<option disabled>select a channel</option>
<option disabled>Select a Channel</option>
</select>
</div>
<div class="mb-3">
Expand Down
2 changes: 1 addition & 1 deletion ui/web/templates/channelthings.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
7 changes: 5 additions & 2 deletions ui/web/templates/channelusers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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">
Expand Down
2 changes: 1 addition & 1 deletion ui/web/templates/group.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}
>
Expand Down
5 changes: 3 additions & 2 deletions ui/web/templates/groups.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -74,15 +75,15 @@ <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"
name="parentID"
id="infiniteScroll"
size="5"
>
<option disabled>select a group</option>
<option disabled>Select a Group</option>
</select>
</div>
<div class="mb-3">
Expand Down
12 changes: 8 additions & 4 deletions ui/web/templates/groupusers.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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">
Expand Down
38 changes: 21 additions & 17 deletions ui/web/templates/invitations.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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"
Expand All @@ -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>
Expand Down
27 changes: 22 additions & 5 deletions ui/web/templates/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -43,14 +43,15 @@ <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"
placeholder="Password"
/>
<span class="password-toggle-icon"><i class="fas fa-eye"></i></span>
</div>
<div id="passwordError" class="text-danger"></div>
</div>
Expand Down Expand Up @@ -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 }}";
Expand All @@ -176,11 +178,26 @@ <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") {
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;
Expand Down
2 changes: 1 addition & 1 deletion ui/web/templates/members.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading