MOBILE-4059 login: Update exceeded attempts text

scripts/langindex.json

@@ -1934,8 +1934,10 @@
   "core.login.errorqrnoscheme": "local_moodlemobileapp",
   "core.login.errorupdatesite": "local_moodlemobileapp",
   "core.login.exceededloginattempts": "local_moodlemobileapp",
-  "core.login.exceededloginattemptsfallback": "local_moodlemobileapp",
+  "core.login.exceededloginattemptsrecoverpassword": "local_moodlemobileapp",
   "core.login.exceededloginattemptssupportsubject": "local_moodlemobileapp",
+  "core.login.exceededloginattemptswithoutpassword": "local_moodlemobileapp",
+  "core.login.exceededloginattemptswithoutsupport": "local_moodlemobileapp",
   "core.login.exceededpasswordresetattempts": "local_moodlemobileapp",
   "core.login.exceededpasswordresetattemptssupportsubject": "local_moodlemobileapp",
   "core.login.faqcannotfindmysiteanswer": "local_moodlemobileapp",

src/core/features/login/lang.json

@@ -28,9 +28,11 @@
     "errorexampleurl": "The URL https://campus.example.edu is only an example URL, it's not a real site. <strong>Please use the URL of your school or organization's site.</strong>",
     "errorqrnoscheme": "This URL isn't a valid login URL.",
     "errorupdatesite": "An error occurred while updating the site's token.",
-    "exceededloginattempts": "Need help logging in? Try recovering your password or contact your site support.",
+    "exceededloginattempts": "Need help logging in? Try {{recoverPassword}} or contact your site support.",
-    "exceededloginattemptsfallback": "Need help logging in? Try recovering your password.",
+    "exceededloginattemptsrecoverpassword": "recovering your password",
     "exceededloginattemptssupportsubject": "I can't log in",
+    "exceededloginattemptswithoutpassword": "Need help logging in? Try to contact your site support.",
+    "exceededloginattemptswithoutsupport": "Need help logging in? Try {{recoverPassword}}.",
     "exceededpasswordresetattempts": "It seems you are having trouble accessing your account. You can contact your school or learning provider or try again later.",
     "exceededpasswordresetattemptssupportsubject": "I can't reset my password",
     "faqcannotfindmysiteanswer": "If you still can't find it, please contact your school or learning provider for help.",

src/core/features/login/pages/credentials/credentials.html

@@ -33,14 +33,9 @@
             <p class="core-siteurl">{{siteUrl}}</p>
         </div>
 
-        <core-login-exceeded-attempts *ngIf="supportConfig && loginAttempts >= 3" [supportConfig]="supportConfig"
+        <core-login-exceeded-attempts *ngIf="exceededAttemptsHTML && supportConfig && loginAttempts >= 3" [supportConfig]="supportConfig"
             [supportSubject]="'core.login.exceededloginattemptssupportsubject' | translate">
-            <span *ngIf="canContactSupport">
+            <div [innerHTML]="exceededAttemptsHTML" (click)="exceededAttemptsClicked($event)"></div>
-                {{ 'core.login.exceededloginattempts' | translate }}
-            </span>
-            <span *ngIf="!canContactSupport">
-                {{ 'core.login.exceededloginattemptsfallback' | translate }}
-            </span>
         </core-login-exceeded-attempts>
 
         <form [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #credentialsForm>

src/core/features/login/pages/credentials/credentials.ts

@@ -31,6 +31,7 @@ import { CoreForms } from '@singletons/form';
 import { CoreUserSupport } from '@features/user/services/support';
 import { CoreUserSupportConfig } from '@features/user/classes/support/support-config';
 import { CoreUserGuestSupportConfig } from '@features/user/classes/support/guest-support-config';
+import { SafeHtml } from '@angular/platform-browser';
 
 /**
  * Page to enter the user credentials.
@@ -59,7 +60,7 @@ export class CoreLoginCredentialsPage implements OnInit, OnDestroy {
     showScanQR = false;
     loginAttempts = 0;
     supportConfig?: CoreUserSupportConfig;
-    canContactSupport?: boolean;
+    exceededAttemptsHTML?: SafeHtml | string | null;
 
     protected siteConfig?: CoreSitePublicConfigResponse;
     protected eventThrown = false;
@@ -83,7 +84,6 @@ export class CoreLoginCredentialsPage implements OnInit, OnDestroy {
             this.siteConfig = CoreNavigator.getRouteParam<CoreSitePublicConfigResponse>('siteConfig');
             this.urlToOpen = CoreNavigator.getRouteParam('urlToOpen');
             this.supportConfig = this.siteConfig && new CoreUserGuestSupportConfig(this.siteConfig);
-            this.canContactSupport = this.supportConfig?.canContactSupport();
         } catch (error) {
             CoreDomUtils.showErrorModal(error);
 
@@ -208,6 +208,10 @@ export class CoreLoginCredentialsPage implements OnInit, OnDestroy {
             this.canSignup = this.siteConfig.registerauth == 'email' &&
                     !CoreLoginHelper.isEmailSignupDisabled(this.siteConfig, disabledFeatures);
             this.showForgottenPassword = !CoreLoginHelper.isForgottenPasswordDisabled(this.siteConfig, disabledFeatures);
+            this.exceededAttemptsHTML = CoreLoginHelper.buildExceededAttemptsHTML(
+                !!this.supportConfig?.canContactSupport(),
+                this.showForgottenPassword,
+            );
 
             if (!this.eventThrown && !this.viewLeft) {
                 this.eventThrown = true;
@@ -301,6 +305,21 @@ export class CoreLoginCredentialsPage implements OnInit, OnDestroy {
         }
     }
 
+    /**
+     * Exceeded attempts message clicked.
+     *
+     * @param event Click event.
+     */
+    exceededAttemptsClicked(event: Event): void {
+        event.preventDefault();
+
+        if (!(event.target instanceof HTMLAnchorElement)) {
+            return;
+        }
+
+        this.forgottenPassword();
+    }
+
     /**
      * Forgotten password button clicked.
      */

src/core/features/login/pages/reconnect/reconnect.html

@@ -43,14 +43,9 @@
                     </ion-item>
                 </ion-card>
 
-                <core-login-exceeded-attempts *ngIf="supportConfig && reconnectAttempts >= 3" [supportConfig]="supportConfig"
+                <core-login-exceeded-attempts *ngIf="exceededAttemptsHTML && supportConfig && reconnectAttempts >= 3"
-                    [supportSubject]="'core.login.exceededloginattemptssupportsubject' | translate">
+                    [supportConfig]="supportConfig" [supportSubject]="'core.login.exceededloginattemptssupportsubject' | translate">
-                    <span *ngIf="canContactSupport">
+                    <div [innerHTML]="exceededAttemptsHTML" (click)="exceededAttemptsClicked($event)"></div>
-                        {{ 'core.login.exceededloginattempts' | translate }}
-                    </span>
-                    <span *ngIf="!canContactSupport">
-                        {{ 'core.login.exceededloginattemptsfallback' | translate }}
-                    </span>
                 </core-login-exceeded-attempts>
             </div>
             <form *ngIf="!isOAuth" [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #reconnectForm>

src/core/features/login/pages/reconnect/reconnect.ts

@@ -30,6 +30,7 @@ import { CoreUserSupport } from '@features/user/services/support';
 import { CoreUserSupportConfig } from '@features/user/classes/support/support-config';
 import { CoreUserAuthenticatedSupportConfig } from '@features/user/classes/support/authenticated-support-config';
 import { Translate } from '@singletons';
+import { SafeHtml } from '@angular/platform-browser';
 
 /**
  * Page to enter the user password to reconnect to a site.
@@ -61,7 +62,7 @@ export class CoreLoginReconnectPage implements OnInit, OnDestroy {
     showLoading = true;
     reconnectAttempts = 0;
     supportConfig?: CoreUserSupportConfig;
-    canContactSupport?: boolean;
+    exceededAttemptsHTML?: SafeHtml | string | null;
 
     protected siteConfig?: CoreSitePublicConfigResponse;
     protected viewLeft = false;
@@ -109,7 +110,6 @@ export class CoreLoginReconnectPage implements OnInit, OnDestroy {
             this.siteUrl = site.infos.siteurl;
             this.siteName = site.getSiteName();
             this.supportConfig = new CoreUserAuthenticatedSupportConfig(site);
-            this.canContactSupport = this.supportConfig.canContactSupport();
 
             // If login was OAuth we should only reach this page if the OAuth method ID has changed.
             this.isOAuth = site.isOAuth();
@@ -168,6 +168,10 @@ export class CoreLoginReconnectPage implements OnInit, OnDestroy {
 
         this.identityProviders = CoreLoginHelper.getValidIdentityProviders(this.siteConfig, disabledFeatures);
         this.showForgottenPassword = !CoreLoginHelper.isForgottenPasswordDisabled(this.siteConfig);
+        this.exceededAttemptsHTML = CoreLoginHelper.buildExceededAttemptsHTML(
+            !!this.supportConfig?.canContactSupport(),
+            this.showForgottenPassword,
+        );
 
         if (!this.eventThrown && !this.viewLeft) {
             this.eventThrown = true;
@@ -270,6 +274,21 @@ export class CoreLoginReconnectPage implements OnInit, OnDestroy {
         }
     }
 
+    /**
+     * Exceeded attempts message clicked.
+     *
+     * @param event Click event.
+     */
+    exceededAttemptsClicked(event: Event): void {
+        event.preventDefault();
+
+        if (!(event.target instanceof HTMLAnchorElement)) {
+            return;
+        }
+
+        this.forgottenPassword();
+    }
+
     /**
      * Forgotten password button clicked.
      */

src/core/features/login/services/login-helper.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Injectable } from '@angular/core';
+import { Injectable, SecurityContext } from '@angular/core';
 import { Params } from '@angular/router';
 import { Md5 } from 'ts-md5/dist/md5';
 
@@ -29,7 +29,7 @@ import { CoreConstants } from '@/core/constants';
 import { CoreSite, CoreSiteIdentityProvider, CoreSitePublicConfigResponse, CoreSiteQRCodeType } from '@classes/site';
 import { CoreError } from '@classes/errors/error';
 import { CoreWSError } from '@classes/errors/wserror';
-import { makeSingleton, Translate } from '@singletons';
+import { DomSanitizer, makeSingleton, Translate } from '@singletons';
 import { CoreLogger } from '@singletons/logger';
 import { CoreUrl } from '@singletons/url';
 import { CoreNavigator, CoreRedirectPayload } from '@services/navigator';
@@ -38,6 +38,7 @@ import { CoreCustomURLSchemes } from '@services/urlschemes';
 import { CorePushNotifications } from '@features/pushnotifications/services/pushnotifications';
 import { CoreText } from '@singletons/text';
 import { CorePromisedValue } from '@classes/promised-value';
+import { SafeHtml } from '@angular/platform-browser';
 
 const PASSWORD_RESETS_CONFIG_KEY = 'password-resets';
 
@@ -1515,6 +1516,40 @@ export class CoreLoginHelperProvider {
         }
     }
 
+    /**
+     * Build the HTML message to show once login attempts have been exceeded.
+     *
+     * @param canContactSupport Whether contacting support is enabled in the site.
+     * @param canRecoverPassword Whether recovering the password is enabled in the site.
+     * @return HTML message.
+     */
+    buildExceededAttemptsHTML(canContactSupport: boolean, canRecoverPassword: boolean): SafeHtml | string | null {
+        const safeHTML = (html: string) => DomSanitizer.sanitize(SecurityContext.HTML, html) ?? '';
+        const recoverPasswordHTML = (messageKey: string) => {
+            const placeholder = '%%RECOVER_PASSWORD%%';
+            const message = safeHTML(Translate.instant(messageKey, { recoverPassword: placeholder }));
+            const recoverPassword = safeHTML(Translate.instant('core.login.exceededloginattemptsrecoverpassword'));
+
+            return DomSanitizer.bypassSecurityTrustHtml(
+                message.replace(placeholder, `<a href="#" role="button" style="color:inherit">${recoverPassword}</a>`),
+            );
+        };
+
+        if (canContactSupport && canRecoverPassword) {
+            return recoverPasswordHTML('core.login.exceededloginattempts');
+        }
+
+        if (canContactSupport) {
+            return Translate.instant('core.login.exceededloginattemptswithoutpassword');
+        }
+
+        if (canRecoverPassword) {
+            return recoverPasswordHTML('core.login.exceededloginattemptswithoutsupport');
+        }
+
+        return null;
+    }
+
     /**
      * Get a record indexing the last time a password reset was requested for a site.
      *