Skip to content

F
front-ntflix
Commit 609d2c7e authored by Nadson Santana Silva's avatar Nadson Santana Silva
Browse files
Options

Adiciona a requisição para a api do camunda

parent afaba613
Show whitespace changes
Inline Side-by-side
Showing with 416 additions and 149 deletions
package-lock.json
View file @ 609d2c7e
......@@ -9,6 +9,7 @@
"version": "1.0.0",
"license": "MIT",
"dependencies": {
"axios": "^0.27.2",
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-router": "^4.0.3"
......@@ -3190,6 +3191,11 @@
"lodash": "^4.17.14"
}
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/at-least-node": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
......@@ -3232,6 +3238,15 @@
"postcss": "^8.1.0"
}
},
"node_modules/axios": {
"version": "0.27.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
"integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
"dependencies": {
"follow-redirects": "^1.14.9",
"form-data": "^4.0.0"
}
},
"node_modules/babel-loader": {
"version": "8.2.5",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.5.tgz",
......@@ -3890,6 +3905,17 @@
"integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
"dev": true
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/commander": {
"version": "8.3.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
......@@ -4644,6 +4670,14 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/depd": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
......@@ -5261,7 +5295,6 @@
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.0.tgz",
"integrity": "sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ==",
"dev": true,
"funding": [
{
"type": "individual",
......@@ -5277,6 +5310,19 @@
}
}
},
"node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/forwarded": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
......@@ -6648,7 +6694,6 @@
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"dev": true,
"engines": {
"node": ">= 0.6"
}
......@@ -6657,7 +6702,6 @@
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dev": true,
"dependencies": {
"mime-db": "1.52.0"
},
......@@ -12613,6 +12657,11 @@
"lodash": "^4.17.14"
}
},
"asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"at-least-node": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
......@@ -12633,6 +12682,15 @@
"postcss-value-parser": "^4.2.0"
}
},
"axios": {
"version": "0.27.2",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
"integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
"requires": {
"follow-redirects": "^1.14.9",
"form-data": "^4.0.0"
}
},
"babel-loader": {
"version": "8.2.5",
"resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.5.tgz",
......@@ -13120,6 +13178,14 @@
"integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
"dev": true
},
"combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"requires": {
"delayed-stream": "~1.0.0"
}
},
"commander": {
"version": "8.3.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
......@@ -13651,6 +13717,11 @@
"object-keys": "^1.1.1"
}
},
"delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
},
"depd": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
......@@ -14149,8 +14220,17 @@
"follow-redirects": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.0.tgz",
"integrity": "sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ==",
"dev": true
"integrity": "sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ=="
},
"form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"requires": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
}
},
"forwarded": {
"version": "0.2.0",
......@@ -15178,14 +15258,12 @@
"mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"dev": true
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
},
"mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dev": true,
"requires": {
"mime-db": "1.52.0"
}
......
package.json
View file @ 609d2c7e
......@@ -10,6 +10,7 @@
"build": "vue-cli-service build"
},
"dependencies": {
"axios": "^0.27.2",
"core-js": "^3.8.3",
"vue": "^3.2.13",
"vue-router": "^4.0.3"
......
src/components/Plans.vue
View file @ 609d2c7e
......@@ -36,6 +36,11 @@ export default {
async getAnimesList() {
this.pending = true;
/* await fetch("https://www.mockachino.com/a5c0d330-8fb8-4a/plans")
.then((res) => res.json())
.then((data) => (this.plans = data.plans))
.catch(() => (this.error = true)); */
await fetch("https://www.mockachino.com/a5c0d330-8fb8-4a/plans")
.then((res) => res.json())
.then((data) => (this.plans = data.plans))
......
src/services/assinatura.js 0 → 100644
View file @ 609d2c7e
import {http} from './config'
export default {
realizarAssinatura: (assinatura) => {
return http.post('localhost:8080/usuario/', assinatura)
}
}
\ No newline at end of file
src/services/config.js 0 → 100644
View file @ 609d2c7e
import axios from 'axios'
export const http = axios.create({
baseURL: 'http://localhost:8080/api/'
})
\ No newline at end of file
src/views/Cadastro.vue
View file @ 609d2c7e
<template>
<div class="row">
<div class="col-75">
<div class="container">
<form action="/action_page.php">
<div id="form1" class="row">
<div class="col-50">
<h3>Pré-cadastro</h3>
<label for="fname"><i class="fa fa-user"></i> Nome: </label>
<input type="text" id="fname" name="firstname" required placeholder="">
<label for="fname"><i class="fa fa-user"></i> Sobrenome: </label>
<input type="text" id="fname" name="firstname" placeholder="">
<label for="fname"><i class="fa fa-user"></i> CPF: </label>
<input type="text" id="fname" name="firstname" required placeholder="xxx-xxx-xxx-xx">
<label required for="fname"><i class="fa fa-user"></i> Telefone: </label>
<input type="text" id="fname" name="firstname" placeholder="(xx)xxxx-xxxx">
<label for="country">Sexo</label>
<select id="country" name="country">
<option value="australia">Masculino</option>
<option value="canada">Femino</option>
<option value="usa">Prefiro não informa</option>
<ul>
<li v-for="(erro, index) of errors" :key="index">
campo <b>{{ erro.field }}</b> - {{ erro.defaultMessage }}
</li>
</ul>
<form id="preCadastro" @submit.prevent="realizarAssinatura">
<fieldset>
<legend>Dados Pessoais</legend>
<label for="nome">Nome:</label>
<input
type="text"
name="nome"
id="nome"
required
v-model="assinatura.dadosPessoais.usuario.nome"
placeholder="Nome completo"
/>
<label for="user">Apelido:</label>
<input
type="text"
name="user"
id="user"
required
v-model="assinatura.dadosPessoais.usuario.user"
placeholder="Apelido"
/>
<label for="cpf">CPF:</label>
<input
type="text"
name="cpf"
id="cpf"
required
placeholder="000.000.000-00"
v-model="assinatura.dadosPessoais.usuario.cpf"
/>
<label for="celular">Celular:</label>
<input
type="tel"
name="celular"
id="celular"
required
placeholder="(00) 90000-0000"
v-model="assinatura.dadosPessoais.usuario.celular"
/>
<label for="sexo">Sexo:</label>
<select name="sexo" id="sexo">
<option value="masculino">Masculino</option>
<option value="feminino">Feminino</option>
<option value="outro">Prefiro não informar</option>
</select>
<label for="fname"><i class="fa fa-user"></i> Data Nascimento: </label>
<input id="date" type="date" name="firstname" placeholder="">
<br>
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input type="text" id="email" name="email" required placeholder="text@example.com">
<label for="adr"><i class="fa fa-address-card-o"></i> Rua</label>
<input type="text" id="adr" name="address" placeholder="">
<label for="adr"><i class="fa fa-address-card-o"></i> Nº</label>
<input type="text" id="adr" name="address" placeholder="">
<label for="city"><i class="fa fa-institution"></i> Cidade</label>
<input type="text" id="city" name="city" placeholder="">
<label for="city"><i class="fa fa-institution"></i> Referecia/Complemento</label>
<input type="text" id="city" name="city" placeholder="">
<div class="row">
<div class="col-50">
<label for="state">Estado</label>
<input type="text" id="state" name="state" placeholder="">
</div>
<div class="col-50">
<label required for="zip">Cep</label>
<input type="text" id="zip" name="zip" placeholder="00000-00">
</div>
</div>
</div>
<div class="col-50">
<h3>Pagamento</h3>
<label for="fname">bandeiras aceitas</label>
<label for="dataNascimento">Data Nascimento:</label>
<input
type="date"
name="dataNascimento"
id="dataNascimento"
required
v-model="assinatura.dadosPessoais.usuario.dataNascimento"
/>
<label for="email">Email:</label>
<input
type="email"
name="email"
id="email"
required
placeholder="nome@example.com"
v-model="assinatura.dadosPessoais.usuario.email"
/>
</fieldset>
<fieldset>
<legend>Endereço</legend>
<label for="cep">CEP:</label>
<input
type="text"
name="cep"
id="cep"
placeholder="00000-000"
v-model="assinatura.dadosPessoais.endereco.cep"
/>
<label for="rua">Rua:</label>
<input
type="text"
name="rua"
id="rua"
placeholder="Travessa do Sabiá"
v-model="assinatura.dadosPessoais.endereco.rua"
/>
<label for="numero">Número:</label>
<input
type="number"
name="numero"
id="numero"
placeholder="250"
v-model="assinatura.dadosPessoais.endereco.numero"
/>
<label for="complemento">Complemento:</label>
<input
type="text"
name="complemento"
id="complemento"
placeholder="Prédio Ernesto Gouveia"
v-model="assinatura.dadosPessoais.endereco.complemento"
/>
<label for="bairro">Bairro:</label>
<input
type="text"
name="bairro"
id="bairro"
placeholder="Inocoop"
v-model="assinatura.dadosPessoais.endereco.bairro"
/>
<label for="cidade">Cidade:</label>
<input
type="text"
name="cidade"
id="cidade"
placeholder="Camaçari"
v-model="assinatura.dadosPessoais.endereco.cidade"
/>
<label for="estado">Estado:</label>
<input
type="text"
name="estado"
id="estado"
placeholder="BA"
v-model="assinatura.dadosPessoais.endereco.estado"
/>
<label for="pais">País:</label>
<input
type="text"
name="pais"
id="pais"
placeholder="Brasil"
v-model="assinatura.dadosPessoais.endereco.pais"
/>
<label for="isEnderecoDeCobranca"
>O endereço informado é o endereço de cobrança</label
>
<input
type="checkbox"
unchecked
name="isEnderecoDeCobranca"
id="isEnderecoDeCobranca"
/>
</fieldset>
<fieldset>
<legend>Pagamento</legend>
<label for="">Bandeiras aceitas</label>
<div class="icon-container">
<i class="fa fa-cc-visa" style="color:navy;"></i>
<i class="fa fa-cc-amex" style="color:blue;"></i>
<i class="fa fa-cc-mastercard" style="color:red;"></i>
<i class="fa fa-cc-discover" style="color:orange;"></i>
</div>
<label for="cname">Nome Titular</label>
<input type="text" id="cname" name="cardname" placeholder="">
<label for="ccnum">Numero Cartão</label>
<input type="text" id="ccnum" name="cardnumber" placeholder="">
<label for="expmonth">Mês Expedição</label>
<input type="text" id="expmonth" name="expmonth" placeholder="">
<div class="row">
<div class="col-50">
<label for="expyear">Validade</label>
<input type="text" id="expyear" name="expyear" placeholder="">
</div>
<div class="col-50">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv" placeholder="">
</div>
</div>
<i class="fa fa-cc-visa" style="color: navy"></i>
<i class="fa fa-cc-amex" style="color: blue"></i>
<i class="fa fa-cc-mastercard" style="color: red"></i>
<i class="fa fa-cc-discover" style="color: orange"></i>
</div>
</div>
<label>
<input type="checkbox" checked="checked" name="sameadr">
Endereço de cobrança, mesmo de cadastro
</label>
<input type="submit" value="Cadastro" class="btn">
<label for="idTipoPagamento">Tipo Pagamento:</label>
<input
type="text"
name="idTipoPagamento"
id="idTipoPagamento"
v-model="assinatura.dadosPagamento.idTipoPagamento"
/>
<label for="idChavePix">Chave Pix:</label>
<input
type="text"
name="idChavePix"
id="idChavePix"
v-model="assinatura.dadosPagamento.idChavePix"
/>
<label for="nomeImpresso">Nome Impresso:</label>
<input
type="text"
name="nomeImpresso"
id="nomeImpresso"
v-model="assinatura.dadosPagamento.nomeImpresso"
/>
<label for="numeroCartao">Número Cartão:</label>
<input
type="text"
name="numeroCartao"
id="numeroCartao"
v-model="assinatura.dadosPagamento.numeroCartao"
/>
<label for="dataVencimento">Validade:</label>
<input
type="month"
name="dataVencimento"
id="dataVencimento"
v-model="assinatura.dadosPagamento.dataVencimento"
/>
</fieldset>
<fieldset>
<legend>Dados do Plano</legend>
<label for="idModalidadePlano">Modalidade Plano:</label>
<input
type="text"
name="idModalidadePlano"
id="idModalidadePlano"
v-model="assinatura.dadosPlano.idModalidadePlano"
/>
<label for="idPeriodoPlano">Período Plano:</label>
<input
type="text"
name="idPeriodoPlano"
id="idPeriodoPlano"
v-model="assinatura.dadosPlano.idPeriodoPlano"
/>
</fieldset>
<button class="btn">Cadastrar</button>
</form>
</div>
</div>
<div class="col-25">
<div class="container">
<p>
Lista de Pré-cadastro
</p><br><br>
<p>
envio de e-mail
</p>
<br><br>
<button>Enviar</button>
</div>
</div>
</div>
</template>
<script>
import AssinaturaService from "../services/assinatura";
export default {
name: "app",
data() {
return {
msg: "Welcome to Your Vue.js App",
assinatura: {
dadosPessoais: {
usuario: {
cpf: "",
nome: "",
user: "",
email: "",
dataNascimento: "",
celular: "",
},
endereco: {
rua: "",
numero: "",
bairro: "",
complemento: "",
cidade: "",
estado: "",
pais: "",
cep: "",
},
},
dadosPagamento: {
idTipoPagamento: "",
idChavePix: "",
nomeImpresso: "",
numeroCartao: "",
dataVencimento: "",
},
dadosPlano: {
idModalidadePlano: "",
idPeriodoPlano: "",
},
},
errors: [],
};
},
methods: {
realizarAssinatura() {
AssinaturaService.realizarAssinatura(this.assinatura)
.then((res) => {
alert(
"Assinatura realizada com sucesso! defina sua senha no email que foi enviado para o email informado"
);
this.assinatura = {};
this.errors = [];
})
.catch((e) => {
console.log(e.res.data.errors);
this.errors = e.res.data.errors;
});
},
},
};
</script>
<style>
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
margin: 0 -16px;
}
.col-25 {
-ms-flex: 25%; /* IE10 */
flex: 25%;
}
.col-50 {
-ms-flex: 50%; /* IE10 */
flex: 50%;
}
.col-75 {
-ms-flex: 75%; /* IE10 */
flex: 75%;
}
.col-25,
.col-50,
.col-75 {
padding: 0 16px;
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.container {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: 10px 10px;
background-color: #f2f2f2;
padding: 5px 20px 15px 20px;
border: 1px solid lightgrey;
border-radius: 3px;
}
input[type=text] , select {
form {
flex-grow: 1;
display: flex;
align-items: center;
columns: 1fr 1fr;
justify-content: center;
}
input[type="text"],
select {
width: 100%;
margin-bottom: 20px;
padding: 12px;
......@@ -180,8 +351,8 @@ label {
font-size: 24px;
}
.btn , button {
background-color: #04AA6D;
.btn {
background-color: #04aa6d;
color: white;
padding: 12px;
margin: 10px 0;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment