diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 59132daae690f627265df4ca537f4c2911459e4c..e1ea848deee0943935cf5040b30a74659eaeff32 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -9,6 +9,7 @@ import { PqrComponent } from './simulator/pqr/pqr.component'; import { QualityComponent } from './quality/quality.component'; import { HasErrorGuard } from './shared/guards/has-error/has-error.guard'; import { ResetPasswordComponent } from './reset-password/reset-password.component'; +import { ContactComponent } from './contact/contact.component'; const routes: Routes = [ { path: '', component: HomeComponent, canDeactivate: [HasErrorGuard] }, @@ -16,6 +17,7 @@ const routes: Routes = [ { path: 'about', component: AboutComponent }, { path: 'quality', component: QualityComponent }, { path: 'team', component: TeamComponent }, + { path: 'contact', component: ContactComponent }, { path: 'reset-password/:token', component: ResetPasswordComponent }, { path: 'notfound', component: NotFoundComponent }, { path: '**', pathMatch: 'full', redirectTo: 'notfound' } diff --git a/src/app/app.component.html b/src/app/app.component.html index 41fc467152a495f2a1648e523edc7616bf34ba8a..17fe042b34a3755c336df6278a5d2a50dc7bc45e 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -54,8 +54,8 @@ <li routerLinkActive="active"> <a routerLink="team" queryParamsHandling="merge">Equipe</a> </li> - <li> - <a href="http://dadoseducacionais.c3sl.ufpr.br/#/contato" target="_blank">Contato</a> + <li routerLinkActive="active"> + <a routerLink="contact" queryParamsHandling="merge">Contato</a> </li> <div class="pull-left"> <app-profile [isInverseColor]="isInverseColor"></app-profile> @@ -116,7 +116,7 @@ <a routerLink="team" queryParamsHandling="merge">Equipe</a> </li> <li> - <a href="http://dadoseducacionais.c3sl.ufpr.br/#/contato" target="_blank">Contato</a> + <a routerLink="contact" queryParamsHandling="merge">Contato</a> </li> <li class="disabled"> <a>Legislação</a> diff --git a/src/app/app.module.ts b/src/app/app.module.ts index c7897735a19972d33210e5b54355e43a1035f3e4..8dcc64ed96cc08a941318f527f2b079056e9c3e7 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -21,6 +21,7 @@ import { ProfileComponent } from './profile/profile.component'; import { AboutComponent } from './about/about.component'; import { QualityComponent } from './quality/quality.component'; import { ResetPasswordComponent } from './reset-password/reset-password.component'; +import { ContactComponent } from './contact/contact.component'; registerLocaleData(localePt, 'pt'); @@ -44,7 +45,8 @@ registerLocaleData(localePt, 'pt'); ProfileComponent, AboutComponent, QualityComponent, - ResetPasswordComponent + ResetPasswordComponent, + ContactComponent ], entryComponents: [ LoginComponent, diff --git a/src/app/contact/contact.component.html b/src/app/contact/contact.component.html new file mode 100644 index 0000000000000000000000000000000000000000..c137e19cb81c65c0ef6b61d3111f494135bf4ffc --- /dev/null +++ b/src/app/contact/contact.component.html @@ -0,0 +1,26 @@ +<div class="container"> + <div class="row"> + <div class="col-lg-8 col-lg-offset-2"> + <h2 class="title">Dúvidas e/ou sugestões?</h2> + <h2 class="title">Envie pra gente!</h2> + <hr> + <div class="form-group"> + <label for="fullName">Nome completo</label> + <input type="text" class="form-control" id="fullName" [(ngModel)]="fullName" + placeholder="Insira seu nome completo"> + </div> + <div class="form-group"> + <label for="email">E-mail</label> + <input type="email" class="form-control" id="email" [(ngModel)]="email" placeholder="Insira seu e-mail"> + </div> + <div class="form-group"> + <label for="message">Mensagem</label> + <textarea class="form-control message" rows="10" id="message" [(ngModel)]="message" + placeholder="Escreva sua dúvida e/ou sugestão"></textarea> + </div> + <div class="text-center"> + <button type="button" class="btn btn-primary send" (click)="send()">Enviar</button> + </div> + </div> + </div> +</div> \ No newline at end of file diff --git a/src/app/contact/contact.component.scss b/src/app/contact/contact.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..11ecdc561025cfb03f88a1a9638e0be4493c2f3a --- /dev/null +++ b/src/app/contact/contact.component.scss @@ -0,0 +1,13 @@ +@import "../shared/styles/variables.scss"; + +.title { + color: $navbar-color; +} + +.message { + resize: none; +} + +.send { + width: 120px; +} \ No newline at end of file diff --git a/src/app/contact/contact.component.spec.ts b/src/app/contact/contact.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..427633e0a0b85f9c18ff1004470f2545e83d72ba --- /dev/null +++ b/src/app/contact/contact.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ContactComponent } from './contact.component'; + +describe('ContactComponent', () => { + let component: ContactComponent; + let fixture: ComponentFixture<ContactComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ContactComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ContactComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/contact/contact.component.ts b/src/app/contact/contact.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..5b9e4b02b694db0a4ef387f8bdc6b2737b377b03 --- /dev/null +++ b/src/app/contact/contact.component.ts @@ -0,0 +1,71 @@ +import { Component, OnInit } from '@angular/core'; +import { takeUntil } from 'rxjs/operators'; + +import { NotificationService } from '../shared/services/notification/notification.service'; +import { UtilitiesService } from '../shared/services/utilities/utilities.service'; +import { HttpService } from '../shared/services/http/http.service'; +import { BaseUnsubscribe } from '../shared/entities/base/base-unsubscribe'; + +@Component({ + selector: 'app-contact', + templateUrl: './contact.component.html', + styleUrls: ['./contact.component.scss'] +}) +export class ContactComponent extends BaseUnsubscribe implements OnInit { + + fullName: string; + email: string; + message: string; + + private notificationTitle: string = 'Atenção!'; + + constructor(private notificationService: NotificationService, private utilitiesService: UtilitiesService, private httpService: HttpService) { + super(); + } + + ngOnInit() { + } + + send() { + if (this.contactIsValid()) { + const postBody: any = { + name: this.fullName, + email: this.email, + contents: this.message, + origin: 'SimCAQ' + }; + + this.httpService.post<any>(`${this.httpService.apiEndpointDadosEducacionaisHomV1}/message`, postBody).pipe( + takeUntil(this.unsubscribe)) + .subscribe( + () => { + this.fullName = null; + this.email = null; + this.message = null; + this.notificationService.showSuccess('Obrigado pelo seu contato!', 'Contato enviado com sucesso!'); + }, + error => { + if (error && error.errorBody && error.errorBody.error && error.errorBody.text) { + this.notificationService.showError(error.errorBody.text, error.errorBody.error); + } else { + this.notificationService.showError('Tente mais tarde!', 'Erro ao enviar o contato!'); + } + }); + } + } + + private contactIsValid(): boolean { + if (!this.fullName || !this.email || !this.message) { + this.notificationService.showError('Todos os campos devem ser informados!', this.notificationTitle); + return false; + } + + if (!this.utilitiesService.emailIsValid(this.email)) { + this.notificationService.showError('Email inválido!', this.notificationTitle); + return false; + } + + return true; + } + +}