83 lines
1.6 KiB
JavaScript
83 lines
1.6 KiB
JavaScript
import {LitElement, html} from './lit-all.min.js';
|
|
import * as tfrpc from '/static/tfrpc.js';
|
|
|
|
class TfPasswordFormElement extends LitElement {
|
|
static get properties() {
|
|
return {
|
|
//selected: {type: String},
|
|
};
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
}
|
|
|
|
/**
|
|
* Checks a password against different requirements
|
|
* @param {string} password the password to validate
|
|
* @returns
|
|
*/
|
|
validatePassword(password) {
|
|
// TODO(tasiaiso)
|
|
return true;
|
|
}
|
|
|
|
submitPassword() {
|
|
const currentPwd = this.shadowRoot.getElementById('current').value;
|
|
const newPwd = this.shadowRoot.getElementById('new').value;
|
|
const repeatPwd = this.shadowRoot.getElementById('Repeat').value;
|
|
|
|
if (!(newPwd === repeatPwd)) {
|
|
return;
|
|
}
|
|
|
|
// TODO
|
|
// tfrpc.changePassword()
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<link rel="stylesheet" href="/static/tildefriends-v1.css" />
|
|
|
|
<style>
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
}
|
|
</style>
|
|
|
|
<div class="grid">
|
|
<label for="current">Current password:</label>
|
|
<input
|
|
type="password"
|
|
id="current"
|
|
name="current"
|
|
autocomplete="current-password"
|
|
/>
|
|
|
|
<label for="new">Enter new password:</label>
|
|
<input
|
|
type="password"
|
|
id="new"
|
|
name="new"
|
|
autocomplete="new-password"
|
|
/>
|
|
|
|
<label for="repeat">Repeat new password:</label>
|
|
<input
|
|
type="password"
|
|
id="repeat"
|
|
name="repeat"
|
|
autocomplete="new-password"
|
|
/>
|
|
</div>
|
|
|
|
<button @click=${this.submitPassword} class="red">
|
|
[Not implemented] Change my password
|
|
</button>
|
|
`;
|
|
}
|
|
}
|
|
|
|
customElements.define('tf-password-form', TfPasswordFormElement);
|