<!doctype html> <html> <head> <title>Tilde Friends Sign-in</title> <link type="text/css" rel="stylesheet" href="/static/style.css" /> <link type="image/svg+xml" rel="icon" href="/static/tildefriends.svg" /> <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 { code_of_conduct: {type: String}, error: {type: String}, have_administrator: {type: Boolean}, name: {type: String}, tab: {type: String}, }; } constructor() { super(); this.tab = 'login'; } 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 = '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 = '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 = '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 = '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>