Merge pull request #32 from fga-eps-mds/develop

Release 2

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-    <img src="https://imgur.com/bwJJC9F.png" alt="Logo">
+    <img src="https://raw.githubusercontent.com/fga-eps-mds/2019.2-FoodCare/docs/docs/assets/images/id-visual/logo-green.png" alt="Logo">
 </p>
 
 <h1 align="center">FoodCare WebApp</h1>

angular.json

@@ -20,7 +20,6 @@
             "tsConfig": "tsconfig.app.json",
             "aot": false,
             "assets": [
-              "src/favicon.ico",
               "src/assets",
               "src/_redirects"
             ],
@@ -116,7 +115,6 @@
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "assets": [
-              "src/favicon.ico",
               "src/assets"
             ],
             "styles": [

ngsw-config.json

@@ -7,7 +7,7 @@
       "installMode": "prefetch",
       "resources": {
         "files": [
-          "/favicon.ico",
+          "/src/assets/images/icon-green.png",
           "/index.html",
           "/manifest.webmanifest",
           "/*.css",

package.json

@@ -27,6 +27,7 @@
     "hammerjs": "^2.0.8",
     "jwt-decode": "^2.2.0",
     "moment": "^2.24.0",
+    "ng-pick-datetime": "^7.0.0",
     "ngx-filter-pipe": "^2.1.2",
     "ngx-order-pipe": "^2.0.4",
     "rxjs": "~6.4.0",

src/app/app-routing.module.ts

@@ -3,7 +3,7 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { AuthGuard } from './auth/auth.service';
 
-import { HomeComponent } from './home/home.component';
+import { HomeComponent } from './layout/home/home.component';
 import { LoginComponent } from './auth/login/login.component';
 import { CadastroComponent } from './auth/cadastro/cadastro.component';
 import { EventosComponent } from './eventos/eventos.component';

src/app/app.module.ts

@@ -21,15 +21,14 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { AppRoutingModule } from './app-routing.module';
 import { FilterPipeModule } from 'ngx-filter-pipe';
 import { OrderModule } from 'ngx-order-pipe';
+import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime';
 
 import { AuthService, AuthInterceptor, AuthGuard } from './auth/auth.service';
 import { EventoService } from './eventos/evento.service';
 
 import { AppComponent } from './app.component';
-import { HomeComponent } from './home/home.component';
-import { ConteudoComponent } from './home/conteudo/conteudo.component';
-import { RodapeComponent } from './layout/rodape/rodape.component';
-import { MenuNavComponent } from './layout/menu-nav/menu-nav.component';
+import { HomeComponent } from './layout/home/home.component';
+import { FooterComponent } from './layout/footer/footer.component';
 import { LoginComponent } from './auth/login/login.component';
 import { CadastroComponent } from './auth/cadastro/cadastro.component';
 import { EventosComponent } from './eventos/eventos.component';
@@ -40,9 +39,7 @@ import { PerfilDoadorComponent } from './perfil-doador/perfil-doador.component';
   declarations: [
     AppComponent,
     HomeComponent,
-    ConteudoComponent,
-    RodapeComponent,
-    MenuNavComponent,
+    FooterComponent,
     LoginComponent,
     CadastroComponent,
     EventosComponent,
@@ -73,6 +70,8 @@ import { PerfilDoadorComponent } from './perfil-doador/perfil-doador.component';
     AppRoutingModule,
     FilterPipeModule,
     OrderModule,
+    OwlDateTimeModule,
+    OwlNativeDateTimeModule
   ],
   providers: [
     AuthService,

src/app/auth/auth.service.ts

@@ -36,17 +36,6 @@ export class AuthService {
     return localStorage.getItem('token');
   }
 
-  // getDoadorID() {
-  //   return localStorage.getItem('id_doador');
-  // }
-  // getDoador(id) {
-  //   return this.http.get(this.userApi.concat(id + '/'))
-  //     .subscribe(
-  //       data => console.log(data),
-  //       err => console.log(err)
-  //     );
-  // }
-
   login(username: string, password: string) {
     this.logout();
     return this.http.post(
@@ -59,14 +48,13 @@ export class AuthService {
       shareReplay(),
     );
   }
-  cadastrar(username: string, email: string, password1: string, password2: string) {
+  cadastrar(username: string, first_name: string, email: string, password1: string, password2: string) {
     this.logout();
     return this.http.post(
       this.authApi.concat('signup/'),
-      { username, email, password1, password2 }
+      { username, first_name, email, password1, password2 }
     ).pipe(
       tap(response => {
-        console.log(response),
         this.setSession(response)
       }),
       shareReplay(),
@@ -82,9 +70,6 @@ export class AuthService {
   atualizaDoador(doador: Doador) {
     return this.http.put<any>(`${this.authApi}user/`, doador)
     .pipe(
-      tap(response => {
-        console.log(response)
-      }),
       shareReplay(),
     );
   }
@@ -98,9 +83,6 @@ export class AuthService {
   atualizaSenhaDoador(new_password1: String, new_password2: String) {
     return this.http.post<any>(`${this.authApi}password/change/`, {new_password1, new_password2})
     .pipe(
-      tap(response => {
-        console.log(response)
-      }),
       shareReplay(),
     );
   }
@@ -110,7 +92,6 @@ export class AuthService {
   logout() {
     localStorage.removeItem('token');
     localStorage.removeItem('expires_at');
-    console.log('saindo');
   }
   refreshToken() {
     if (moment().isBetween(this.getExpiration().subtract(1, 'days'), this.getExpiration())) {

src/app/auth/cadastro/cadastro.component.css

@@ -1,13 +1,32 @@
 .background {
-    padding: 50px;
+    background-image: url(src/assets/images/fundo-home-frutas.jpeg);
+    background-size: cover;
+    height: 100%;
+    width: 100%;
+}
+.toolbar-cadastro {
+    top: 0;
+    position: sticky;
+    display: flex;
+    /* justify-content: space-between; */
+    z-index: 1;
+    padding: 0 8vw;
+    background-color: #406040;
+}
+.logo-img {
+    width: 180px;
+    padding-bottom: 4px;
+}
+.home{
+    color: white;
+    cursor: pointer;
 }
-
 .box {
     width: 400px;
-    height: 500px;
     border-radius: 10px;
+    padding: 8px;
     background: #fff;
-    margin: auto;
+    margin: 15px auto;
     display: flex;
     flex-direction: column;
 }
@@ -36,6 +55,11 @@
 }
 
 .textoLogin {
-  margin: auto;
-  padding-top: 10px;
+  margin: 5px auto;
+  /* padding-top: 10px; */
+}
+
+.form {
+    display: flex;
+    flex-flow: column;
 }

src/app/auth/cadastro/cadastro.component.html

@@ -1,28 +1,51 @@
-<MenuNav>
-    <div class="background">
-        <div class="box">
-            <h2 class="title"> Cadastrar </h2>
-            <mat-form-field>
-                <input matInput placeholder="Usuário" #username id="username" class="form-control">
-            </mat-form-field>
-            <!-- <mat-form-field>
-                <input matInput placeholder="Nome" #name id="name" class="form-control">
-            </mat-form-field>
-            <mat-form-field>
-                <input matInput placeholder="CNPJ" #cnpj id="cnpj" class="form-control">
-            </mat-form-field> -->
-            <mat-form-field>
-                <input matInput placeholder="Email" #email id="email" class="form-control" type="email">
-            </mat-form-field>
-            <mat-form-field>
-                <input matInput placeholder="Senha" #password id="password" class="form-control" type="password">
-            </mat-form-field>
-            <mat-form-field>
-                <input matInput placeholder="Confirmar Senha" #passwordConfirm id="passwordConfirm" class="form-control" type="password">
-            </mat-form-field>
-            <button mat-raised-button class="buttonCadastro" (click)='cadastrar(username.value, email.value, password.value, passwordConfirm.value)'>Cadastrar</button>
-            <p class="textoLogin">Já tem login? Clique <a class="link" href="/login">aqui.</a></p>
-        </div>
-    </div>
-    <Rodape></Rodape>
-</MenuNav>
+<div class="background">
+  <mat-toolbar class="toolbar-cadastro">
+    <img class="logo-img clickable" src="assets/images/logo-white.png" onclick="location.href='/'">
+  </mat-toolbar>
+  <div class="box">
+    <form class="form" [formGroup]="registerForm" (ngSubmit)="onSubmit(registerForm.value)">
+      <h2 class="title"> Cadastrar </h2>
+      <mat-form-field>
+        <input placeholder="Nome do doador" matInput type="text" formControlName="first_name" class="form-control"
+          [ngClass]="{ 'is-invalid': submitted && f.first_name.errors }" />
+      </mat-form-field>
+      <mat-form-field>
+        <input placeholder="CPF ou CNPJ" matInput type="text" formControlName="username" class="form-control"
+          [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
+      </mat-form-field>
+      <div *ngIf="submitted && f.username.errors" class="invalid-feedback">
+        <div *ngIf="f.username.errors.required">É necessário digitar um nome de usuário</div>
+      </div>
+      <mat-form-field>
+        <input placeholder="Email" matInput type="text" formControlName="email" class="form-control"
+          [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
+      </mat-form-field>
+      <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
+        <div *ngIf="f.email.errors.required">É necessário digitar um email</div>
+        <div *ngIf="f.email.errors.email">É necessário digitar um email válido</div>
+      </div>
+      <mat-form-field>
+        <input matInput placeholder="Senha" type="password" formControlName="password" class="form-control"
+          [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
+
+      </mat-form-field>
+      <div *ngIf="submitted && f.password.errors" class="invalid-feedback">
+        <div *ngIf="f.password.errors.required">É necessário digitar uma senha</div>
+        <div *ngIf="f.password.errors.minlength">Senha deve ter pelo menos 6 digitos</div>
+      </div>
+
+      <mat-form-field>
+        <input matInput type="password" placeholder="Confirmar Senha" formControlName="confirmPassword"
+          class="form-control" [ngClass]="{ 'is-invalid': submitted && f.confirmPassword.errors }" />
+      </mat-form-field>
+      <div *ngIf="submitted && f.confirmPassword.errors" class="invalid-feedback">
+        <div *ngIf="f.confirmPassword.errors.required">É necessário confirmar a senha</div>
+        <div *ngIf="f.confirmPassword.errors.mustMatch">Senhas não batem</div>
+      </div>
+
+      <button mat-raised-button class="buttonCadastro" type="submit">Cadastrar</button>
+    </form>
+    <p class="textoLogin">Já tem login? Clique <a class="link" href="/login">aqui.</a></p>
+  </div>
+  <footer></footer>
+</div>

src/app/auth/cadastro/cadastro.component.spec.ts

@@ -2,7 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { CadastroComponent } from './cadastro.component';
 
 describe('CadastroComponent', () => {
@@ -15,6 +15,8 @@ describe('CadastroComponent', () => {
       imports: [
         HttpClientTestingModule,
         RouterTestingModule,
+        FormsModule,
+        ReactiveFormsModule
       ],
       schemas: [NO_ERRORS_SCHEMA]
     })