Adiciona a requisição para a api do camunda

609d2c7e · Nadson Santana Silva · afaba613 · 609d2c7e · 609d2c7e · 609d2c7e
Commit 609d2c7e authored Jun 06, 2022 by Nadson Santana Silva
6 changed files
--- a/package-lock.json
+++ b/package-lock.json
@@ -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==",
+      "integrity": "sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ=="
-      "dev": true
+    },
+    "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==",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
-      "dev": true
    },
    "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"
      }

--- a/package.json
+++ b/package.json
@@ -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"

--- a/src/components/Plans.vue
+++ b/src/components/Plans.vue
@@ -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))

--- a/src/services/assinatura.js
+++ b/src/services/assinatura.js
+import {http} from './config'
+export default {
+    realizarAssinatura: (assinatura) => {
+        return http.post('localhost:8080/usuario/', assinatura)
+    }
+}
\ No newline at end of file
--- a/src/services/config.js
+++ b/src/services/config.js
+import axios from 'axios'
+export const http = axios.create({
+    baseURL: 'http://localhost:8080/api/'
+})
\ No newline at end of file
--- a/src/views/Cadastro.vue
+++ b/src/views/Cadastro.vue
 <template>
- <div class="row">
+  <div class="container">
-  <div class="col-75">
+    <h3>Pré-cadastro</h3>
-    <div class="container">
+    <ul>
-      <form action="/action_page.php">
+      <li v-for="(erro, index) of errors" :key="index">
+        campo <b>{{ erro.field }}</b> - {{ erro.defaultMessage }}
-        <div id="form1"  class="row">
+      </li>
-          <div class="col-50">
+    </ul>
-            <h3>Pré-cadastro</h3>
-            <label for="fname"><i class="fa fa-user"></i> Nome: </label>
+    <form id="preCadastro" @submit.prevent="realizarAssinatura">
-            <input type="text" id="fname" name="firstname" required placeholder="">
+      <fieldset>
+        <legend>Dados Pessoais</legend>
-            <label for="fname"><i class="fa fa-user"></i> Sobrenome: </label>
+        <label for="nome">Nome:</label>
-            <input type="text" id="fname" name="firstname" placeholder="">
+        <input
+          type="text"
-           <label for="fname"><i class="fa fa-user"></i> CPF: </label>
+          name="nome"
-            <input type="text" id="fname" name="firstname" required placeholder="xxx-xxx-xxx-xx">
+          id="nome"
+          required
-               <label required for="fname"><i class="fa fa-user"></i> Telefone: </label>
+          v-model="assinatura.dadosPessoais.usuario.nome"
-            <input type="text" id="fname" name="firstname" placeholder="(xx)xxxx-xxxx">
+          placeholder="Nome completo"
+        />
-              <label for="country">Sexo</label>
-            <select id="country" name="country">
+        <label for="user">Apelido:</label>
-              <option value="australia">Masculino</option>
+        <input
-              <option value="canada">Femino</option>
+          type="text"
-              <option value="usa">Prefiro não  informa</option>
+          name="user"
-            </select>
+          id="user"
+          required
-            <label for="fname"><i class="fa fa-user"></i> Data Nascimento: </label>
+          v-model="assinatura.dadosPessoais.usuario.user"
-            <input id="date" type="date"  name="firstname" placeholder="">
+          placeholder="Apelido"
-            <br>
+        />
-            <label for="email"><i class="fa fa-envelope"></i> Email</label>
+        <label for="cpf">CPF:</label>
-            <input type="text" id="email" name="email" required placeholder="text@example.com">
+        <input
-            <label for="adr"><i class="fa fa-address-card-o"></i> Rua</label>
+          type="text"
-            <input type="text" id="adr" name="address" placeholder="">
+          name="cpf"
-             <label for="adr"><i class="fa fa-address-card-o"></i> Nº</label>
+          id="cpf"
-            <input type="text" id="adr" name="address" placeholder="">
+          required
+          placeholder="000.000.000-00"
-            <label for="city"><i class="fa fa-institution"></i> Cidade</label>
+          v-model="assinatura.dadosPessoais.usuario.cpf"
-            <input type="text" id="city" name="city" placeholder="">
+        />
-              <label for="city"><i class="fa fa-institution"></i> Referecia/Complemento</label>
+        <label for="celular">Celular:</label>
-            <input type="text" id="city" name="city" placeholder="">
+        <input
+          type="tel"
-            <div class="row">
+          name="celular"
-              <div class="col-50">
+          id="celular"
-                <label for="state">Estado</label>
+          required
-                <input type="text" id="state" name="state" placeholder="">
+          placeholder="(00) 90000-0000"
-              </div>
+          v-model="assinatura.dadosPessoais.usuario.celular"
-              <div class="col-50">
+        />
-                <label required for="zip">Cep</label>
-                <input type="text" id="zip" name="zip" placeholder="00000-00">
+        <label for="sexo">Sexo:</label>
-              </div>
+        <select name="sexo" id="sexo">
-            </div>
+          <option value="masculino">Masculino</option>
-          </div>
+          <option value="feminino">Feminino</option>
+          <option value="outro">Prefiro não informar</option>
-          <div class="col-50">
+        </select>
-            <h3>Pagamento</h3>
-            <label for="fname">bandeiras aceitas</label>
+        <label for="dataNascimento">Data Nascimento:</label>
-            <div class="icon-container">
+        <input
-              <i class="fa fa-cc-visa" style="color:navy;"></i>
+          type="date"
-              <i class="fa fa-cc-amex" style="color:blue;"></i>
+          name="dataNascimento"
-              <i class="fa fa-cc-mastercard" style="color:red;"></i>
+          id="dataNascimento"
-              <i class="fa fa-cc-discover" style="color:orange;"></i>
+          required
-            </div>
+          v-model="assinatura.dadosPessoais.usuario.dataNascimento"
-            <label for="cname">Nome Titular</label>
+        />
-            <input type="text" id="cname" name="cardname" placeholder="">
-            <label for="ccnum">Numero Cartão</label>
+        <label for="email">Email:</label>
-            <input type="text" id="ccnum" name="cardnumber" placeholder="">
+        <input
-            <label for="expmonth">Mês Expedição</label>
+          type="email"
-            <input type="text" id="expmonth" name="expmonth" placeholder="">
+          name="email"
+          id="email"
-            <div class="row">
+          required
-              <div class="col-50">
+          placeholder="nome@example.com"
-                <label for="expyear">Validade</label>
+          v-model="assinatura.dadosPessoais.usuario.email"
-                <input type="text" id="expyear" name="expyear" placeholder="">
+        />
-              </div>
+      </fieldset>
-              <div class="col-50">
-                <label for="cvv">CVV</label>
+      <fieldset>
-                <input type="text" id="cvv" name="cvv" placeholder="">
+        <legend>Endereço</legend>
-              </div>
+        <label for="cep">CEP:</label>
-            </div>
+        <input
-          </div>
+          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>
-          <input type="checkbox" checked="checked" name="sameadr"> 
-          Endereço de cobrança, mesmo de cadastro
-        </label>
-        <input type="submit" value="Cadastro" class="btn">
-      </form>
-    </div>
-  </div>
-  <div class="col-25">
+        <label for="idTipoPagamento">Tipo Pagamento:</label>
-    <div class="container">
+        <input
-       <p>
+          type="text"
-          Lista de Pré-cadastro
+          name="idTipoPagamento"
-       </p><br><br>
+          id="idTipoPagamento"
-       <p>
+          v-model="assinatura.dadosPagamento.idTipoPagamento"
-        envio de e-mail
+        />
-       </p>
+        <label for="idChavePix">Chave Pix:</label>
-       <br><br>
+        <input
-       <button>Enviar</button>
+          type="text"
-    </div>
+          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>
 </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 */
+  margin: 0;
-  display: flex;
+  padding: 0;
-  -ms-flex-wrap: wrap; /* IE10 */
+  border: 0;
-  flex-wrap: wrap;
+  font-size: 100%;
-  margin: 0 -16px;
+  font: inherit;
-}
+  vertical-align: baseline;
-.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;
 }
 .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 {
+.btn {
-  background-color: #04AA6D;
+  background-color: #04aa6d;
  color: white;
  padding: 12px;
  margin: 10px 0;