base setup
This commit is contained in:
21
at_django_boilerplate/accounts/templates/registration/create_user.html
Executable file
21
at_django_boilerplate/accounts/templates/registration/create_user.html
Executable file
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Create User</title>
|
||||
</head>
|
||||
<body>
|
||||
<h2>Create User</h2>
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
{{ form.as_p }}
|
||||
<button type="submit">Create</button>
|
||||
</form>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="{% url 'index' %}">Index</a></li>
|
||||
<li><a href="{% url 'home' %}">Home</a></li>
|
||||
<li><a href="{% url 'user_list' %}">User List</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</body>
|
||||
</html>
|
||||
316
at_django_boilerplate/accounts/templates/registration/signup.html
Executable file
316
at_django_boilerplate/accounts/templates/registration/signup.html
Executable file
@@ -0,0 +1,316 @@
|
||||
{% extends 'public_base.html' %}
|
||||
{% load static %}
|
||||
{% load custom_tags %}
|
||||
|
||||
{% block title %}Sign Up | Register your startup{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-indigo-50 to-purple-50 py-8 px-4 sm:px-6 lg:px-8">
|
||||
<div class="w-full max-w-6xl">
|
||||
<div class="bg-white shadow-xl rounded-2xl overflow-hidden border border-gray-100">
|
||||
<div class="flex flex-col lg:flex-row">
|
||||
<!-- Left Side - Image Card (Hidden on mobile) -->
|
||||
<div class="hidden lg:block lg:w-2/5 bg-gradient-to-br from-indigo-600 to-purple-700 p-8 lg:p-12">
|
||||
<div class="flex flex-col justify-center items-center text-center text-white h-full">
|
||||
<div class="max-w-sm">
|
||||
<img src="{% static 'img/images or rys/Startup India Registration/hero1.png' %}" alt="Startup Registration" class="w-full h-48 lg:h-56 mb-6 lg:mb-8 rounded-lg">
|
||||
<h2 class="text-2xl font-bold mb-4">Start Your Entrepreneurial Journey</h2>
|
||||
<div class="space-y-4 text-left">
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-300 mr-3 mt-1 flex-shrink-0"></i>
|
||||
<span class="text-sm">Quick and hassle-free registration process</span>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-300 mr-3 mt-1 flex-shrink-0"></i>
|
||||
<span class="text-sm">Expert guidance for startup compliance</span>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-300 mr-3 mt-1 flex-shrink-0"></i>
|
||||
<span class="text-sm">Secure and confidential data handling</span>
|
||||
</div>
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-check-circle text-green-300 mr-3 mt-1 flex-shrink-0"></i>
|
||||
<span class="text-sm">Dedicated support for your business growth</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side - Form Card -->
|
||||
<div class="w-full lg:w-3/5 py-8 lg:py-10 px-6 lg:px-8">
|
||||
<!-- Mobile Header with Logo -->
|
||||
<div class="lg:hidden mb-6 text-center">
|
||||
<div class="flex justify-center mb-4">
|
||||
<div class="w-16 h-16 bg-indigo-600 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-rocket text-white text-2xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-2">Create Your Account</h2>
|
||||
<p class="text-sm text-gray-600">Join thousands of successful startups</p>
|
||||
</div>
|
||||
|
||||
<!-- Desktop Header -->
|
||||
<div class="hidden lg:block text-center mb-8">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-2">Create Your Account</h2>
|
||||
<p class="text-gray-600">Start your entrepreneurial journey with us today</p>
|
||||
</div>
|
||||
|
||||
<!-- Error Display -->
|
||||
{% if form.errors %}
|
||||
<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6 animate-pulse">
|
||||
<div class="flex items-center">
|
||||
<i class="fa-solid fa-exclamation-circle mr-2"></i>
|
||||
<strong class="font-medium">Please correct the following errors:</strong>
|
||||
</div>
|
||||
<ul class="list-disc list-inside mt-2 ml-2 text-sm">
|
||||
{% for field, errors in form.errors.items %}
|
||||
{% for error in errors %}
|
||||
<li>{{ error }}</li>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Email Validation Status -->
|
||||
<div id="email-status" class="flex items-center space-x-2 text-sm mb-4 hidden">
|
||||
<span id="email-icon" class="text-lg"></span>
|
||||
<span id="email-text"></span>
|
||||
</div>
|
||||
|
||||
<form method="post" action="{% url 'signup' %}" class="space-y-6" novalidate>
|
||||
{% csrf_token %}
|
||||
|
||||
<!-- Personal Information Section -->
|
||||
<div class="space-y-5">
|
||||
<div class="flex items-center mb-2">
|
||||
<div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
|
||||
<i class="fas fa-user text-indigo-600 text-sm"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900">Personal Information</h3>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Name Fields -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- First Name -->
|
||||
<div>
|
||||
<label for="{{ form.first_name.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
First Name <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
|
||||
<i class="fa-solid fa-user"></i>
|
||||
</span>
|
||||
{{ form.first_name|add_class:"appearance-none block w-full pl-10 px-3 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200" }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Last Name -->
|
||||
<div>
|
||||
<label for="{{ form.last_name.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Last Name <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
|
||||
<i class="fa-solid fa-user"></i>
|
||||
</span>
|
||||
{{ form.last_name|add_class:"appearance-none block w-full pl-10 px-3 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact & DOB Fields -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- Contact Number -->
|
||||
<div>
|
||||
<label for="{{ form.contact_number.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Contact Number
|
||||
</label>
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
|
||||
<i class="fa-solid fa-phone"></i>
|
||||
</span>
|
||||
{{ form.contact_number|add_class:"appearance-none block w-full pl-10 px-3 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200" }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email Field -->
|
||||
<div>
|
||||
<label for="{{ form.email.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Email Address <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
|
||||
<i class="fa-solid fa-envelope"></i>
|
||||
</span>
|
||||
{{ form.email|add_class:"appearance-none block w-full pl-10 px-3 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Password Section -->
|
||||
<div class="space-y-5">
|
||||
<div class="flex items-center mb-2">
|
||||
<div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
|
||||
<i class="fas fa-lock text-indigo-600 text-sm"></i>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900">Security</h3>
|
||||
</div>
|
||||
|
||||
<!-- Password Field -->
|
||||
<div>
|
||||
<label for="{{ form.password.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Password <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
|
||||
<i class="fa-solid fa-lock"></i>
|
||||
</span>
|
||||
{{ form.password|add_class:"appearance-none block w-full pl-10 px-3 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200" }}
|
||||
</div>
|
||||
|
||||
<!-- Compact Password Requirements -->
|
||||
<div class="mt-2">
|
||||
<button type="button" id="password-toggle" class="flex items-center text-xs text-indigo-600 hover:text-indigo-500 transition duration-200">
|
||||
<i class="fas fa-info-circle mr-1"></i>
|
||||
View password requirements
|
||||
</button>
|
||||
|
||||
<div id="password-requirements" class="hidden mt-2 p-3 bg-blue-50 border border-blue-200 rounded-lg">
|
||||
<p class="text-xs font-medium text-blue-700 mb-2">Password Requirements:</p>
|
||||
<ul class="text-xs text-blue-600 space-y-1">
|
||||
<li class="flex items-start">
|
||||
<span class="text-blue-500 mr-1">•</span>
|
||||
<span>Cannot be too similar to your personal information</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-blue-500 mr-1">•</span>
|
||||
<span>Must be at least 8 characters long</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-blue-500 mr-1">•</span>
|
||||
<span>Cannot be a commonly used password</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="text-blue-500 mr-1">•</span>
|
||||
<span>Cannot be entirely numeric</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<div>
|
||||
<label for="{{ form.confirm_password.id_for_label }}" class="block text-sm font-medium text-gray-700 mb-2">
|
||||
Confirm Password <span class="text-red-500">*</span>
|
||||
</label>
|
||||
<div class="relative">
|
||||
<span class="absolute inset-y-0 left-0 pl-3 flex items-center text-gray-400">
|
||||
<i class="fa-solid fa-lock"></i>
|
||||
</span>
|
||||
{{ form.confirm_password|add_class:"appearance-none block w-full pl-10 px-3 py-3 border border-gray-300 rounded-lg shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition duration-200" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Terms and Conditions -->
|
||||
<div class="bg-indigo-50 p-4 rounded-lg border border-indigo-100">
|
||||
<div class="flex items-start">
|
||||
{{ form.terms_accepted|add_class:"h-5 w-5 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded mt-0.5" }}
|
||||
<label for="{{ form.terms_accepted.id_for_label }}" class="ml-3 block text-sm text-gray-700">
|
||||
<span class="font-medium text-gray-900">I accept the terms and conditions</span> <span class="text-red-500">*</span>
|
||||
<p class="text-xs text-gray-500 mt-1">By creating an account, you agree to our Terms of Service and Privacy Policy.</p>
|
||||
</label>
|
||||
</div>
|
||||
{% if form.terms_accepted.errors %}
|
||||
<div class="text-red-600 text-sm mt-2 ml-8">
|
||||
{{ form.terms_accepted.errors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div>
|
||||
<button type="submit"
|
||||
class="w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 transition duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 shadow-lg transform hover:scale-[1.02] active:scale-[0.98]">
|
||||
<i class="fa-solid fa-rocket mr-2"></i>
|
||||
Launch Your Startup Journey
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Login Redirect -->
|
||||
<div class="text-center pt-4">
|
||||
<p class="text-sm text-gray-600">
|
||||
Already have an account?
|
||||
<a href="{% url 'login' %}" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-200 ml-1">
|
||||
Sign in here
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email AJAX Validation -->
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// Email validation
|
||||
$('#id_email').on('blur', function () {
|
||||
const username = $(this).val();
|
||||
if (username) {
|
||||
$.ajax({
|
||||
url: '{% url "check_username" %}',
|
||||
data: { 'username': username },
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
$('#email-status').removeClass('hidden');
|
||||
if (data.is_taken) {
|
||||
$('#email-icon').html('<i class="fa-solid fa-times-circle"></i>').removeClass('text-green-600').addClass('text-red-600');
|
||||
$('#email-text').text('This email is already registered.').removeClass('text-green-600').addClass('text-red-600');
|
||||
$('#id_email').addClass('border-red-500 focus:border-red-500 focus:ring-red-500');
|
||||
} else {
|
||||
$('#email-icon').html('<i class="fa-solid fa-check-circle"></i>').removeClass('text-red-600').addClass('text-green-600');
|
||||
$('#email-text').text('Email is available.').removeClass('text-red-600').addClass('text-green-600');
|
||||
$('#id_email').removeClass('border-red-500 focus:border-red-500 focus:ring-red-500');
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
$('#email-status').addClass('hidden');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$('#email-status').addClass('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
// Password requirements toggle
|
||||
$('#password-toggle').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
$('#password-requirements').toggleClass('hidden');
|
||||
if ($('#password-requirements').hasClass('hidden')) {
|
||||
$(this).html('<i class="fas fa-info-circle mr-1"></i>View password requirements');
|
||||
} else {
|
||||
$(this).html('<i class="fas fa-times mr-1"></i>Hide password requirements');
|
||||
}
|
||||
});
|
||||
|
||||
// Hide password requirements when clicking outside
|
||||
$(document).on('click', function(e) {
|
||||
if (!$(e.target).closest('#password-toggle, #password-requirements').length) {
|
||||
$('#password-requirements').addClass('hidden');
|
||||
$('#password-toggle').html('<i class="fas fa-info-circle mr-1"></i>View password requirements');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
15
at_django_boilerplate/accounts/templates/registration/verify_email.html
Executable file
15
at_django_boilerplate/accounts/templates/registration/verify_email.html
Executable file
@@ -0,0 +1,15 @@
|
||||
{% extends 'public_base.html' %}
|
||||
|
||||
{% block title %}
|
||||
Verify
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<h1>You need to verify your email</h1>
|
||||
<form method="post">
|
||||
{% csrf_token %}
|
||||
<input class="btn btn-primary max-btn" type="submit" value="Verify">
|
||||
</form>
|
||||
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,14 @@
|
||||
|
||||
{% extends 'public_base.html' %}
|
||||
|
||||
{% block title %}
|
||||
Verify
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
|
||||
<div class="alert alert-success">
|
||||
You have successfully verified your e-mail
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,18 @@
|
||||
{% extends 'public_base.html' %}
|
||||
|
||||
{% block title %}
|
||||
Verify
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="alert">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
12
at_django_boilerplate/accounts/templates/registration/verify_email_done.html
Executable file
12
at_django_boilerplate/accounts/templates/registration/verify_email_done.html
Executable file
@@ -0,0 +1,12 @@
|
||||
{% extends 'public_base.html' %}
|
||||
|
||||
{% block title %}
|
||||
Verify
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<h5>An email has been sent with instructions to verify your email</h5>
|
||||
<h5>If you have not received the email. Please check the spam folder</h5>
|
||||
{% endblock %}
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
<div style="background-color: #c2c2c2; padding: 15px;">
|
||||
<h2 style="margin: 0; padding: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; background-color: #fdc038; color: #ffffff;">Verify Email</h2>
|
||||
<div style="margin: 0; padding: 15px; background-color: #ffffff;">
|
||||
<p>Hi {{ user.name }},</p>
|
||||
<p>You created an account on we-kwick, you need to verify your email. Please click on the button below to verify your email.</p>
|
||||
|
||||
<a href="{{ request.scheme }}://{{ domain }}{% url 'verify-email-confirm' uidb64=uid token=token %}"
|
||||
style="border: 0; color: #ffffff; background-color: #fdc038; padding: 15px; font-weight: bold; text-decoration: none; border-radius: 5px; display: inline-block; margin-top: 20px;">
|
||||
Verify Email
|
||||
</a>
|
||||
|
||||
<p style="margin-top: 40px;">Or you can copy the link below to your browser</p>
|
||||
<p>{{ request.scheme }}://{{ domain }}{% url 'verify-email-confirm' uidb64=uid token=token %}</p>
|
||||
<p>The We-Kwick Team</p>
|
||||
</div>
|
||||
<div style="text-align: center; margin-top: 20px 0;">
|
||||
<p>© {% now 'Y' %} <a href="">Blog</a></p>
|
||||
<p>Follow us on <a href="">Twitter</a></p>
|
||||
</div>
|
||||
</div>
|
||||
49
at_django_boilerplate/accounts/templates/registration/verify_otp.html
Executable file
49
at_django_boilerplate/accounts/templates/registration/verify_otp.html
Executable file
@@ -0,0 +1,49 @@
|
||||
{% extends 'public_base.html' %}
|
||||
{% load static %}
|
||||
{% block title %}Verify OTP{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="flex items-center justify-center min-h-screen bg-gray-100 px-4">
|
||||
<div class="w-full max-w-md bg-white rounded-xl shadow-md p-6">
|
||||
<h4 class="text-2xl font-semibold text-center text-gray-800 mb-6">Verify OTP</h4>
|
||||
|
||||
{% if messages %}
|
||||
{% for message in messages %}
|
||||
<div class="mb-4 px-4 py-3 rounded text-sm
|
||||
{% if message.tags == 'error' %}
|
||||
bg-red-100 text-red-700
|
||||
{% elif message.tags == 'success' %}
|
||||
bg-green-100 text-green-700
|
||||
{% else %}
|
||||
bg-blue-100 text-blue-700
|
||||
{% endif %}
|
||||
">
|
||||
{{ message }}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<form method="post" novalidate>
|
||||
{% csrf_token %}
|
||||
<div class="mb-4">
|
||||
<label for="otpInput" class="block text-sm font-medium text-gray-700 mb-1">Enter OTP sent to your email</label>
|
||||
<input type="text" name="otp" id="otpInput" maxlength="6" pattern="\d{6}"
|
||||
class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Enter 6-digit OTP" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<button type="submit"
|
||||
class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md text-lg font-medium transition">
|
||||
<i class="fas fa-check-circle mr-2"></i>Verify OTP
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="text-center text-sm text-gray-600">
|
||||
Didn’t receive the OTP?
|
||||
<a href="{% url 'request_otp' %}" class="text-blue-600 hover:underline">Resend</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user