40º Desafio: Autenticação de dois Fatores - Peso 1

iurygdeoliveira commented 1 year ago

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Olá, crianças inocentes! Hoje temos um desafio super legal para vocês: construir um app que simula uma autenticação de dois fatores usando HTML, CSS e JS. Mas o que é isso? Bem, a autenticação de dois fatores é uma técnica de segurança que adiciona uma camada extra de proteção à sua conta. Além de digitar sua senha, você também precisa digitar um código numérico que é enviado para o seu celular ou email. Isso torna muito mais difícil para hackers invadirem sua conta, já que eles precisariam não só da sua senha, mas também do seu celular ou email.

Agora, vamos ao desafio: seu objetivo é criar uma página que permita ao usuário inserir um código numérico. O código deve ser recebido por email (fingido, é claro!) e digitado na página. O layout deve ser bem simples e intuitivo, para que o usuário não tenha problemas ao inserir o código.

Vocês podem usar comandos de CSS como "position", "margin" e "padding" para posicionar os elementos na página. Para criar a animação do cursor piscando, vocês podem usar a propriedade "animation" do CSS. Já em relação ao JS, vocês podem usar funções como "getElementById" e "addEventListener" para interagir com os elementos da página e "setTimeout" para criar o tempo de espera para o código ser digitado.

Lembrem-se, crianças, que a autenticação de dois fatores é uma técnica importante para proteger as contas online. É sempre bom adicionar uma camada extra de segurança, para que nossos dados e informações pessoais estejam sempre protegidos. Então, mãos à obra e divirtam-se criando esse app incrível!

Exemplo

https://user-images.githubusercontent.com/30157522/224549097-8794317c-0566-4a2b-93db-788773e106f7.mp4

Additional tips

Código HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Verify Account</title>
  </head>
  <body>
    <div class="container">
      <h2>Verifique sua conta</h2>
      <p>Enviamos um e-mail para o código de seis dígitos para cool_guy@email.com <br/> Digite o código abaixo para confirmar seu endereço de email.</p>
      <div class="code-container">
        <input type="number" class="code" placeholder="0" min="0" max="9" required>
        <input type="number" class="code" placeholder="0" min="0" max="9" required>
        <input type="number" class="code" placeholder="0" min="0" max="9" required>
        <input type="number" class="code" placeholder="0" min="0" max="9" required>
        <input type="number" class="code" placeholder="0" min="0" max="9" required>
        <input type="number" class="code" placeholder="0" min="0" max="9" required>
      </div>
      <small class="info">
        Este é apenas design. Na verdade, não enviamos um e-mail para você, pois não temos o seu e-mail, certo?
      </small>
    </div>
    <script src="script.js"></script>
  </body>
</html>