2017-11-29 14:36:29 +01:00
|
|
|
// (C) Copyright 2015 Martin Dougiamas
|
|
|
|
//
|
|
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
// you may not use this file except in compliance with the License.
|
|
|
|
// You may obtain a copy of the License at
|
|
|
|
//
|
|
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
//
|
|
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
// See the License for the specific language governing permissions and
|
|
|
|
// limitations under the License.
|
|
|
|
|
|
|
|
import { Component, OnInit, AfterViewInit, Input, ElementRef } from '@angular/core';
|
2018-10-22 10:19:45 +02:00
|
|
|
import { CoreDomUtilsProvider } from '@providers/utils/dom';
|
2018-03-01 16:55:49 +01:00
|
|
|
import { CoreUtilsProvider } from '@providers/utils/utils';
|
2018-10-22 10:19:45 +02:00
|
|
|
import { Platform } from 'ionic-angular';
|
2017-11-29 14:36:29 +01:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Component to allow showing and hiding a password. The affected input MUST have a name to identify it.
|
|
|
|
*
|
|
|
|
* @description
|
|
|
|
* This directive needs to surround the input with the password.
|
|
|
|
*
|
|
|
|
* You need to supply the name of the input.
|
|
|
|
*
|
|
|
|
* Example:
|
|
|
|
*
|
|
|
|
* <core-show-password item-content [name]="'password'">
|
|
|
|
* <ion-input type="password" name="password"></ion-input>
|
|
|
|
* </core-show-password>
|
|
|
|
*/
|
|
|
|
@Component({
|
|
|
|
selector: 'core-show-password',
|
2018-06-12 08:41:17 +02:00
|
|
|
templateUrl: 'core-show-password.html'
|
2017-11-29 14:36:29 +01:00
|
|
|
})
|
|
|
|
export class CoreShowPasswordComponent implements OnInit, AfterViewInit {
|
|
|
|
@Input() name: string; // Name of the input affected.
|
2018-01-29 10:05:20 +01:00
|
|
|
@Input() initialShown?: boolean | string; // Whether the password should be shown at start.
|
2017-11-29 14:36:29 +01:00
|
|
|
|
|
|
|
shown: boolean; // Whether the password is shown.
|
|
|
|
label: string; // Label for the button to show/hide.
|
|
|
|
iconName: string; // Name of the icon of the button to show/hide.
|
2018-01-29 10:05:20 +01:00
|
|
|
selector = ''; // Selector to identify the input.
|
2017-11-29 14:36:29 +01:00
|
|
|
|
|
|
|
protected input: HTMLInputElement; // Input affected.
|
|
|
|
protected element: HTMLElement; // Current element.
|
|
|
|
|
2018-10-22 10:19:45 +02:00
|
|
|
constructor(element: ElementRef, private utils: CoreUtilsProvider, private domUtils: CoreDomUtilsProvider,
|
|
|
|
private platform: Platform) {
|
2017-11-29 14:36:29 +01:00
|
|
|
this.element = element.nativeElement;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Component being initialized.
|
|
|
|
*/
|
2018-01-29 10:05:20 +01:00
|
|
|
ngOnInit(): void {
|
2017-11-30 16:27:10 +01:00
|
|
|
this.shown = this.utils.isTrueOrOne(this.initialShown);
|
2017-11-29 14:36:29 +01:00
|
|
|
this.selector = 'input[name="' + this.name + '"]';
|
|
|
|
this.setData();
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* View has been initialized.
|
|
|
|
*/
|
2018-01-29 10:05:20 +01:00
|
|
|
ngAfterViewInit(): void {
|
2017-11-29 14:36:29 +01:00
|
|
|
this.searchInput();
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Search the input to show/hide.
|
|
|
|
*/
|
2018-01-29 10:05:20 +01:00
|
|
|
protected searchInput(): void {
|
2017-11-29 14:36:29 +01:00
|
|
|
// Search the input.
|
|
|
|
this.input = <HTMLInputElement> this.element.querySelector(this.selector);
|
|
|
|
|
|
|
|
if (this.input) {
|
|
|
|
// Input found. Set the right type.
|
|
|
|
this.input.type = this.shown ? 'text' : 'password';
|
|
|
|
|
|
|
|
// By default, don't autocapitalize and autocorrect.
|
|
|
|
if (!this.input.getAttribute('autocorrect')) {
|
|
|
|
this.input.setAttribute('autocorrect', 'off');
|
|
|
|
}
|
|
|
|
if (!this.input.getAttribute('autocapitalize')) {
|
|
|
|
this.input.setAttribute('autocapitalize', 'none');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Set label, icon name and input type.
|
|
|
|
*/
|
2018-01-29 10:05:20 +01:00
|
|
|
protected setData(): void {
|
2017-12-08 15:53:27 +01:00
|
|
|
this.label = this.shown ? 'core.hide' : 'core.show';
|
2017-11-29 14:36:29 +01:00
|
|
|
this.iconName = this.shown ? 'eye-off' : 'eye';
|
|
|
|
if (this.input) {
|
|
|
|
this.input.type = this.shown ? 'text' : 'password';
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Toggle show/hide password.
|
2018-08-06 08:51:15 +02:00
|
|
|
*
|
2019-09-10 16:48:56 +02:00
|
|
|
* @param event The mouse event.
|
2017-11-29 14:36:29 +01:00
|
|
|
*/
|
2018-08-06 08:51:15 +02:00
|
|
|
toggle(event: Event): void {
|
|
|
|
event.preventDefault();
|
|
|
|
event.stopPropagation();
|
|
|
|
|
2018-10-22 10:19:45 +02:00
|
|
|
const isFocused = document.activeElement === this.input;
|
|
|
|
|
2017-11-29 14:36:29 +01:00
|
|
|
this.shown = !this.shown;
|
|
|
|
this.setData();
|
2018-10-22 10:19:45 +02:00
|
|
|
|
|
|
|
if (isFocused && this.platform.is('android')) {
|
|
|
|
// In Android, the keyboard is closed when the input type changes. Focus it again.
|
|
|
|
setTimeout(() => {
|
|
|
|
this.domUtils.focusElement(this.input);
|
|
|
|
}, 400);
|
|
|
|
}
|
2017-11-29 14:36:29 +01:00
|
|
|
}
|
|
|
|
}
|