From b84fdaff7ab5ac9bc9412508450921750930d8e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Wed, 3 Jul 2024 14:28:08 +0200 Subject: [PATCH] MOBILE-4594 core: Migrate core-show-password 2 ion-input-password-toggle --- .../index/addon-mod-lesson-index.html | 2 +- .../addon-mod-quiz-access-password.html | 2 +- src/core/components/components.module.ts | 4 +- .../password-modal/password-modal.html | 2 +- .../show-password/core-show-password.html | 5 +- .../show-password/show-password.scss | 31 ---- .../components/show-password/show-password.ts | 157 ++++-------------- .../login/pages/credentials/credentials.html | 2 +- .../pages/email-signup/email-signup.html | 2 +- .../login/pages/reconnect/reconnect.html | 2 +- src/theme/components/ion-input.scss | 4 + 11 files changed, 45 insertions(+), 168 deletions(-) delete mode 100644 src/core/components/show-password/show-password.scss diff --git a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html index acdf9307a..6478c5c9f 100644 --- a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html +++ b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html @@ -31,7 +31,7 @@ - + diff --git a/src/addons/mod/quiz/accessrules/password/component/addon-mod-quiz-access-password.html b/src/addons/mod/quiz/accessrules/password/component/addon-mod-quiz-access-password.html index b2d553869..4e7738556 100644 --- a/src/addons/mod/quiz/accessrules/password/component/addon-mod-quiz-access-password.html +++ b/src/addons/mod/quiz/accessrules/password/component/addon-mod-quiz-access-password.html @@ -8,6 +8,6 @@ - + diff --git a/src/core/components/components.module.ts b/src/core/components/components.module.ts index 8055d6e70..23b32cf00 100644 --- a/src/core/components/components.module.ts +++ b/src/core/components/components.module.ts @@ -97,7 +97,7 @@ import { CoreSitesListComponent } from './sites-list/sites-list'; CoreProgressBarComponent, CoreRecaptchaComponent, CoreSendMessageFormComponent, - CoreShowPasswordComponent, + CoreShowPasswordComponent, // eslint-disable-line deprecation/deprecation CoreSitePickerComponent, CoreSplitViewComponent, // eslint-disable-next-line deprecation/deprecation @@ -153,7 +153,7 @@ import { CoreSitesListComponent } from './sites-list/sites-list'; CoreProgressBarComponent, CoreRecaptchaComponent, CoreSendMessageFormComponent, - CoreShowPasswordComponent, + CoreShowPasswordComponent, // eslint-disable-line deprecation/deprecation CoreSitePickerComponent, CoreSplitViewComponent, // eslint-disable-next-line deprecation/deprecation diff --git a/src/core/components/password-modal/password-modal.html b/src/core/components/password-modal/password-modal.html index 8b1b77ef6..a8c99151d 100644 --- a/src/core/components/password-modal/password-modal.html +++ b/src/core/components/password-modal/password-modal.html @@ -17,7 +17,7 @@ - + diff --git a/src/core/components/show-password/core-show-password.html b/src/core/components/show-password/core-show-password.html index 21642a1ce..715bd5bf0 100644 --- a/src/core/components/show-password/core-show-password.html +++ b/src/core/components/show-password/core-show-password.html @@ -1,5 +1,2 @@ - - + diff --git a/src/core/components/show-password/show-password.scss b/src/core/components/show-password/show-password.scss deleted file mode 100644 index ec8244fb6..000000000 --- a/src/core/components/show-password/show-password.scss +++ /dev/null @@ -1,31 +0,0 @@ -@use "theme/globals" as *; - -:host { - display: contents; - - // Only applies to deprecated way (surrounding). - ::ng-deep ion-input + ion-button { - background: transparent; - padding: 0 var(--inner-padding-end) 0 4px; - margin-top: 0; - margin-bottom: 0; - position: absolute; - @include safe-area-position(null, 0px, null, null); - top: 0; - } - - // Only applies to deprecated way (surrounding). - ::ng-deep ion-input { - --padding-end: 56px !important; - } - - ::ng-deep ion-input.input-label-placement-stacked + ion-button { - top: 14px; - } - -} - -ion-button { - z-index: 5; - pointer-events: visible; -} diff --git a/src/core/components/show-password/show-password.ts b/src/core/components/show-password/show-password.ts index 506f50e6d..88bdcc81f 100644 --- a/src/core/components/show-password/show-password.ts +++ b/src/core/components/show-password/show-password.ts @@ -12,173 +12,80 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Component, OnInit, AfterViewInit, Input, ElementRef, ContentChild } from '@angular/core'; +import { Component, AfterViewInit, Input, ContentChild, ViewEncapsulation } from '@angular/core'; import { IonInput } from '@ionic/angular'; - -import { CorePlatform } from '@services/platform'; import { CoreDomUtils } from '@services/utils/dom'; + import { CoreUtils } from '@services/utils/utils'; import { CoreLogger } from '@singletons/logger'; /** * This component allows to show/hide a password. - * It's meant to be used with ion-input. - * It's recommended to use it as a slot of the input. + * It's meant to be used with ion-input as a slot of the input. * * @description * * There are 2 ways to use ths component: * - Slot it to start or end on the ion-input element. - * - Surround the ion-input with the password with this component. This is deprecated. - * - * In order to help finding the input you can specify the name of the input or the ion-input element. - * + * - Surround the ion-input with the password with this component. Not recommended. * * Example of new usage: * - * + * * * * - * Example deprecated usage: + * Example surrounding usage: * * - * + * * + * + * @deprecated since 4.5. Use instead. */ @Component({ selector: 'core-show-password', templateUrl: 'core-show-password.html', - styleUrls: ['show-password.scss'], + styles: 'core-show-password { display: contents; }', + encapsulation: ViewEncapsulation.None, }) -export class CoreShowPasswordComponent implements OnInit, AfterViewInit { - - @Input() initialShown?: boolean | string; // Whether the password should be shown at start. - - @Input() name = ''; // Deprecated. Not used anymore. - @ContentChild(IonInput) ionInput?: IonInput | HTMLIonInputElement; // Deprecated. Use slot instead. - - protected input?: HTMLInputElement; - protected hostElement: HTMLElement; - protected logger: CoreLogger; - - constructor(element: ElementRef) { - this.hostElement = element.nativeElement; - this.logger = CoreLogger.getInstance('CoreShowPasswordComponent'); - } - - get shown(): boolean { - return this.input?.type === 'text'; - } - - set shown(shown: boolean) { - if (!this.input) { - return; - } - - this.input.type = shown ? 'text' : 'password'; - } +export class CoreShowPasswordComponent implements AfterViewInit { /** - * @inheritdoc + * @deprecated since 4.5. Not used anymore. */ - ngOnInit(): void { - this.shown = CoreUtils.isTrueOrOne(this.initialShown); - } + @Input() initialShown = ''; + + /** + * @deprecated since 4.4. Not used anymore. + */ + @Input() name = ''; + + /** + * @deprecated since 4.4. Use slotted solution instead. + */ + @ContentChild(IonInput) ionInput?: IonInput | HTMLIonInputElement; /** * @inheritdoc */ async ngAfterViewInit(): Promise { - await this.setInputElement(); - - if (!this.input) { - return; - } - - // 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 the input element to affect. - */ - protected async setInputElement(): Promise { - if (!this.ionInput) { - this.ionInput = this.hostElement.closest('ion-input') ?? undefined; - - this.hostElement.setAttribute('slot', 'end'); - } else { - // It's outside ion-input, warn devs. - this.logger.warn('Deprecated CoreShowPasswordComponent usage, it\'s not needed to surround ion-input anymore.'); - } + CoreLogger.getInstance('CoreShowPasswordComponent') + .warn('Deprecated component, use instead.'); + // eslint-disable-next-line deprecation/deprecation if (!this.ionInput) { return; } - try { - this.input = await this.ionInput.getInputElement(); - } catch { - // This should never fail, but it does in some testing environment because Ionic elements are not - // rendered properly. So in case this fails it will try to find through the name and ignore the error. - const name = this.ionInput.name; - if (!name) { - return; - } - this.input = this.hostElement.querySelector('input[name="' + name + '"]') ?? undefined; - } - } - - /** - * Toggle show/hide password. - * - * @param event The mouse event. - */ - toggle(event: Event): void { - if (event.type === 'keyup' && !this.isValidKeyboardKey(event)) { + // eslint-disable-next-line deprecation/deprecation + const input = await CoreUtils.ignoreErrors(this.ionInput.getInputElement()); + if (!input) { return; } - event.preventDefault(); - event.stopPropagation(); - - const isFocused = document.activeElement === this.input; - this.shown = !this.shown; - - // In Android, the keyboard is closed when the input type changes. Focus it again. - if (this.input && isFocused && CorePlatform.isAndroid()) { - CoreDomUtils.focusElement(this.input); - } - } - - /** - * Do not loose focus. - * - * @param event The mouse event. - */ - doNotBlur(event: Event): void { - if (event.type === 'keydown' && !this.isValidKeyboardKey(event)) { - return; - } - - event.preventDefault(); - event.stopPropagation(); - } - - /** - * Checks if Space or Enter have been pressed. - * - * @param event Keyboard Event. - * @returns Wether space or enter have been pressed. - */ - protected isValidKeyboardKey(event: KeyboardEvent): boolean { - return event.key === ' ' || event.key === 'Enter'; + const toggle = CoreDomUtils.convertToElement(''); + input.parentElement?.appendChild(toggle.children[0]); } } diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html index 3e7cf76f3..caacc02d9 100644 --- a/src/core/features/login/pages/credentials/credentials.html +++ b/src/core/features/login/pages/credentials/credentials.html @@ -53,7 +53,7 @@ - +
{{ 'core.login.password' | translate }}
- +

{{settings.passwordpolicy}} diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html index 354a1a9b3..3c529966e 100644 --- a/src/core/features/login/pages/reconnect/reconnect.html +++ b/src/core/features/login/pages/reconnect/reconnect.html @@ -65,7 +65,7 @@ placeholder="{{ 'core.login.password' | translate }}" formControlName="password" [clearOnEdit]="false" autocomplete="current-password" enterkeyhint="go" required="true" [attr.aria-label]="'core.login.password' | translate"> - +