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
coala · Jul 12, 2019 · fdfd5b1 · fdfd5b1
1 parent d273573
commit fdfd5b1
Show file tree

Hide file tree

Showing 4 changed files with 202 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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,13 +15,107 @@ $(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":"read_user"
+            }, function(err, data) {
+                if(err){
+                    display_error_message(oauth_provider, err);
+                }
+                else {
+                    validate_user(oauth_provider, data.token);
+                }
+            }
+        );
+    }
+
     activate_dropdown();
 
+    check_user_authenticated_or_not();
+
     $('.sidenav').sidenav();
 
     $(window).resize(function(){
         activate_dropdown();
     });
 
     $('#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
@@ -17,6 +17,9 @@
 
     <script src="//code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+    <!-- Nelify's authentiation library -->
+    <script src="//unpkg.com/netlify-auth-providers"></script>
+    <script src="//cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
     <script src="{% static 'js/main.js' %}"></script>
     {% block add_js_files %}{% endblock %}
 
@@ -82,9 +85,37 @@
     </ul>
 
     <ul id="user-dropdown" class="dropdown-content">
-      <li><a href="#!">Login</a></li>
+      <li class="login-user"><a>Login</a></li>
+      <li class="user-profile"><a>Profile</a></li>
+      <li class="user-logout"><a>Logout</a></li>
     </ul>
 
+    <div class="apply-flex form-popup">
+      <div class="login-form">
+        <div class="apply-flex close-form">
+          <i class="fa fa-times" aria-hidden="true"></i>
+        </div>
+        <div class="oauth-error">
+          <p class="error-message"></p>
+        </div>
+        <span class="apply-flex organizations">
+          <img src="{{ org.logo_url }}" class="org-logo" alt="org-logo">
+          <i class="fa fa-plus" aria-hidden="true"></i>
+          <img src="//flaviocopes.com/netlify/banner.png" class="netlify-image" alt="netlify-logo">
+        </span>
+        <div class="apply-flex oauth-providers">
+          <a class="waves-effect waves-light btn-large login-with-github">
+            <i class="fa fa-github left" aria-hidden="true"></i>
+            Login with GitHub
+          </a>
+          <a class="waves-effect waves-light btn-large login-with-gitlab">
+            <i class="fa fa-gitlab left" aria-hidden="true"></i>
+            Login with GitLab
+          </a>
+        </div>
+      </div>
+    </div>
+
     <div class="main-content">
       {% block main-content %}
       {% endblock %}