From 0950ae6d35dd8b8b93aaaaaac116de97434e44e7 Mon Sep 17 00:00:00 2001
From: Astra <juanitho.666.r@gmail.com>
Date: Tue, 5 Oct 2021 20:48:40 -0500
Subject: [PATCH] [Agregar] estilos y estructura para el login

---
 assets/images/login-plane.svg       |  5 +++
 assets/styles/pages/login/login.css | 19 ++++++++++
 views/pages/login.php               | 57 ++++++++++++++++++++---------
 3 files changed, 63 insertions(+), 18 deletions(-)
 create mode 100644 assets/images/login-plane.svg

diff --git a/assets/images/login-plane.svg b/assets/images/login-plane.svg
new file mode 100644
index 0000000..f9c1fba
--- /dev/null
+++ b/assets/images/login-plane.svg
@@ -0,0 +1,5 @@
+<svg width="180" height="224" viewBox="0 0 180 224" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M-3.66952 185.816C-1.72887 185.467 39.4824 177.465 51.1307 143.564C56.6617 127.368 56.1401 103.124 45.7347 98.7059C35.3294 94.2882 16.1518 109.644 16.0292 121.299C15.7748 137.97 54.1898 160.236 75.3364 141.343C88.9661 129.133 88.7537 105.753 88.6818 102.456" stroke="black" stroke-width="4" stroke-miterlimit="10" stroke-dasharray="12 12"/>
+<path d="M54.4075 49.6332C56.6467 50.1686 173.354 42.0616 174.933 38.6921C176.512 35.3226 120.032 93.6865 118.592 107.272C118.592 107.272 94.7397 85.2779 92.1143 87.1462L92.7736 103.762L79.0718 70.2321L54.4075 49.6332Z" fill="white" stroke="black" stroke-width="4" stroke-miterlimit="10"/>
+<path d="M78.078 68.9353L167.023 39.8244L172.332 39.6653L166.353 43.3191L91.2907 85.7782" stroke="black" stroke-width="4" stroke-miterlimit="10"/>
+</svg>
diff --git a/assets/styles/pages/login/login.css b/assets/styles/pages/login/login.css
index e69de29..13cd0ce 100644
--- a/assets/styles/pages/login/login.css
+++ b/assets/styles/pages/login/login.css
@@ -0,0 +1,19 @@
+.sign-up__text {
+    max-width: 310px;
+}
+
+.login-plane {
+    display: block;
+    width: 180px;
+    height: 224px;
+    background-image: url(../../../images/login-plane.svg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+@media screen and (min-width: 900px){
+    .login-plane {
+        display: none;
+    }
+}
\ No newline at end of file
diff --git a/views/pages/login.php b/views/pages/login.php
index e38fc99..f6e4c87 100644
--- a/views/pages/login.php
+++ b/views/pages/login.php
@@ -1,32 +1,53 @@
 <?php defined('NABU') || exit ?>
 <?php $head_title = 'Iniciar sesión' ?>
 <?php $styles     = array(
+    'components/footer/footer.css',
+    'pages/signup/signup.css',
     'pages/login/login.css',
 ) ?>
 <?php $desktop_styles = array(
-    array('pages/login/login-desktop.css', 'attributes' => ''),
+     array('pages/signup/signup-desktop.css', 'pages/login/login-desktop.css', 'attributes' => 'media="screen and (min-width: 900px)"'),
 ) ?>
 <?php $scripts = array() ?>
 <?php require_once 'views/components/head.php' ?>
-
-<h1>Iniciar sesión</h1>
-
 <?php require_once 'views/components/messages.php' ?>
 
-<form method="POST" action="<?= NABU_ROUTES['login'] ?>">
-    <input type="hidden" name="csrf" value="<?= $token ?>">
-    <div>
-        <label for="identity">Correo institucional o usuario</label>
-        <input type="text" id="identity" name="identity" minlength="1" maxlength="255" autofocus required>
+<div class="wrapper">
+    <div class="content">
+        <header class="header">
+            <picture class="header__logo-container">
+                <img src="<?= NABU_DIRECTORY['images'] ?>/nabu-logo.svg" alt="Logo de nabu" class="header__logo">
+            </picture>
+        </header>
+        
+        <main class="sign-up">
+            <section class="sign-up__title">
+                <h1 class="sign-up__text">Bienvenido de nuevo.<br><strong>inicia sesión </strong>para continuar</h1>
+            </section>
+            <section class="form__container">
+                <form class="form__sign-up" method="POST" action="<?= NABU_ROUTES['login'] ?>">
+                    <label for="identity">
+                        <input class="sign-up__input" type="text" id="identity" name="identity" minlength="1" maxlength="255" autofocus required aria-label="Ingresa tu nombre de usuario o correo" autocomplete="username">
+                        <span class="name__field">Nombre de usuario o correo electrónico</span>
+                    </label>
+
+                    <label for="password">
+                        <input class="sign-up__input" type="password" id="password" name="password" minlength="6" maxlength="255" required aria-label="Ingresa tu contraseña">
+                        <span class="name__field">Contraseña</span>
+                    </label>
+
+                    <input class="sign-up__button"type="submit" name="signup-submit" value="Iniciar sesión" aria-label="Registrar">
+                    <p class="form__already">¿No tienes cuenta?
+                         <a href="<?= NABU_ROUTES['signup'] ?>">Registrate</a>.
+                    </p>
+                </form>
+            </section>
+        </main>
     </div>
-    <div>
-        <label for="password">Contraseña</label>
-        <input type="password" id="password" name="password" minlength="6" maxlength="255" required>
-    </div>
-    <div>
-        <input type="submit" name="login-submit" value="Ingresar">
-        <p>¿No tienes cuenta? <a href="<?= NABU_ROUTES['signup'] ?>">Regístrate en <?= NABU_DEFAULT['website-name'] ?></a>.</p>
-    </div>
-</form>
+    <picture class="form__image-container">
+        <img class="form__image" src="https://cdna.artstation.com/p/assets/images/images/017/677/304/large/kerasumi-1.jpg?1556911326" alt="">
+    </picture>
+</div>
+<span class="login-plane"></span>
 
 <?php require_once 'views/components/footer.php' ?>