MOBILE-4168 core: Send to reconnect page in auth guard
Dani Palou
parent
a157b5503c
commit
c6437a5396
|
|
@ -10,94 +10,103 @@
|
|||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content class="ion-padding" (keydown)="keyDown($event)" (keyup)="keyUp($event)">
|
||||
<div class="list-item-limited-width">
|
||||
<div class="ion-text-wrap ion-text-center ion-margin-bottom" [ngClass]="{'item-avatar-center': showSiteAvatar}">
|
||||
<!-- Show user avatar. -->
|
||||
<img *ngIf="showSiteAvatar" [src]="userAvatar" class="large-avatar" core-external-content [siteId]="siteId"
|
||||
alt="{{ 'core.pictureof' | translate:{$a: userFullName} }}" onError="this.src='assets/img/user-avatar.png'">
|
||||
<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': showSiteAvatar}">
|
||||
<!-- Show user avatar. -->
|
||||
<img *ngIf="showSiteAvatar" [src]="userAvatar" class="large-avatar" core-external-content [siteId]="siteId"
|
||||
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. -->
|
||||
<img *ngIf="logoUrl" [src]="logoUrl" role="presentation" onError="this.src='assets/img/login_logo.png'" alt="">
|
||||
<img *ngIf="!logoUrl" src="assets/img/login_logo.png" role="presentation" alt="">
|
||||
<div class="core-login-site-logo" *ngIf="!showSiteAvatar">
|
||||
<!-- Show site logo or a default image. -->
|
||||
<img *ngIf="logoUrl" [src]="logoUrl" role="presentation" onError="this.src='assets/img/login_logo.png'" alt="">
|
||||
<img *ngIf="!logoUrl" src="assets/img/login_logo.png" role="presentation" alt="">
|
||||
</div>
|
||||
|
||||
<p *ngIf="siteName" class="ion-padding core-sitename">
|
||||
<core-format-text [text]="siteName" [filter]="false"></core-format-text>
|
||||
</p>
|
||||
<p class="core-siteurl">{{siteUrl}}</p>
|
||||
|
||||
<ion-card *ngIf="!isLoggedOut" class="core-danger-card core-login-reconnect-warning">
|
||||
<ion-item>
|
||||
<ion-icon name="fas-exclamation-circle" slot="start" aria-hidden="true"></ion-icon>
|
||||
<ion-label>
|
||||
<p>{{ 'core.lostconnection' | translate }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-card>
|
||||
</div>
|
||||
|
||||
<p *ngIf="siteName" class="ion-padding core-sitename">
|
||||
<core-format-text [text]="siteName" [filter]="false"></core-format-text>
|
||||
</p>
|
||||
<p class="core-siteurl">{{siteUrl}}</p>
|
||||
|
||||
<ion-card *ngIf="!isLoggedOut" class="core-danger-card core-login-reconnect-warning">
|
||||
<ion-item>
|
||||
<ion-icon name="fas-exclamation-circle" slot="start" aria-hidden="true"></ion-icon>
|
||||
<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>{{ 'core.lostconnection' | translate }}</p>
|
||||
<p>{{username}}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-card>
|
||||
</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">
|
||||
<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"
|
||||
placeholder="{{ 'core.login.password' | translate }}" formControlName="password" [clearOnEdit]="false"
|
||||
autocomplete="current-password" enterkeyhint="go" required="true">
|
||||
</ion-input>
|
||||
</core-show-password>
|
||||
</ion-item>
|
||||
<div class="adaptable-buttons-row">
|
||||
<ion-button expand="block" fill="outline" (click)="cancel($event)" class="ion-margin ion-text-wrap">
|
||||
{{ 'core.login.cancel' | translate }}
|
||||
</ion-button>
|
||||
<ion-button type="submit" expand="block" [disabled]="!credForm.valid"
|
||||
<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"
|
||||
placeholder="{{ 'core.login.password' | translate }}" formControlName="password" [clearOnEdit]="false"
|
||||
autocomplete="current-password" enterkeyhint="go" required="true">
|
||||
</ion-input>
|
||||
</core-show-password>
|
||||
</ion-item>
|
||||
<div class="adaptable-buttons-row">
|
||||
<ion-button expand="block" fill="outline" (click)="cancel($event)" class="ion-margin ion-text-wrap">
|
||||
{{ 'core.login.cancel' | translate }}
|
||||
</ion-button>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<ion-button expand="block" *ngIf="isBrowserSSO" (click)="openBrowserSSO()"
|
||||
class="ion-margin core-login-login-button ion-text-wrap">
|
||||
{{ 'core.login.loginbutton' | translate }}
|
||||
</ion-button>
|
||||
</div>
|
||||
|
||||
<ng-container *ngIf="showScanQR">
|
||||
<div class="ion-text-center ion-padding core-login-site-qrcode-separator">{{ 'core.login.or' | translate }}</div>
|
||||
<ion-button expand="block" fill="outline" class="ion-margin core-login-site-qrcode" (click)="showInstructionsAndScanQR()">
|
||||
<ion-icon slot="start" name="fas-qrcode" aria-hidden="true"></ion-icon>
|
||||
{{ 'core.scanqr' | translate }}
|
||||
<ng-container *ngIf="showScanQR && !isBrowserSSO">
|
||||
<div class="ion-text-center ion-padding core-login-site-qrcode-separator">{{ 'core.login.or' | translate }}</div>
|
||||
<ion-button expand="block" fill="outline" class="ion-margin core-login-site-qrcode"
|
||||
(click)="showInstructionsAndScanQR()">
|
||||
<ion-icon slot="start" name="fas-qrcode" aria-hidden="true"></ion-icon>
|
||||
{{ 'core.scanqr' | translate }}
|
||||
</ion-button>
|
||||
</ng-container>
|
||||
</form>
|
||||
|
||||
<!-- Forgotten password option. -->
|
||||
<ion-button *ngIf="showForgottenPassword && !isOAuth" expand="block" fill="clear"
|
||||
class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
|
||||
{{ 'core.login.forgotten' | translate }}
|
||||
</ion-button>
|
||||
|
||||
<!-- Login methods -->
|
||||
<core-login-methods></core-login-methods>
|
||||
|
||||
<!-- Identity providers. -->
|
||||
<ion-list *ngIf="identityProviders?.length" class="ion-padding-top core-login-identity-providers">
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-button [fill]="'outline'" *ngFor="let provider of identityProviders"
|
||||
class="ion-text-wrap ion-margin core-oauth-provider" (click)="oauthClicked(provider)" [attr.aria-label]="provider.name"
|
||||
expand="block">
|
||||
<img [src]="provider.iconurl" alt="" width="32" height="32" slot="start">
|
||||
<ion-label>{{ provider.name }}</ion-label>
|
||||
</ion-button>
|
||||
</ng-container>
|
||||
</form>
|
||||
</ion-list>
|
||||
|
||||
<!-- Forgotten password option. -->
|
||||
<ion-button *ngIf="showForgottenPassword && !isOAuth" expand="block" fill="clear"
|
||||
class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
|
||||
{{ 'core.login.forgotten' | translate }}
|
||||
</ion-button>
|
||||
|
||||
<!-- Login methods -->
|
||||
<core-login-methods></core-login-methods>
|
||||
|
||||
<!-- Identity providers. -->
|
||||
<ion-list *ngIf="identityProviders?.length" class="ion-padding-top core-login-identity-providers">
|
||||
<ion-item class="ion-text-wrap">
|
||||
<ion-label>
|
||||
<h3 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h3>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-button [fill]="'outline'" *ngFor="let provider of identityProviders" class="ion-text-wrap ion-margin core-oauth-provider"
|
||||
(click)="oauthClicked(provider)" [attr.aria-label]="provider.name" expand="block">
|
||||
<img [src]="provider.iconurl" alt="" width="32" height="32" slot="start">
|
||||
<ion-label>{{ provider.name }}</ion-label>
|
||||
</ion-button>
|
||||
</ion-list>
|
||||
|
||||
<!-- If OAuth, display cancel button since the form isn't displayed. -->
|
||||
<ion-list *ngIf="isOAuth">
|
||||
<ion-button expand="block" class="ion-margin" fill="outline" (click)="cancel($event)">
|
||||
{{ 'core.login.cancel' | translate }}
|
||||
</ion-button>
|
||||
</ion-list>
|
||||
</div>
|
||||
<!-- If OAuth, display cancel button since the form isn't displayed. -->
|
||||
<ion-list *ngIf="isOAuth">
|
||||
<ion-button expand="block" class="ion-margin" fill="outline" (click)="cancel($event)">
|
||||
{{ 'core.login.cancel' | translate }}
|
||||
</ion-button>
|
||||
</ion-list>
|
||||
</div>
|
||||
</core-loading>
|
||||
</ion-content>
|
||||
|
|
|
|||
|
|
@ -49,10 +49,12 @@ export class CoreLoginReconnectPage implements OnInit, OnDestroy {
|
|||
identityProviders?: CoreSiteIdentityProvider[];
|
||||
showForgottenPassword = true;
|
||||
showSiteAvatar = false;
|
||||
isBrowserSSO = false;
|
||||
isOAuth = false;
|
||||
isLoggedOut: boolean;
|
||||
siteId!: string;
|
||||
showScanQR = false;
|
||||
showLoading = true;
|
||||
|
||||
protected siteConfig?: CoreSitePublicConfigResponse;
|
||||
protected viewLeft = false;
|
||||
|
|
@ -107,6 +109,8 @@ export class CoreLoginReconnectPage implements OnInit, OnDestroy {
|
|||
this.showSiteAvatar = !!this.userAvatar && !CoreLoginHelper.getFixedSites();
|
||||
|
||||
this.checkSiteConfig(site);
|
||||
|
||||
this.showLoading = false;
|
||||
} catch (error) {
|
||||
CoreDomUtils.showErrorModal(error);
|
||||
|
||||
|
|
@ -151,6 +155,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.showScanQR = CoreLoginHelper.displayQRInSiteScreen() ||
|
||||
CoreLoginHelper.displayQRInCredentialsScreen(this.siteConfig.tool_mobile_qrcodetype);
|
||||
|
||||
|
|
@ -251,6 +256,23 @@ export class CoreLoginReconnectPage implements OnInit, OnDestroy {
|
|||
CoreLoginHelper.forgottenPasswordClicked(this.siteUrl, this.username, this.siteConfig);
|
||||
}
|
||||
|
||||
/**
|
||||
* Open browser for SSO login.
|
||||
*/
|
||||
openBrowserSSO(): void {
|
||||
if (!this.siteConfig) {
|
||||
return;
|
||||
}
|
||||
|
||||
CoreLoginHelper.confirmAndOpenBrowserForSSOLogin(
|
||||
this.siteUrl,
|
||||
this.siteConfig.typeoflogin,
|
||||
undefined,
|
||||
this.siteConfig.launchurl,
|
||||
this.redirectData,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* An OAuth button was clicked.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
import { Injectable } from '@angular/core';
|
||||
import { CanLoad, CanActivate, UrlTree } from '@angular/router';
|
||||
import { CoreLoginHelper } from '@features/login/services/login-helper';
|
||||
import { CoreApp } from '@services/app';
|
||||
|
||||
import { CoreSites } from '@services/sites';
|
||||
import { Router } from '@singletons';
|
||||
|
|
@ -45,9 +46,22 @@ export class CoreMainMenuAuthGuard implements CanLoad, CanActivate {
|
|||
}
|
||||
|
||||
if (CoreLoginHelper.isSiteLoggedOut()) {
|
||||
await CoreSites.logout();
|
||||
// Send the user to reconnect page.
|
||||
const newRoute = Router.parseUrl('/login/reconnect');
|
||||
const siteId = CoreSites.getCurrentSiteId();
|
||||
|
||||
return Router.parseUrl('/login');
|
||||
// Pass redirect data (if any and belongs to same site).
|
||||
let redirect = CoreApp.consumeMemoryRedirect();
|
||||
if (!redirect?.timemodified || Date.now() - redirect.timemodified > 20000 || redirect.siteId !== siteId) {
|
||||
redirect = null;
|
||||
}
|
||||
|
||||
newRoute.queryParams = {
|
||||
siteId,
|
||||
...redirect,
|
||||
};
|
||||
|
||||
return newRoute;
|
||||
}
|
||||
|
||||
return true;
|
||||
|
|
|
|||
Loading…
Reference in New Issue