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

Jump to bottom

Improve the UI for login #157

Open
wants to merge 9 commits into
base: 131-forms-ui
Choose a base branch
from
Open

Improve the UI for login #157

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a9de676
login page changes
jonathanbataire Jun 6, 2024
c7c5ee8
Merge branch '131-forms-ui' into 117-login-ui
jonathanbataire Jun 6, 2024
7f203e0
merge form-ui
jonathanbataire Jun 6, 2024
ded2b22
Merge branch '131-forms-ui' into 117-login-ui
jonathanbataire Jun 7, 2024
469e03c
Merge branch '131-forms-ui' into 117-login-ui
jonathanbataire Jun 7, 2024
7804ad3
Merge branch '131-forms-ui' into 117-login-ui
jonathanbataire Jun 7, 2024
dcee1b9
Merge branch '131-forms-ui' into 117-login-ui
jonathanbataire Jun 11, 2024
f86a932
clean up
jonathanbataire Jun 11, 2024
881ec35
Merge branch '131-forms-ui' into 117-login-ui
jonathanbataire Jul 4, 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
2 changes: 1 addition & 1 deletion src/liquid/app/view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>

<head>
<title>CHT User Management Tool</title>
<title>CHT User Management</title>
<script src="/public/scripts/htmx.min.js"></script>
<script src="/public/scripts/sse.js"></script>
<script src="/public/scripts/jquery-3.7.1.slim.min.js"></script>
Expand Down
64 changes: 31 additions & 33 deletions src/liquid/auth/authentication_form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,37 @@
<form id="form_authenticate" hx-post="/authenticate" hx-target="this" hx-swap="outerHTML">
<!-- want to use tiles, they are super weird with forms in them -->
<div class="box" style="margin: 20px; padding: 50px;">
{% if errors %}
<span class='tag is-warning is-overlay'>Login Failed. Please Try Again</span>
{% endif %}
<form id="form_authenticate" hx-post="/authenticate" hx-indicator="#login-spinner"
hx-on="htmx:beforeRequest:clearErrorMsg('login-error-msg')"
hx-disabled-elt="button#login-btn"
hx-target="this" hx-swap="outerHTML">

<div class="field">
<label class="label">Instance</label>
<div class="control">
<div class="select is-fullwidth">
<select name="domain">
{% for domain in domains %}
<option value="{{ domain.domain }}">{{ domain.friendly }}</option>
{% endfor %}
</select>
</div>
</div>
{%if errors %}
<div id="login-error-msg" class="error-bg white-text error-message">
<span>Login Failed. Please Try Again</span>
</div>
<div class="field">
<label class="label">Credentials</label>
<div class="control">
<input name="username" class="input" type="text" placeholder="username">
</div>
</div>
<div class="field">
<div class="control">
<input name="password" class="input" type="password" placeholder="password">
</div>
{%endif%}

<div>
<label>Instance</label>
<div class="custom-select">
<select class="dropdown-input" name="domain">
{% for domain in domains %}
<option value="{{ domain.domain }}">{{ domain.friendly }}</option>
{% endfor %}
</select>
</div>
<div class="field is-grouped is-grouped-right">
<p class="control">
<button class="button is-primary">
Sign In
</button>
</p>
</div>

<div>
<label>Credentials</label>
<div>
<div><input name="username" type="text" placeholder="Username" required></div>
<div><input name="password" type="password" placeholder="Password" required></div>
</div>
</div>

<div>
<button class="login-btn" id="login-btn">Login
<span id="login-spinner" class="spinner-sm btn-spinner"></span>
</button>
</div>

</form>
34 changes: 20 additions & 14 deletions src/liquid/auth/view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,30 @@
<!DOCTYPE html>
<html>

<head>
<title>CHT User Management Tool</title>
<script src="/public/scripts/htmx.min.js"></script>
<link rel="stylesheet" href="/public/bulma.min.css" />
<title>CHT User Management</title>
<script src="/public/scripts/htmx.min.js"></script>
<link rel="stylesheet" href="/public/css/styles.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<div class="container is-fluid">

<section class="hero">
<div class="hero-body">
<p class="title">
<img src="{{ logo }}" />
User Management Tool
</p>
</div>
</section>
<div class="content">
<div class="login-branding">
<img class="logo" src="{{ logo }}">
<p>CHT User Management</p>
jonathanbataire marked this conversation as resolved.
Show resolved Hide resolved
</div>
{% include "auth/authentication_form.html" %}
</div>
</body>

</html>
</html>

<script>
function clearErrorMsg(elementID) {
const errMsg = document.getElementById(elementID);
if (errMsg){
errMsg.style.display = 'none';
}
}
</script>
2 changes: 1 addition & 1 deletion src/public/css/styles.css
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion src/scss/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,6 @@ a.clear-btn {
margin: 30px auto;
display: block;
height: 40px;
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.5);
}

.data-form {
Expand Down
5 changes: 4 additions & 1 deletion src/scss/_input-forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,10 @@ form {
}

.error-message {
padding: 10px;
padding: 5px;
margin-bottom: 15px;
text-align: center;
font-size: $font-medium;
border-radius: $border-radius;
}
}
Expand Down
4 changes: 4 additions & 0 deletions src/scss/_spinner.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ $spinner-color: $_gray-dark;
border: $spinner-width solid white;
border-width: 2px;
border-right-color: transparent;
&#login-spinner {
width: 21px;
height: 21px;
}
}
}

Expand Down
Loading