Adicionar Tela RF01

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

code/controller/validateController.js

@@ -0,0 +1,99 @@
+function verifyCPF(cpf){
+    var Soma;
+    var Resto;
+    Soma = 0;
+    if (cpf == "00000000000") return false;
+
+    for (i=1; i<=9; i++) Soma = Soma + parseInt(cpf.substring(i-1, i)) * (11 - i);
+    Resto = (Soma * 10) % 11;
+
+        if ((Resto == 10) || (Resto == 11))  Resto = 0;
+        if (Resto != parseInt(cpf.substring(9, 10)) ) return false;
+
+    Soma = 0;
+        for (i = 1; i <= 10; i++) Soma = Soma + parseInt(cpf.substring(i-1, i)) * (12 - i);
+        Resto = (Soma * 10) % 11;
+
+        if ((Resto == 10) || (Resto == 11))  Resto = 0;
+        if (Resto != parseInt(cpf.substring(10, 11) ) ) return false;
+        return true;
+}
+
+function verifyCNPJ(cnpj) { 
+    if(cnpj == '') return false;
+
+    if (cnpj.length != 14)
+        return false;
+
+    // Elimina CNPJs invalidos conhecidos
+    if (cnpj == "00000000000000" || 
+        cnpj == "11111111111111" || 
+        cnpj == "22222222222222" || 
+        cnpj == "33333333333333" || 
+        cnpj == "44444444444444" || 
+        cnpj == "55555555555555" || 
+        cnpj == "66666666666666" || 
+        cnpj == "77777777777777" || 
+        cnpj == "88888888888888" || 
+        cnpj == "99999999999999")
+        return false;
+
+    // Valida DVs
+    tamanho = cnpj.length - 2
+    numeros = cnpj.substring(0,tamanho);
+    digitos = cnpj.substring(tamanho);
+    soma = 0;
+    pos = tamanho - 7;
+    for (i = tamanho; i >= 1; i--) {
+      soma += numeros.charAt(tamanho - i) * pos--;
+      if (pos < 2)
+            pos = 9;
+    }
+    resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
+    if (resultado != digitos.charAt(0))
+        return false;
+
+    tamanho = tamanho + 1;
+    numeros = cnpj.substring(0,tamanho);
+    soma = 0;
+    pos = tamanho - 7;
+    for (i = tamanho; i >= 1; i--) {
+      soma += numeros.charAt(tamanho - i) * pos--;
+      if (pos < 2)
+            pos = 9;
+    }
+    resultado = soma % 11 < 2 ? 0 : 11 - soma % 11;
+    if (resultado != digitos.charAt(1))
+          return false;
+
+    return true;
+
+}
+
+function verifyPass(password){
+    var flag ="";
+    var n = 0;
+
+    if(password.length < 8){ 
+        flag += "[Senha deve ter pelo menos 8 caracteres.]";
+        n++;
+    }
+    if(!(/\d/.test(password))){
+        flag += "[Senha deve ter pelo menos um número.]";
+        n++;
+    }
+    if(!(/[a-z]/.test(password))){
+        flag += "[Senha deve ter pelo menos um caractere minúsculo.]";
+        n++;
+    }
+    if(!(/[A-Z]/.test(password))){
+        flag += "[Senha deve ter pelo menos um caractere maiúsculo.]";
+        n++;
+    }
+    if(!(/\W/.test(password))){
+        flag += "[Senha deve ter pelo menos um caractere especial (.,*,@,#,?,/,&,|).]";
+        n++;
+    }
+
+    return n+flag;
+}

code/view/css/style.css

@@ -1,3 +1,18 @@
+.sbody{
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.fix{
+    font-size: 1.7vh;
+}
+
+.logo{
+    width: 70%;
+}
+
 .form-control{
     border-top: 0;
     border-radius: 10px;
@@ -6,11 +21,45 @@
     box-shadow: 0 2px 2px #d3d3d3;
 }
 
+.btn-primary{
+    background-color: #32C6F4;
+    margin: 0;
+    border: 0;
+}
+
 .buttons-cascade{
     display: grid;
     /* espaço entre um elemento interno e outro */
     grid-gap: 10px;
     /* margem interna que afasta os elementos da borda do grid */
     padding: 20px 10px;
     margin: 10px;
-}
+    width: 100%;
+}
+
+#login{
+    width: 25%;
+    align-self: center;
+}
+
+#container-logo{
+    align-items: center;
+    align-self: center;
+    align-content: center;
+    text-align: center;
+    margin-bottom: 4%;
+}
+
+.btn-link{
+    color: #32C6F4;
+    text-decoration: none;
+}
+
+#forgot{
+    text-align: right;
+}
+@media (max-width: 500px){
+    #login{
+        width: 75%;
+    }
+}

code/view/js/paginaCadastro.js

@@ -0,0 +1,37 @@
+/* Função tela de Cadastro 
+const pass = document.querySelector('#password');
+    pass.addEventListener("mouseout", function(){
+        const label = document.querySelector('#fix-data-pass');
+        var response = verifyPass(pass.value);
+        if(response.charAt(0)!=0){
+            pass.style.borderColor = 'red';
+            n = parseInt(response.charAt(0));
+            response = response.replace(response.charAt(0), '');
+            for(i=0; i<n; i++){
+                response = response.replace(/\[|\,/, '');
+                response = response.replace(']', '<br>');
+            }
+            console.log(response);
+            label.style.color = 'red';
+            label.innerHTML = response;
+        }else{
+            pass.style.borderColor = '#C6C6C6';
+            label.innerHTML = "";
+            label.style.color = 'black';
+        }
+    });
+ const ident = document.querySelector('#identifier');
+    ident.addEventListener("mouseout", function(){
+        const label = document.querySelector('#fix-data-ident');
+        if(!verifyCPF(ident.value) && !verifyCNPJ(ident)){
+            ident.style.borderColor = 'red';
+            label.style.color = 'red';
+            label.innerHTML = "CPF inválido";
+        }else{
+            ident.style.borderColor = "#C6C6C6";
+            label.innerHTML = "";
+            label.style.color = 'black';
+        }
+    });   
+
+    */

code/view/js/paginaLogin.js

@@ -0,0 +1,48 @@
+const signup = "./paginaCadastro.html"
+const forgot = ""
+const ident = document.querySelector('#identifier');
+const pass = document.querySelector('#password');
+
+function stateIdent(response){
+    const label = document.querySelector('#fix-data-ident');
+    if(!response){
+        ident.style.borderColor = 'red';
+        label.style.color = 'red';
+        label.innerHTML = "CPF inválido";
+    }else{
+        ident.style.borderColor = "#C6C6C6";
+        label.innerHTML = "";
+    }
+}
+
+function statePass(response){
+    const label = document.querySelector('#fix-data-pass');
+    if(!response){
+        pass.style.borderColor = 'red';
+        label.style.color = 'red';
+        label.innerHTML = "Senha inválida";
+    }else{
+        pass.style.borderColor = '#C6C6C6';
+        label.innerHTML = "";
+    }
+}
+
+function direct(page){
+    switch(page){
+        case 0:
+            window.location.href = signup;
+            break;
+        case 1:
+            window.location.href = forgot;
+            break;
+    }
+}
+
+function login(){
+    if(ident.value && pass.value){
+        //Aqui vão acontecer as requisições de usuário e senha
+    }else{
+        stateIdent(false);//false para deixar campo vermelho
+        statePass(false);//true para deixar campo normal
+    }
+}

code/view/paginaLogin.html

@@ -8,22 +8,35 @@
     <link rel="stylesheet" href="./css/style.css">
 </head>
 <body>
-    <div class="container">
-        <div class="mb-3">
-            <label for="identifier" class="form-label">CPF/CNPJ:</label>
-            <input class="form-control" id="identifier" type="number" placeholder="Digite seu CPF/CNPJ" maxlength="14" minlength="11" required/>
-        </div>
-        <div class="mb-3">
-            <label for="password" class="form-label">Senha:</label>
-            <input class="form-control" id="password" type="password" placeholder="Digite sua Senha" maxlength="20" minlength="8" required/>
-        </div> 
-        <div class="container">
-            <div class="buttons-cascade">
-                <button type="submit" class="btn btn-primary">Entrar</button>
-                <button  class="btn btn-light">Quero me Cadastrar</button>
+    <section class="sbody">
+        <div class="container" id="login">
+            <div class="container" id="container-logo">
+                <img src="./img/logots.png" alt="Logo do App" class="logo">
+            </div>
+            <div class="mb-3">
+                <label for="identifier" class="form-label">CPF/CNPJ:</label>
+                <input class="form-control" id="identifier" type="number" placeholder="Digite seu CPF/CNPJ" maxlength="14" minlength="11" required/>
+                <label for="identifier" class="fix" id="fix-data-ident"></label>
+            </div>
+            <div class="mb-3">
+                <label for="password" class="form-label">Senha:</label>
+                <input class="form-control" id="password" type="password" placeholder="Digite sua Senha" maxlength="20" minlength="8" required/>
+                <label for="identifier" class="fix" id="fix-data-pass"></label>
+            </div>
+            <div class="container" id="forgot">
+                <button class="btn btn-link" onclick="direct(1)">Esqueci a senha</button>
+            </div>
+            <div class="container">
+                <div class="buttons-cascade">
+                    <button type="submit" class="btn btn-primary" onclick="login()">Entrar</button>
+                    <button  class="btn btn-link" id="signup" onclick="direct(0)">Quero me Cadastrar</button>
+                </div>
             </div>
         </div>
-    </div>
+    </section>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 </body>
-</html>
+</html>
+
+<script src="../controller/modelController.js"></script>
+<script src="./js/paginaLogin.js"></script>