interfect/tildefriends
1
0
Fork 0
forked from cory/tildefriends
Code Pull Requests Activity

Redo auth flow with lit. Beef up the test a bit, accordingly.

Browse Source 
git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4392 ed5197a5-7fde-0310-b194-c3ffbd925b24
This commit is contained in:
Cory McWilliams
2023-08-09 22:38:41 +00:00
parent 1ba37d95b5
commit 70d37c88b5
4 changed files with 150 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
core/auth.html
View File

@ -10,10 +10,109 @@
<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-->
</head>
<body>
<h1 style="text-align: center">Tilde Friends Sign-in</h1>
<div id="content"><!--SESSION--></div>
<tf-auth id="auth"></tf-auth>
<script>window.litDisableBundleWarning = true;</script>
<script type="module">
import {LitElement, html} from '/static/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: #657b83;
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;
}
.error {
color: #f00;
border: 1px solid #f00;
margin: 4px;
padding: 8px;
}
</style>
<div style="display: flex; flex-direction: column">
<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>
</div>
<div ?hidden=${this.tab != 'login' && this.tab != 'register'}>
<div id="error" ?hidden=${this.error === undefined} class="error">
${this.error}
</div>
<form method="POST">
<div><label for="name">Name:</label> <input type="text" id="name" name="name" value=""></div>
<div><label for="password">Password:</label> <input type="password" id="password" name="password" value=""></div>
<div ?hidden=${this.tab != 'register'} id="confirmPassword"><label for="confirm">Confirm:</label> <input type="password" id="confirm" name="confirm" value=""></div>
<div><input id="loginButton" type="submit" name="submit" value="Login"></div>
<input type="hidden" name="register" value="${this.tab == 'register' ? 1 : 0}"></input>
</form>
</div>
<div ?hidden=${this.tab != 'guest'}>
<form method="POST">
<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>
<div>
<textarea readonly rows="20" cols="80">${this.code_of_conduct}</textarea>
</div>
</div>
`;
}
}
customElements.define('tf-auth', TfAuthElement);
</script>
</body>
</html>