github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

feat: add login/register v2 + fix input border change

Browse Source
pull/5270/head
REJack 1 year ago
parent 6c8c3003e2
commit 82b46ab688
4 changed files with 265 additions and 9 deletions
Show Stats Download Patch File Download Diff File

46
src/html/components/dashboard/_sidenav.astro
Unescape View File

@ -285,16 +285,50 @@ const htmlPath = convertPathToHtml(path);
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href={htmlPath + "/examples/login.html"} class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login v1</p>
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 1
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href={htmlPath + "/examples/login.html"} class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href={htmlPath + "/examples/register.html"} class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href={htmlPath + "/examples/register.html"} class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register v1</p>
<a href="#" class="nav-link">
<i class="nav-icon bi bi-box-arrow-in-right"></i>
<p>
Version 2
<i class="nav-arrow bi bi-chevron-right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href={htmlPath + "/examples/login-v2.html"} class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Login</p>
</a>
</li>
<li class="nav-item">
<a href={htmlPath + "/examples/register-v2.html"} class="nav-link">
<i class="nav-icon bi bi-circle"></i>
<p>Register</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href={htmlPath + "/examples/lockscreen.html"} class="nav-link">

109
src/html/pages/examples/login-v2.astro
Unescape View File

@ -0,0 +1,109 @@
---
import Head from "@components/_head.astro";
import Scripts from "@components/_scripts.astro";
const title = "AdminLTE 4 | Login Page v2";
const path = "../../../dist";
const htmlPath = "..";
---
<!DOCTYPE html>
<html lang="en">
<!--begin::Head-->
<head>
<Head title={title} path={path} />
</head>
<!--end::Head-->
<!--begin::Body-->
<body class="login-page bg-body-secondary">
<div class="login-box">
<div class="card card-outline card-primary">
<div class="card-header">
<a href={htmlPath + "/index2.html"} class="link-dark text-center link-offset-2 link-opacity-100 link-opacity-50-hover">
<h1 class="mb-0">
<b>Admin</b>LTE
</h1>
</a>
</div>
<div class="card-body login-card-body">
<p class="login-box-msg">Sign in to start your session</p>
<form action={htmlPath + "/index3.html"} method="post">
<div class="input-group mb-1">
<div class="form-floating">
<input id="loginEmail" type="email" class="form-control" value="" placeholder="" />
<label for="loginEmail">Email</label>
</div>
<div class="input-group-text">
<span class="bi bi-envelope"></span>
</div>
</div>
<div class="input-group mb-1">
<div class="form-floating">
<input
id="loginPassword"
type="password"
class="form-control"
placeholder=""
/>
<label for="loginPassword">Password</label>
</div>
<div class="input-group-text">
<span class="bi bi-lock-fill"></span>
</div>
</div>
<!--begin::Row-->
<div class="row">
<div class="col-8 d-inline-flex align-items-center">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="flexCheckDefault"
/>
<label class="form-check-label" for="flexCheckDefault">
Remember Me
</label>
</div>
</div>
<!-- /.col -->
<div class="col-4">
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary">Sign In</button>
</div>
</div>
<!-- /.col -->
</div>
<!--end::Row-->
</form>
<div class="social-auth-links text-center mb-3 d-grid gap-2">
<p>- OR -</p>
<a href="#" class="btn btn-primary">
<i class="bi bi-facebook me-2"></i> Sign in using Facebook
</a>
<a href="#" class="btn btn-danger">
<i class="bi bi-google me-2"></i> Sign in using Google+
</a>
</div>
<!-- /.social-auth-links -->
<p class="mb-1">
<a href="forgot-password.html">I forgot my password</a>
</p>
<p class="mb-0">
<a href="register.html" class="text-center">
Register a new membership
</a>
</p>
</div>
<!-- /.login-card-body -->
</div>
</div>
<!-- /.login-box -->
<Scripts path={path} />
<!--end::Script-->
</body><!--end::Body-->
</html>

116
src/html/pages/examples/register-v2.astro
Unescape View File

@ -0,0 +1,116 @@
---
import Head from "@components/_head.astro";
import Scripts from "@components/_scripts.astro";
const title = "AdminLTE 4 | Register Page v2";
const path = "../../../dist";
const htmlPath = "..";
---
<!DOCTYPE html>
<html lang="en">
<!--begin::Head-->
<head>
<Head title={title} path={path} />
</head>
<!--end::Head-->
<!--begin::Body-->
<body class="register-page bg-body-secondary">
<div class="register-box">
<!-- /.register-logo -->
<div class="card card-outline card-primary">
<div class="card-header">
<a href={htmlPath + "/index2.html"} class="link-dark text-center link-offset-2 link-opacity-100 link-opacity-50-hover">
<h1 class="mb-0">
<b>Admin</b>LTE
</h1>
</a>
</div>
<div class="card-body register-card-body">
<p class="register-box-msg">Register a new membership</p>
<form action={htmlPath + "/index3.html"} method="post">
<div class="input-group mb-1">
<div class="form-floating">
<input id="registerFullName" type="text" class="form-control" placeholder="" />
<label for="registerFullName">Full Name</label>
</div>
<div class="input-group-text">
<span class="bi bi-person"></span>
</div>
</div>
<div class="input-group mb-1">
<div class="form-floating">
<input id="registerEmail" type="email" class="form-control" placeholder="" />
<label for="registerEmail">Email</label>
</div>
<div class="input-group-text">
<span class="bi bi-envelope"></span>
</div>
</div>
<div class="input-group mb-1">
<div class="form-floating">
<input
id="registerPassword"
type="password"
class="form-control"
placeholder=""
/>
<label for="registerPassword">Password</label>
</div>
<div class="input-group-text">
<span class="bi bi-lock-fill"></span>
</div>
</div>
<!--begin::Row-->
<div class="row">
<div class="col-8 d-inline-flex align-items-center">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
value=""
id="flexCheckDefault"
/>
<label class="form-check-label" for="flexCheckDefault">
I agree to the <a href="#">terms</a>
</label>
</div>
</div>
<!-- /.col -->
<div class="col-4">
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary">Sign In</button>
</div>
</div>
<!-- /.col -->
</div>
<!--end::Row-->
</form>
<div class="social-auth-links text-center mb-3 d-grid gap-2">
<p>- OR -</p>
<a href="#" class="btn btn-primary">
<i class="bi bi-facebook me-2"></i> Sign in using Facebook
</a>
<a href="#" class="btn btn-danger">
<i class="bi bi-google me-2"></i> Sign in using Google+
</a>
</div>
<!-- /.social-auth-links -->
<p class="mb-0">
<a href="login.html" class="link-primary text-center">
I already have a membership
</a>
</p>
</div>
<!-- /.register-card-body -->
</div>
</div>
<!-- /.register-box -->
<Scripts path={path} />
<!--end::Script-->
</body><!--end::Body-->
</html>

3
src/scss/pages/_login_and_register.scss
Unescape View File

@ -46,8 +46,6 @@
.input-group {
.form-control {
border-right: 0;
&:focus {
box-shadow: none;
@ -82,7 +80,6 @@
.input-group-text {
color: var(--#{$prefix}secondary-color);
background-color: transparent;
border-left: 0;
@include border-top-end-radius($border-radius);
@include border-bottom-end-radius($border-radius);
@include transition($input-transition);

Write Preview
Loading…
Cancel
Save