Spaces:
Runtime error
Runtime error
File size: 2,568 Bytes
6a5b8d8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
{% extends "base.html" %}
{% block title %}Login - Outline VPN{% endblock %}
{% block extra_css %}
<style>
.password-toggle {
cursor: pointer;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
</style>
{% endblock %}
{% block content %}
<div class="row justify-content-center">
<div class="col-md-6 col-lg-4">
<div class="card">
<div class="card-body">
<h2 class="card-title text-center mb-4">Login</h2>
<form id="login-form" method="POST" action="{{ url_for('login') }}">
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" name="email" required>
</div>
<div class="mb-3 position-relative">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" name="password" required>
<i class="bi bi-eye password-toggle" onclick="togglePassword('password')"></i>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="remember-me" name="remember_me">
<label class="form-check-label" for="remember-me">Remember me</label>
</div>
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary">Sign In</button>
<a href="{{ url_for('forgot_password') }}" class="btn btn-link">Forgot Password?</a>
</div>
</form>
<div class="text-center mt-3">
<p>Don't have an account? <a href="{{ url_for('signup') }}">Sign up</a></p>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script src="{{ url_for('static', filename='js/auth.js') }}"></script>
<script>
function togglePassword(inputId) {
const input = document.getElementById(inputId);
const icon = input.nextElementSibling;
if (input.type === 'password') {
input.type = 'text';
icon.classList.replace('bi-eye', 'bi-eye-slash');
} else {
input.type = 'password';
icon.classList.replace('bi-eye-slash', 'bi-eye');
}
}
</script>
{% endblock %}
|