70 lines
3.9 KiB
HTML
70 lines
3.9 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Registro{% endblock %}
|
|
{% block auth_content %}
|
|
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-600 to-indigo-900">
|
|
<div class="w-full max-w-md">
|
|
<div class="bg-white rounded-2xl shadow-2xl p-8">
|
|
<div class="text-center mb-8">
|
|
<div class="inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4">
|
|
<i class="fas fa-user-plus text-blue-600 text-2xl"></i>
|
|
</div>
|
|
<h2 class="text-2xl font-bold text-gray-800">Crear Cuenta</h2>
|
|
<p class="text-sm text-gray-500 mt-1">Regístrate para gestionar RIPS</p>
|
|
</div>
|
|
|
|
{% if error %}
|
|
<div class="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm flex items-center">
|
|
<i class="fas fa-exclamation-circle mr-2"></i> {{ error }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<form method="POST" action="/auth/register" class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Usuario</label>
|
|
<div class="relative">
|
|
<i class="fas fa-user absolute left-3 top-3 text-gray-400"></i>
|
|
<input type="text" name="username" required
|
|
class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
|
placeholder="Nombre de usuario">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
|
|
<div class="relative">
|
|
<i class="fas fa-envelope absolute left-3 top-3 text-gray-400"></i>
|
|
<input type="email" name="email" required
|
|
class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
|
placeholder="correo@ejemplo.com">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Contraseña</label>
|
|
<div class="relative">
|
|
<i class="fas fa-lock absolute left-3 top-3 text-gray-400"></i>
|
|
<input type="password" name="password" required
|
|
class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
|
placeholder="Mínimo 6 caracteres">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Confirmar Contraseña</label>
|
|
<div class="relative">
|
|
<i class="fas fa-lock absolute left-3 top-3 text-gray-400"></i>
|
|
<input type="password" name="confirm_password" required
|
|
class="w-full pl-10 pr-3 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
|
|
placeholder="Repite la contraseña">
|
|
</div>
|
|
</div>
|
|
<button type="submit"
|
|
class="w-full py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors flex items-center justify-center">
|
|
<i class="fas fa-user-plus mr-2"></i> Crear Cuenta
|
|
</button>
|
|
</form>
|
|
<p class="mt-4 text-center text-sm text-gray-500">
|
|
¿Ya tienes cuenta? <a href="/auth/login" class="text-blue-600 hover:underline font-medium">Inicia Sesión</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|