Skip to content
This repository has been archived by the owner on Nov 8, 2024. It is now read-only.

Commit

Permalink
refactor: upd login-page
Browse files Browse the repository at this point in the history 
Alterar HTML, CSS e JS da login-page
  • Loading branch information
@lucas0headshot
lucas0headshot committed Mar 8, 2024
1 parent 4608b21 commit 46a7a25
Show file tree
Hide file tree
Showing 3 changed files with 132 additions and 98 deletions.
9 changes: 6 additions & 3 deletions frontend/lucas/assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ body {
}


main, .container {
min-height: calc(100vh - 90px);
}


.bg-personalizado {
background-image: url('../images/background.jpg');
Expand All @@ -18,7 +22,6 @@ body {
}



.card {
transition: all ease .3s;
.footer {
height: 40px;
}
79 changes: 56 additions & 23 deletions frontend/lucas/assets/js/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
$(function() {
$('#formLogin').submit(function(e) {
e.preventDefault;

$(this).validate({
/*
Funções modal Login
*/
$('#formLogin').validate({
onsubmit: true,

rules: {
Expand Down Expand Up @@ -39,18 +39,29 @@ $(function() {
}
});

if ($(this).valid()) {
alert(`Bem-vindo, ${$('#usuario').val()}!`);
return location.reload();
}
});
$('#formLogin').submit(function(e) {
e.preventDefault();

if ($(this).valid()) {
alert(`Bem-vindo, ${$('#usuario').val()}!`);
return location.reload();
}
});


$('#formCadastro').submit(function(e) {
e.preventDefault;
$('#aCadastrarConta').click(function() {
$('#entrar').addClass('d-none');
return $('#cadastrar').removeClass('d-none');
});
/*
/Funções modal Login
*/


$(this).validate({
/*
Funções modal Cadastro
*/
$('#formCadastro').validate({
onsubmit: true,

rules: {
Expand All @@ -64,16 +75,30 @@ $(function() {

senha_cadastro: {
required: true
},

repita_senha_cadastro: {
required: true,
equals: $('#senha_cadastro').val()
}
},

messages: {
usuario: {
usuario_cadastro: {
required: "Informe seu nome de usuário"
},

senha: {
email_cadastro: {
required: "Informe seu e-mail"
},

senha_cadastro: {
required: "Informe sua senha"
},

repita_senha_cadastro: {
required: "Repita sua senha",
equals: "Senhas não coincidem"
}
},

Expand All @@ -91,16 +116,24 @@ $(function() {
}
});

if ($(this).valid()) {
//TODO: limpar form & redirecionar
alert('Bem-vindo!');
}
});
$('#formCadastro').submit(function(e) {
e.preventDefault();

if ($(this).valid()) {
alert(`Bem-vindo, ${$('#nome_cadastro').val()}!`);
return location.reload();
}
});

$('#senha_cadastro').change(function() {
return $(this).val() !== "" ? $('#repita_senha_cadastro').removeClass('d-none') : $('#repita_senha_cadastro').addClass('d-none');
});

$('#aCadastrarConta').click(function() {
$('#entrar').addClass('d-none');
return $('#cadastrar').removeClass('d-none');
});
$('#aPossuiConta').click(function() {
$('#cadastrar').addClass('d-none');
return $('#entrar').removeClass('d-none');
});
/*
/Funções modal Cadastro
*/
});
142 changes: 70 additions & 72 deletions frontend/lucas/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<!-- Custom CSS -->
<link rel="stylesheet" href="assets/css/components.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
Expand All @@ -21,95 +20,94 @@
<div class="container-fluid">
<a href="#" class="navbar-brand text-white">
<img src="assets/images/favicon.png" alt="Logo" class="img-fluid mx-auto border-0">
Gestão de Cursos
</a>
</div>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</header>


<main class="container-fluid bg-personalizado">
<div class="row">
<div class="col">
<div class="login-container row align-items-center justify-content-center">
<!-- Card Login -->
<div class="card col-lg-4 col-md-6 col-sm-12 p-1 bg-body" id="entrar">
<div class="card-header bg-body border-0 rounded-0">
<h3 class="card-title">Entre na sua conta!</h3>
</div>
<main class="bg-personalizado">
<div class="container d-flex align-items-center justify-content-center">
<!-- Card Login -->
<div class="card col-lg-4 col-md-6 col-sm-12 p-1 bg-body shadow-sm" id="entrar">
<div class="card-header bg-body border-0 rounded-0">
<h3 class="card-title">Entre na sua conta!</h3>
</div>

<div class="card-body">
<form id="formLogin">
<div class="row">
<div class="form-control mb-3 border-0">
<label for="usuario" class="form-label fw-bold">Usuário</label>
<input type="text" class="form-control" name="usuario" maxlength="100" placeholder="Digite seu usuário" id="usuario">
</div>

<div class="card-body">
<form id="formLogin">
<div class="row">
<div class="col-auto mb-3 form-control border-0">
<label for="usuario" class="form-label fw-bold">Usuário</label>
<input type="text" class="form-control" name="usuario" maxlength="100" required placeholder="Digite seu usuário" id="usuario">
</div>

<div class="col-auto form-control mb-3 border-0">
<label for="senha" class="form-label fw-bold">Senha </label>
<input type="password" name="senha" class="form-control" maxlength="100" required placeholder="Digite sua senha">
</div>
</div>

<div class="text-center pt-1 pb-1">
<button type="submit" class="btn btn-md btn-primary" name="entrar" id="btnEntrar">Entrar</button>
</div>
</form>
<div class="form-control mb-3 border-0">
<label for="senha" class="form-label fw-bold">Senha </label>
<input type="password" name="senha" class="form-control" maxlength="100" placeholder="Digite sua senha">
</div>
</div>

<div class="card-footer bg-body m-0">
<div class="card-text text-center">
<p class="fs-5">Ainda não possui uma?</p>
<a href="#" id="aCadastrarConta" class="fs-5">Crie uma clicando aqui</a>
</div>
<div class="text-center pt-1 pb-1">
<button type="submit" class="btn btn-md btn-primary" name="entrar" id="btnEntrar">Entrar</button>
</div>
</form>
</div>

<div class="card-footer bg-body m-0 border-0">
<div class="card-text text-center fs-5">
<p>Ainda não possui uma?</p>
<a href="#" id="aCadastrarConta">Crie uma clicando aqui</a>
</div>
<!-- /Card Login -->
</div>
</div>
<!-- /Card Login -->


<!-- Card Cadastro -->
<div class="card col-lg-4 col-md-6 col-sm-12 p-1 bg-body d-none" id="cadastrar">
<div class="card-header bg-body border-0 rounded-0">
<h3 class="card-title">Crie sua conta!</h3>
</div>

<div class="card-body">
<form id="formCadastro">
<div class="row">
<div class="col-auto mb-3 form-control border-0">
<label for="usuario_cadastro" class="form-label fw-bold">Usuário</label>
<input type="text" class="form-control" name="usuario_cadastro" maxlength="100" placeholder="Digite seu usuário" id="usuario_cadastro">
</div>

<div class="col-auto mb-3 form-control border-0">
<label for="email_cadastro" class="form-label fw-bold">E-mail</label>
<input type="email" class="form-control" name="email_cadastro" maxlength="100" placeholder="Digite seu email" id="email_cadastro">
</div>

<div class="col form-control mb-3 border-0">
<label for="senha_cadastro" class="form-label fw-bold">Senha</label>
<input type="password" name="senha_cadastro" class="form-control" maxlength="100" placeholder="Digite sua senha">
</div>

<!-- Card Cadastro -->
<div class="card col-lg-4 col-md-6 col-sm-12 p-1 bg-body d-none" id="cadastrar">
<div class="card-header bg-body border-0 rounded-0">
<h3 class="card-title">Crie sua conta!</h3>
<div class="col form-control d-none mb-3 border-0">
<label for="repita_senha_cadastro" class="form-label fw-bold">Repita sua senha</label>
<input type="password" name="repita_senha_cadastro" id="repita_senha_cadastro" class="form-control" maxlength="100" placeholder="Re-digite sua senha">
</div>
</div>

<div class="card-text text-center">
<button class="btn btn-md btn-primary" type="submit" id="btnCriar" name="criar">Criar</button>
</div>
</form>

<div class="card-body">
<form id="formCadastro">
<div class="row">
<div class="col-auto mb-3 form-control border-0">
<label for="usuario_cadastro" class="form-label fw-bold">Usuário</label>
<input type="text" class="form-control" name="usuario_cadastro" maxlength="100" required placeholder="Digite seu usuário" id="usuario_cadastro">
</div>

<div class="col-auto mb-3 form-control border-0">
<label for="email_cadastro" class="form-label fw-bold">E-mail</label>
<input type="email" class="form-control" name="email_cadastro" maxlength="100" required placeholder="Digite seu email" id="email_cadastro">
</div>

<div class="col form-control mb-3 border-0">
<label for="senha_cadastro" class="form-label fw-bold">Senha</label>
<input type="password" name="senha_cadastro" class="form-control" maxlength="100" required placeholder="Digite sua senha">
</div>

<div class="col form-control d-none mb-3 border-0">
<label for="repita_senha_cadastro" class="form-label fw-bold">Repita sua senha</label>
<input type="password" name="repita_senha_cadastro" class="form-control" maxlength="100" required placeholder="Re-digite sua senha">
</div>
</div>

<div class="card-text text-center">
<button class="btn btn-md btn-primary" type="submit" id="btnCriar" name="criar">Criar</button>
</div>
</form>
<div class="card-footer bg-body m-0 border-0">
<div class="card-text text-center">
<a href="#" id="aPossuiConta" class="fs-5">Já tenho conta</a>
</div>
</div>
<!-- /Card Cadastro -->
</div>
</div>
</div>
<!-- /Card Cadastro -->
</div>
</main>

Expand Down

0 comments on commit 46a7a25

Please sign in to comment.