# :a: Angular 8

* Projeto Node JWT, lista de usuarios, listar, gerar token, Postman para teste
* Projeto angular, validação, serviço, template, Router, Modulo

> [color=blue] [name=Prof Edson Belém - [e-mail]] [time=Terca, Jul 28, 2020]
>

> [color=green] [name=Profa Luciana Medeiros - [e-mail]] [time=Terca, Jul 28, 2020]
>

## :eye: Estrutura do projeto Node depois de finalizado:

### :coffee: User.js

const Users = [
    {
        idUsuario: 10,
        nome: "belem",
        login: "[e-mail]",
        password: "123456"
    },
    {
        idUsuario: 11,
        nome: "lu",
        login: "[e-mail]",
        password: "123456"
    },
    {
        idUsuario: 12,
        nome: "jhansen",
        login: "[e-mail]",
        password: "123456"
    }
]

module.exports = Users

### :coffee: Produtos.ts

const Produtos = [{
    idProduto: 10,
    nomeProduto: "havainas",
    preco: 100,
    oldimagem: "imagem2",
    newimagem: "imagem1",
},
{
    idProduto: 11,
    nomeProduto: "chinelo nike",
    preco: 20,
    oldimagem: "imagemnike1",
    newimagem: "imagemnike2",
},
{
    idProduto: 10,
    nomeProduto: "mocassim",
    preco: 20,
    oldimagem: "imagem2",
    newimagem: "imagem1",
}
]

module.exports = Produtos

### :coffee: package.json

{
	"name": "token",
	"version": "1.0.0",
	"main": "server.js",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "",
	"license": "ISC",
	"description": "",
	"dependencies": {
		"body-parser": "^1.19.0",
		"cors": "^2.8.5",
		"express": "^4.17.1",
		"jsonwebtoken": "^8.5.1"
	}
}

## :warning: Instalar as bibliotecas.
Digitar no terminal:

npm i

### :coffee: server.js

const express = require('express');
const bodyParser = require('body-parser');
const cors = require("cors");

const User = require('./Model/Users');
const Produtos = require('./Model/Produtos');
const app = express();
const jwt = require('jsonwebtoken');
const secret = 'senhasupersecreta'

app.use(cors());
app.use(bodyParser.json());

//protegido  (function protecao)
app.get("/adm/produto", fnValidacao, (req, res, next) => {
	res.json(Produtos);
})

app.post("/auth", function (req, res) {
	let usu = req.body;
	let msg = "";
	let resp = { "ok": msg };
	console.log(usu);

	let logado = User.filter((res) => {
	if (res.login == usu.login && res.password == usu.password) {
			return res;
		} else {
			return null;
		}
	})[0];
	console.log(logado);
	if (logado) {
		let token = jwt.sign({
			'login': logado.login
		}, secret);
		resp.token = token;
		console.log(resp.token);
	} else {
	res.status(401).json({ msg: 'Usuario ou senha invalidos' });
		return
	}
	res.json(resp.token);
});



function fnValidacao(req, res, next) {
	let erro = { success: false, msg: 'Erro de autenticacao' };
	let authorization = req.headers['authorization'];
	console.log(authorization);

	if (authorization) {
		let token = authorization.split(' ')[1];
	console.log('Autorizacao: ', JSON.stringify(authorization));
		console.log('Token: ', token);
		jwt.verify(token, secret, function (err, decoded) {
			if (err) {
				console.log('Erro: ', err);
				res.status(403).json(erro);
				return;
			} else {
				console.log("show");
				next();
			}
		});
		return;
	}
	res.status(401).json(erro);
}


app.listen(3010, function () {
	console.log('Servidor iniciado na porta 3010');
})

## :warning: Iniciar o projeto.
Digitar no terminal:

node server.js

## :warning: Testar no Postman
* **Listar** os produtos sem autenticar. Mostra mensagem de erro pois não passou o **token**.
http://localhost:3010/adm/produtos

* Para testar o **login**.
http://localhost:3010/auth
Selecionar POST -> Digitar a URL -> Clicar em BODY -> Clicar em RAW -> Selecionar JSON -> Digitar os dados -> Clicar em SEND

Resultado. Gerou o token

:eye: Visualizando no console do Visual Code

## :eye: Estrutura do projeto Angular depois de finalizado:

readme.md

localhost:3010/auth
localhost:3010/adm/produto

ng g c login

ng generate module usuario

ng g c user

### :a: usuario.ts

export class Usuario {
    idUsuario: number;
    nome: string;
    login: string;
    password: string;
    token: string = "";
    
    constructor(idUsuario?: number, nome?: string, login?: string, 
    password?: string) {
        this.idUsuario = idUsuario;
        this.nome = nome;
        this.login = login;
        this.password = password;
        this.token = "";
    }

    public isLogin() {
        let regra = /^([a-AA-Z0-9])+@([a-AA-Z0-9])+\.([a-A])+$/
        return regra.test(this.login);
    }


    public isSenha() {
        let regra = /^[a-zA-Z0-9]{6,15}$/
        return regra.test(this.password);
    }


}

### :a: usuario.service.ts

import { Usuario } from '../model/usuario';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

const URL = 'http://localhost:3010';

@Injectable()
export class UsuarioService {

    constructor(private http: HttpClient) {

    }

    public login(usuario: Usuario): Observable<Usuario> {
        return this.http.post<Usuario>(`${URL}/auth`, usuario);
    }
}

### :a: user.component.ts

import { Component, OnInit } from '@angular/core';
import { UsuarioService } from '../service/usuario.service';
import { Usuario } from '../model/usuario';
import { Router } from '@angular/router';

@Component({
  selector: 'app-user',
  template: `<div>
  <h1>Login</h1>
  <hr>

  <label>Email:</label><br>
  <input type='text' name='login' [(ngModel)]='usuario.login' id='login' 
  placeholder="Digite seu email"><br>
  
  <label>Senha:</label><br>
  <input type='password' name='password' [(ngModel)]='usuario.password' 
  id='password' placeholder="Digite sua senha"><br>
  <br>
  
  <button (click)='logar();'>Logar</button>

</div>`
})
export class UserComponent implements OnInit {

  usuario: Usuario;

  constructor(private service: UsuarioService, private router: Router) {
    this.usuario = new Usuario();
  }

  ngOnInit() {

  }

  public logar() {
    this.service.login(this.usuario).subscribe(res => {
      console.log('logado: ', res);
      localStorage.setItem('dados', JSON.stringify(this.usuario));
      this.router.navigateByUrl('/adm');
    }, error => {
      console.log('erro: ', error);
      localStorage.setItem('dados', 'error');
      this.router.navigateByUrl('/user');
    })
  }
}

### :a: usuario.module.ts

import { UsuarioService } from './../service/usuario.service';
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserComponent } from '../user/user.component';
import { FormsModule } from '@angular/forms';


@NgModule({
	imports: [
		CommonModule,
		FormsModule
	],
	declarations: [UserComponent],
	exports: [UserComponent]
})
export class UsuarioModule {
	static forRoot(): ModuleWithProviders {
		return {
			ngModule: UsuarioModule,
			providers: [UsuarioService]
		}
	}
}

### :a: app.module.ts

import { UsuarioService } from './service/usuario.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { UsuarioModule } from './usuario/usuario.module';

@NgModule({
	declarations: [
		AppComponent,
	],
	imports: [
		BrowserModule,
		HttpClientModule,
		FormsModule,
		UsuarioModule.forRoot()
	],
	providers: [],
	bootstrap: [AppComponent]
})
export class AppModule { }

:::info
> [color=blue] [name=Coti Informática - https://www.cotiinformatica.com.br]
>

> [color=green] [name=Coti EAD - https://www.cotiead.com.br]

:::

###### tags: `angular` `ter-qui` `noite` `10-03-2020`