From f5fdac6df930f6a902073a2c8929d28678f42abd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Mon, 25 Nov 2019 14:02:35 +0100
Subject: [PATCH] MOBILE-3228 login: Match login and reconnect pages

---
 src/core/login/pages/reconnect/reconnect.html | 61 ++++++++++---------
 src/core/login/pages/reconnect/reconnect.scss | 23 ++++---
 src/core/login/pages/reconnect/reconnect.ts   |  6 +-
 3 files changed, 47 insertions(+), 43 deletions(-)

diff --git a/src/core/login/pages/reconnect/reconnect.html b/src/core/login/pages/reconnect/reconnect.html
index 1aed56c2a..3876f7e76 100644
--- a/src/core/login/pages/reconnect/reconnect.html
+++ b/src/core/login/pages/reconnect/reconnect.html
@@ -3,17 +3,21 @@
         <ion-title>{{ 'core.login.reconnect' | translate }}</ion-title>
     </ion-navbar>
 </ion-header>
-<ion-content padding class="core-center-view">
+<ion-content class="core-center-view">
     <div class="box">
-        <div *ngIf="site" text-wrap text-center margin-bottom [ngClass]="{'item-avatar-center': site.avatar}">
-            <ion-avatar *ngIf="site.avatar">
-                <!-- Show user avatar. -->
-                <img [src]="site.avatar" class="avatar" core-external-content [siteId]="site.id" alt="{{ 'core.pictureof' | translate:{$a: site.fullname} }}" role="presentation" onError="this.src='assets/img/user-avatar.png'">
-            </ion-avatar>
+        <div *ngIf="site" text-wrap text-center margin-bottom [ngClass]="{'item-avatar-center': showSiteAvatar}">
+            <ng-container *ngIf="showSiteAvatar">
+                <ion-avatar>
+                    <!-- Show user avatar. -->
+                    <img [src]="site.avatar" class="avatar" core-external-content [siteId]="site.id" alt="{{ 'core.pictureof' | translate:{$a: site.fullname} }}" role="presentation" onError="this.src='assets/img/user-avatar.png'">
+                </ion-avatar>
+            </ng-container>
 
-            <!-- Show site logo or a default image. -->
-            <img *ngIf="!site.avatar && logoUrl" [src]="logoUrl" core-external-content [siteId]="site.id" role="presentation">
-            <img *ngIf="!site.avatar && !logoUrl" src="assets/img/login_logo.png" class="login-logo" role="presentation">
+            <ng-container *ngIf="!showSiteAvatar">
+                <!-- Show site logo or a default image. -->
+                <img *ngIf="logoUrl" [src]="logoUrl" core-external-content [siteId]="site.id" role="presentation">
+                <img *ngIf="!logoUrl" src="assets/img/login_logo.png" class="login-logo" role="presentation">
+            </ng-container>
 
             <!-- If no sitename show big siteurl. -->
             <p *ngIf="!siteName" class="item-heading core-siteurl">{{siteUrl}}</p>
@@ -25,29 +29,26 @@
                 <ion-icon padding name="alert"></ion-icon> {{ 'core.login.reconnectdescription' | translate }}
             </p>
         </div>
-        <ion-list class="core-login-form">
-            <ion-item padding text-wrap class="core-username">
-                <p class="item-heading">{{ 'core.login.username' | translate }}</p>
+        <form ion-list [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form">
+            <ion-item text-wrap class="core-username">
                 <p>{{username}}</p>
             </ion-item>
-            <form [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form">
-                <ion-item margin-bottom>
-                    <core-show-password item-content [name]="'password'">
-                        <ion-input class="core-ioninput-password" name="password" type="password" placeholder="{{ 'core.login.password' | translate }}" formControlName="password" [clearOnEdit]="false"></ion-input>
-                    </core-show-password>
-                </ion-item>
-                <ion-grid>
-                    <ion-row>
-                        <ion-col>
-                            <a ion-button block color="light" (click)="cancel($event)">{{ 'core.login.cancel' | translate }}</a>
-                        </ion-col>
-                        <ion-col>
-                            <button ion-button block [disabled]="!credForm.valid">{{ 'core.login.loginbutton' | translate }}</button>
-                        </ion-col>
-                    </ion-row>
-                </ion-grid>
-            </form>
-        </ion-list>
+            <ion-item margin-bottom>
+                <core-show-password item-content [name]="'password'">
+                    <ion-input class="core-ioninput-password" name="password" type="password" placeholder="{{ 'core.login.password' | translate }}" formControlName="password" [clearOnEdit]="false"></ion-input>
+                </core-show-password>
+            </ion-item>
+            <ion-grid no-padding>
+                <ion-row>
+                    <ion-col>
+                        <a ion-button block color="light" (click)="cancel($event)">{{ 'core.login.cancel' | translate }}</a>
+                    </ion-col>
+                    <ion-col>
+                        <button ion-button block [disabled]="!credForm.valid">{{ 'core.login.loginbutton' | translate }}</button>
+                    </ion-col>
+                </ion-row>
+            </ion-grid>
+        </form>
 
         <!-- Forgotten password button. -->
         <div *ngIf="showForgottenPassword" padding-top class="core-login-forgotten-password">
diff --git a/src/core/login/pages/reconnect/reconnect.scss b/src/core/login/pages/reconnect/reconnect.scss
index a9bbabece..a28e78d05 100644
--- a/src/core/login/pages/reconnect/reconnect.scss
+++ b/src/core/login/pages/reconnect/reconnect.scss
@@ -2,8 +2,6 @@ ion-app.app-root page-core-login-reconnect {
     .box {
         .core-login-form .item {
             background-color: $core-login-item-background-color;
-            @include padding-horizontal(0);
-
             @include darkmode() {
                 background-color: $core-dark-login-item-background-color;
             }
@@ -14,20 +12,21 @@ ion-app.app-root page-core-login-reconnect {
             @include darkmode() {
                 background-color: $core-dark-login-item-inner-background-color;
             }
-            @include padding-horizontal(0);
         }
     }
 
-    .list .core-username {
-        &.item {
-            @include padding-horizontal(0);
-        }
-        .item-heading {
-            margin-top: 0;
-        }
+    form .core-username.item p {
+        @include padding-horizontal(8px);
+        font-size: 16px;
+    }
+    form .item:first-child {
+        margin-bottom: 20px;
+    }
 
-        .item-inner {
-            @include padding(null, null, null, 8px);
+    ion-col {
+        @include padding-horizontal(10px !important, 0);
+        &:first-child {
+            @include padding-horizontal(0 !important);
         }
     }
 
diff --git a/src/core/login/pages/reconnect/reconnect.ts b/src/core/login/pages/reconnect/reconnect.ts
index 58e24a078..afa776e21 100644
--- a/src/core/login/pages/reconnect/reconnect.ts
+++ b/src/core/login/pages/reconnect/reconnect.ts
@@ -37,6 +37,7 @@ export class CoreLoginReconnectPage {
     identityProviders: any[];
     site: any;
     showForgottenPassword = true;
+    showSiteAvatar = false;
 
     protected infoSiteUrl: string;
     protected pageName: string;
@@ -88,11 +89,14 @@ export class CoreLoginReconnectPage {
             this.siteUrl = site.infos.siteurl;
             this.siteName = site.getSiteName();
 
+            // Show logo instead of avatar if it's a fixed site.
+            this.showSiteAvatar = this.site.avatar && !this.loginHelper.getFixedSites();
+
             return site.getPublicConfig().then((config) => {
                 return this.sitesProvider.checkRequiredMinimumVersion(config).then(() => {
                     // Check logoURL if user avatar is not set.
                     if (this.site.avatar.startsWith(site.infos.siteurl + '/theme/image.php')) {
-                        this.site.avatar = false;
+                        this.showSiteAvatar = false;
                         this.logoUrl = config.logourl || config.compactlogourl;
                     }