feat: define layout adicional para páginas sem barra lateral

Author: renebentes

src/BlazingShop/Layouts/HeadlessLayout.razor

@@ -0,0 +1,5 @@
+@inherits LayoutComponentBase
+
+<main class="d-flex align-items-center">
+    @Body
+</main>

src/BlazingShop/Layouts/HeadlessLayout.razor.css

@@ -0,0 +1,4 @@
+html,
+body {
+  height: 100%;
+}

src/BlazingShop/Pages/Login.razor

@@ -0,0 +1,29 @@
+@page "/login"
+@layout HeadlessLayout
+
+<PageTitle>Login</PageTitle>
+
+<div class="form-signin w-100 m-auto">
+
+    <form>
+        <h1 class="h3 mb-3 fw-normal">Por favor, entre com sua conta</h1>
+
+        <div class="form-floating">
+            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
+            <label for="floatingInput">E-mail</label>
+        </div>
+        <div class="form-floating">
+            <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
+            <label for="floatingPassword">Senha</label>
+        </div>
+
+        <div class="form-check text-start my-3">
+            <input class="form-check-input" type="checkbox" value="remember-me" id="flexCheckDefault">
+            <label class="form-check-label" for="flexCheckDefault">
+                Lembrar-me?
+            </label>
+        </div>
+        <button class="btn btn-primary w-100 py-2" type="submit">Entrar</button>
+    </form>
+
+</div>

src/BlazingShop/Pages/Login.razor.css

@@ -0,0 +1,20 @@
+.form-signin {
+  max-width: 330px;
+  padding: 1rem;
+}
+
+.form-signin .form-floating:focus-within {
+  z-index: 2;
+}
+
+.form-signin input[type="email"] {
+  margin-bottom: -1px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.form-signin input[type="password"] {
+  margin-bottom: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}

src/BlazingShop/_Imports.razor

@@ -8,4 +8,5 @@
 @using Microsoft.JSInterop
 @using BlazingShop
 @using BlazingShop.Components
+@using BlazingShop.Layouts
 @using BlazingShop.Models