??
This commit is contained in:
@@ -1,13 +1,13 @@
|
||||
<div class="loading-container" *ngIf="loading">
|
||||
<img class="loading-img" src="../../assets/loader.gif" />
|
||||
</div>
|
||||
<div class="logo"></div>
|
||||
<div class="bg">
|
||||
<div class="container">
|
||||
<mat-card appearance="outlined" class="form">
|
||||
<mat-card-content>
|
||||
<div class="" id="google-button"></div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="loading-container" *ngIf="loading">
|
||||
<img class="loading-img" src="../../assets/loader.gif" />
|
||||
</div>
|
||||
<div class="logo"></div>
|
||||
<div class="bg">
|
||||
<div class="container">
|
||||
<mat-card appearance="outlined" class="form">
|
||||
<mat-card-content>
|
||||
<div class="" id="google-button"></div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,63 +1,63 @@
|
||||
.bg {
|
||||
background-image: url("../../../assets/bg.jpg");
|
||||
height: 70vh;
|
||||
background-size: cover;
|
||||
padding-top: 30vh;
|
||||
}
|
||||
.container {
|
||||
width: fit-content;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.logo {
|
||||
background-image: url('../../../assets/logo.png');
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
.user {
|
||||
text-align: right;
|
||||
}
|
||||
.load {
|
||||
text-align: center;
|
||||
}
|
||||
.loading-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(100, 100, 100, 0.3);
|
||||
z-index: 1400;
|
||||
}
|
||||
.loading-img {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
/* for mobile */
|
||||
@media screen and (max-width: 700px) {
|
||||
.container {
|
||||
width: 90%;
|
||||
}
|
||||
.logo {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
.bg {
|
||||
background-image: url("../../../assets/bg.jpg");
|
||||
height: 70vh;
|
||||
background-size: cover;
|
||||
padding-top: 30vh;
|
||||
}
|
||||
.container {
|
||||
width: fit-content;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.logo {
|
||||
background-image: url('../../../assets/logo.png');
|
||||
background-size: cover;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
.user {
|
||||
text-align: right;
|
||||
}
|
||||
.load {
|
||||
text-align: center;
|
||||
}
|
||||
.loading-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(100, 100, 100, 0.3);
|
||||
z-index: 1400;
|
||||
}
|
||||
.loading-img {
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
/* for mobile */
|
||||
@media screen and (max-width: 700px) {
|
||||
.container {
|
||||
width: 90%;
|
||||
}
|
||||
.logo {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,98 +1,98 @@
|
||||
import { Component, NgZone, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import jwt_decode from "jwt-decode";
|
||||
import { AuthService } from 'src/app/auth/auth.service';
|
||||
import { User } from 'src/app/models/user.model';
|
||||
import { NotificationsService } from 'src/app/services/notifications.service';
|
||||
import { environment } from 'src/environments/environment';
|
||||
|
||||
@Component({
|
||||
selector: 'app-login-page',
|
||||
templateUrl: './login-page.component.html',
|
||||
styleUrls: ['./login-page.component.scss']
|
||||
})
|
||||
|
||||
export class LoginPageComponent implements OnInit {
|
||||
constructor(
|
||||
private router$: Router,
|
||||
private auth$: AuthService,
|
||||
private ngZone$: NgZone,
|
||||
private notifications$: NotificationsService
|
||||
) { }
|
||||
|
||||
loading = false;
|
||||
|
||||
ngOnInit(): void {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
window.onGoogleLibraryLoad = () => {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
google.accounts.id.initialize({
|
||||
client_id: environment.google.clientId,
|
||||
callback: this.handleCredentialResponse.bind(this),
|
||||
auto_select: true,
|
||||
cancel_on_tap_outside: true
|
||||
});
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
google.accounts.id.renderButton(
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
document.getElementById("google-button"),
|
||||
{ theme: "outline", size: "large", width: "100%" }
|
||||
);
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
google.accounts.id.prompt();
|
||||
};
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
async handleCredentialResponse(response: any) {
|
||||
try {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const responsePayload: any = jwt_decode(response.credential);
|
||||
this.auth$.user = new User({
|
||||
googleCredentials: response.credential,
|
||||
userName: `${responsePayload.given_name} ${responsePayload.family_name}`,
|
||||
email: responsePayload.email,
|
||||
avatar: responsePayload.picture
|
||||
});
|
||||
this.ngZone$.run(() => {
|
||||
this.loading = true;
|
||||
});
|
||||
this.auth$.googleCredential = response.credential;
|
||||
await this.auth$.getAPIToken();
|
||||
this.ngZone$.run(() => {
|
||||
this.router$.navigate(['/app']);
|
||||
});
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
} catch (e: any) {
|
||||
console.error('handleCredentialResponse', e);
|
||||
this.ngZone$.run(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
if (e.status === 401) {
|
||||
this.ngZone$.run(() => {
|
||||
this.notifications$.add({
|
||||
text: "User not exists in DiunaBI database.",
|
||||
btn: "OK",
|
||||
duration: 15000
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.ngZone$.run(() => {
|
||||
this.notifications$.add({
|
||||
text: "DiunaBI server not responded.",
|
||||
btn: "OK",
|
||||
duration: 15000
|
||||
});
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
import { Component, NgZone, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import jwt_decode from "jwt-decode";
|
||||
import { AuthService } from 'src/app/auth/auth.service';
|
||||
import { User } from 'src/app/models/user.model';
|
||||
import { NotificationsService } from 'src/app/services/notifications.service';
|
||||
import { environment } from 'src/environments/environment';
|
||||
|
||||
@Component({
|
||||
selector: 'app-login-page',
|
||||
templateUrl: './login-page.component.html',
|
||||
styleUrls: ['./login-page.component.scss']
|
||||
})
|
||||
|
||||
export class LoginPageComponent implements OnInit {
|
||||
constructor(
|
||||
private router$: Router,
|
||||
private auth$: AuthService,
|
||||
private ngZone$: NgZone,
|
||||
private notifications$: NotificationsService
|
||||
) { }
|
||||
|
||||
loading = false;
|
||||
|
||||
ngOnInit(): void {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
window.onGoogleLibraryLoad = () => {
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
google.accounts.id.initialize({
|
||||
client_id: environment.google.clientId,
|
||||
callback: this.handleCredentialResponse.bind(this),
|
||||
auto_select: true,
|
||||
cancel_on_tap_outside: true
|
||||
});
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
google.accounts.id.renderButton(
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
document.getElementById("google-button"),
|
||||
{ theme: "outline", size: "large", width: "100%" }
|
||||
);
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
google.accounts.id.prompt();
|
||||
};
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
async handleCredentialResponse(response: any) {
|
||||
try {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const responsePayload: any = jwt_decode(response.credential);
|
||||
this.auth$.user = new User({
|
||||
googleCredentials: response.credential,
|
||||
userName: `${responsePayload.given_name} ${responsePayload.family_name}`,
|
||||
email: responsePayload.email,
|
||||
avatar: responsePayload.picture
|
||||
});
|
||||
this.ngZone$.run(() => {
|
||||
this.loading = true;
|
||||
});
|
||||
this.auth$.googleCredential = response.credential;
|
||||
await this.auth$.getAPIToken();
|
||||
this.ngZone$.run(() => {
|
||||
this.router$.navigate(['/app']);
|
||||
});
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
} catch (e: any) {
|
||||
console.error('handleCredentialResponse', e);
|
||||
this.ngZone$.run(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
if (e.status === 401) {
|
||||
this.ngZone$.run(() => {
|
||||
this.notifications$.add({
|
||||
text: "User not exists in DiunaBI database.",
|
||||
btn: "OK",
|
||||
duration: 15000
|
||||
});
|
||||
});
|
||||
} else {
|
||||
this.ngZone$.run(() => {
|
||||
this.notifications$.add({
|
||||
text: "DiunaBI server not responded.",
|
||||
btn: "OK",
|
||||
duration: 15000
|
||||
});
|
||||
});
|
||||
}
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
mat-card {
|
||||
margin-bottom: 3px;
|
||||
background-color: rgba(255, 145, 0, 0.4);
|
||||
}
|
||||
.action-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
.text {
|
||||
float: left;
|
||||
}
|
||||
.btn {
|
||||
float: right;
|
||||
color: red;
|
||||
margin-left: 5px;
|
||||
mat-card {
|
||||
margin-bottom: 3px;
|
||||
background-color: rgba(255, 145, 0, 0.4);
|
||||
}
|
||||
.action-button {
|
||||
cursor: pointer;
|
||||
}
|
||||
.text {
|
||||
float: left;
|
||||
}
|
||||
.btn {
|
||||
float: right;
|
||||
color: red;
|
||||
margin-left: 5px;
|
||||
}
|
||||
Reference in New Issue
Block a user