Skip to content

Commit

Permalink
Improve Login page: dark theme, copy button
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jipok
Jipok committed Nov 21, 2024
1 parent 01d33da commit 9373e33
Show file tree
Hide file tree
Showing 6 changed files with 123 additions and 76 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Jauth
Jauth is a lightweight SSL/TLS reverse proxy with authorization. Great for protect your self-hosted applications. Moreover, it offers SSO for simpler login management.

![Login screenshot](screenshot.png?raw=true)
![screenshot](screenshot2.png?raw=true)

# Features
* Single binary executable with no dependencies
Expand Down
1 change: 1 addition & 0 deletions auth-handler.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -285,6 +285,7 @@ func buildAuthHandler(handler http.Handler) http.Handler {
req.Header.Set("Remote-User", username)
req.Header.Set("X-Forwarded-User", username)
// Passing the modified request to the reverse proxy
// TODO m.b. delete jauth_token cookie for security?
handler.ServeHTTP(w, req)
return
}
Expand Down
1 change: 1 addition & 0 deletions compact.sh
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
#!/usr/bin/env bash
CGO_ENABLED=0 go build -ldflags "-s -w" && upx jauth
CGO_ENABLED=0 GOOS=linux GOARCH=arm64 go build -o jauth_arm64 -ldflags "-s -w" && upx jauth_arm64
Binary file removed screenshot.png
View file
Binary file not shown.
Binary file added screenshot2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
195 changes: 120 additions & 75 deletions www/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,73 +6,110 @@
<link rel="icon" type="image/svg+xml" href="/jauth-favicon">
<title>Login Page</title>
<style>
* {
:root {
--bg-color: #F9F9F9;
--container-bg: #FFFFFF;
--border-color: #DDDDDD;
--text-color: #000000;
--code-bg: #F5F5F5;
--hover-bg: #C5C5C5;
--icon-color: currentColor;
}

@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1a1a1a;
--container-bg: #2d2d2d;
--border-color: #404040;
--text-color: #ffffff;
--code-bg: #363636;
--hover-bg: #404040;
--icon-color: #DDD;
}
}

* {
box-sizing: border-box;
}

body {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body {
font-family: sans-serif;
background-color: #F9F9F9;
background-color: var(--bg-color);
color: var(--text-color);
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
min-height: 100vh;
}

.container {
max-width: 600px;
padding: 20px;
text-align: center;
}

h1 {
margin-top: 0;
}

.ssh-login {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
}

.ssh-login, .telegram-login {
background-color: var(--container-bg);
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 20px;
margin-bottom: 20px;
}

.command {
}

.ssh-login p, .telegram-login p {
margin-top: 0;
margin-bottom: 15px;
}

.command {
display: flex;
align-items: center;
justify-content: center;
}

code {
background-color: #F5F5F5;
padding: 5px;
border-radius: 4px;
background-color: var(--code-bg);
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--border-color);
}

code {
padding: 8px 12px;
font-family: monospace;
}

flex-grow: 1;
font-size: 1.1em;
}

.copy-btn {
background-color: #F5F5F5;
border: 1px solid #DDDDDD;
border-radius: 4px;
display: flex;
align-items: center;
padding: 7px 11px;
background-color: var(--code-bg);
border: 0;
border-left: 1px solid var(--border-color);
color: var(--text-color);
opacity: 0.8;
cursor: pointer;
}

.copy-btn:hover {
background-color: var(--hover-bg);
opacity: 1;
}

.copy-btn:hover {
cursor: pointer;
background-color: #C5C5C5;
}

.copy-btn:active {
transform: scale(0.98);
box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
}

.telegram-login {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 20px;
}

/* Copy animation */
@keyframes checkmark {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}

.copy-btn.success svg {
animation: checkmark 0.2s ease-in-out;
}

footer {
position: fixed;
Expand All @@ -81,15 +118,26 @@

.github-link {
display: inline-block;
align-items: center;
padding: 10px;
color: #444;
color: var(--text-color);
text-decoration: none;
border-radius: 5px;
gap: 5px;
}

.github-link:hover {
background-color: #C5C5C5;
background-color: var(--hover-bg);
}

.github-link svg path {
fill: var(--text-color);
}

.copy-btn svg path {
fill: var(--text-color); /* Это заставит SVG использовать цвет текста */
}

</style>
</head>
<body>
Expand All @@ -99,32 +147,18 @@ <h1>Login</h1>
<p>Execute the command below:</p>
<div class="command">
<code class="ssh-command">ssh <span id="hostname"></span> -p {SSH_PORT} <span id="ssh_token"></span></code>
<button class="copy-btn" onclick="copyToClipboard()">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M13 7H7V5H13V7Z" fill="currentColor" />
<path d="M13 11H7V9H13V11Z" fill="currentColor" />
<path d="M7 15H13V13H7V15Z" fill="currentColor" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3 19V1H17V5H21V23H7V19H3ZM15 17V3H5V17H15ZM17 7V19H9V21H19V7H17Z"
fill="currentColor"
/>
<button class="copy-btn" onclick="copyToClipboard()" title="Copy to clipboard">
<svg aria-hidden="true" height="18" viewBox="-1 -1 18 18" version="1.1" width="18">
<path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"></path>
<path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="telegram-login" style="{WIDGET_DISABLING_CSS}">
<p>Login with Telegram:</p>
<script async src="https://telegram.org/js/telegram-widget.js?21" data-telegram-login="{TELEGRAM_BOT_NAME}" data-size="large" data-onauth="onTelegramAuth(user)"></script>
</div>
<br>
<label>
<input type="checkbox" id="terminateCheckBox">
Terminate all other sessions
Expand Down Expand Up @@ -152,14 +186,25 @@ <h1>Login</h1>

<script>
function copyToClipboard() {
var copyText = document.querySelector(".ssh-command");
var tempInput = document.createElement("input");
tempInput.style.opacity = "0";
tempInput.value = ' ' + copyText.innerText;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
const copyText = document.querySelector(".ssh-command");
const copyBtn = document.querySelector(".copy-btn");
const originalSvg = copyBtn.innerHTML;

navigator.clipboard.writeText(" " + copyText.innerText).then(() => {
// Change icon
copyBtn.innerHTML = `<svg aria-hidden="true" height="18" viewBox="0 0 16 16" version="1.1" width="18">
<path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"></path>
</svg>`;
copyBtn.classList.add('success');

// Change original icon
setTimeout(() => {
copyBtn.innerHTML = originalSvg;
copyBtn.classList.remove('success');
}, 1200);
}).catch(err => {
console.error('Failed to copy:', err);
});
}
///////////////////////////////////////////////////////////////////////////
function setCookie(name,value,days) {
Expand Down

0 comments on commit 9373e33

Please sign in to comment.