inital commit - sign in to mastodon

This commit is contained in:
ideclon 2022-11-29 21:30:09 +00:00
commit b2f9dceef1
Signed by: ideclon
GPG Key ID: 3E186629301AFBFD
11 changed files with 192 additions and 0 deletions

17
connect.php Normal file
View File

@ -0,0 +1,17 @@
<?php require('template/header.html');?>
<form id="instance-connect" style="display: none;">
<fieldset>
<legend>Connect to Mastodon</legend>
<label>Your Mastodon server</label> <input type="url" id="server-url" value="https://" required /><br>
<input type="submit" value="Connect" />
</fieldset>
</form>
<form id="account-connect" style="display: none;">
<fieldset>
<legend>Connect to Mastodon</legend>
<a href="#">Click here to sign in</a>
</fieldset>
</form>
<?php $script = 'js/connect.js'; require('template/footer.php');?>

21
css/styles.css Normal file
View File

@ -0,0 +1,21 @@
.message-box {
display: none;
margin: 10px;
padding: 8px;
border-radius: 10px;
outline-style: solid;
outline-width: 2px;
background-color: lightgray;
outline-color: gray;
}
.message-box.info {
background-color: lightblue;
outline-color: blue;
}
.message-box.error {
background-color: lightpink;
outline-color: red;
}

3
index.php Normal file
View File

@ -0,0 +1,3 @@
<?php require("template/header.html")?>
<?php $script = 'js/index.js'; require("template/footer.php")?>

27
js/connect.js Normal file
View File

@ -0,0 +1,27 @@
account.getPrefs().then((response) => {
if(response.user_token !== undefined) {
message_box('info', 'You\'re already conneted! <a href="/">Go home</a>');
return
};
if(response.user_server_uri == undefined) {
document.getElementById('instance-connect').style.display = 'block';
return
}
});
document.getElementById('instance-connect').addEventListener('submit', (event) => {
event.preventDefault();
const server_url = document.getElementById('server-url').value;
functions.createExecution('servers', '{"action": "register_server", "user_id": "' + accountDetailsPromise['$id'] + '", "server_url": "' + server_url + '"}')
.then((res) => {
// console.log(JSON.parse(res.response)['redirect_uri']);
window.location.href = JSON.parse(res.response).redirect_uri;
})
});

0
js/index.js Normal file
View File

22
js/login.js Normal file
View File

@ -0,0 +1,22 @@
account.get().then((response) => {
location.href = '/';
}).catch((err) => {
return;
})
document.querySelectorAll('#login')[0].addEventListener('click', () => {
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const error = document.getElementById('error-message');
if(email == '' || password == '') {
error.innerHTML = 'Email address or password is blank<br>'
} else {
account.createEmailSession(email, password).then((response) => {
location.href = '/';
}).catch((err) => {
error.innerHTML = err.message + '<br>';
})
}
})

49
js/setup.js Normal file
View File

@ -0,0 +1,49 @@
const client = new Appwrite.Client()
.setEndpoint(APPWRITE_ENDPOINT) // Your API Endpoint
.setProject(APPWRITE_PROJECT_ID); // Your project ID
const account = new Appwrite.Account(client);
const databases = new Appwrite.Databases(client);
const functions = new Appwrite.Functions(client);
let accountDetailsPromise = account.get().then((res) => {
accountDetailsPromise = res
})
if(window.location.pathname !== '/login.html') {
account.get().then((response) => {
console.log(response);
document.querySelectorAll('.fill-name').forEach(el => el.innerHTML = response.name);
if(response.emailVerification == false) {
message_box('error', 'Your account is not verified!');
return
}
if(response.prefs.user_token == undefined) {
message_box('info', "You haven't connected to Mastodon yet! <a href='connect.php'>Do it now</a>");
}
}).catch((err) => {
if(err == "AppwriteException: User (role: guests) missing scope (account)") {
location.href = "login.html";
}
})
}
document.getElementById('logout').addEventListener('click', () => {
account.deleteSession('current').then((res) => {
window.location.reload();
});
})
function message_box(type, message) {
const message_box = document.getElementById('message-box');
message_box.classList.remove('info', 'error', 'success');
message_box.innerHTML = message;
message_box.classList.add(type);
message_box.style.display = 'block';
}

18
login.html Normal file
View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<head>
<title>Login | Mastodon Algorithm</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<script src="https://cdn.jsdelivr.net/npm/appwrite@10.1.0"></script>
<body>
<fieldset>
<legend>Login</legend>
<label>Email: </label> <input type="email" id="email" /><br>
<label>Password: </label> <input type="password" id="password" /><br>
<span id="error-message" style="color: red;"></span>
<button type="button" id="login">Log in</button>
</fieldset>
</body>
<script src="js/setup.js"></script>
<script src="js/login.js"></script>

15
redirect.php Normal file
View File

@ -0,0 +1,15 @@
<?php
if(!isset($_GET['code'])) {
die('You cannot load this page directly! <a href="/">GO HOME</a>');
}
require('template/header.html');
require('template/footer.php');
?>
<script>
const urlparams = new URLSearchParams(window.location.search);
functions.createExecution('servers', '{"action": "redirect_code", "user_id": "' + urlparams.get('user_id') + '", "code": "' + urlparams.get('code') + '"}').then((res) => {
console.log(JSON.parse(res.response));
window.location.href = '/';
})
</script>

8
template/footer.php Normal file
View File

@ -0,0 +1,8 @@
</body>
<script>
const APPWRITE_ENDPOINT = '<?=getenv('APPWRITE_ENDPOINT')?>';
const APPWRITE_PROJECT_ID = '<?=getenv('APPWRITE_PROJECT_ID')?>';
const APPWRITE_DB_ID = '<?=getenv('APPWRITE_DB_ID')?>';
</script>
<script src="js/setup.js"></script>
<?=(isset($script))?"<script src=\"$script\"></script>":''?>

12
template/header.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<head>
<title>Mastodon Algorithm</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css" />
</head>
<script src="https://cdn.jsdelivr.net/npm/appwrite@10.1.0"></script>
<body>
<span id="welcome">Welcome, <span class="fill-name"></span>. Not you? <a href="#" id='logout'>Logout</a></span>
<span class="message-box" id="message-box"></span>