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

[feature] Redesigned login page (#76)

Browse Source 
Reworked the login page

- Simplified some of the HTML and CSS
- Removed some `aria-label`s
- Added alt text for the logo
- Added a label for the input field
- Added subtle borders to otherwise flat elements

![redesigned login page with the mentioned changes](/attachments/53dc5c16-deac-4a68-912e-8a4486a93b53)

Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/76
Co-authored-by: Zoë Bijl <code@moiety.me>
Co-committed-by: Zoë Bijl <code@moiety.me>
This commit is contained in:
Zoë Bijl
2025-10-01 14:02:18 +02:00
committed by tobi
parent 4edb2f2b2c
commit c6eb0b1927
4 changed files with 94 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/auth.js
View File

@@ -1,5 +1,11 @@
document.addEventListener("DOMContentLoaded", async function() {
await ready();
const form = document.querySelector('#login')
form?.addEventListener("submit", (event) => {
event.preventDefault();
auth();
});
});
async function ready() {

30
public/login.html
View File

@@ -5,35 +5,31 @@
<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>
<body class="app-body">
<div class="login-container">
<header>
<img class="mascot" alt src="images/mascot.svg" />
<img alt="a friendly smiling sloth" 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()">
<h1>Log into your instance</h1>
<form method="post" id="login">
<label for="instance">Instance URL</label>
<input type="text" id="instance" value="" class="input instance">
<button type="submit" class="button" id="btn">
<span id="message">Authorize</span>
</button>
</div>
<div class="content">
</form>
<aside 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!
<strong>Note:</strong>
this 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>
<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>
</aside>
</main>
<footer class="link-footer">
<p>