MOBILE-4201 login: Redesign reconnect page

src/core/features/login/login.scss

@@ -29,29 +29,16 @@
         }
     }
 
-    form .item.item-input,
+    form .item.item-input {
-    form .core-username.item {
         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%;
     }

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">
+            <form *ngIf="!isBrowserSSO" [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #reconnectForm>
-                    <ion-label>
+                <ion-item class="ion-margin-bottom">
-                        <p>{{username}}</p>
-                    </ion-label>
-                </ion-item>
-                <ion-item class="ion-margin-bottom" *ngIf="!isBrowserSSO">
                     <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"
+                <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>
-
-                <ion-button expand="block" *ngIf="isBrowserSSO" (click)="openBrowserSSO()"
                     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>

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);