Added UI for GitHub Confirmation Page

[Himanshu-639]

User description

closes #3822

Changes made :
Implemented a new socialaccount/login.html to override the default Django-Allauth login template.
Updated settings.py to ensure custom templates are loaded by adding templates/ to TEMPLATES['DIRS'].
This change improves UI consistency across authentication pages.

Users will now see a custom-designed login page when signing in via GitHub.

---

PR Type

Enhancement

---

Description

• Added a custom GitHub login confirmation page with improved UI.

• Implemented a new socialaccount/login.html template for customization.

• Updated settings.py to include the custom templates directory.

• Enhanced user experience with styled login and GitHub branding.

---

Changes walkthrough 📝

	Relevant files
Enhancement	login.html Add custom GitHub login page template                                        website/templates/socialaccount/login.html Created a new custom template for GitHub login. Added styling for a better user experience. Included GitHub branding and login button. Added links to Terms of Service and Privacy Policy. +61/-0
Configuration changes	settings.py Update settings to include custom templates directory        blt/settings.py Updated TEMPLATES['DIRS'] to include the custom templates directory. Ensured the new template is loaded for rendering. +1/-1

---

Need help?

Type /help how to ... in the comments thread for any questions about PR-Agent usage.

Check out the documentation for more information.

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis 🔶 3822 - Partially compliant Compliant requirements: Improve the UI for the GitHub login confirmation page. Add basic CSS styling for better appearance. Include the GitHub logo in the design. Create a new template templates/account/socialaccount/login.html. Non-compliant requirements: Requires further human verification: Verify the visual appearance of the new GitHub login confirmation page in the browser. Ensure the GitHub logo and styling align with the ticket's expectations.

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Accessibility Concerns The new GitHub login page should be reviewed for accessibility compliance, such as proper contrast ratios, keyboard navigation, and screen reader compatibility. {% extends "base.html" %} {% load static %} {% load i18n %} {% load account socialaccount %} {% block title %} {% trans "Sign In Via GitHub" %} {% endblock title %} {% block description %} {% trans "Sign in securely using your GitHub account." %} {% endblock description %} {% block keywords %} GitHub Login, OAuth, Secure Sign In, Account Authentication {% endblock keywords %} {% block og_title %} {% trans "Sign In Via GitHub - Secure Authentication" %} {% endblock og_title %} {% block og_description %} {% trans "Sign in securely using your GitHub account to access your profile." %} {% endblock og_description %} {% block content %} <div class="flex items-center justify-center min-h-screen bg-gray-100"> <div class="w-full max-w-md p-6 bg-white rounded-lg shadow-md"> <h1 class="text-2xl font-bold text-center text-gray-700"> {% trans "Sign In Via GitHub" %} </h1> <p class="mt-2 text-sm text-center text-gray-600"> {% trans "You are about to sign in using your GitHub account." %} </p> <!-- Social Login Button --> <div class="mt-6 text-center"> {% get_providers as social_providers %} {% for provider in social_providers %} {% if provider.id == "github" %} <a href="{% provider_login_url provider.id process="login" %}" class="flex items-center justify-center w-full px-4 py-2 text-white bg-gray-900 rounded-lg hover:bg-gray-800 transition" aria-label="Sign in with GitHub"> <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"> <path fill-rule="evenodd" d="M12 .5a12 12 0 00-3.8 23.4c.6.1.8-.2.8-.5v-1.9c-3.4.7-4.1-1.6-4.1-1.6a3.2 3.2 0 00-1.3-1.8c-1-.7.1-.7.1-.7 1.1.1 1.7 1.1 1.7 1.1 1 .1 2 .7 2.5 1.3a6.2 6.2 0 003.8-1.1c-.3-.8-.6-1.4-.6-2.2 0-1.7.6-2.8 1.4-3.5a3 3 0 00-.2-2.3c0-.6-.2-1.5.4-2.2 0 0 1-.3 3.3 1.3a11.3 11.3 0 016 0c2.2-1.6 3.3-1.3 3.3-1.3.6.7.4 1.6.4 2.2a3 3 0 00-.2 2.3c.9.7 1.4 1.8 1.4 3.5 0 .8-.3 1.5-.6 2.2a6.2 6.2 0 003.8 1.1c1.2-.7 1.7-1.8 1.7-2.8 0-.5-.1-1-.4-1.5 1.4-1.6 3.5-1.3 3.5-1.3 1.2 0 2.5.8 2.5.8.8 1.5.6 2.7.3 3.1a6.1 6.1 0 01-1.4 1.7c.6 1.4 1.4 2.7 1.4 3.2v3c0 .3.2.7.8.5A12 12 0 0012 .5z" clip-rule="evenodd"/> </svg> {% trans "Continue with GitHub" %} </a> {% endif %} {% endfor %} </div> <div class="mt-4 text-sm text-center text-gray-600"> {% trans "By continuing, you agree to our" %} <a href="{% url 'terms' %}" class="text-blue-600 hover:underline">{% trans "Terms of Service" %}</a> {% trans "and" %} <a href="{% url 'privacy' %}" class="text-blue-600 hover:underline">{% trans "Privacy Policy" %}</a>. </div> </div> </div> {% endblock content %} Template Directory Addition The addition of the templates directory in TEMPLATES['DIRS'] should be validated to ensure it does not conflict with other template configurations. "DIRS": [os.path.join(BASE_DIR, "templates")],

[github-actions]

PR Code Suggestions ✨

[DonnieBLT]

can you add a screenshot please?