From 75171da0029578062a0a7cdaf44b482ba51792b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 25 Aug 2023 14:58:43 +0200
Subject: [PATCH] MOBILE-4201 login: Redesign reconnect page

---
 src/core/features/login/login.scss            | 15 +-------
 .../login/pages/reconnect/reconnect.html      | 35 +++++++++----------
 .../login/pages/reconnect/reconnect.ts        |  6 +---
 3 files changed, 19 insertions(+), 37 deletions(-)

diff --git a/src/core/features/login/login.scss b/src/core/features/login/login.scss
index d31ea6cf3..86fd250af 100644
--- a/src/core/features/login/login.scss
+++ b/src/core/features/login/login.scss
@@ -29,29 +29,16 @@
         }
     }
 
-    form .item.item-input,
-    form .core-username.item {
+    form .item.item-input {
         margin-bottom: 16px;
     }
 
-    form .core-username.ios {
-        --inner-border-width: 0 0 1px 0;
-    }
-
     form .item,
     form .item ion-label {
         --background: var(--core-login-input-background);
         --color: var(--core-login-input-color);
     }
 
-    form .core-username.item p {
-        font-size: 16px;
-    }
-
-    form .core-username.item.md p {
-        @include padding-horizontal(8px, null);
-    }
-
     .core-login-site-logo img {
         max-width: 100%;
     }
diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
index 02a5e8d3a..a8aa27edf 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -21,10 +21,6 @@
     <core-loading [hideUntil]="!showLoading">
         <div class="list-item-limited-width">
             <div class="ion-text-wrap ion-text-center ion-margin-bottom" [ngClass]="{'item-avatar-center': showUserAvatar}">
-                <!-- Show user avatar. -->
-                <core-user-avatar class="large-avatar" *ngIf="showUserAvatar" [user]="siteInfo" [linkProfile]="false"
-                    [siteId]="siteId"></core-user-avatar>
-
                 <div class="core-login-site-logo" *ngIf="!showUserAvatar">
                     <!-- Show site logo or a default image. -->
                     <img *ngIf="logoUrl" [src]="logoUrl" role="presentation" onError="this.src='assets/img/login_logo.png'" alt="">
@@ -36,6 +32,13 @@
                 </p>
                 <p class="core-siteurl">{{siteUrl}}</p>
 
+                <!-- Show user avatar. -->
+                <core-user-avatar class="large-avatar" *ngIf="showUserAvatar" [user]="siteInfo" [linkProfile]="false"
+                    [siteId]="siteId"></core-user-avatar>
+                <p *ngIf="siteInfo?.fullname" class="core-login-fullname">
+                    <core-format-text [text]="siteInfo?.fullname" [filter]="false"></core-format-text>
+                </p>
+
                 <ion-card *ngIf="!isLoggedOut" class="core-danger-card core-login-reconnect-warning">
                     <ion-item>
                         <ion-icon name="fas-circle-exclamation" slot="start" aria-hidden="true"></ion-icon>
@@ -50,13 +53,9 @@
                     <div [innerHTML]="exceededAttemptsHTML" (click)="exceededAttemptsClicked($event)"></div>
                 </core-login-exceeded-attempts>
             </div>
-            <form *ngIf="!isOAuth" [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #reconnectForm>
-                <ion-item class="ion-text-wrap core-username item-interactive">
-                    <ion-label>
-                        <p>{{username}}</p>
-                    </ion-label>
-                </ion-item>
-                <ion-item class="ion-margin-bottom" *ngIf="!isBrowserSSO">
+
+            <form *ngIf="!isBrowserSSO" [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #reconnectForm>
+                <ion-item class="ion-margin-bottom">
                     <ion-label class="sr-only">{{ 'core.login.password' | translate }}</ion-label>
                     <core-show-password name="password">
                         <ion-input class="core-ioninput-password" name="password" type="password"
@@ -65,23 +64,23 @@
                         </ion-input>
                     </core-show-password>
                 </ion-item>
-                <ion-button *ngIf="!isBrowserSSO" type="submit" expand="block" [disabled]="!credForm.valid"
-                    class="ion-margin core-login-login-button ion-text-wrap">
-                    {{ 'core.login.loginbutton' | translate }}
-                </ion-button>
-
-                <ion-button expand="block" *ngIf="isBrowserSSO" (click)="openBrowserSSO()"
+                <ion-button type="submit" expand="block" [disabled]="!credForm.valid"
                     class="ion-margin core-login-login-button ion-text-wrap">
                     {{ 'core.login.loginbutton' | translate }}
                 </ion-button>
 
                 <!-- Forgotten password option. -->
-                <ion-button *ngIf="showForgottenPassword && !isOAuth" expand="block" fill="clear"
+                <ion-button *ngIf="showForgottenPassword && !isBrowserSSO" expand="block" fill="clear"
                     class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
                     {{ 'core.login.forgotten' | translate }}
                 </ion-button>
             </form>
 
+            <ion-button expand="block" *ngIf="isBrowserSSO" (click)="openBrowserSSO()"
+                class="ion-margin core-login-login-button ion-text-wrap">
+                {{ 'core.login.loginbutton' | translate }}
+            </ion-button>
+
             <!-- Additional Login methods -->
             <core-login-methods *ngIf="siteConfig" [siteConfig]="siteConfig" [reconnect]="true" [siteUrl]="siteUrl"
                 [redirectData]="redirectData"></core-login-methods>
diff --git a/src/core/features/login/pages/reconnect/reconnect.ts b/src/core/features/login/pages/reconnect/reconnect.ts
index 565884cf5..568552ac4 100644
--- a/src/core/features/login/pages/reconnect/reconnect.ts
+++ b/src/core/features/login/pages/reconnect/reconnect.ts
@@ -50,7 +50,6 @@ export class CoreLoginReconnectPage implements OnInit, OnDestroy {
     showForgottenPassword = true;
     showUserAvatar = false;
     isBrowserSSO = false;
-    isOAuth = false;
     isLoggedOut: boolean;
     siteId!: string;
     siteInfo?: CoreSiteBasicInfo;
@@ -118,9 +117,6 @@ export class CoreLoginReconnectPage implements OnInit, OnDestroy {
             this.username = site.infos.username;
             this.supportConfig = new CoreUserAuthenticatedSupportConfig(site);
 
-            // If login was OAuth we should only reach this page if the OAuth method ID has changed.
-            this.isOAuth = site.isOAuth();
-
             const availableSites = await CoreLoginHelper.getAvailableSites();
 
             // Show logo instead of avatar if it's a fixed site.
@@ -185,7 +181,7 @@ export class CoreLoginReconnectPage implements OnInit, OnDestroy {
             CoreEvents.trigger(CoreEvents.LOGIN_SITE_CHECKED, { config: this.siteConfig });
         }
 
-        this.isBrowserSSO = !this.isOAuth && CoreLoginHelper.isSSOLoginNeeded(this.siteConfig.typeoflogin);
+        this.isBrowserSSO = CoreLoginHelper.isSSOLoginNeeded(this.siteConfig.typeoflogin);
 
         await CoreSites.checkApplication(this.siteConfig);