Skip to content

Commit 9a9bb6b

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 7313215 commit 9a9bb6b

File tree

4 files changed

+200
-2
lines changed

4 files changed

+200
-2
lines changed

‎.coafile‎

Lines changed: 1 addition & 1 deletion
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‎

Lines changed: 70 additions & 0 deletions
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,23 @@ 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+
z-index: 1002;
63+
position:fixed;
64+
}
65+
4266
footer .footer-icons {
4367
display: flex;
4468
flex-wrap: wrap;
@@ -59,6 +83,14 @@ footer .social-buttons {
5983
font-size: larger;
6084
}
6185

86+
.login-form {
87+
width: 30%;
88+
min-width: 340px;
89+
background-color: white;
90+
box-shadow: 0 -5px 15px black;
91+
margin: 5em auto;
92+
}
93+
6294
.main-content {
6395
background-color: #edf5af;
6496
padding-bottom: 3%;
@@ -76,10 +108,44 @@ nav .brand-logo img {
76108
width: 60px;
77109
}
78110

111+
.netlify-image {
112+
min-width:133px;
113+
width: 50%;
114+
}
115+
79116
.nav-menu-font-size,
80117
.sidenav .nav-menu-font-size {
81118
font-size: 20px;
82119
}
120+
121+
.oauth-error {
122+
display: none;
123+
}
124+
125+
.oauth-providers {
126+
justify-content: center;
127+
flex-direction: column;
128+
}
129+
130+
.oauth-providers a{
131+
margin: 0.5em;
132+
font-weight: bold;
133+
width: 80%;
134+
}
135+
136+
.organizations {
137+
justify-content: center;
138+
}
139+
140+
.org-logo {
141+
min-width: 133px;
142+
width: 35%;
143+
}
144+
145+
.organizations img {
146+
padding: 10px;
147+
}
148+
83149
p {
84150
font-size: medium;
85151
}
@@ -144,6 +210,10 @@ p {
144210
list-style: none;
145211
}
146212

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

‎static/js/main.js‎

Lines changed: 98 additions & 0 deletions
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,8 +15,76 @@ $(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');
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+
logout__option_display) {
36+
$('.form-popup').css('display', popup_form_display);
37+
login_user_el.css('display', login_option_display);
38+
logout_user_el.css('display', logout__option_display);
39+
}
40+
41+
function manipulate_web_page_data(oauth_provider, http_response_text) {
42+
var json_data = JSON.parse(http_response_text);
43+
if (json_data.valid) {
44+
// Cookies expires in 3 days
45+
Cookies.set('authenticated', true, {expires: 3});
46+
Cookies.set('username', json_data.user, {expires: 3});
47+
modify_html_elements('none', 'none', 'block');
48+
}
49+
else {
50+
display_error_message(oauth_provider, json_data.message);
51+
}
52+
}
53+
54+
function validate_user(oauth_provider, access_token){
55+
var url = 'https://webservices.coala.io/'+ oauth_provider + '/' +
56+
access_token +'/validate';
57+
var xhttp = new XMLHttpRequest();
58+
xhttp.onreadystatechange = function() {
59+
if (this.readyState === 4 && this.status === 200) {
60+
manipulate_web_page_data(oauth_provider, this.responseText);
61+
}
62+
};
63+
xhttp.open("GET", url, true);
64+
xhttp.send();
65+
}
66+
67+
function login_with(oauth_provider){
68+
var authenticator = new netlify.default({});
69+
authenticator.authenticate(
70+
{
71+
provider:oauth_provider,
72+
scope: oauth_provider==='github'?"user":"api"
73+
}, function(err, data) {
74+
if(err){
75+
display_error_message(oauth_provider, err);
76+
}
77+
else {
78+
validate_user(data.provider, data.token);
79+
}
80+
}
81+
);
82+
}
83+
1384
activate_dropdown();
1485

86+
check_user_authenticated_or_not();
87+
1588
$('.sidenav').sidenav();
1689
$('select').formSelect();
1790

@@ -20,4 +93,29 @@ $(document).ready(function(){
2093
});
2194

2295
$('#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');
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+
});
23121
});

‎templates/base.html‎

Lines changed: 31 additions & 1 deletion
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

@@ -81,9 +84,36 @@
8184
</ul>
8285

8386
<ul id="user-dropdown" class="dropdown-content">
84-
<li><a href="#">Login</a></li>
87+
<li class="login-user"><a>Login</a></li>
88+
<li class="user-logout"><a>Logout</a></li>
8589
</ul>
8690

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

0 commit comments

Comments
 (0)