2024-07-01 03:41:02 +01:00
|
|
|
<script>
|
2024-07-03 22:00:32 +01:00
|
|
|
import * as api from '$lib/api.js';
|
|
|
|
import { server, createServer } from '$lib/client/server.js';
|
|
|
|
import { app } from '$lib/client/app.js';
|
2024-07-01 03:41:02 +01:00
|
|
|
import { get } from 'svelte/store';
|
|
|
|
|
|
|
|
import Logo from '$lib/../img/campfire-logo.svg';
|
|
|
|
|
2024-07-03 22:00:32 +01:00
|
|
|
let display_error = false;
|
2024-07-01 03:41:02 +01:00
|
|
|
let logging_in = false;
|
|
|
|
|
2024-07-03 22:00:32 +01:00
|
|
|
async function log_in(event) {
|
2024-07-01 03:41:02 +01:00
|
|
|
event.preventDefault();
|
2024-07-03 22:00:32 +01:00
|
|
|
display_error = false;
|
2024-07-01 03:41:02 +01:00
|
|
|
|
|
|
|
logging_in = true;
|
|
|
|
const host = event.target.host.value;
|
|
|
|
|
|
|
|
if (!host || host === "") {
|
2024-07-03 22:00:32 +01:00
|
|
|
display_error = "Please enter an server domain.";
|
2024-07-01 03:41:02 +01:00
|
|
|
logging_in = false;
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2024-07-03 22:00:32 +01:00
|
|
|
server.set(await createServer(host));
|
|
|
|
if (!get(server)) {
|
|
|
|
display_error = "Failed to connect to the server.\nCheck the browser console for details!"
|
|
|
|
logging_in = false;
|
|
|
|
return;
|
|
|
|
}
|
2024-07-01 03:41:02 +01:00
|
|
|
|
2024-07-03 22:00:32 +01:00
|
|
|
app.set(await api.createApp(get(server).host));
|
|
|
|
if (!get(app)) {
|
|
|
|
display_error = "Failed to create an application for this server."
|
2024-07-01 03:41:02 +01:00
|
|
|
logging_in = false;
|
2024-07-03 22:00:32 +01:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
location = api.getOAuthUrl(get(server).host, get(app).id);
|
2024-07-01 03:41:02 +01:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<form on:submit={log_in} id="login-form">
|
|
|
|
<div class="app-logo">
|
|
|
|
<Logo />
|
|
|
|
</div>
|
|
|
|
<p>Welcome, fediverse user!</p>
|
2024-07-03 22:00:32 +01:00
|
|
|
<p>Please enter your server domain to log in.</p>
|
2024-07-01 03:41:02 +01:00
|
|
|
<div class="input-wrapper">
|
2024-07-03 22:00:32 +01:00
|
|
|
<input type="text" id="host" aria-label="server domain" class={logging_in ? "throb" : ""}>
|
|
|
|
{#if display_error}
|
|
|
|
<p class="error">{display_error}</p>
|
2024-07-01 03:41:02 +01:00
|
|
|
{/if}
|
|
|
|
</div>
|
|
|
|
<br>
|
|
|
|
<button type="submit" id="login" class={logging_in ? "disabled" : ""}>Log in</button>
|
|
|
|
<p><small>
|
|
|
|
Please note this is
|
|
|
|
<strong><em>extremely experimental software</em></strong>;
|
|
|
|
things are likely to break!
|
|
|
|
<br>
|
|
|
|
If that's all cool with you, welcome aboard!
|
|
|
|
</small></p>
|
|
|
|
|
|
|
|
<p class="form-footer">made with ❤ by <a href="https://bliss.town">bliss town</a>, 2024</p>
|
|
|
|
</form>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
form#login-form {
|
|
|
|
height: 100vh;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.input-wrapper {
|
|
|
|
width: 360px;
|
|
|
|
margin: 0 auto;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
input[type=text] {
|
|
|
|
width: 100%;
|
|
|
|
padding: 12px;
|
|
|
|
display: block;
|
|
|
|
border-radius: 8px;
|
|
|
|
border: 1px solid var(--accent);
|
|
|
|
background-color: var(--bg-800);
|
|
|
|
|
|
|
|
font-family: inherit;
|
|
|
|
font-weight: bold;
|
|
|
|
font-size: inherit;
|
|
|
|
color: var(--text);
|
|
|
|
|
|
|
|
transition: box-shadow .2s;
|
|
|
|
}
|
|
|
|
|
|
|
|
input[type=text]::placeholder {
|
|
|
|
opacity: .8;
|
|
|
|
}
|
|
|
|
|
|
|
|
input[type=text]:focus {
|
|
|
|
outline: none;
|
|
|
|
box-shadow: 0 0 16px color-mix(in srgb, transparent, var(--accent) 25%);
|
|
|
|
}
|
|
|
|
|
|
|
|
.error {
|
|
|
|
margin: 6px;
|
|
|
|
font-style: italic;
|
|
|
|
font-size: .9em;
|
|
|
|
color: red;
|
|
|
|
opacity: .7;
|
|
|
|
}
|
|
|
|
|
|
|
|
button#login {
|
|
|
|
margin: 8px auto;
|
|
|
|
padding: 12px 24px;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
justify-content: space-between;
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
font-family: inherit;
|
|
|
|
font-size: 1rem;
|
|
|
|
font-weight: 600;
|
|
|
|
text-align: left;
|
|
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
border-width: 2px;
|
|
|
|
border-style: solid;
|
|
|
|
|
|
|
|
background-color: var(--bg-700);
|
|
|
|
color: var(--text);
|
|
|
|
border-color: transparent;
|
|
|
|
|
|
|
|
transition-property: border-color, background-color, color;
|
|
|
|
transition-timing-function: ease-out;
|
|
|
|
transition-duration: .1s;
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
text-align: center;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
button#login:hover {
|
|
|
|
background-color: color-mix(in srgb, var(--bg-700), var(--accent) 10%);
|
|
|
|
border-color: color-mix(in srgb, var(--bg-700), var(--accent) 20%);
|
|
|
|
}
|
|
|
|
|
|
|
|
button#login:active {
|
|
|
|
background-color: color-mix(in srgb, var(--bg-700), var(--bg-800) 50%);
|
|
|
|
border-color: color-mix(in srgb, var(--bg-700), var(--bg-800) 10%);
|
|
|
|
}
|
|
|
|
|
|
|
|
button#login.disabled {
|
|
|
|
opacity: .5;
|
|
|
|
cursor: initial;
|
|
|
|
}
|
|
|
|
|
|
|
|
.form-footer {
|
|
|
|
opacity: .7;
|
|
|
|
}
|
|
|
|
</style>
|