Merge branch 'develop' into 126-mascara

.gitignore

@@ -45,3 +45,6 @@ Thumbs.db
 /src/app/environment
 /src/app/secret
 /src/app/app.constant.ts
+certificate.cnf
+localhost.crt
+localhost.key

README.md

@@ -1,17 +1,37 @@
-# UnBTVFrontend
+# UnB-TV Frontend
 
-![Alt text](public/Simbolo_UnBTV.svg)
+<div align="center">
+<img src="./docs/assets/unb-removebg-preview.png" alt="logo UNBTV"> </div>
 
 ## Sobre
 
-Este repositório contém o frontend da aplicação UnBTV, um projeto que visa a criação de uma plataforma de streaming para a UnBTV.
+O projeto visa o desenvolvimento de uma aplicação Web e Mobile para a UnB-TV, com o objetivo de centralizar e disponibilizar de forma unificada todo o conteúdo oferecido pela UnB-TV, incluindo vídeos e transmissões ao vivo, sendo desenvolvida no segundo semestre de 2023 pelas disciplinas de EPS e MDS da Universidade de Brasília.
 
 ## Ambientes
 
 [Documentação](https://github.com/fga-eps-mds/2023.2-UnB-TV-DOC)
-[Backend:Users](https://github.com/fga-eps-mds/2023.2-UnB-TV-Users)
+[Users](https://github.com/fga-eps-mds/2023.2-UnB-TV-Users)
+[Admin](https://github.com/fga-eps-mds/2023.2-UnB-TV-Admin)
+[Video](https://github.com/fga-eps-mds/2023.2-UnB-TV-VideoService)
+[Gateway](https://github.com/fga-eps-mds/2023.2-UnB-TV-API-Gateway)
 [Frontend](https://github.com/fga-eps-mds/2023.2-UnB-TV-Frontend)
 
+## Acessando o repositório localmente
+
+### Requisitos
+
+- docker e docker compose
+
+Primeiro passo é instalar o docker e docker compose, para isso siga os passos de instalação do [docker](https://docs.docker.com/engine/install/) e [docker compose](https://docs.docker.com/compose/install/).
+
+Execute o servidor local:
+
+```
+docker compose up
+```
+
+Acessar o localhost em: http://localhost:4200
+
 ## Equipe
 
 |                                                              Foto                                                               |               Nome                |       Github       |             Email              | Matrícula |
@@ -30,15 +50,3 @@ Este repositório contém o frontend da aplicação UnBTV, um projeto que visa a
 |   <img width="100px" style="border-radius:10%" src="https://github.com/castroricardo1.png" alt="Ricardo de Castro Loureiro">    |    Ricardo de Castro Loureiro     |  @castroricardo1   |  [email protected]   | 200043111 |
 |      <img width="100px" style="border-radius:10%" src="https://github.com/savioc2.png" alt="Ana Carolina Rodrigues Leite">      |      Sávio Cunha de Carvalho      |      @savioc2      |     [email protected]     | 180130889 |
 |       <img width="100px" style="border-radius:10%" src="https://github.com/vitoriaaquere.png" alt="Vitória Aquere Matos">       |       Vitória Aquere Matos        |   @vitoriaaquere   |    <[email protected]>    | 190096616 |
-
-## Instruções para rodar a aplicação
-
-Instale o docker e docker compose.
-
-Para instalar o docker: https://docs.docker.com/engine/install/
-Para instalar o docker compose: https://docs.docker.com/compose/install/
-
-Para rodar o frontend execute o comando `docker compose up` e abra no navegador usando o link http://localhost:4200/.
-
-Para rodar os testes execute `docker exec -it unb-tv-web ng test` com o docker em execução e abra no navegador usando o link http://localhost:9876/#
-Para rodar o frontend execute o comando `docker compose up`

certificate.cnf

@@ -0,0 +1,21 @@
+[req]
+default_bits = 2048
+prompt = no
+default_md = sha256
+x509_extensions = v3_req
+distinguished_name = dn
+
+[dn]
+C = IN
+ST = India
+L = India
+O = My Organisation
+OU = My Organisational Unit
+emailAddress = [email protected]
+CN = localhost
+
+[v3_req]
+subjectAltName = @alt_names
+
+[alt_names]
+DNS.1 = localhost

package.json

@@ -13,6 +13,7 @@
   },
   "private": true,
   "dependencies": {
+    "@abacritt/angularx-social-login": "^2.0.0",
     "@angular/animations": "^15.2.0",
     "@angular/cdk": "^15.2.9",
     "@angular/common": "^15.2.0",
@@ -23,6 +24,7 @@
     "@angular/platform-browser": "^15.2.0",
     "@angular/platform-browser-dynamic": "^15.2.0",
     "@angular/router": "^15.2.0",
+    "@types/gapi.auth2": "^0.0.60",
     "angular-oauth2-oidc": "^15.0.1",
     "hls.js": "^1.4.12",
     "jwt-decode": "^3.1.2",

src/app/app-routing.module.ts

@@ -16,22 +16,16 @@ import { UpdateRoleComponent } from './pages/update-role/update-role.component';
 import { AdminGuard } from './services/admin.guard';
 import { SuggestAgendaComponent } from './pages/suggest-agenda/suggest-agenda.component';
 import { ParticipateComponent } from './pages/participate/participate.component';
-import { GridDaysComponent } from './pages/grid-days/grid-days.component'; 
-import { GridComponent } from './pages/grid/grid.component'; 
+import { GridDaysComponent } from './pages/grid-days/grid-days.component';
+import { GridComponent } from './pages/grid/grid.component';
 
 import { WithTokenGuard } from './guard/with-token.guard';
 
 const routes: Routes = [
-  { path: 'login', component: LoginComponent },
-  { path: 'register', component: RegisterComponent },
-  { path: 'loginsocial', component: LoginSocialComponent },
   { path: 'stream', component: StreamViewComponent },
   { path: 'videos', component: VideoComponent },
   { path: 'video/:idVideo', component: VideoViewerComponent },
-  { path: 'activeAccount', component: ActiveAccountComponent },
-  { path: 'sendCodeResetPassword', component: CheckCodeRestPasswordComponent },
-  { path: 'changePassword', component: ResetPasswordComponent },
-  { path: '', component: VideoComponent, canActivate: [AuthGuard], }, // Default route - Showd be stream component
+  { path: '', component: VideoComponent, canActivate: [AuthGuard], },
   { path: 'login', component: LoginComponent, canActivate: [WithTokenGuard], },
   { path: 'register', component: RegisterComponent, canActivate: [WithTokenGuard], },
   { path: 'loginsocial', component: LoginSocialComponent, canActivate: [WithTokenGuard], },

src/app/app.module.ts

@@ -11,6 +11,9 @@ import { OAuthModule, OAuthStorage } from 'angular-oauth2-oidc';
 import { InputTextModule } from 'primeng/inputtext';
 import { DropdownModule } from 'primeng/dropdown';
 import { ButtonModule } from 'primeng/button';
+import { SocialLoginModule, SocialAuthServiceConfig } from '@abacritt/angularx-social-login';
+import { GoogleLoginProvider, FacebookLoginProvider } from '@abacritt/angularx-social-login';
+
 
 // Declaration
 import { NgModule } from '@angular/core';
@@ -58,6 +61,7 @@ import { NgxGoogleAnalyticsModule, NgxGoogleAnalyticsRouterModule } from 'ngx-go
     FormsModule,
     BrowserAnimationsModule,
     MatPaginatorModule,
+    SocialLoginModule,
     NgxGoogleAnalyticsModule.forRoot('G-XL7Z0L7VM8'),
     NgxGoogleAnalyticsRouterModule
   ],
@@ -94,7 +98,28 @@ import { NgxGoogleAnalyticsModule, NgxGoogleAnalyticsRouterModule } from 'ngx-go
     },
     { provide: OAuthStorage, useValue: localStorage },
     MessageService,
-    ConfirmationService
+    ConfirmationService,
+    {
+      provide: 'SocialAuthServiceConfig',
+      useValue: {
+        autoLogin: false,
+        providers: [
+          {
+            id: GoogleLoginProvider.PROVIDER_ID,
+            provider: new GoogleLoginProvider(
+              '254484469180-1imr4ds36p8rq4fe7udkja212tu0p7jl.apps.googleusercontent.com'
+            )
+          },
+          {
+            id: FacebookLoginProvider.PROVIDER_ID,
+            provider: new FacebookLoginProvider('2640880742734858')
+          }
+        ],
+        onError: (err) => {
+          console.error(err);
+        }
+      } as SocialAuthServiceConfig,
+    }
   ],
   bootstrap: [AppComponent],
 })

src/app/components/background/background.component.html

@@ -3,7 +3,7 @@
     <div class="pt-10 flex justify-center items-center">
       <img alt="simbolo-unb" src="../../../assets/Simbolo_UnBTV-01 1.png" />
     </div>
-    <div *ngIf="getActualRoute() !== '/login'">
+    <div *ngIf="getActualRoute() !== '/login' && getActualRoute() !== '/loginsocial'">
     <nav class="flex flex-row items-center justify-center pl-3">
       <ul class="flex flex-row gap-1 text-xs">
         <div *ngIf="getActualRoute() === '/stream'">

src/app/guard/auth.guard.spec.ts

@@ -3,17 +3,22 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { AuthGuard } from './auth.guard';
 import { RouterTestingModule } from '@angular/router/testing';
 import { LoginComponent } from '../pages/login/login.component';
+import { Router } from '@angular/router';
 
 describe('AuthGuard', () => {
   let guard: AuthGuard;
+  let router: Router;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule, RouterTestingModule.withRoutes(
-        [{ path: 'login', component: LoginComponent }]
-      )], providers: [AuthGuard], declarations: [LoginComponent]
+        [{ path: 'loginsocial', component: LoginComponent }]
+      )], 
+      providers: [AuthGuard], 
+      declarations: [LoginComponent]
     });
     guard = TestBed.inject(AuthGuard);
+    router = TestBed.inject(Router);
   });
 
   it('should be created', () => {
@@ -23,13 +28,12 @@ describe('AuthGuard', () => {
   it('should return true for a logged in user', () => {
     localStorage.setItem('token', 'testtoken');
     expect(guard.canActivate()).toBe(true);
-  }
-  );
+  });
 
-  it('should return false for a logged out user', () => {
+  it('should navigate to loginsocial for a logged out user', () => {
     localStorage.removeItem('token');
-    expect(guard.canActivate()).toBe(false);
-  }
-  );
-
+    const navigateSpy = spyOn(router, 'navigate');
+    guard.canActivate();
+    expect(navigateSpy).toHaveBeenCalledWith(['/loginsocial']);
+  });
 });

src/app/guard/auth.guard.ts

@@ -13,7 +13,7 @@ export class AuthGuard implements CanActivate {
     if (this.authService.isAuthenticated()) {
       return true;
     } else {
-      this.router.navigate(['/login']);
+      this.router.navigate(['/loginsocial']);
       return false;
     }
   }

src/app/pages/edit-user/edit-user.component.ts

@@ -98,7 +98,7 @@ export class EditUserComponent implements OnInit {
             'Sucesso',
             'Usuário atualizado com sucesso!'
           );
-          this.navigator('/profile');
+          this.navigator('/videos');
         },
         error: (error: ErrorResponseType) => {
           this.alertService.errorMessage(error.error);