EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #2172 from crazyserver/MOBILE-3228 

MOBILE-3228 login: Match login and reconnect pages
main
Juan Leyva 2019-11-27 17:08:37 +01:00 committed by GitHub
parent 99c533d321 f5fdac6df9
commit ba16e1ca61
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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-title>{{ 'core.login.reconnect' | translate }}</ion-title>
</ion-navbar> </ion-navbar>
</ion-header> </ion-header>
<ion-content padding class="core-center-view"> <ion-content class="core-center-view">
<div class="box"> <div class="box">
<div *ngIf="site" text-wrap text-center margin-bottom [ngClass]="{'item-avatar-center': site.avatar}"> <div *ngIf="site" text-wrap text-center margin-bottom [ngClass]="{'item-avatar-center': showSiteAvatar}">
<ion-avatar *ngIf="site.avatar"> <ng-container *ngIf="showSiteAvatar">
<!-- Show user avatar. --> <ion-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'"> <!-- Show user avatar. -->
</ion-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. --> <ng-container *ngIf="!showSiteAvatar">
<img *ngIf="!site.avatar && logoUrl" [src]="logoUrl" core-external-content [siteId]="site.id" role="presentation"> <!-- Show site logo or a default image. -->
<img *ngIf="!site.avatar && !logoUrl" src="assets/img/login_logo.png" class="login-logo" role="presentation"> <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. --> <!-- If no sitename show big siteurl. -->
<p *ngIf="!siteName" class="item-heading core-siteurl">{{siteUrl}}</p> <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 }} <ion-icon padding name="alert"></ion-icon> {{ 'core.login.reconnectdescription' | translate }}
</p> </p>
</div> </div>
<ion-list class="core-login-form"> <form ion-list [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form">
<ion-item padding text-wrap class="core-username"> <ion-item text-wrap class="core-username">
<p class="item-heading">{{ 'core.login.username' | translate }}</p>
<p>{{username}}</p> <p>{{username}}</p>
</ion-item> </ion-item>
<form [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form"> <ion-item margin-bottom>
<ion-item margin-bottom> <core-show-password item-content [name]="'password'">
<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>
<ion-input class="core-ioninput-password" name="password" type="password" placeholder="{{ 'core.login.password' | translate }}" formControlName="password" [clearOnEdit]="false"></ion-input> </core-show-password>
</core-show-password> </ion-item>
</ion-item> <ion-grid no-padding>
<ion-grid> <ion-row>
<ion-row> <ion-col>
<ion-col> <a ion-button block color="light" (click)="cancel($event)">{{ 'core.login.cancel' | translate }}</a>
<a ion-button block color="light" (click)="cancel($event)">{{ 'core.login.cancel' | translate }}</a> </ion-col>
</ion-col> <ion-col>
<ion-col> <button ion-button block [disabled]="!credForm.valid">{{ 'core.login.loginbutton' | translate }}</button>
<button ion-button block [disabled]="!credForm.valid">{{ 'core.login.loginbutton' | translate }}</button> </ion-col>
</ion-col> </ion-row>
</ion-row> </ion-grid>
</ion-grid> </form>
</form>
</ion-list>
<!-- Forgotten password button. --> <!-- Forgotten password button. -->
<div *ngIf="showForgottenPassword" padding-top class="core-login-forgotten-password"> <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 { .box {
.core-login-form .item { .core-login-form .item {
background-color: $core-login-item-background-color; background-color: $core-login-item-background-color;
@include padding-horizontal(0);
@include darkmode() { @include darkmode() {
background-color: $core-dark-login-item-background-color; background-color: $core-dark-login-item-background-color;
} }
@ -14,20 +12,21 @@ ion-app.app-root page-core-login-reconnect {
@include darkmode() { @include darkmode() {
background-color: $core-dark-login-item-inner-background-color; background-color: $core-dark-login-item-inner-background-color;
} }
@include padding-horizontal(0);
} }
} }
.list .core-username { form .core-username.item p {
&.item { @include padding-horizontal(8px);
@include padding-horizontal(0); font-size: 16px;
} }
.item-heading { form .item:first-child {
margin-top: 0; margin-bottom: 20px;
} }
.item-inner { ion-col {
@include padding(null, null, null, 8px); @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[]; identityProviders: any[];
site: any; site: any;
showForgottenPassword = true; showForgottenPassword = true;
showSiteAvatar = false;
protected infoSiteUrl: string; protected infoSiteUrl: string;
protected pageName: string; protected pageName: string;
@ -88,11 +89,14 @@ export class CoreLoginReconnectPage {
this.siteUrl = site.infos.siteurl; this.siteUrl = site.infos.siteurl;
this.siteName = site.getSiteName(); 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 site.getPublicConfig().then((config) => {
return this.sitesProvider.checkRequiredMinimumVersion(config).then(() => { return this.sitesProvider.checkRequiredMinimumVersion(config).then(() => {
// Check logoURL if user avatar is not set. // Check logoURL if user avatar is not set.
if (this.site.avatar.startsWith(site.infos.siteurl + '/theme/image.php')) { if (this.site.avatar.startsWith(site.infos.siteurl + '/theme/image.php')) {
this.site.avatar = false; this.showSiteAvatar = false;
this.logoUrl = config.logourl || config.compactlogourl; this.logoUrl = config.logourl || config.compactlogourl;
} }