ricardogj08/nabu
1
0
Fork 0
Code Issues Pull requests Projects Releases Activity

[Agregar] estilos y estructura para el login

Browse source
This commit is contained in:
Astra 2021-10-05 20:48:40 -05:00
parent 9e65d6615e
commit 0950ae6d35
3 changed files with 63 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
assets/images/login-plane.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 894 B

19
assets/styles/pages/login/login.css
View file

@ -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;
}
}

57
views/pages/login.php
View file

@ -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' ?>