Skip to content

Commit 46cd0a8

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 46cd0a8

File tree

4 files changed

+201
-3
lines changed

4 files changed

+201
-3
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: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,12 @@ 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+
}
31+
2632
.custom-green-color-font {
2733
color: #2d5d13
2834
}
@@ -39,6 +45,22 @@ body {
3945
color: #37474f;
4046
}
4147

48+
.error-message {
49+
background-color: #d57c7b;
50+
color: white;
51+
margin: 0 10px;
52+
padding: 5px 10px;
53+
}
54+
55+
.form-popup {
56+
width: 100%;
57+
height: 100%;
58+
justify-content: center;
59+
display: none;
60+
opacity:.95;
61+
position:absolute;
62+
}
63+
4264
footer .footer-icons {
4365
display: flex;
4466
flex-wrap: wrap;
@@ -59,6 +81,14 @@ footer .social-buttons {
5981
font-size: larger;
6082
}
6183

84+
.login-form {
85+
width: 30%;
86+
min-width: 340px;
87+
background-color: white;
88+
box-shadow: 0 -5px 15px black;
89+
margin: 5em auto;
90+
}
91+
6292
.main-content {
6393
background-color: #edf5af;
6494
padding-bottom: 3%;
@@ -76,10 +106,44 @@ nav .brand-logo img {
76106
width: 60px;
77107
}
78108

109+
.netlify-image {
110+
min-width:133px;
111+
width: 50%;
112+
}
113+
79114
.nav-menu-font-size,
80115
.sidenav .nav-menu-font-size {
81116
font-size: 20px;
82117
}
118+
119+
.oauth-error {
120+
display: none;
121+
}
122+
123+
.oauth-providers {
124+
justify-content: center;
125+
flex-direction: column;
126+
}
127+
128+
.oauth-providers a{
129+
margin: 0.5em;
130+
font-weight: bold;
131+
width: 80%;
132+
}
133+
134+
.organizations {
135+
justify-content: center;
136+
}
137+
138+
.org-logo {
139+
min-width: 133px;
140+
width: 35%;
141+
}
142+
143+
.organizations img {
144+
padding: 10px;
145+
}
146+
83147
p {
84148
font-size: medium;
85149
}
@@ -145,6 +209,11 @@ p {
145209
list-style: none;
146210
}
147211

212+
#user-dropdown li.user-profile,
213+
#user-dropdown li.user-logout {
214+
display: none;
215+
}
216+
148217
.web-page-details {
149218
width: 100%;
150219
}

‎static/js/main.js‎

Lines changed: 99 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,120 @@
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});
510
}
611
else {
712
$(".dropdown-trigger").dropdown({hover: true,
8-
constrainWidth: false,
13+
varrainWidth: false,
914
coverTrigger: false});
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/'+ 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":"read_user"
73+
}, function(err, data) {
74+
if(err){
75+
display_error_message(oauth_provider, err);
76+
}
77+
else {
78+
validate_user(oauth_provider, data.token);
79+
}
80+
}
81+
);
82+
}
83+
1384
activate_dropdown();
1485

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

1790
$(window).resize(function(){
1891
activate_dropdown();
1992
});
2093

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

‎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

@@ -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)