diff --git a/.coafile b/.coafile
index 3b4c1c5b..d2942cee 100644
--- a/.coafile
+++ b/.coafile
@@ -59,7 +59,7 @@ shell = bash
# for use by other organizations.
files = **
# .coverage crashes AnnotationBear
-ignore += .coafile, *requirements.txt, .travis.yml, LICENSE, .nocover.yaml, .moban.yaml, .moban.dt/community-*.jj2, public/**, _site/**, .ci/check_moban.sh, .coverage
+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
bears = KeywordBear
language = python 3
keywords = coala
diff --git a/static/css/main.css b/static/css/main.css
index c8ab47c2..711f7378 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -23,6 +23,13 @@ body {
cursor: pointer;
}
+.close-form {
+ justify-content: end;
+ padding: 10px 10px 0 0;
+ font-size: 1.5em;
+ cursor: pointer;
+}
+
.custom-green-color-font {
color: #2d5d13
}
@@ -39,6 +46,22 @@ body {
color: #37474f;
}
+.error-message {
+ background-color: #d57c7b;
+ color: white;
+ margin: 0 10px;
+ padding: 5px 10px;
+}
+
+.form-popup {
+ width: 100%;
+ height: 100%;
+ justify-content: center;
+ display: none;
+ opacity:.95;
+ position:absolute;
+}
+
footer .footer-icons {
display: flex;
flex-wrap: wrap;
@@ -59,6 +82,14 @@ footer .social-buttons {
font-size: larger;
}
+.login-form {
+ width: 30%;
+ min-width: 340px;
+ background-color: white;
+ box-shadow: 0 -5px 15px black;
+ margin: 5em auto;
+}
+
.main-content {
background-color: #edf5af;
padding-bottom: 3%;
@@ -76,10 +107,44 @@ nav .brand-logo img {
width: 60px;
}
+.netlify-image {
+ min-width:133px;
+ width: 50%;
+}
+
.nav-menu-font-size,
.sidenav .nav-menu-font-size {
font-size: 20px;
}
+
+.oauth-error {
+ display: none;
+}
+
+.oauth-providers {
+ justify-content: center;
+ flex-direction: column;
+}
+
+.oauth-providers a{
+ margin: 0.5em;
+ font-weight: bold;
+ width: 80%;
+}
+
+.organizations {
+ justify-content: center;
+}
+
+.org-logo {
+ min-width: 133px;
+ width: 35%;
+}
+
+.organizations img {
+ padding: 10px;
+}
+
p {
font-size: medium;
}
@@ -145,6 +210,11 @@ p {
list-style: none;
}
+#user-dropdown li.user-profile,
+#user-dropdown li.user-logout {
+ display: none;
+}
+
.web-page-details {
width: 100%;
}
diff --git a/static/js/main.js b/static/js/main.js
index d42fa017..1b80a78d 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,4 +1,9 @@
+/* globals Cookies, netlify */
$(document).ready(function(){
+
+ var login_user_el = $('.login-user');
+ var logout_user_el = $('.user-logout');
+
function activate_dropdown(){
if ($('nav').width() < 992 ){
$(".dropdown-trigger-sidenav").dropdown({coverTrigger: false});
@@ -10,8 +15,77 @@ $(document).ready(function(){
}
}
+ function check_user_authenticated_or_not() {
+ if(Cookies.get('authenticated')){
+ modify_html_elements('none', 'none','block', 'block');
+ }
+ }
+
+ function get_error_message(oauth_provider, err){
+ return 'Error Authenticating with ' + oauth_provider + '. ' + err +
+ '. Please try again later!';
+ }
+
+ function display_error_message(oauth_provider, error_info) {
+ $('.error-message').text(get_error_message(oauth_provider, error_info));
+ $('.oauth-error').css('display', 'block');
+ }
+
+ function modify_html_elements(popup_form_display, login_option_display,
+ profile_option_display,
+ logout__option_display) {
+ $('.form-popup').css('display', popup_form_display);
+ login_user_el.css('display', login_option_display);
+ $('.user-profile').css('display', profile_option_display);
+ logout_user_el.css('display', logout__option_display);
+ }
+
+ function manipulate_web_page_data(oauth_provider, http_response_text) {
+ var json_data = JSON.parse(http_response_text);
+ if (json_data.valid) {
+ Cookies.set('authenticated', true);
+ Cookies.set('username', json_data.user);
+ modify_html_elements('none', 'none','block', 'block');
+ }
+ else {
+ display_error_message(oauth_provider, json_data.message);
+ }
+ }
+
+ function validate_user(oauth_provider, access_token){
+ var url = 'https://webservices.coala.io/'+ oauth_provider + '/' +
+ access_token +'/validate';
+ var xhttp = new XMLHttpRequest();
+ xhttp.onreadystatechange = function() {
+ if (this.readyState === 4 && this.status === 200) {
+ manipulate_web_page_data(oauth_provider, this.responseText);
+ }
+ };
+ xhttp.open("GET", url, true);
+ xhttp.send();
+ }
+
+ function login_with(oauth_provider){
+ var authenticator = new netlify.default({});
+ authenticator.authenticate(
+ {
+ provider:oauth_provider,
+ scope: oauth_provider==='github'?"user":"api"
+ }, function(err, data) {
+ if(err){
+ display_error_message(oauth_provider, err);
+ }
+ else {
+ validate_user(data.provider, data.token);
+ }
+ }
+ );
+ }
+
activate_dropdown();
+ check_user_authenticated_or_not();
+
$('.sidenav').sidenav();
$(window).resize(function(){
@@ -19,4 +93,29 @@ $(document).ready(function(){
});
$('#current-year').html(new Date().getFullYear());
+
+ login_user_el.click(function () {
+ $('.form-popup').css('display', 'block');
+ });
+
+ $('.close-form').click(function () {
+ $('.form-popup').css('display', 'none');
+ $('.oauth-error').css('display', 'none');
+ });
+
+ logout_user_el.click(function () {
+ Cookies.remove('authenticated');
+ Cookies.remove('username');
+ modify_html_elements('none', 'block','none', 'none');
+ });
+
+ $('.login-with-github').click(function(e) {
+ e.preventDefault();
+ login_with('github');
+ });
+
+ $('.login-with-gitlab').click(function(e) {
+ e.preventDefault();
+ login_with('gitlab');
+ });
});
diff --git a/templates/base.html b/templates/base.html
index 736fbc20..6c70e24f 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -17,6 +17,9 @@
+
+
+
{% block add_js_files %}{% endblock %}
@@ -82,9 +85,37 @@
+
+
{% block main-content %}
{% endblock %}
+