Home Explore Help
Register Sign In
wilson.silva
/
AdminLte
mirror of https://github.com/almasaeed2010/AdminLTE
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

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

REJack 1 year ago
parent
6c8c3003e2
commit
82b46ab688
4 changed files with 265 additions and 9 deletions
Unified View Show Diff Stats
  1. 40 6
      src/html/components/dashboard/_sidenav.astro
  2. 109 0
      src/html/pages/examples/login-v2.astro
  3. 116 0
      src/html/pages/examples/register-v2.astro
  4. 0 3
      src/scss/pages/_login_and_register.scss

+ 40 - 6
src/html/components/dashboard/_sidenav.astro
View File 

@@ -285,16 +285,50 @@ const htmlPath = convertPathToHtml(path);
 
           </a>
 
           </a>
 
           <ul class="nav nav-treeview">
 
           <ul class="nav nav-treeview">
 
             <li class="nav-item">
 
             <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>
 
               </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>
 
             <li class="nav-item">
 
             <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>
 
               </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>
 
             <li class="nav-item">
 
             <li class="nav-item">
 
               <a href={htmlPath + "/examples/lockscreen.html"} class="nav-link">
 
               <a href={htmlPath + "/examples/lockscreen.html"} class="nav-link">

+ 109 - 0
src/html/pages/examples/login-v2.astro
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 - 0
src/html/pages/examples/register-v2.astro
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>

+ 0 - 3
src/scss/pages/_login_and_register.scss
View File 

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