Okupa_Mi_Coche/Okupa_mi_coche_-_Angular
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

First successful test joining matrix server

Browse Source
This commit is contained in:
Eneko Nieto
2021-03-04 13:53:32 +01:00
parent efe1c9002c
commit 34d6e66d3e
12 changed files with 273 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/app/app.component.ts
View File

@@ -1,6 +1,6 @@
import { Component, OnInit } from '@angular/core';
import { AuthService } from './services/auth.service';
import { ChatService } from './services/chat.service';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { AuthService, AuthState } from './services/auth.service';
@Component({
// tslint:disable-next-line:component-selector
@@ -8,21 +8,41 @@ import { ChatService } from './services/chat.service';
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
export class AppComponent implements OnInit, OnDestroy {
showOverlay = true;
constructor(
private route: ActivatedRoute,
private authService: AuthService,
private chatService: ChatService
private router: Router
) { }
async ngOnInit(): Promise<void> {
console.log('AppComponent.ngInit()');
const isLogged = await this.authService.isLogged;
this.showOverlay = false;
if (isLogged) {
console.log('GO TO SSO LOGIN');
this.chatService.goToSsoLogin();
const chatLoginToken = await this.waitChatToken();
const authState = await this.authService.configureAndTryLogin(chatLoginToken);
if (authState !== AuthState.ChatLoggingInProcess) {
this.showOverlay = false;
}
}
ngOnDestroy(): void {
// TODO no se ejecuta
console.log('AppComponent.ngDestroy()');
this.authService.stopAutomaticRefresh();
}
private async waitChatToken(): Promise<string> {
const p = new Promise<string>((resolve) => {
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
resolve(this.route.firstChild.snapshot.queryParams['loginToken']);
}
});
});
return await p;
}
}

25
src/app/pages/home/home.component.ts
View File

@@ -1,14 +1,14 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from 'src/app/services/auth.service';
import { ChatService } from 'src/app/services/chat.service';
import { Travel } from '../../entities/travel';
import { ApiService } from '../../services/api.service';
@Component({
templateUrl: './home.component.html',
})
export class HomeComponent implements OnInit {
export class HomeComponent {
loginFailed = false;
userProfile: object;
usePopup: boolean;
@@ -27,21 +27,11 @@ export class HomeComponent implements OnInit {
myTravelsApiCall = this.apiService.getMyTravels;
constructor(
private route: ActivatedRoute,
private router: Router,
private authService: AuthService,
private apiService: ApiService,
private chatService: ChatService
private apiService: ApiService
) { }
ngOnInit(): void {
const loginToken = this.route.snapshot.queryParams['loginToken'];
if (loginToken) {
console.log('loginToken=' + this.route.snapshot.queryParams['loginToken']);
this.chatService.login(loginToken);
}
}
newTravel(): void {
this.router.navigateByUrl('/travel/new');
}
@@ -51,8 +41,7 @@ export class HomeComponent implements OnInit {
this.router.navigateByUrl('/travel/' + travel.id);
}
get isLogged(): Promise<boolean> {
return this.authService.isLogged;
// return this.authService.isLogged();
get isLogged(): Observable<boolean> {
return this.authService.logged$;
}
}

52
src/app/router.module.ts
View File

@@ -6,32 +6,32 @@ import { NewTravelComponent } from './pages/new-travel/new-travel.component';
import { TravelComponent } from './pages/travel/travel.component';
const routes: Routes = [
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent
},
{
path: 'travel/new',
component: NewTravelComponent
},
{
path: 'travel/:id',
component: TravelComponent
},
{
path: 'travel/:id/edit',
component: EditTravelComponent
},
{
path: '**',
redirectTo: 'home'
}
];
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent
},
{
path: 'travel/new',
component: NewTravelComponent
},
{
path: 'travel/:id',
component: TravelComponent
},
{
path: 'travel/:id/edit',
component: EditTravelComponent
},
{
path: '**',
redirectTo: 'home'
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],

105
src/app/services/auth.service.ts
View File

@@ -1,26 +1,29 @@
import { Injectable } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { BehaviorSubject } from 'rxjs';
import { filter } from 'rxjs/operators';
import { authConfig } from '../auth.config';
import { User } from '../entities/user';
import { ChatService } from './chat.service';
export enum AuthState {
Logged,
NotLogged,
ChatLoggingInProcess
}
@Injectable({
providedIn: 'root'
})
export class AuthService {
private configurePromise = null;
private loggedSubject = new BehaviorSubject<boolean>(false);
public logged$ = this.loggedSubject.asObservable();
constructor(
private oauthService: OAuthService
private oauthService: OAuthService,
private chatService: ChatService
) { }
get isLogged(): Promise<boolean> {
if (this.configurePromise == null) {
this.configurePromise = this.configureAndTryLogin();
}
return this.configurePromise;
}
login(): void {
this.oauthService.initLoginFlow();
}
@@ -34,43 +37,73 @@ export class AuthService {
return User.fromClaims(claims);
}
private async configureAndTryLogin(): Promise<boolean> {
async configureAndTryLogin(chatLoginToken: string): Promise<AuthState> {
this.configureOauth();
const logged = await this.tryOauthLogin();
if (logged) {
if (sessionStorage.getItem('chatLoginInProcess') === 'true') {
sessionStorage.removeItem('chatLoginInProcess');
if (chatLoginToken) {
console.log('chatLoginToken=' + chatLoginToken);
this.chatService.login(chatLoginToken);
}
else {
console.error('CHAT LOGIN TOKEN NOT RECEIVED');
}
this.loggedSubject.next(true);
return AuthState.Logged;
}
else {
console.log('GO TO SSO LOGIN');
sessionStorage.setItem('chatLoginInProcess', 'true');
this.chatService.goToSsoLogin();
return AuthState.ChatLoggingInProcess;
}
}
return AuthState.NotLogged;
}
stopAutomaticRefresh(): void {
this.oauthService.stopAutomaticRefresh();
}
private configureOauth(): void {
this.oauthService.configure(authConfig);
this.oauthService.setupAutomaticSilentRefresh();
// Automatically load user profile
this.oauthService.events
.pipe(filter((e) => e.type === 'token_received'))
.subscribe((_) => {
console.log('auth.service token_received state=', this.oauthService.state);
});
}
return new Promise((resolve) => {
this.oauthService.loadDiscoveryDocumentAndTryLogin().then((_) => {
if (this.oauthService.getIdentityClaims() != null) {
console.log('IDENTITY CLAIMS');
console.log(this.oauthService.getIdentityClaims());
if (this.oauthService.hasValidIdToken() && this.oauthService.hasValidAccessToken()) {
console.log('NO NEED FOR TOKEN REFRESH');
resolve(true);
}
else {
this.oauthService.refreshToken().then(() => {
console.log('TOKEN REFRESHED');
resolve(true);
}).catch(e => {
console.error('ERROR REFRESHING TOKEN');
console.error(e);
resolve(false);
});
}
private async tryOauthLogin(): Promise<boolean> {
await this.oauthService.loadDiscoveryDocumentAndTryLogin();
if (this.oauthService.getIdentityClaims() != null) {
console.log('IDENTITY CLAIMS');
console.log(this.oauthService.getIdentityClaims());
if (this.oauthService.hasValidIdToken() && this.oauthService.hasValidAccessToken()) {
console.log('NO NEED FOR TOKEN REFRESH');
return true;
}
else {
try {
await this.oauthService.refreshToken();
console.log('TOKEN REFRESHED');
return true;
}
else {
console.error('NOT LOGGED!');
resolve(false);
catch (e) {
console.log('ERROR REFRESHING TOKEN: ' + e);
return false;
}
});
});
}
}
console.log('NOT LOGGED!');
return false;
}
}

22
src/app/services/chat.service.ts
View File

@@ -1,22 +1,25 @@
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
// import sdk from 'matrix-js-sdk';
// import * as sdk from '../../assets/scripts/browser-matrix.min';
// const sdk = require('matrix-js-sdk');
@Injectable({
providedIn: 'root'
})
export class ChatService {
constructor(
private router: Router,
private http: HttpClient
) { }
goToSsoLogin(): void {
// window.location.href = 'https://matrix.fosil.eu/_matrix/client/r0/login/sso/redirect?redirectUrl=http://localhost:4200/';
window.location.href = 'https://matrix.fosil.eu/_matrix/client/r0/login/sso/redirect?redirectUrl=http://localhost:4200/';
}
login(loginToken: string): Promise<void | object> {
console.log('MATRIXCS');
console.log(matrixcs);
// console.log('SDK');
// console.log(sdk);
return this.http.post(
'https://matrix.fosil.eu/_matrix/client/r0/login',
{
@@ -25,7 +28,18 @@ export class ChatService {
type: 'm.login.token'
}
).toPromise().then(res => {
console.log('LOGGED TO CHAT');
console.log(res);
const client = matrixcs.createClient({
baseUrl: "https://matrix.fosil.eu",
accessToken: res.access_token,
userId: res.user_id
});
client.publicRooms(function (err, data) {
console.log("Public Rooms: %s", JSON.stringify(data));
});
});
}
}

5
src/app/views/header/header.component.ts
View File

@@ -1,4 +1,5 @@
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { AuthService } from 'src/app/services/auth.service';
@Component({
@@ -19,8 +20,8 @@ export class HeaderComponent {
this.authService.logout();
}
get isLogged(): Promise<boolean> {
return this.authService.isLogged;
get isLogged(): Observable<boolean> {
return this.authService.logged$;
}
get name(): string {

BIN
src/assets/img/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

18
src/assets/scripts/browser-matrix.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

28
src/index.html
View File

@@ -1,16 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Okupa mi coche</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="assets/img/favicon.png" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<head>
<meta charset="utf-8" />
<title>Okupa mi coche</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="assets/img/favicon.png" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="assets/scripts/browser-matrix.min.js"></script>
</head>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>
<body class="mat-typography">
<app-root></app-root>
</body>
</html>