Skip to content

Commit 34ed88e

Browse files
dimzacharalexeygrigorev
dimzachar
and
alexeygrigorev
authored
Enable social login with django-allauth; update templates and settings (#88)
* login * Delete SOCIAL_LOGIN_MODAL.md --------- Co-authored-by: Alexey Grigorev <alexeygrigorev@users.noreply.github.com>
1 parent 016cbc3 commit 34ed88e

9 files changed

Lines changed: 299 additions & 5 deletions

File tree

‎accounts/templates/accounts/login.html‎

Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,46 @@
1-
{% for provider in providers %}
2-
<a href="{{ provider.login_url }}">Login with {{ provider.name }}</a><br>
3-
{% endfor %}
1+
{% extends 'base.html' %}
2+
3+
{% block title %}Login - Course Management{% endblock %}
4+
5+
{% block content %}
6+
<div class="row justify-content-center">
7+
<div class="col-md-6">
8+
<div class="card">
9+
<div class="card-header text-center">
10+
<h3><i class="fas fa-sign-in-alt"></i> Sign In</h3>
11+
<p class="text-muted">Choose your preferred login method</p>
12+
</div>
13+
<div class="card-body">
14+
{% for provider in providers %}
15+
<a href="{{ provider.login_url }}" class="btn btn-outline-primary btn-block mb-3">
16+
{% if 'Google' in provider.name %}
17+
<i class="fab fa-google text-danger"></i>
18+
{% elif 'GitHub' in provider.name %}
19+
<i class="fab fa-github text-dark"></i>
20+
{% elif 'Slack' in provider.name %}
21+
<i class="fab fa-slack text-info"></i>
22+
{% else %}
23+
<i class="fas fa-sign-in-alt"></i>
24+
{% endif %}
25+
Continue with {{ provider.name }}
26+
</a>
27+
{% empty %}
28+
<div class="alert alert-warning text-center">
29+
<i class="fas fa-exclamation-triangle"></i>
30+
<strong>No login providers configured</strong><br>
31+
Please contact an administrator to set up social login.
32+
</div>
33+
{% endfor %}
34+
</div>
35+
{% if providers %}
36+
<div class="card-footer text-center">
37+
<small class="text-muted">
38+
<i class="fas fa-shield-alt"></i>
39+
Secure login - we never store your social media passwords
40+
</small>
41+
</div>
42+
{% endif %}
43+
</div>
44+
</div>
45+
</div>
46+
{% endblock %}

‎accounts/urls.py‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33

44
urlpatterns = [
55
path('login/', views.social_login_view, name='login'),
6-
path('signup/', views.social_login_view, name='accounts_signup'),
76
path('email/', views.disabled),
87
path('password/reset/', views.disabled),
98
]

‎accounts/views.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ def disabled(request):
1717
async def social_login_view(request):
1818
providers = await get_available_providers()
1919

20-
return render(
20+
return await sync_to_async(render)(
2121
request,
2222
"accounts/login.html",
2323
{"providers": providers},

‎course_management/settings.py‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -302,6 +302,9 @@
302302
"accounts.auth.ConsolidatingSocialAccountAdapter"
303303
)
304304

305+
# Skip intermediate confirmation page - direct OAuth redirect
306+
SOCIALACCOUNT_LOGIN_ON_GET = True
307+
305308

306309
# Unfold Configurations
307310
UNFOLD = {

‎templates/account/logout.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{% extends 'base.html' %}
2+
3+
{% block title %}Sign Out - Course Management{% endblock %}
4+
5+
{% block content %}
6+
<div class="row justify-content-center">
7+
<div class="col-md-6">
8+
<div class="card">
9+
<div class="card-header text-center">
10+
<h3><i class="fas fa-sign-out-alt"></i> Sign Out</h3>
11+
<p class="text-muted">Are you sure you want to sign out?</p>
12+
</div>
13+
<div class="card-body text-center">
14+
<form method="post" action="{% url 'account_logout' %}">
15+
{% csrf_token %}
16+
<div class="alert alert-warning">
17+
<i class="fas fa-user"></i>
18+
{% if user.is_authenticated %}
19+
You are currently signed in as <strong>{{ user.username }}</strong>.
20+
{% else %}
21+
You are about to sign out.
22+
{% endif %}
23+
</div>
24+
<button type="submit" class="btn btn-danger">
25+
<i class="fas fa-sign-out-alt"></i>
26+
Yes, Sign Out
27+
</button>
28+
<a href="{% url 'course_list' %}" class="btn btn-secondary ml-2">
29+
<i class="fas fa-times"></i>
30+
Cancel
31+
</a>
32+
</form>
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
{% endblock %}

‎templates/socialaccount/authentication_error.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{% extends 'base.html' %}
2+
3+
{% block title %}Authentication Error - Course Management{% endblock %}
4+
5+
{% block content %}
6+
<div class="row justify-content-center">
7+
<div class="col-md-6">
8+
<div class="card">
9+
<div class="card-header text-center">
10+
<h3><i class="fas fa-exclamation-triangle text-danger"></i> Authentication Error</h3>
11+
<p class="text-muted">Something went wrong during login</p>
12+
</div>
13+
<div class="card-body text-center">
14+
<div class="alert alert-warning">
15+
<i class="fas fa-exclamation-circle"></i>
16+
<strong>Login failed</strong><br>
17+
There was an issue connecting to the authentication provider. This could be due to:
18+
<ul class="list-unstyled mt-2">
19+
<li>• Network connectivity issues</li>
20+
<li>• Temporary provider unavailability</li>
21+
<li>• Account access restrictions</li>
22+
</ul>
23+
</div>
24+
25+
<div class="mt-4">
26+
<a href="{% url 'login' %}" class="btn btn-primary">
27+
<i class="fas fa-redo"></i>
28+
Try Again
29+
</a>
30+
<a href="{% url 'course_list' %}" class="btn btn-secondary ml-2">
31+
<i class="fas fa-home"></i>
32+
Go Home
33+
</a>
34+
</div>
35+
</div>
36+
<div class="card-footer text-center">
37+
<small class="text-muted">
38+
<i class="fas fa-question-circle"></i>
39+
Need help? Contact support if the problem persists
40+
</small>
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
{% endblock %}

‎templates/socialaccount/connections.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
{% extends 'base.html' %}
2+
3+
{% block title %}Account Connections - Course Management{% endblock %}
4+
5+
{% block content %}
6+
<div class="row justify-content-center">
7+
<div class="col-md-8">
8+
<div class="card">
9+
<div class="card-header">
10+
<h3><i class="fas fa-link"></i> Account Connections</h3>
11+
<p class="text-muted mb-0">Manage your connected social accounts</p>
12+
</div>
13+
<div class="card-body">
14+
{% if socialaccount_list %}
15+
<h5>Connected Accounts</h5>
16+
{% for account in socialaccount_list %}
17+
<div class="d-flex justify-content-between align-items-center border rounded p-3 mb-2">
18+
<div class="d-flex align-items-center">
19+
{% if account.provider == 'google' %}
20+
<i class="fab fa-google text-danger fa-lg mr-3"></i>
21+
{% elif account.provider == 'github' %}
22+
<i class="fab fa-github text-dark fa-lg mr-3"></i>
23+
{% elif account.provider == 'slack' %}
24+
<i class="fab fa-slack text-info fa-lg mr-3"></i>
25+
{% else %}
26+
<i class="fas fa-user fa-lg mr-3"></i>
27+
{% endif %}
28+
<div>
29+
<strong>{{ account.provider|title }}</strong>
30+
<br><small class="text-muted">{{ account.extra_data.email|default:account.uid }}</small>
31+
</div>
32+
</div>
33+
<form method="post" action="{% url 'socialaccount_remove' account.id %}" class="d-inline">
34+
{% csrf_token %}
35+
<button type="submit" class="btn btn-outline-danger btn-sm" onclick="return confirm('Are you sure you want to disconnect this account?')">
36+
<i class="fas fa-unlink"></i> Disconnect
37+
</button>
38+
</form>
39+
</div>
40+
{% endfor %}
41+
<hr>
42+
{% endif %}
43+
44+
<h5>Add New Connection</h5>
45+
<p class="text-muted">Connect additional social accounts for easier login</p>
46+
47+
{% for provider in providers %}
48+
<a href="{{ provider.login_url }}?process=connect" class="btn btn-outline-primary btn-block mb-2">
49+
{% if 'Google' in provider.name %}
50+
<i class="fab fa-google text-danger"></i>
51+
{% elif 'GitHub' in provider.name %}
52+
<i class="fab fa-github text-dark"></i>
53+
{% elif 'Slack' in provider.name %}
54+
<i class="fab fa-slack text-info"></i>
55+
{% else %}
56+
<i class="fas fa-plus"></i>
57+
{% endif %}
58+
Connect {{ provider.name }}
59+
</a>
60+
{% empty %}
61+
<div class="alert alert-info">
62+
<i class="fas fa-info-circle"></i>
63+
No additional providers are available to connect.
64+
</div>
65+
{% endfor %}
66+
</div>
67+
<div class="card-footer">
68+
<a href="{% url 'course_list' %}" class="btn btn-secondary">
69+
<i class="fas fa-arrow-left"></i>
70+
Back to Courses
71+
</a>
72+
</div>
73+
</div>
74+
</div>
75+
</div>
76+
{% endblock %}

‎templates/socialaccount/login_cancelled.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{% extends 'base.html' %}
2+
3+
{% block title %}Login Cancelled - Course Management{% endblock %}
4+
5+
{% block content %}
6+
<div class="row justify-content-center">
7+
<div class="col-md-6">
8+
<div class="card">
9+
<div class="card-header text-center">
10+
<h3><i class="fas fa-times-circle text-warning"></i> Login Cancelled</h3>
11+
<p class="text-muted">You cancelled the login process</p>
12+
</div>
13+
<div class="card-body text-center">
14+
<div class="alert alert-info">
15+
<i class="fas fa-info-circle"></i>
16+
<strong>No problem!</strong><br>
17+
You can try logging in again whenever you're ready.
18+
</div>
19+
20+
<div class="mt-4">
21+
<a href="{% url 'login' %}" class="btn btn-primary">
22+
<i class="fas fa-sign-in-alt"></i>
23+
Try Login Again
24+
</a>
25+
<a href="{% url 'course_list' %}" class="btn btn-secondary ml-2">
26+
<i class="fas fa-home"></i>
27+
Browse Courses
28+
</a>
29+
</div>
30+
</div>
31+
<div class="card-footer text-center">
32+
<small class="text-muted">
33+
<i class="fas fa-shield-alt"></i>
34+
Your privacy and security are always protected
35+
</small>
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
{% endblock %}

‎templates/socialaccount/signup.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
{% extends 'base.html' %}
2+
3+
{% block title %}Welcome - Course Management{% endblock %}
4+
5+
{% block content %}
6+
<div class="row justify-content-center">
7+
<div class="col-md-6">
8+
<div class="card">
9+
<div class="card-header text-center">
10+
<h3><i class="fas fa-check-circle text-success"></i> Welcome!</h3>
11+
<p class="text-muted">Your account has been created successfully</p>
12+
</div>
13+
<div class="card-body text-center">
14+
<div class="alert alert-success">
15+
<i class="fas fa-user-check"></i>
16+
<strong>Account created!</strong><br>
17+
You're now ready to start learning with us.
18+
</div>
19+
20+
<div class="row text-center mt-4">
21+
<div class="col-4">
22+
<i class="fas fa-graduation-cap text-primary fa-2x mb-2"></i>
23+
<small class="d-block">Access Courses</small>
24+
</div>
25+
<div class="col-4">
26+
<i class="fas fa-certificate text-success fa-2x mb-2"></i>
27+
<small class="d-block">Earn Certificates</small>
28+
</div>
29+
<div class="col-4">
30+
<i class="fas fa-users text-info fa-2x mb-2"></i>
31+
<small class="d-block">Join Community</small>
32+
</div>
33+
</div>
34+
35+
<div class="mt-4">
36+
<a href="{% url 'course_list' %}" class="btn btn-primary btn-lg">
37+
<i class="fas fa-rocket"></i>
38+
Start Learning
39+
</a>
40+
</div>
41+
</div>
42+
<div class="card-footer text-center">
43+
<small class="text-muted">
44+
<i class="fas fa-heart text-danger"></i>
45+
Welcome to our learning community!
46+
</small>
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
{% endblock %}

0 commit comments

Comments
 (0)