From e502c7339250758922b0517f2f62302407e20bee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 21 Apr 2022 15:16:24 +0200
Subject: [PATCH] MOBILE-3833 signup: Add a wrapper container and remove
 refresher

---
 .../pages/email-signup/email-signup.html      | 346 +++++++++---------
 .../login/pages/email-signup/email-signup.ts  |  12 -
 2 files changed, 172 insertions(+), 186 deletions(-)

diff --git a/src/core/features/login/pages/email-signup/email-signup.html b/src/core/features/login/pages/email-signup/email-signup.html
index 1308598e1..6037c7519 100644
--- a/src/core/features/login/pages/email-signup/email-signup.html
+++ b/src/core/features/login/pages/email-signup/email-signup.html
@@ -17,12 +17,8 @@
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <ion-refresher slot="fixed" [disabled]="!settingsLoaded || isMinor" (ionRefresh)="refreshSettings($event.target)">
-        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
-    </ion-refresher>
-    <div class="list-item-limited-width">
-
-        <core-loading [hideUntil]="settingsLoaded" *ngIf="!isMinor">
+    <core-loading [hideUntil]="settingsLoaded" *ngIf="!isMinor">
+        <div class="list-item-limited-width">
 
             <!-- Site has an unsupported required field. -->
             <ion-list *ngIf="!allRequiredSupported">
@@ -36,195 +32,197 @@
                 </ion-button>
             </ion-list>
 
-            <!-- Age verification. -->
-            <form *ngIf="allRequiredSupported && settingsLoaded && settings && ageDigitalConsentVerification"
-                [formGroup]="ageVerificationForm" (ngSubmit)="verifyAge($event)" #ageForm>
+            <ng-container *ngIf="allRequiredSupported && settingsLoaded && settings">
+                <!-- Age verification. -->
+                <form *ngIf="ageDigitalConsentVerification" [formGroup]="ageVerificationForm" (ngSubmit)="verifyAge($event)" #ageForm>
 
-                <ion-item-divider class="ion-text-wrap">
-                    <ion-label>
-                        <h3>{{ 'core.agelocationverification' | translate }}</h3>
-                    </ion-label>
-                </ion-item-divider>
+                    <ion-item-divider class="ion-text-wrap">
+                        <ion-label>
+                            <h3>{{ 'core.agelocationverification' | translate }}</h3>
+                        </ion-label>
+                    </ion-item-divider>
 
-                <ion-item class="ion-text-wrap">
-                    <ion-label position="stacked">
-                        <span core-mark-required="true">{{ 'core.whatisyourage' | translate }}</span>
-                    </ion-label>
-                    <ion-input type="number" name="age" placeholder="0" formControlName="age" autocapitalize="none" autocorrect="off">
-                    </ion-input>
-                </ion-item>
-
-                <ion-item class="ion-text-wrap">
-                    <ion-label position="stacked">
-                        <span core-mark-required="true">{{ 'core.wheredoyoulive' | translate }}</span>
-                    </ion-label>
-                    <ion-select name="country" formControlName="country" [placeholder]="'core.login.selectacountry' | translate">
-                        <ion-select-option value="">{{ 'core.login.selectacountry' | translate }}</ion-select-option>
-                        <ion-select-option *ngFor="let country of countries" [value]="country.code">{{country.name}}</ion-select-option>
-                    </ion-select>
-                </ion-item>
-
-                <!-- Submit button. -->
-                <ion-button expand="block" class="ion-margin" type="submit" [disabled]="!ageVerificationForm.valid">
-                    {{ 'core.proceed' | translate }}
-                </ion-button>
-
-                <ion-item class="ion-text-wrap">
-                    <ion-label>
-                        <h3 class="item-heading">{{ 'core.whyisthisrequired' | translate }}</h3>
-                        <p>{{ 'core.explanationdigitalminor' | translate }}</p>
-                    </ion-label>
-                </ion-item>
-            </form>
-
-            <!-- Signup form. -->
-            <form *ngIf="allRequiredSupported && settingsLoaded && settings && !ageDigitalConsentVerification" [formGroup]="signupForm"
-                (ngSubmit)="create($event)" #signupFormEl>
-
-                <ion-item class="ion-text-wrap ion-text-center">
-                    <ion-label>
-                        <!-- If no sitename show big siteurl. -->
-                        <p *ngIf="!siteName" class="ion-padding item-heading">{{siteUrl}}</p>
-                        <!-- If sitename, show big sitename and small siteurl. -->
-                        <p *ngIf="siteName" class="ion-padding item-heading">
-                            <core-format-text [text]="siteName" [filter]="false"></core-format-text>
-                        </p>
-                        <p *ngIf="siteName">{{siteUrl}}</p>
-                    </ion-label>
-                </ion-item>
-
-                <!-- Username and password. -->
-                <ion-item-divider class="ion-text-wrap">
-                    <ion-label>
-                        <h3>{{ 'core.login.createuserandpass' | translate }}</h3>
-                    </ion-label>
-                </ion-item-divider>
-                <ion-item class="ion-text-wrap">
-                    <ion-label position="stacked">
-                        <span core-mark-required="true">{{ 'core.login.username' | translate }}</span>
-                    </ion-label>
-                    <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}" formControlName="username"
-                        autocapitalize="none" autocorrect="off">
-                    </ion-input>
-                    <core-input-errors [control]="signupForm.controls.username" [errorMessages]="usernameErrors"></core-input-errors>
-                </ion-item>
-                <ion-item class="ion-text-wrap">
-                    <ion-label position="stacked">
-                        <span core-mark-required="true">{{ 'core.login.password' | translate }}</span>
-                    </ion-label>
-                    <core-show-password name="password">
-                        <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
-                            formControlName="password" [clearOnEdit]="false" autocomplete="new-password" required="true">
+                    <ion-item class="ion-text-wrap">
+                        <ion-label position="stacked">
+                            <span core-mark-required="true">{{ 'core.whatisyourage' | translate }}</span>
+                        </ion-label>
+                        <ion-input type="number" name="age" placeholder="0" formControlName="age" autocapitalize="none" autocorrect="off">
                         </ion-input>
-                    </core-show-password>
-                    <p *ngIf="settings.passwordpolicy" class="core-input-footnote">
-                        {{settings.passwordpolicy}}
-                    </p>
-                    <core-input-errors [control]="signupForm.controls.password" [errorMessages]="passwordErrors"></core-input-errors>
-                </ion-item>
+                    </ion-item>
 
-                <!-- More details. -->
-                <ion-item-divider class="ion-text-wrap">
-                    <ion-label>
-                        <h3>{{ 'core.login.supplyinfo' | translate }}</h3>
-                    </ion-label>
-                </ion-item-divider>
-                <ion-item class="ion-text-wrap">
-                    <ion-label position="stacked">
-                        <span core-mark-required="true">{{ 'core.user.email' | translate }}</span>
-                    </ion-label>
-                    <ion-input type="email" name="email" placeholder="{{ 'core.user.email' | translate }}" formControlName="email"
-                        autocapitalize="none" autocorrect="off">
-                    </ion-input>
-                    <core-input-errors [control]="signupForm.controls.email" [errorMessages]="emailErrors"></core-input-errors>
-                </ion-item>
-                <ion-item class="ion-text-wrap">
-                    <ion-label position="stacked">
-                        <span core-mark-required="true">{{ 'core.user.emailagain' | translate }}</span>
-                    </ion-label>
-                    <ion-input type="email" name="email2" placeholder="{{ 'core.user.emailagain' | translate }}" autocapitalize="none"
-                        formControlName="email2" autocorrect="off" [pattern]="escapeMail(signupForm.controls.email.value)">
-                    </ion-input>
-                    <core-input-errors [control]="signupForm.controls.email2" [errorMessages]="email2Errors"></core-input-errors>
-                </ion-item>
-                <ion-item *ngFor="let nameField of settings.namefields" class="ion-text-wrap">
-                    <ion-label position="stacked">
-                        <span core-mark-required="true">{{ 'core.user.' + nameField | translate }}</span>
-                    </ion-label>
-                    <ion-input type="text" name="nameField" placeholder="{{ 'core.user.' + nameField | translate }}"
-                        formControlName="{{nameField}}" autocorrect="off">
-                    </ion-input>
-                    <core-input-errors [control]="signupForm.controls[nameField]" [errorMessages]="namefieldsErrors![nameField]">
-                    </core-input-errors>
-                </ion-item>
-                <ion-item class="ion-text-wrap">
-                    <ion-label position="stacked">{{ 'core.user.city' | translate }}</ion-label>
-                    <ion-input type="text" name="city" placeholder="{{ 'core.user.city' | translate }}" formControlName="city"
-                        autocorrect="off">
-                    </ion-input>
-                </ion-item>
-                <ion-item class="ion-text-wrap">
-                    <ion-label position="stacked" id="core-login-signup-country">{{ 'core.user.country' | translate }}</ion-label>
-                    <ion-select name="country" formControlName="country" aria-labelledby="core-login-signup-country"
-                        [placeholder]="'core.login.selectacountry' | translate">
-
-                        <ion-select-option value="">{{ 'core.login.selectacountry' | translate }}</ion-select-option>
-                        <ion-select-option *ngFor="let country of countries" [value]="country.code">{{country.name}}</ion-select-option>
-                    </ion-select>
-                </ion-item>
-
-                <!-- Other categories. -->
-                <ng-container *ngFor="let category of categories">
-                    <ion-item-divider class="ion-text-wrap">
-                        <ion-label>
-                            <p class="item-heading">{{ category.name }}</p>
+                    <ion-item class="ion-text-wrap">
+                        <ion-label position="stacked">
+                            <span core-mark-required="true">{{ 'core.wheredoyoulive' | translate }}</span>
                         </ion-label>
-                    </ion-item-divider>
-                    <core-user-profile-field *ngFor="let field of category.fields" [field]="field" [edit]="true" [signup]="true"
-                        registerAuth="email" [form]="signupForm"></core-user-profile-field>
-                </ng-container>
+                        <ion-select name="country" formControlName="country" [placeholder]="'core.login.selectacountry' | translate">
+                            <ion-select-option value="">{{ 'core.login.selectacountry' | translate }}</ion-select-option>
+                            <ion-select-option *ngFor="let country of countries" [value]="country.code">{{country.name}}</ion-select-option>
+                        </ion-select>
+                    </ion-item>
 
-                <!-- ReCAPTCHA -->
-                <ng-container *ngIf="settings.recaptchapublickey">
-                    <ion-item-divider class="ion-text-wrap">
+                    <!-- Submit button. -->
+                    <ion-button expand="block" class="ion-margin" type="submit" [disabled]="!ageVerificationForm.valid">
+                        {{ 'core.proceed' | translate }}
+                    </ion-button>
+
+                    <ion-item class="ion-text-wrap">
                         <ion-label>
-                            <h3><span [core-mark-required]="true">{{ 'core.login.security_question' | translate }}</span></h3>
+                            <h3 class="item-heading">{{ 'core.whyisthisrequired' | translate }}</h3>
+                            <p>{{ 'core.explanationdigitalminor' | translate }}</p>
                         </ion-label>
-                    </ion-item-divider>
-                    <core-recaptcha [publicKey]="settings.recaptchapublickey" [model]="captcha" [siteUrl]="siteUrl"></core-recaptcha>
-                </ng-container>
+                    </ion-item>
+                </form>
 
-                <!-- Site policy (if any). -->
-                <ng-container *ngIf="settings.sitepolicy">
+                <!-- Signup form. -->
+                <form *ngIf="!ageDigitalConsentVerification" [formGroup]="signupForm" (ngSubmit)="create($event)" #signupFormEl>
+
+                    <ion-item class="ion-text-wrap ion-text-center">
+                        <ion-label>
+                            <!-- If no sitename show big siteurl. -->
+                            <p *ngIf="!siteName" class="ion-padding item-heading">{{siteUrl}}</p>
+                            <!-- If sitename, show big sitename and small siteurl. -->
+                            <p *ngIf="siteName" class="ion-padding item-heading">
+                                <core-format-text [text]="siteName" [filter]="false"></core-format-text>
+                            </p>
+                            <p *ngIf="siteName">{{siteUrl}}</p>
+                        </ion-label>
+                    </ion-item>
+
+                    <!-- Username and password. -->
                     <ion-item-divider class="ion-text-wrap">
                         <ion-label>
-                            <h3>{{ 'core.login.policyagreement' | translate }}</h3>
+                            <h3>{{ 'core.login.createuserandpass' | translate }}</h3>
                         </ion-label>
                     </ion-item-divider>
                     <ion-item class="ion-text-wrap">
-                        <ion-label>
-                            <a [href]="settings.sitepolicy" core-link capture="false">
-                                {{ 'core.login.policyagreementclick' | translate }}
-                            </a>
+                        <ion-label position="stacked">
+                            <span core-mark-required="true">{{ 'core.login.username' | translate }}</span>
                         </ion-label>
+                        <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}"
+                            formControlName="username" autocapitalize="none" autocorrect="off">
+                        </ion-input>
+                        <core-input-errors [control]="signupForm.controls.username" [errorMessages]="usernameErrors"></core-input-errors>
                     </ion-item>
                     <ion-item class="ion-text-wrap">
-                        <ion-label>
-                            <span [core-mark-required]="true">{{ 'core.login.policyacceptmandatory' | translate }}</span>
-                            <core-input-errors [control]="signupForm.controls.policyagreed" [errorMessages]="policyErrors">
-                            </core-input-errors>
+                        <ion-label position="stacked">
+                            <span core-mark-required="true">{{ 'core.login.password' | translate }}</span>
                         </ion-label>
-                        <ion-checkbox slot="end" name="policyagreed" formControlName="policyagreed"></ion-checkbox>
+                        <core-show-password name="password">
+                            <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
+                                formControlName="password" [clearOnEdit]="false" autocomplete="new-password" required="true">
+                            </ion-input>
+                        </core-show-password>
+                        <p *ngIf="settings.passwordpolicy" class="core-input-footnote">
+                            {{settings.passwordpolicy}}
+                        </p>
+                        <core-input-errors [control]="signupForm.controls.password" [errorMessages]="passwordErrors"></core-input-errors>
                     </ion-item>
-                </ng-container>
 
-                <!-- Submit button. -->
-                <ion-button expand="block" class="ion-margin" type="submit">{{ 'core.login.createaccount' | translate }}</ion-button>
-                <!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
-                <input type="submit" class="core-submit-hidden-enter" />
-            </form>
-        </core-loading>
+                    <!-- More details. -->
+                    <ion-item-divider class="ion-text-wrap">
+                        <ion-label>
+                            <h3>{{ 'core.login.supplyinfo' | translate }}</h3>
+                        </ion-label>
+                    </ion-item-divider>
+                    <ion-item class="ion-text-wrap">
+                        <ion-label position="stacked">
+                            <span core-mark-required="true">{{ 'core.user.email' | translate }}</span>
+                        </ion-label>
+                        <ion-input type="email" name="email" placeholder="{{ 'core.user.email' | translate }}" formControlName="email"
+                            autocapitalize="none" autocorrect="off">
+                        </ion-input>
+                        <core-input-errors [control]="signupForm.controls.email" [errorMessages]="emailErrors"></core-input-errors>
+                    </ion-item>
+                    <ion-item class="ion-text-wrap">
+                        <ion-label position="stacked">
+                            <span core-mark-required="true">{{ 'core.user.emailagain' | translate }}</span>
+                        </ion-label>
+                        <ion-input type="email" name="email2" placeholder="{{ 'core.user.emailagain' | translate }}" autocapitalize="none"
+                            formControlName="email2" autocorrect="off" [pattern]="escapeMail(signupForm.controls.email.value)">
+                        </ion-input>
+                        <core-input-errors [control]="signupForm.controls.email2" [errorMessages]="email2Errors"></core-input-errors>
+                    </ion-item>
+                    <ion-item *ngFor="let nameField of settings.namefields" class="ion-text-wrap">
+                        <ion-label position="stacked">
+                            <span core-mark-required="true">{{ 'core.user.' + nameField | translate }}</span>
+                        </ion-label>
+                        <ion-input type="text" name="nameField" placeholder="{{ 'core.user.' + nameField | translate }}"
+                            formControlName="{{nameField}}" autocorrect="off">
+                        </ion-input>
+                        <core-input-errors [control]="signupForm.controls[nameField]" [errorMessages]="namefieldsErrors![nameField]">
+                        </core-input-errors>
+                    </ion-item>
+                    <ion-item class="ion-text-wrap">
+                        <ion-label position="stacked">{{ 'core.user.city' | translate }}</ion-label>
+                        <ion-input type="text" name="city" placeholder="{{ 'core.user.city' | translate }}" formControlName="city"
+                            autocorrect="off">
+                        </ion-input>
+                    </ion-item>
+                    <ion-item class="ion-text-wrap">
+                        <ion-label position="stacked" id="core-login-signup-country">{{ 'core.user.country' | translate }}</ion-label>
+                        <ion-select name="country" formControlName="country" aria-labelledby="core-login-signup-country"
+                            [placeholder]="'core.login.selectacountry' | translate">
 
+                            <ion-select-option value="">{{ 'core.login.selectacountry' | translate }}</ion-select-option>
+                            <ion-select-option *ngFor="let country of countries" [value]="country.code">{{country.name}}</ion-select-option>
+                        </ion-select>
+                    </ion-item>
+
+                    <!-- Other categories. -->
+                    <ng-container *ngFor="let category of categories">
+                        <ion-item-divider class="ion-text-wrap">
+                            <ion-label>
+                                <p class="item-heading">{{ category.name }}</p>
+                            </ion-label>
+                        </ion-item-divider>
+                        <core-user-profile-field *ngFor="let field of category.fields" [field]="field" [edit]="true" [signup]="true"
+                            registerAuth="email" [form]="signupForm"></core-user-profile-field>
+                    </ng-container>
+
+                    <!-- ReCAPTCHA -->
+                    <ng-container *ngIf="settings.recaptchapublickey">
+                        <ion-item-divider class="ion-text-wrap">
+                            <ion-label>
+                                <h3><span [core-mark-required]="true">{{ 'core.login.security_question' | translate }}</span></h3>
+                            </ion-label>
+                        </ion-item-divider>
+                        <core-recaptcha [publicKey]="settings.recaptchapublickey" [model]="captcha" [siteUrl]="siteUrl"></core-recaptcha>
+                    </ng-container>
+
+                    <!-- Site policy (if any). -->
+                    <ng-container *ngIf="settings.sitepolicy">
+                        <ion-item-divider class="ion-text-wrap">
+                            <ion-label>
+                                <h3>{{ 'core.login.policyagreement' | translate }}</h3>
+                            </ion-label>
+                        </ion-item-divider>
+                        <ion-item class="ion-text-wrap">
+                            <ion-label>
+                                <a [href]="settings.sitepolicy" core-link capture="false">
+                                    {{ 'core.login.policyagreementclick' | translate }}
+                                </a>
+                            </ion-label>
+                        </ion-item>
+                        <ion-item class="ion-text-wrap">
+                            <ion-label>
+                                <span [core-mark-required]="true">{{ 'core.login.policyacceptmandatory' | translate }}</span>
+                                <core-input-errors [control]="signupForm.controls.policyagreed" [errorMessages]="policyErrors">
+                                </core-input-errors>
+                            </ion-label>
+                            <ion-checkbox slot="end" name="policyagreed" formControlName="policyagreed"></ion-checkbox>
+                        </ion-item>
+                    </ng-container>
+
+                    <!-- Submit button. -->
+                    <ion-button expand="block" class="ion-margin" type="submit">{{ 'core.login.createaccount' | translate }}</ion-button>
+                    <!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
+                    <input type="submit" class="core-submit-hidden-enter" />
+                </form>
+            </ng-container>
+        </div>
+    </core-loading>
+
+    <div class="list-item-limited-width">
         <ion-list *ngIf="allRequiredSupported && isMinor">
             <ion-item-divider class="ion-text-wrap">
                 <ion-label>
diff --git a/src/core/features/login/pages/email-signup/email-signup.ts b/src/core/features/login/pages/email-signup/email-signup.ts
index 8aa65028e..5e1616980 100644
--- a/src/core/features/login/pages/email-signup/email-signup.ts
+++ b/src/core/features/login/pages/email-signup/email-signup.ts
@@ -14,7 +14,6 @@
 
 import { Component, ViewChild, ElementRef, OnInit, ChangeDetectorRef } from '@angular/core';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
-import { IonRefresher } from '@ionic/angular';
 
 import { CoreSites } from '@services/sites';
 import { CoreDomUtils } from '@services/utils/dom';
@@ -256,17 +255,6 @@ export class CoreLoginEmailSignupPage implements OnInit {
         }
     }
 
-    /**
-     * Pull to refresh.
-     *
-     * @param event Event.
-     */
-    refreshSettings(event?: IonRefresher): void {
-        this.fetchData().finally(() => {
-            event?.complete();
-        });
-    }
-
     /**
      * Create account.
      *