From 3be2f204f41af83d107e830872d5c055cf9ac4f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 4 Nov 2020 16:16:57 +0100
Subject: [PATCH] MOBILE-3565 login: Fix some styles

---
 src/app/core/login/login.scss                 | 16 ++++++++++-
 .../login/pages/credentials/credentials.html  |  5 ++--
 .../core/login/pages/reconnect/reconnect.html | 22 +++++++--------
 src/theme/app.scss                            | 28 +++++++++++++++++++
 4 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/src/app/core/login/login.scss b/src/app/core/login/login.scss
index 6e67854fa..f3eb1f348 100644
--- a/src/app/core/login/login.scss
+++ b/src/app/core/login/login.scss
@@ -4,7 +4,16 @@
         --color: var(--core-login-text-color);
     }
 
-    img {
+    form .item.item-input,
+    form .core-username.item {
+        margin-bottom: 16px;
+    }
+
+    form .core-username.item  p {
+        font-size: 16px;
+    }
+
+    .core-login-site-logo img {
         max-width: 100%;
     }
 
@@ -14,6 +23,7 @@
 
     .core-sitename {
         font-size: 1.2rem;
+        margin-bottom: 0;
     }
 
     .core-login-site-logo {
@@ -25,4 +35,8 @@
     .core-login-forgotten-password {
         text-decoration: underline;
     }
+
+    .core-login-reconnect-warning {
+        font-size: 0.9em;
+    }
 }
diff --git a/src/app/core/login/pages/credentials/credentials.html b/src/app/core/login/pages/credentials/credentials.html
index bf8dfa698..e9a66b194 100644
--- a/src/app/core/login/pages/credentials/credentials.html
+++ b/src/app/core/login/pages/credentials/credentials.html
@@ -14,7 +14,7 @@
         </ion-buttons>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="ion-padding">
     <core-loading [hideUntil]="pageLoaded">
         <div class="ion-text-wrap ion-text-center ion-margin-bottom">
             <div class="core-login-site-logo">
@@ -32,7 +32,8 @@
         <form ion-list [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #credentialsForm>
             <ion-item *ngIf="siteChecked && !isBrowserSSO">
                 <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}"
-                    formControlName="username" autocapitalize="none" autocorrect="off"></ion-input>
+                    formControlName="username" autocapitalize="none" autocorrect="off" autocomplete="username" enterkeyhint="next"
+                    required="true"></ion-input>
             </ion-item>
             <ion-item *ngIf="siteChecked && !isBrowserSSO" class="ion-margin-bottom">
                 <core-show-password [name]="'password'">
diff --git a/src/app/core/login/pages/reconnect/reconnect.html b/src/app/core/login/pages/reconnect/reconnect.html
index add46b614..f11aeb816 100644
--- a/src/app/core/login/pages/reconnect/reconnect.html
+++ b/src/app/core/login/pages/reconnect/reconnect.html
@@ -7,15 +7,12 @@
         <ion-title>{{ 'core.login.reconnect' | translate }}</ion-title>
     </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content class="ion-padding">
     <div class="ion-text-wrap ion-text-center ion-margin-bottom" [ngClass]="{'item-avatar-center': showSiteAvatar}">
-        <ng-container *ngIf="showSiteAvatar">
-            <ion-avatar>
-                <!-- Show user avatar. -->
-                <img [src]="userAvatar" class="avatar" core-external-content [siteId]="siteId" role="presentation"
-                    alt="{{ 'core.pictureof' | translate:{$a: userFullName} }}" onError="this.src='assets/img/user-avatar.png'">
-            </ion-avatar>
-        </ng-container>
+        <!-- Show user avatar. -->
+        <img *ngIf="showSiteAvatar" [src]="userAvatar" class="large-avatar" core-external-content [siteId]="siteId"
+            role="presentation"
+            alt="{{ 'core.pictureof' | translate:{$a: userFullName} }}" onError="this.src='assets/img/user-avatar.png'">
 
         <div class="core-login-site-logo" *ngIf="!showSiteAvatar">
             <!-- Show site logo or a default image. -->
@@ -29,14 +26,14 @@
         <p class="core-siteurl">{{siteUrl}}</p>
 
         <ion-item *ngIf="!isLoggedOut" class="ion-text-center core-login-reconnect-warning" lines="none">
-            <ion-label color="danger">
+            <ion-label color="danger" class="ion-text-wrap">
                 <ion-icon name="fas-exclamation-circle" slot="start"></ion-icon>
                 {{ 'core.login.reconnectdescription' | translate }}
             </ion-label>
         </ion-item>
     </div>
-    <form ion-list *ngIf="!isOAuth" [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #reconnectForm>
-        <ion-item class="ion-text-wrap core-username">
+    <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>
@@ -44,7 +41,8 @@
         <ion-item class="ion-margin-bottom">
             <core-show-password [name]="'password'">
                 <ion-input class="core-ioninput-password" name="password" type="password"
-                    placeholder="{{ 'core.login.password' | translate }}" formControlName="password" [clearOnEdit]="false">
+                    placeholder="{{ 'core.login.password' | translate }}" formControlName="password" [clearOnEdit]="false"
+                    autocomplete="current-password" enterkeyhint="go" required="true">
                 </ion-input>
             </core-show-password>
         </ion-item>
diff --git a/src/theme/app.scss b/src/theme/app.scss
index abf6df18c..486b5d975 100644
--- a/src/theme/app.scss
+++ b/src/theme/app.scss
@@ -1,3 +1,8 @@
+// Correctly inherit ion-text-wrap onto labels.
+ion-item.ion-text-wrap ion-label {
+    white-space: normal !important;
+}
+
 
 // Ionic toolbar.
 ion-toolbar ion-back-button,
@@ -99,3 +104,26 @@ ion-list.list-md {
     margin-bottom: 10px;
     font-size: 14px;
 }
+
+// Avatar
+// -------------------------
+// Large centered avatar
+img.large-avatar {
+    display: block;
+    margin: auto;
+    width: 90px;
+    height: 90px;
+    max-width: 90px;
+    max-height: 90px;
+    margin-bottom: 10px;
+    border-radius : 50%;
+    padding: 4px;
+    border: 1px solid #ddd;
+    background-color: transparent;
+}
+
+ion-avatar ion-img, ion-avatar img {
+    text-indent: -99999px;
+    background-color: --var(--gray-light);
+}
+