Skip to content

Commit 161bc93

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 807b062 commit 161bc93

File tree

4 files changed

+203
-2
lines changed

4 files changed

+203
-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,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
}
@@ -144,6 +209,11 @@ p {
144209
list-style: none;
145210
}
146211

212+
#user-dropdown li.user-profile,
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: 100 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,78 @@ $(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 expires in 3 days
47+
Cookies.set('authenticated', true, {expires: 3});
48+
Cookies.set('username', json_data.user, {expires: 3});
49+
modify_html_elements('none', 'none','block', 'block');
50+
}
51+
else {
52+
display_error_message(oauth_provider, json_data.message);
53+
}
54+
}
55+
56+
function validate_user(oauth_provider, access_token){
57+
var url = 'https://webservices.coala.io/'+ oauth_provider + '/' +
58+
access_token +'/validate';
59+
var xhttp = new XMLHttpRequest();
60+
xhttp.onreadystatechange = function() {
61+
if (this.readyState === 4 && this.status === 200) {
62+
manipulate_web_page_data(oauth_provider, this.responseText);
63+
}
64+
};
65+
xhttp.open("GET", url, true);
66+
xhttp.send();
67+
}
68+
69+
function login_with(oauth_provider){
70+
var authenticator = new netlify.default({});
71+
authenticator.authenticate(
72+
{
73+
provider:oauth_provider,
74+
scope: oauth_provider==='github'?"user":"api"
75+
}, function(err, data) {
76+
if(err){
77+
display_error_message(oauth_provider, err);
78+
}
79+
else {
80+
validate_user(data.provider, data.token);
81+
}
82+
}
83+
);
84+
}
85+
1386
activate_dropdown();
1487

88+
check_user_authenticated_or_not();
89+
1590
$('.sidenav').sidenav();
1691
$('select').formSelect();
1792

@@ -20,4 +95,29 @@ $(document).ready(function(){
2095
});
2196

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

‎templates/base.html‎

Lines changed: 32 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,37 @@
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-profile"><a>Profile</a></li>
89+
<li class="user-logout"><a>Logout</a></li>
8590
</ul>
8691

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

0 commit comments

Comments
 (0)