Skip to content

Commit 249709a

Browse files
jeffreysSharpjeffreysSharp
committed
Refatoração tela de Login
1 parent bcfdf92 commit 249709a

File tree

3 files changed

+104
-17
lines changed

3 files changed

+104
-17
lines changed

‎src/web/JSE.WebApp.MVC/Views/Identidade/Login.cshtml‎

Lines changed: 89 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,94 @@
44
ViewData["Title"] = "Entrar";
55
}
66

7-
<h1>@ViewData["Title"]</h1>
7+
<main class="content-wrapper w-100 px-3 ps-lg-5 pe-lg-4 mx-auto" style="max-width: 1920px">
8+
<div class="d-lg-flex">
9+
10+
<div class="d-flex flex-column min-vh-100 w-100 py-4 mx-auto me-lg-5" style="max-width: 416px">
11+
12+
<h1 class="h2 mt-10">Bem-vindo!</h1>
13+
<div class="nav fs-sm mb-4">
14+
Não tem uma conta?
15+
<a class="nav-link text-decoration-underline p-0 ms-2" asp-action="Registro" asp-controller="Identidade">Cadastre-se</a>
16+
</div>
17+
18+
<form asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" autocomplete="off">
19+
<vc:Summary></vc:Summary>
20+
21+
<div class="position-relative mb-4">
22+
<input asp-for="Email" class="form-control form-control-lg" placeholder="nome@dominio.com" autocomplete="new-text" />
23+
<span asp-validation-for="Email" class="text-danger m-1"></span>
24+
</div>
25+
26+
<div class="mb-4">
27+
<input type="password" asp-for="Senha" class="form-control form-control-lg" placeholder="Senha" autocomplete="new-text" />
28+
<label asp-for="Senha" class="password-toggle-button fs-lg" aria-label="Show/hide password">
29+
<input type="checkbox" class="btn-check">
30+
</label>
31+
<span asp-validation-for="Senha" class="text-danger m-1"></span>
32+
33+
</div>
34+
35+
<div class="d-flex align-items-center justify-content-between mb-4">
36+
<div class="form-check me-2">
37+
<input type="checkbox" class="form-check-input" id="remember-30">
38+
<label for="remember-30" class="form-check-label">Lembrar-me</label>
39+
</div>
40+
<div class="nav">
41+
<a class="nav-link animate-underline p-0" href="account-password-recovery.html">
42+
<span class="animate-target">Esqueceu a senha?</span>
43+
</a>
44+
</div>
45+
</div>
46+
<button type="submit" class="btn btn-lg btn-primary w-100">Entrar</button>
47+
</form>
48+
49+
50+
<div class="d-flex align-items-center my-4">
51+
<hr class="w-100 m-0">
52+
<span class="text-body-emphasis fw-medium text-nowrap mx-4">ou continue com</span>
53+
<hr class="w-100 m-0">
54+
</div>
55+
56+
57+
<div class="d-flex flex-column flex-sm-row gap-3 pb-4 mb-3 mb-lg-4">
58+
<button type="button" class="btn btn-lg btn-outline-secondary w-100 px-2">
59+
<i class="ci-google ms-1 me-1"></i>
60+
Google
61+
</button>
62+
<button type="button" class="btn btn-lg btn-outline-secondary w-100 px-2">
63+
<i class="ci-facebook ms-1 me-1"></i>
64+
Facebook
65+
</button>
66+
<button type="button" class="btn btn-lg btn-outline-secondary w-100 px-2">
67+
<i class="ci-apple ms-1 me-1"></i>
68+
Apple
69+
</button>
70+
</div>
71+
72+
73+
</div>
74+
75+
76+
<div class="d-none d-lg-block w-100 py-4 ms-auto" style="max-width: 1034px">
77+
<div class="d-flex flex-column justify-content-end h-100 rounded-5 overflow-hidden">
78+
<span class="position-absolute top-0 start-0 w-100 h-100 d-none-dark" style="background: linear-gradient(-90deg, #accbee 0%, #e7f0fd 100%)"></span>
79+
<span class="position-absolute top-0 start-0 w-100 h-100 d-none d-block-dark" style="background: linear-gradient(-90deg, #1b273a 0%, #1f2632 100%)"></span>
80+
<div class="ratio position-relative z-2" style="--cz-aspect-ratio: calc(1030 / 1032 * 100%)">
81+
<img src="~/images/account/cover.png" alt="Girl">
82+
</div>
83+
</div>
84+
</div>
85+
</div>
86+
</main>
87+
88+
89+
90+
@*
91+
<h1>@ViewData["Title"]</h1>
892
993
<div class="row align-items-center mt-4">
10-
94+
1195
<div class="col-lg-7 text-center text-lg-start">
1296
<h5 class="display-4 mb-3">Entre com seu login e senha</h5>
1397
<p class="col-lg-10 fs-4">Para efetuar transações você precisa fazer autenticação.</p>
@@ -16,14 +100,14 @@
16100
<div class="col-md-10 mx-auto col-lg-5">
17101
<form class="p-2 p-md-3 border rounded-3 bg-body-tertiary" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post" autocomplete="off">
18102
<vc:Summary></vc:Summary>
19-
103+
20104
<div class="form-floating mb-2">
21105
<input asp-for="Email" class="form-control" placeholder="nome@dominio.com" autocomplete="new-text" />
22106
<label asp-for="Email"></label>
23107
<span asp-validation-for="Email" class="text-danger m-1"></span>
24108
</div>
25109
26-
<div class="form-floating mb-2">
110+
<div class="form-floating mb-2">
27111
<input type="password" asp-for="Senha" class="form-control" placeholder="Senha" autocomplete="new-text" />
28112
<label asp-for="Senha"></label>
29113
<span asp-validation-for="Senha" class="text-danger m-1"></span>
@@ -36,7 +120,7 @@
36120
</form>
37121
</div>
38122
</div>
39-
123+
*@
40124

41125
@section Scripts {
42126
<partial name="_ValidationScriptsPartial" />

‎src/web/JSE.WebApp.MVC/Views/Shared/Components/Summary/Default.cshtml‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
11
@if (ViewData.ModelState.ErrorCount > 0)
22
{
3-
<div style="padding-top: 15px;"></div>
4-
5-
<div class="alert alert-danger">
6-
<button type="button" class="close" data-dismiss="alert">×</button>
7-
<h3 id="msgRetorno" style="padding-top: 20px">Opa! Algo deu errado :(</h3>
8-
<div style="padding-top: 20px" asp-validation-summary="All" class="text-danger"></div>
3+
<div class="alert d-sm-flex alert-danger pb-4 pt-sm-4" role="alert">
4+
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
5+
<i class="ci-alert-triangle fs-4 mt-1 mb-2 mb-sm-0"></i>
6+
<div class="ps-sm-3 pe-sm-4">
7+
<h4 class="alert-heading mb-2">Opa! Algo deu errado!</h4>
8+
<div style="padding-top: 20px" asp-validation-summary="All" class="text-danger"></div>
9+
</div>
910
</div>
1011
}
1112

1213
@{
1314
if (TempData["Erros"] is IEnumerable<string> mensagensErro && mensagensErro.Any())
1415
{
15-
<div style="padding-top: 15px;"></div>
16-
17-
<div class="alert alert-danger">
18-
<button type="button" class="close" data-dismiss="alert">×</button>
19-
<h3 id="msgRetorno" style="padding-top: 20px">Opa! Algo deu errado :(</h3>
20-
16+
<div class="alert d-sm-flex alert-danger pb-4 pt-sm-4" role="alert">
17+
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
18+
<i class="ci-alert-triangle fs-4 mt-1 mb-2 mb-sm-0"></i>
19+
<div class="ps-sm-3 pe-sm-4">
20+
<h4 class="alert-heading mb-2">Opa! Algo deu errado!</h4>
21+
</div>
22+
2123
<ul>
2224
@{
2325
foreach (var erro in mensagensErro)
@@ -27,6 +29,7 @@
2729
}
2830

2931
</ul>
32+
3033
</div>
3134
}
3235
}

‎src/web/JSE.WebApp.MVC/wwwroot/images/account/cover.png‎

577 KB
Loading

0 commit comments

Comments
 (0)