Skip to content

Commit 31f402c

Browse files
KVGargKVGarg
committed
Add netlify-OAuth
The contributor can sign-in with either GitHub or GitLab account provided the user is member of the organization. The validation is being performed via a http request which accepts the access_token retrieved from the netlify o-authentication. Closes #262
1 parent d273573 commit 31f402c

File tree

4 files changed

+202
-2
lines changed

4 files changed

+202
-2
lines changed

‎.coafile

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ shell = bash
5959
# for use by other organizations.
6060
files = **
6161
# .coverage crashes AnnotationBear
62-
ignore += .coafile, *requirements.txt, .travis.yml, LICENSE, .nocover.yaml, .moban.yaml, .moban.dt/community-*.jj2, public/**, _site/**, .ci/check_moban.sh, .coverage
62+
ignore += .coafile, *requirements.txt, .travis.yml, LICENSE, .nocover.yaml, .moban.yaml, .moban.dt/community-*.jj2, public/**, _site/**, .ci/check_moban.sh, .coverage, static/js/main.js
6363
bears = KeywordBear
6464
language = python 3
6565
keywords = coala

‎static/css/main.css

+70
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@ body {
2323
cursor: pointer;
2424
}
2525

26+
.close-form {
27+
justify-content: end;
28+
padding: 10px 10px 0 0;
29+
font-size: 1.5em;
30+
cursor: pointer;
31+
}
32+
2633
.custom-green-color-font {
2734
color: #2d5d13
2835
}
@@ -39,6 +46,22 @@ body {
3946
color: #37474f;
4047
}
4148

49+
.error-message {
50+
background-color: #d57c7b;
51+
color: white;
52+
margin: 0 10px;
53+
padding: 5px 10px;
54+
}
55+
56+
.form-popup {
57+
width: 100%;
58+
height: 100%;
59+
justify-content: center;
60+
display: none;
61+
opacity:.95;
62+
position:absolute;
63+
}
64+
4265
footer .footer-icons {
4366
display: flex;
4467
flex-wrap: wrap;
@@ -59,6 +82,14 @@ footer .social-buttons {
5982
font-size: larger;
6083
}
6184

85+
.login-form {
86+
width: 30%;
87+
min-width: 340px;
88+
background-color: white;
89+
box-shadow: 0 -5px 15px black;
90+
margin: 5em auto;
91+
}
92+
6293
.main-content {
6394
background-color: #edf5af;
6495
padding-bottom: 3%;
@@ -76,10 +107,44 @@ nav .brand-logo img {
76107
width: 60px;
77108
}
78109

110+
.netlify-image {
111+
min-width:133px;
112+
width: 50%;
113+
}
114+
79115
.nav-menu-font-size,
80116
.sidenav .nav-menu-font-size {
81117
font-size: 20px;
82118
}
119+
120+
.oauth-error {
121+
display: none;
122+
}
123+
124+
.oauth-providers {
125+
justify-content: center;
126+
flex-direction: column;
127+
}
128+
129+
.oauth-providers a{
130+
margin: 0.5em;
131+
font-weight: bold;
132+
width: 80%;
133+
}
134+
135+
.organizations {
136+
justify-content: center;
137+
}
138+
139+
.org-logo {
140+
min-width: 133px;
141+
width: 35%;
142+
}
143+
144+
.organizations img {
145+
padding: 10px;
146+
}
147+
83148
p {
84149
font-size: medium;
85150
}
@@ -145,6 +210,11 @@ p {
145210
list-style: none;
146211
}
147212

213+
#user-dropdown li.user-profile,
214+
#user-dropdown li.user-logout {
215+
display: none;
216+
}
217+
148218
.web-page-details {
149219
width: 100%;
150220
}

‎static/js/main.js

+99
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1+
/* globals Cookies, netlify */
12
$(document).ready(function(){
3+
4+
var login_user_el = $('.login-user');
5+
var logout_user_el = $('.user-logout');
6+
27
function activate_dropdown(){
38
if ($('nav').width() < 992 ){
49
$(".dropdown-trigger-sidenav").dropdown({coverTrigger: false});
@@ -10,13 +15,107 @@ $(document).ready(function(){
1015
}
1116
}
1217

18+
function check_user_authenticated_or_not() {
19+
if(Cookies.get('authenticated')){
20+
modify_html_elements('none', 'none','block', 'block');
21+
}
22+
}
23+
24+
function get_error_message(oauth_provider, err){
25+
return 'Error Authenticating with ' + oauth_provider + '. ' + err +
26+
'. Please try again later!';
27+
}
28+
29+
function display_error_message(oauth_provider, error_info) {
30+
$('.error-message').text(get_error_message(oauth_provider, error_info));
31+
$('.oauth-error').css('display', 'block');
32+
}
33+
34+
function modify_html_elements(popup_form_display, login_option_display,
35+
profile_option_display,
36+
logout__option_display) {
37+
$('.form-popup').css('display', popup_form_display);
38+
login_user_el.css('display', login_option_display);
39+
$('.user-profile').css('display', profile_option_display);
40+
logout_user_el.css('display', logout__option_display);
41+
}
42+
43+
function manipulate_web_page_data(oauth_provider, http_response_text) {
44+
var json_data = JSON.parse(http_response_text);
45+
if (json_data.valid) {
46+
Cookies.set('authenticated', true);
47+
Cookies.set('username', json_data.user);
48+
modify_html_elements('none', 'none','block', 'block');
49+
}
50+
else {
51+
display_error_message(oauth_provider, json_data.message);
52+
}
53+
}
54+
55+
function validate_user(oauth_provider, access_token){
56+
var url = 'https://webservices.coala.io/'+ oauth_provider + '/' +
57+
access_token +'/validate';
58+
var xhttp = new XMLHttpRequest();
59+
xhttp.onreadystatechange = function() {
60+
if (this.readyState === 4 && this.status === 200) {
61+
manipulate_web_page_data(oauth_provider, this.responseText);
62+
}
63+
};
64+
xhttp.open("GET", url, true);
65+
xhttp.send();
66+
}
67+
68+
function login_with(oauth_provider){
69+
var authenticator = new netlify.default({});
70+
authenticator.authenticate(
71+
{
72+
provider:oauth_provider,
73+
scope: oauth_provider==='github'?"user":"api"
74+
}, function(err, data) {
75+
if(err){
76+
display_error_message(oauth_provider, err);
77+
}
78+
else {
79+
validate_user(data.provider, data.token);
80+
}
81+
}
82+
);
83+
}
84+
1385
activate_dropdown();
1486

87+
check_user_authenticated_or_not();
88+
1589
$('.sidenav').sidenav();
1690

1791
$(window).resize(function(){
1892
activate_dropdown();
1993
});
2094

2195
$('#current-year').html(new Date().getFullYear());
96+
97+
login_user_el.click(function () {
98+
$('.form-popup').css('display', 'block');
99+
});
100+
101+
$('.close-form').click(function () {
102+
$('.form-popup').css('display', 'none');
103+
$('.oauth-error').css('display', 'none');
104+
});
105+
106+
logout_user_el.click(function () {
107+
Cookies.remove('authenticated');
108+
Cookies.remove('username');
109+
modify_html_elements('none', 'block','none', 'none');
110+
});
111+
112+
$('.login-with-github').click(function(e) {
113+
e.preventDefault();
114+
login_with('github');
115+
});
116+
117+
$('.login-with-gitlab').click(function(e) {
118+
e.preventDefault();
119+
login_with('gitlab');
120+
});
22121
});

‎templates/base.html

+32-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@
1717

1818
<script src="//code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
1919
<script src="//cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
20+
<!-- Nelify's authentiation library -->
21+
<script src="//unpkg.com/netlify-auth-providers"></script>
22+
<script src="//cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
2023
<script src="{% static 'js/main.js' %}"></script>
2124
{% block add_js_files %}{% endblock %}
2225

@@ -82,9 +85,37 @@
8285
</ul>
8386

8487
<ul id="user-dropdown" class="dropdown-content">
85-
<li><a href="#!">Login</a></li>
88+
<li class="login-user"><a>Login</a></li>
89+
<li class="user-profile"><a>Profile</a></li>
90+
<li class="user-logout"><a>Logout</a></li>
8691
</ul>
8792

93+
<div class="apply-flex form-popup">
94+
<div class="login-form">
95+
<div class="apply-flex close-form">
96+
<i class="fa fa-times" aria-hidden="true"></i>
97+
</div>
98+
<div class="oauth-error">
99+
<p class="error-message"></p>
100+
</div>
101+
<span class="apply-flex organizations">
102+
<img src="{{ org.logo_url }}" class="org-logo" alt="org-logo">
103+
<i class="fa fa-plus" aria-hidden="true"></i>
104+
<img src="//flaviocopes.com/netlify/banner.png" class="netlify-image" alt="netlify-logo">
105+
</span>
106+
<div class="apply-flex oauth-providers">
107+
<a class="waves-effect waves-light btn-large login-with-github">
108+
<i class="fa fa-github left" aria-hidden="true"></i>
109+
Login with GitHub
110+
</a>
111+
<a class="waves-effect waves-light btn-large login-with-gitlab">
112+
<i class="fa fa-gitlab left" aria-hidden="true"></i>
113+
Login with GitLab
114+
</a>
115+
</div>
116+
</div>
117+
</div>
118+
88119
<div class="main-content">
89120
{% block main-content %}
90121
{% endblock %}

0 commit comments

Comments
 (0)