Archos/masto-fe-archos
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[feature] Nicer login.html page, with cute styling + link to source code (#19)

Browse Source 
Fixes #9

- Cute styling, combination of Mastodon and GTS
- Short description of the project
- Error and status messages (temporarily) appear in disabled button with correct ARIA attributes
- Sufficient contrast (WCAG AAA)

Let me know if using `login.scss` both as an index file and for adding custom styling is okay. I figured this might be preferred over creating an extra folder and file.

Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/19
Co-authored-by: vyxen <vyxen@tutamail.com>
Co-committed-by: vyxen <vyxen@tutamail.com>
This commit is contained in:
vyxen
2025-04-03 11:07:34 +00:00
committed by tobi
parent 0f77cb593c
commit 370a666d27
5 changed files with 180 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
public/auth.js
View File

@@ -30,7 +30,9 @@ async function auth() {
const domain = matches[2];
if (!domain) {
setMessage('Invalid instance', false);
setMessage('Invalid instance', true);
await new Promise(r => setTimeout(r, 2000));
setMessage('Authorize', false, false);
return;
}
localStorage.setItem('domain', domain);
@@ -92,7 +94,6 @@ async function getToken(code, domain) {
formData.append('scope', 'read write follow push');
formData.append('redirect_uri', document.location.origin + document.location.pathname);
// eslint-disable-next-line promise/catch-or-return
return fetch(tokenUrl, {
method: 'POST',
@@ -108,7 +109,14 @@ async function getToken(code, domain) {
});
}
function setMessage(message, disabled = true) {
function setMessage(message, error = false, disabled = true) {
document.getElementById('message').setAttribute('role', 'status');
document.getElementById('message').textContent = message;
document.getElementById('btn').disabled = disabled;
if (!error) return;
const instance = document.getElementById('instance');
instance.setAttribute('aria-invalid', true);
instance.setAttribute('aria-describedby', 'message');
}

43
public/login.html
View File

@@ -1,13 +1,50 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login | Masto-FE (🦥 flavour)</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link rel="stylesheet" media="all" href="/packs/css/core/common.css" />
<link rel="stylesheet" media="all" href="/packs/css/flavours/glitch/login.css" />
<script src="/auth.js"></script>
</head>
<body>
<input type="text" id="instance" placeholder="yourinstance.tld">
<button onclick="auth()" id="btn">Log in</button>
<span id="message"></span>
<div class="login-container">
<header>
<img class="mascot" alt src="images/mascot.svg" />
</header>
<main>
<div class="login">
<input class="instance" id="instance" placeholder="Instance URL" aria-label="Instance URL" value="" onkeypress="if (event.keyCode == 13) auth()">
<button type="submit" class="button" id="btn" onclick="auth()">
<span id="message">Authorize</span>
</button>
</div>
<div class="content">
<p>
This is a standalone version of the Mastodon front-end that offers compatibility with GoToSocial instances. It is based
on <a href="https://iceshrimp.dev/iceshrimp/masto-fe-standalone" rel="nofollow">Iceshrimp's Masto-FE Standalone</a>,
which is itself a fork of <a href="https://github.com/glitch-soc/mastodon" rel="nofollow">Mastodon Glitch Edition</a>,
which in turn forks <a href="https://github.com/mastodon/mastodon/" rel="nofollow">Mastodon</a>. Phew!
</p>
<p>
The application is completely client-side, meaning everything happens in the browser on your machine. It does not store
information anywhere else than your browser's local storage.
</p>
</div>
</main>
<footer class="link-footer">
<p>
<strong>Masto-FE (🦥 flavour)</strong>
<span aria-hidden="true"> · </span>
<a href="https://codeberg.org/superseriousbusiness/masto-fe-standalone" rel="noopener noreferrer" target="_blank">
Source code
</a>
</p>
</footer>
</div>
</body>
</html>