Authentication
It is important to maintain the visual style from the first screen the user sees to the last.
The following specifies how the previously explained components that help create this design are implemented.
Layout
The layout is made up of: Background: CoolGray100 | # F1F5F9 Top buttons aligned to the right Bottom buttons aligned to the center PlacetoPay logo aligned to the center Space for the container either for login, registration, password change etc.
<div class="bg-gray-100 p-5 w-full h-full">
<div class="flex flex-col sm:flex-row justify-end">
<a class="m-5 text-gray-700 text-sm" href="" target="_blank">Login</a>
<a class="m-5 text-gray-700 text-sm" href="" target="_blank">Registro</a>
</div>
<img src="https://placetopay-org.github.io/spartan-docs/assets/images/ptp-logo.svg" alt="logo" class="m-auto block my-4">
<div class="border-solid border-2 border-gray-200 w-3/4 block m-auto h-64 rounded-md my-8">
</div>
<div class="flex flex-col sm:flex-row justify-around">
<a class="text-sm text-gray-800" href="" target="_blank">© PlaceToPay</a>
<a class="text-sm text-gray-800" href="" target="_blank">Contacto</a>
<a class="text-sm text-gray-800" href="" target="_blank">Privacidad y condiciones</a>
</div>
</div>
Login
Seeks to confirm the identity of the user.
<div class="bg-gray-100 p-5 w-full h-full">
<img src="https://placetopay-org.github.io/spartan-docs/assets/images/ptp-logo.svg" alt="logo" class="m-auto block my-4">
<div class="bg-white block m-auto rounded-md shadow w-3/4 my-8 p-8">
<div class="w-11/12 block m-auto">
<p class="text-center font-semibold mb-4">Log in</p>
<form>
<label for="name" class="form-label mt-4">User</label>
<input id="name" name="name" class="form-input mt-1 w-full" type="text" placeholder="Jhon Doe">
<label for="password" class="form-label mt-4">Password</label>
<input id="password" name="password" class="form-input mt-1 w-full" type="password" >
<button class="btn btn-dark w-full mt-8 mb-0" type="submit">Button</button>
</form>
</div>
</div>
<div class="flex flex-col justify-center">
<p class="text-center text-sm">No tienes una cuenta <a class="text-sm text-gray-600" href="" target="_blank">Regístrate</a></p>
<a class="text-sm text-gray-600 text-center my-2" href="#" target="_blank">¿Olvidaste tu contraseña?</a>
</div>
</div>
Reset password
Designed for change your password for security reasons or reset it if you forget it.
<div class="bg-gray-100 p-5 w-full h-full">
<img src="https://placetopay-org.github.io/spartan-docs/assets/images/ptp-logo.svg" alt="logo" class="m-auto block my-4">
<div class="bg-white block m-auto rounded-md shadow w-3/4 my-8 p-8">
<div class="w-11/12 block m-auto">
<p class="text-center font-semibold mb-4">Change password</p>
<form>
<label for="email" class="form-label mt-4">Email</label>
<input id="email" name="name" class="form-input mt-1 w-full" type="email" placeholder="">
<button class="btn btn-dark w-full mt-8 mb-0" type="submit">Reset</button>
</form>
</div>
</div>
<div class="flex flex-col justify-center">
<p class="text-center text-sm">No tienes una cuenta <a class="text-sm text-gray-600" href="" target="_blank">Regístrate</a></p>
<a class="text-sm text-gray-600 text-center my-2" href="#" target="_blank">¿Olvidaste tu contraseña?</a>
</div>
</div>
Register
Remember that not everyone using has an account from the start. Lets Make sure to explain how register and sign up.
<div class="bg-gray-100 p-5 w-full h-full">
<img src="https://placetopay-org.github.io/spartan-docs/assets/images/ptp-logo.svg" alt="logo" class="m-auto block my-4">
<div class="bg-white block m-auto rounded-md shadow w-3/4 my-8 p-8">
<div class="w-11/12 block m-auto">
<p class="text-center font-semibold mb-4">Sign up</p>
<form>
<label for="name" class="form-label mt-4">Users</label>
<input id="name" name="name" class="form-input mt-1 w-full" type="text" placeholder="">
<label for="email" class="form-label mt-4">Email</label>
<input id="email" name="email" class="form-input mt-1 w-full" type="email" placeholder="">
<label for="password" class="form-label mt-4">Password</label>
<input id="password" name="password" class="form-input mt-1 w-full" type="password" >
<button class="btn btn-dark w-full mt-8 mb-0" type="submit">Register</button>
</form>
</div>
</div>
<div class="flex flex-col justify-center">
<p class="text-center text-sm">No tienes una cuenta <a class="text-sm text-gray-600" href="" target="_blank">Regístrate</a></p>
<a class="text-sm text-gray-600 text-center my-2" href="#" target="_blank">¿Olvidaste tu contraseña?</a>
</div>
</div>
Support text
They are the best tool we have to improve our understanding of what is required.
<div class="bg-gray-100 p-5 w-full h-full">
<img src="https://placetopay-org.github.io/spartan-docs/assets/images/ptp-logo.svg" alt="logo" class="m-auto block my-4">
<div class="bg-white block m-auto rounded-md shadow w-3/4 my-8 p-8">
<div class="w-11/12 block m-auto">
<p class="text-center font-semibold mb-4">Log in</p>
<form>
<label for="name" class="form-label mt-4">User</label>
<input id="name" name="name" class="form-input mt-1 w-full" type="text" placeholder="Jhon Doe">
<label for="password" class="form-label mt-4">Password</label>
<input id="password" name="password" class="form-input mt-1 w-full" type="password" >
<button class="btn btn-dark w-full mt-8 mb-0" type="submit">Button</button>
</form>
</div>
</div>
<div class="flex flex-col justify-center">
<p class="text-center text-sm">No tienes una cuenta <a class="text-sm text-gray-600" href="" target="_blank">Regístrate</a></p>
<a class="text-sm text-gray-600 text-center my-2" href="#" target="_blank">¿Olvidaste tu contraseña?</a>
</div>
</div>