attempt 1
This commit is contained in:
Laura Hausmann
parent
36202a5cc8
commit
923b7a73a2
5 changed files with 254 additions and 0 deletions
190
public/auth.js
Normal file
190
public/auth.js
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
document.addEventListener("DOMContentLoaded", async function() {
|
||||
await ready();
|
||||
});
|
||||
|
||||
async function ready() {
|
||||
const domain = localStorage.getItem('domain');
|
||||
let accessToken = localStorage.getItem(`access_token_${domain}`);
|
||||
|
||||
if (domain) document.getElementById('instance').value = domain;
|
||||
|
||||
if (domain && accessToken) {
|
||||
// do something
|
||||
}
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const code = urlParams.get('code');
|
||||
|
||||
if (domain && code && !accessToken) await getToken(code, domain).then(res => accessToken = res);
|
||||
if (accessToken) await setStateAndRedirect(accessToken, domain);
|
||||
}
|
||||
|
||||
async function auth() {
|
||||
setMessage('Please wait');
|
||||
const instance = document.getElementById('instance').value;
|
||||
const domain = instance.match(/(?:https?:\/\/)?(.*)/)[1];
|
||||
if (!domain) {
|
||||
document.getElementById('message').textContent = 'Invalid instance';
|
||||
return;
|
||||
}
|
||||
|
||||
localStorage.setItem('domain', domain);
|
||||
|
||||
if (!localStorage.getItem(`client_id_${domain}`) || !localStorage.getItem(`client_secret_${domain}`)) {
|
||||
await registerApp(domain);
|
||||
}
|
||||
|
||||
authorize(domain);
|
||||
}
|
||||
|
||||
async function registerApp(domain) {
|
||||
setMessage('Registering app');
|
||||
|
||||
const appsUrl = `https://${domain}/api/v1/apps`;
|
||||
const formData = new FormData();
|
||||
formData.append('client_name', 'Masto-FE standalone');
|
||||
formData.append('redirect_uris', document.location.href);
|
||||
formData.append('scopes', 'read write follow push');
|
||||
|
||||
// eslint-disable-next-line promise/catch-or-return
|
||||
await fetch(appsUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: new URLSearchParams(formData),
|
||||
})
|
||||
.then(async res => {
|
||||
const app = await res.json();
|
||||
localStorage.setItem(`client_id_${domain}`, app.client_id);
|
||||
localStorage.setItem(`client_secret_${domain}`, app.client_secret);
|
||||
});
|
||||
}
|
||||
|
||||
function authorize(domain) {
|
||||
setMessage('Authorizing');
|
||||
const clientId = localStorage.getItem(`client_id_${domain}`);
|
||||
document.location.href = `https://${domain}/oauth/authorize?response_type=code&client_id=${clientId}&redirect_uri=${document.location.href}&scope=read+write+follow+push`;
|
||||
}
|
||||
|
||||
async function getToken(code, domain) {
|
||||
setMessage('Getting token');
|
||||
|
||||
const tokenUrl = `https://${domain}/oauth/token`;
|
||||
const clientId = localStorage.getItem(`client_id_${domain}`);
|
||||
const clientSecret = localStorage.getItem(`client_secret_${domain}`);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('grant_type', 'authorization_code');
|
||||
formData.append('code', code);
|
||||
formData.append('client_id', clientId);
|
||||
formData.append('client_secret', clientSecret);
|
||||
formData.append('scope', 'read write follow push');
|
||||
formData.append('redirect_uri', document.location.href);
|
||||
|
||||
|
||||
// eslint-disable-next-line promise/catch-or-return
|
||||
return fetch(tokenUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: new URLSearchParams(formData),
|
||||
})
|
||||
.then(async res => {
|
||||
const app = await res.json();
|
||||
if (app.access_token) localStorage.setItem(`access_token_${domain}`, app.access_token);
|
||||
return app.access_token;
|
||||
});
|
||||
}
|
||||
|
||||
async function setStateAndRedirect(access_token, domain) {
|
||||
setMessage('Assembling state object');
|
||||
const apiUrl = `https://${domain}/api`;
|
||||
const instance = await fetch(`${apiUrl}/v1/instance`).then(async p => await p.json());
|
||||
const options = {headers: {Authorization: `Bearer ${access_token}`}};
|
||||
const credentials = await fetch(`${apiUrl}/v1/accounts/verify_credentials`, options).then(async p => await p.json());
|
||||
const state = {
|
||||
"accounts": {
|
||||
"plc":{
|
||||
"accepts_direct_messages_from":"everybody",
|
||||
"acct": credentials.acct,
|
||||
"avatar": credentials.avatar,
|
||||
"avatar_static": credentials.avatar_static,
|
||||
"bot": credentials.bot,
|
||||
"created_at": credentials.created_at,
|
||||
"display_name": credentials.display_name,
|
||||
"emojis":[],
|
||||
"fields":[],
|
||||
"follow_requests_count":0,
|
||||
"followers_count": credentials.followers_count,
|
||||
"following_count": credentials.following_count,
|
||||
"fqn":`${credentials.acct}@${domain}`,
|
||||
"header": credentials.header,
|
||||
"header_static": credentials.header_static,
|
||||
"id": credentials.id,
|
||||
"last_status_at": credentials.created_at,
|
||||
"locked": credentials.locked,
|
||||
"note":"",
|
||||
"source": credentials.source,
|
||||
"statuses_count": credentials.statuses_count,
|
||||
"url": credentials.url,
|
||||
"username": credentials.acct
|
||||
}
|
||||
},
|
||||
"char_limit": instance.configuration.statuses.max_characters,
|
||||
"compose": {
|
||||
"allow_content_types": [
|
||||
"text/x.misskeymarkdown"
|
||||
],
|
||||
"default_privacy": credentials.source.privacy,
|
||||
"default_sensitive": credentials.source.sensitive,
|
||||
"me": credentials.id
|
||||
},
|
||||
"media_attachments": {
|
||||
"accept_content_types": instance.configuration.media_attachments.supported_mime_types
|
||||
},
|
||||
"meta": {
|
||||
"access_token": access_token,
|
||||
"admin": "0",
|
||||
"advanced_layout": true,
|
||||
"auto_play_gif": false,
|
||||
"boost_modal": false,
|
||||
"compact_reaction": false,
|
||||
"delete_modal": true,
|
||||
"display_sensitive_media": false,
|
||||
"domain": domain,
|
||||
"enable_reaction": true,
|
||||
"locale": "en",
|
||||
"mascot": "/images/pleroma-fox-tan-smol.png",
|
||||
"max_toot_chars": instance.configuration.statuses.max_characters,
|
||||
"me": credentials.id,
|
||||
"reduce_motion": false,
|
||||
"show_quote_button": true,
|
||||
"base_url": `https://${domain}`,
|
||||
"streaming_api_base_url": `wss://${domain}`,
|
||||
"title": `${instance.title}`,
|
||||
"unfollow_modal": true
|
||||
},
|
||||
"poll_limits": {
|
||||
"max_expiration": instance.configuration.polls.max_expiration,
|
||||
"max_option_chars": instance.configuration.polls.max_characters_per_option,
|
||||
"max_options": instance.configuration.polls.max_options,
|
||||
"min_expiration": instance.configuration.polls.min_expiration
|
||||
},
|
||||
"push_subscription": null,
|
||||
"rights": {
|
||||
"admin": false,
|
||||
"delete_others_notice": false
|
||||
},
|
||||
"settings": {}
|
||||
};
|
||||
|
||||
localStorage.setItem('initial-state', JSON.stringify(state));
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
function setMessage(message) {
|
||||
document.getElementById('message').textContent = message;
|
||||
document.getElementById('btn').enabled = false;
|
||||
}
|
||||
33
public/index.html
Normal file
33
public/index.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang='en'>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta content='width=device-width, initial-scale=1' name='viewport'>
|
||||
<title>Masto-FE standalone</title>
|
||||
<link rel="manifest" type="applicaton/manifest+json" href="/manifest.json" />
|
||||
|
||||
<meta name="theme-color" content="#282c37" />
|
||||
|
||||
<script crossorigin='anonymous' src="/packs/js/locales.js"></script>
|
||||
<script crossorigin='anonymous' src="/packs/js/locales/glitch/en.js"></script>
|
||||
|
||||
<link rel='preload' as='script' crossorigin='anonymous' href='/packs/js/features/getting_started.js'>
|
||||
<link rel='preload' as='script' crossorigin='anonymous' href='/packs/js/features/compose.js'>
|
||||
<link rel='preload' as='script' crossorigin='anonymous' href='/packs/js/features/home_timeline.js'>
|
||||
<link rel='preload' as='script' crossorigin='anonymous' href='/packs/js/features/notifications.js'>
|
||||
<script id='initial-state' type='application/json'>{}</script>
|
||||
|
||||
<script src="/verify-state.js"></script>
|
||||
<script src="/packs/js/core/common.js"></script>
|
||||
<link rel="stylesheet" media="all" href="/packs/css/core/common.css" />
|
||||
|
||||
<script src="/packs/js/flavours/glitch/common.js"></script>
|
||||
<link rel="stylesheet" media="all" href="/packs/css/flavours/glitch/common.css" />
|
||||
|
||||
<script src="/packs/js/flavours/glitch/home.js"></script>
|
||||
</head>
|
||||
<body class='app-body no-reduce-motion system-font'>
|
||||
<div class='app-holder' data-props='{"locale":"en"}' id='mastodon'>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
13
public/login.html
Normal file
13
public/login.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Login | Masto-FE standalone</title>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
12
public/manifest.json
Normal file
12
public/manifest.json
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"background_color": "#191b22",
|
||||
"categories": ["social"],
|
||||
"description": "Masto-FE standalone",
|
||||
"display": "standalone",
|
||||
"name": "Masto-FE standalone",
|
||||
"serviceworker": {
|
||||
"src": "/sw.js"
|
||||
},
|
||||
"start_url": "/getting-started",
|
||||
"theme_color": "#282c37"
|
||||
}
|
||||
6
public/verify-state.js
Normal file
6
public/verify-state.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
const initialState = localStorage.getItem('initial-state');
|
||||
if (!initialState) {
|
||||
window.location.href = '/login.html';
|
||||
} else {
|
||||
document.getElementById('initial-state').textContent = initialState;
|
||||
}
|
||||
Loading…
Reference in a new issue