generated from garrettmills/template-npm-typescript
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.8 KiB
63 lines
1.8 KiB
import {TextInputFieldComponent} from './TextInputField.component.js'
|
|
import {Component, Element} from '../../decorators.js'
|
|
|
|
@Component('ex-input-password')
|
|
export class PasswordInputFieldComponent extends TextInputFieldComponent {
|
|
protected static styles = `
|
|
<style>
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
</style>
|
|
`
|
|
|
|
protected static html = `
|
|
<div class="container">
|
|
<label>
|
|
<span class="label"></span>
|
|
<input class="input" type="password">
|
|
<small class="error"></small>
|
|
</label>
|
|
<label>
|
|
<input class="input confirm" type="password">
|
|
</label>
|
|
</div>
|
|
`
|
|
|
|
@Element('input.confirm')
|
|
protected confirmEl!: HTMLInputElement
|
|
|
|
render() {
|
|
super.render()
|
|
|
|
const hasConfirm = this.hasAttribute('confirmed')
|
|
this.confirmEl.hidden = !hasConfirm
|
|
|
|
if ( hasConfirm ) {
|
|
const label = this.label || this.placeholder
|
|
this.confirmEl.setAttribute('placeholder', (label ? label + ' ' : '') + 'Confirmation')
|
|
this.confirmEl.setAttribute('name', (this.name || this.uuid) + '_confirm')
|
|
}
|
|
|
|
if ( this.hasAttribute('required') && hasConfirm ) {
|
|
this.confirmEl.setAttribute('required', '1')
|
|
} else {
|
|
this.confirmEl.removeAttribute('required')
|
|
}
|
|
}
|
|
|
|
validate(): boolean {
|
|
if ( !super.validate() ) {
|
|
return false
|
|
}
|
|
|
|
if ( this.hasAttribute('confirmed') && this.confirmEl.value !== this.getValue() ) {
|
|
this.error = 'Confirmation does not match'
|
|
return false
|
|
}
|
|
|
|
return true
|
|
}
|
|
}
|