Laboratoria · szohara · Oct 31, 2020 · Nov 1, 2020 · Nov 3, 2020 · Nov 3, 2020
diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/cipher.js b/src/cipher.js
@@ -1,5 +1,50 @@
 const cipher = {
-  // ...
+  /*Criptografar*/
+  encode: function (offset, string) {
+    let palavraDigitada = "";
+    let maiusculo = string.toUpperCase();
+    for (let deslocamento = 0; deslocamento < maiusculo.length; deslocamento++) {
+      let codeLetra = maiusculo[deslocamento]
+      if (codeLetra !== "") {
+        let novaLetra = codeLetra.charCodeAt();
+        let novoCode = ((novaLetra - 65 + parseInt(offset)) % 26) + 65;
+
+        codeLetra = String.fromCharCode(novoCode);
+      }
+      palavraDigitada = palavraDigitada + codeLetra;
+    }
+    return palavraDigitada
+  },
+  /*Descriptografar*/
+  decode: function (offset, string) {
+    let palavraDigitada = ""
+    let maiusculo = string.toUpperCase();
+    for (let deslocamento = 0;
+      deslocamento < maiusculo.length; deslocamento++) {
+      let codeLetra = maiusculo[deslocamento]
+      if (codeLetra !== " ") {
+        let novaLetra = maiusculo[deslocamento].charCodeAt();
+        let novoCode = ((novaLetra + 65 - parseInt(offset)) % 26) + 65;
+        codeLetra = String.fromCharCode(novoCode);
+      }
+      palavraDigitada = palavraDigitada + codeLetra
+    }
+    return palavraDigitada
+  },
+  /*Sorteio*/
+  sorteio: function () {
+    return document.getElementById("resultado").innerHTML
+      = Math.floor(Math.random() * (25 - 1 + 1)) + 1;
+
+  },
+  /*Limpar */
+  clear: function () {
+    document.getElementById("mensagemUsuario").value = ""
+    document.getElementById("offset").value = ""
+    document.getElementById("resultado").value = ""
+    resultadoFinal.innerHTML = 'NOVO LOGIN'
+    resultado.innerHTML = ""
+  }
 };
 
-export default cipher;
+export default cipher;
diff --git a/src/img/avatar.png b/src/img/avatar.png
diff --git a/src/img/codigo.png b/src/img/codigo.png
diff --git a/src/img/favicon.ico b/src/img/favicon.ico
diff --git a/src/img/fundo.jpg b/src/img/fundo.jpg
diff --git a/src/img/logo_40px.png b/src/img/logo_40px.png
diff --git a/src/img/pantone.png b/src/img/pantone.png
diff --git a/src/index.html b/src/index.html
@@ -1,14 +1,119 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Caesar Cipher</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <div id="root">
-      <h1>Hello world!</h1>
+<html lang="pt-br">
+
+<head>
+  <meta charset="utf-8">
+  <title>Força Aérea - Área Restrita Login</title>
+  <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" type="text/css" href="normalize.css" />
+  <link rel="stylesheet" type="text/css" href="style.css" />
+</head>
+
+<body>
+  <nav class="menu-top">
+
+    <div>
+      <img class="logo" src="img/logo_40px.png" alt="logo" />
     </div>
-    <script src="index.js" type="module"></script>
-  </body>
-</html>
+    <ul>
+      <li>
+        <a href="#topo">Sobre </a>
+      </li>
+      <li>
+        <a href="#login">Login</a>
+      </li>
+    </ul>
+
+  </nav>
+
+  <header id="topo">
+
+    <h1>Força Aérea Brasileira - Base Aérea </h1>
+    <h2>Acesso Digital Único <br />
+      <br /> Caro usuário, para realizar o login é necessário executar os
+      seguintes comandos:</h2>
+    - GERAR UM CÓDIGO ALEATÓRIO <br />
+    - INSERIR O CÓDIGO NO CAMPO <br />
+    - NO SEGUNDO CAMPO DE ENTRADA COM DADOS DO USUÁRIO <br />
+    - CRIPTOGRAFAR <br />
+    - ESSE SERÁ O SEU NOVO ACESSO ÚNICO <br />
+    - REPITA O PROCESSO PARA O DADO DA SENHA <br />
+    - O USUÁRIO PODERÁ FAZER O LOGIN NORMALMENTE NO CAMPO A DIREITA <br />
+
+  </header>
+
+  <!--CAMPO DA CIFRA-->
+  <nav class="forms" id="login">
+
+    <section class="container display-none">
+      <div class="form-initial">
+        <form>
+          <div class="input-group">
+            <h2 class="titleLogin"> PAINEL DE CONTROLE</h2>
+            <button type="button" class="buttonSorteio" id="btnSorteio">Código</button>
+            <h3 id="resultado"></h3>
+
+            <div class="input-group">
+              <label for="offset">INSIRA O CÓDIGO A CIMA: </label>
+              <input autocomplete="off" type="number" id="offset" placeholder="Código n°">
+            </div>
+            <label for="mensagemUsuario"></label>
+            <textarea autocomplete="off" placeholder="INSIRA O USUARIO/SENHA:" class="textarea"
+              id="mensagemUsuario"></textarea>
+          </div>
+          <div class="input-group">
+            <label for="criptografar">SELECIONE A OPÇÃO DESEJADA:</label>
+            <div id="btn-option">
+              <input type="button" id="criptografar" class="criptografar" value="CRIPTOGRAFAR">
+              <input type="button" id="descriptografar" class="descriptografar" value="DESCRIPTOGRAFAR">
+            </div>
+          </div>
+        </form>
+
+        <div id="resultadoP" class="display-none">
+          <h3 id="resultadoFinal">NOVO LOGIN</h3>
+        </div>
+        <div class="botaoFinal">
+          <input type="reset" name="cls" class="cls" id="cls" value="LIMPAR" onclick="LIMPAR()" />
+        </div>
+
+    </section>
+
+    <!--CAMPO FORMULARIO LOGIN-->
+
+    <form class="form" action="#">
+
+      <div class="card">
+        <div class="card-top">
+          <img class="imglogin" src="img/avatar.png" alt="imagem_do_usuario">
+        </div>
+        <div class="card-grupo">
+          <h2 class="titleLogin"> ENTRAR</h2>
+          <label for="usuario">Usuário:</label>
+          <input autocomplete="off" id="usuario" type="text" placeholder="Digite seu usuário CODIFICADO" required>
+        </div>
+        <div class="card-grupo">
+          <label for="senha">Senha:</label>
+          <input autocomplete="off" id="senha" type="password" placeholder="Digite sua senha CODIFICADO" required>
+        </div>
+        <div class="card-grupo btn">
+          <button id="botaoEnviar" type="submit">ACESSAR</button>
+        </div>
+      </div>
+
+    </form>
+
+  </nav>
+  <nav class="creditos1">
+    <div class="creditos2">
+      <h5>Desenvolvido por<a class="creditos3" target="_blank" href="https://github.com/SaraOhara">@SaraOhara</a>Projeto
+        @laboratoria
+        ♥</h5>
+  </nav>
+
+
+  <script src="index.js" type="module"></script>
+
+</body>
+
+</html>
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,38 @@
 import cipher from './cipher.js';
 
-console.log(cipher);
+let message = document.querySelector("#mensagemUsuario")
+let offset = document.querySelector("#offset")
+let criptografar = document.querySelector("#criptografar")
+let descriptografar = document.querySelector("#descriptografar")
+let resultadoP = document.querySelector("#resultadoP")
+let resultadoFinal = document.querySelector("#resultadoFinal")
+let btn_sorteio = document.querySelector("#btnSorteio");
+let cls = document.querySelector("#cls");
+let botaocopiar = document.querySelector("#copiar");
+
+const codif = () => {
+    if (message.value == "" || offset.value == "") {
+        alert("CARO USUÁRIO, PREENCHA OS CAMPOS REQUERIDOS")
+    } else {
+        resultadoFinal.innerHTML = cipher.encode(offset.value, message.value)
+        resultadoP.style.display = "block"
+    }
+}
+
+criptografar.addEventListener('click', codif)
+
+const descif = () => {
+    if (message.value == "" || offset.value == "") {
+        alert("CARO USUÁRIO, PREENCHA OS CAMPOS REQUERIDOS")
+    } else {
+        resultadoFinal.innerHTML = cipher.decode(offset.value, message.value)
+        resultadoP.style.display = "block"
+    }
+}
+
+descriptografar.addEventListener('click', descif)
+
+btn_sorteio.addEventListener('click', cipher.sorteio)
+
+cls.addEventListener('click', cipher.clear)
+