CIT/Vmeda.Online
3
0
Fork 1
forked from EVOgeek/Vmeda.Online
Code Pull Requests Activity

MOBILE-3228 login: Match login and reconnect pages

Browse Source
This commit is contained in:
Pau Ferrer Ocaña 2019-11-25 14:02:35 +01:00
parent e9c74bf5fe
commit f5fdac6df9
3 changed files with 47 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/core/login/pages/reconnect/reconnect.html
View File

@ -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">

23
src/core/login/pages/reconnect/reconnect.scss
View File

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

6
src/core/login/pages/reconnect/reconnect.ts
View File

@ -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;
}