forked from cory/tildefriends
139 lines
4.9 KiB
HTML
139 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Tilde Friends Sign-in</title>
|
|
<link type="text/css" rel="stylesheet" href="/static/style.css">
|
|
<link type="image/png" rel="shortcut icon" href="/static/favicon.png">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
</head>
|
|
<body>
|
|
<h1 style="text-align: center">Tilde Friends Sign-in</h1>
|
|
<tf-auth id="auth"></tf-auth>
|
|
<script>window.litDisableBundleWarning = true;</script>
|
|
<script type="module">
|
|
import {LitElement, html} from '/lit/lit-all.min.js';
|
|
let g_data = $AUTH_DATA;
|
|
let app = document.getElementById('auth');
|
|
Object.assign(app, g_data);
|
|
|
|
class TfAuthElement extends LitElement {
|
|
static get_properties() {
|
|
return {
|
|
name: {type: String},
|
|
tab: {type: String},
|
|
};
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.tab = 'login';
|
|
}
|
|
|
|
tab_changed(name) {
|
|
this.tab = name;
|
|
this.requestUpdate();
|
|
}
|
|
|
|
render() {
|
|
let self = this;
|
|
return html`
|
|
<style>
|
|
[name="tab"] {
|
|
display: none;
|
|
}
|
|
[name="tab"]+label {
|
|
background-color: #586e75;
|
|
padding: 1em;
|
|
display: inline-block;
|
|
flex: 1 0;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
}
|
|
[name="tab"]+label:hover {
|
|
background-color: #dc322f;
|
|
}
|
|
[name="tab"]:checked+label {
|
|
background-color: #93a1a1;
|
|
border: 2px solid #eee8d5;
|
|
}
|
|
.error {
|
|
color: #f00;
|
|
border: 1px solid #f00;
|
|
margin: 4px;
|
|
padding: 8px;
|
|
}
|
|
form label {
|
|
padding-top: 1em;
|
|
font-weight: bold;
|
|
}
|
|
form input {
|
|
font-size: x-large;
|
|
padding: 4px;
|
|
}
|
|
input[type="submit"] {
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
padding: 1em;
|
|
}
|
|
</style>
|
|
<div style="display: flex; flex-direction: column; max-width: 1280px; margin: auto">
|
|
<h1 ?hidden=${this.name}>Welcome.</h1>
|
|
<h1 ?hidden=${this.name === undefined}>Welcome, ${this.name}.</h1>
|
|
|
|
<div style="display: flex; flex-direction: row; width: 100%">
|
|
<input type="radio" name="tab" id="login" value="Login" ?checked=${this.tab == 'login'} @change=${() => self.tab_changed('login')}></input>
|
|
<label for="login" id="login_label">Login</label>
|
|
|
|
<input type="radio" name="tab" id="register" value="Register" ?checked=${this.tab == 'register'} @change=${() => self.tab_changed('register')}></input>
|
|
<label for="register" id="register_label">Register</label>
|
|
|
|
<input type="radio" name="tab" id="guest" value="Guest" ?checked=${this.tab == 'guest'} @change=${() => self.tab_changed('guest')}></input>
|
|
<label for="guest" id="guest_label">Guest</label>
|
|
|
|
<input type="radio" name="tab" id="change" value="Change Password" ?checked=${this.tab == 'change'} @change=${() => self.tab_changed('change')}></input>
|
|
<label for="change" id="change_label">Change Password</label>
|
|
</div>
|
|
|
|
<div ?hidden=${this.tab != 'login' && this.tab != 'register' && this.tab != 'change'}>
|
|
<div id="error" ?hidden=${this.error === undefined} class="error">
|
|
${this.error}
|
|
</div>
|
|
<form method="POST" style="display: flex; flex-direction: column">
|
|
<label for="name">Name:</label>
|
|
<input type="text" id="name" name="name"></input>
|
|
|
|
<label for="password">${this.tab == 'change' ? 'Old ' : ''}Password:</label>
|
|
<input type="password" id="password" name="password"></input>
|
|
|
|
<label ?hidden=${this.tab != 'change'} for="new_password">New Password:</label>
|
|
<input ?hidden=${this.tab != 'change'} type="password" id="new_password" name="new_password"></input>
|
|
|
|
<label ?hidden=${this.tab != 'register' && this.tab != 'change'} for="confirm">Confirm ${this.tab == 'change' ? 'New ' : ''}Password:</label>
|
|
<input ?hidden=${this.tab != 'register' && this.tab != 'change'} type="password" id="confirm" name="confirm"></input>
|
|
|
|
<input id="loginButton" type="submit" name="submit" value="Login"></input>
|
|
<input type="hidden" name="register" value="${this.tab == 'register' ? 1 : 0}"></input>
|
|
<input type="hidden" name="change" value="${this.tab == 'change' ? 1 : 0}"></input>
|
|
</form>
|
|
</div>
|
|
<div ?hidden=${this.tab != 'guest'}>
|
|
<form method="POST" style="display: flex; flex-direction: column">
|
|
<input type="submit" id="guestButton" name="guestButton" value="Proceed as Guest"></input>
|
|
</form>
|
|
</div>
|
|
|
|
<div ?hidden=${this.have_administrator} class="notice">
|
|
There is currently no administrator. You will be made administrator.
|
|
</div>
|
|
|
|
<h2>Code of Conduct</h2>
|
|
<textarea readonly rows="20" cols="80" style="resize: none">${this.code_of_conduct}</textarea>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
customElements.define('tf-auth', TfAuthElement);
|
|
</script>
|
|
</body>
|
|
</html>
|