tildefriends/apps/user_settings/tf-password-form.js

68 lines
1.5 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-latest.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);