From 41c5e35c5fb2820fdd54500579839bafd8c8f1e4 Mon Sep 17 00:00:00 2001
From: Keshav Garg <co16326.ccet@gmail.com>
Date: Sat, 20 Jul 2019 23:30:59 +0530
Subject: [PATCH] community/: Add a joining netlify form

The netlify form will ask some particular
inputs that will be used for validating
the user - whether the user is eligible
to be a organization member. The checks for
it have been defined in coala webservices API
which will be accepting form-submissions over
a cron-job defined. After the user submits the
form, a success message will be displayed.

Closes https://github.com/coala/community/issues/89, https://github.com/coala/community/issues/266
---
 community/forms.py            | 82 +++++++++++++++++++++++++++++++++++
 community/urls.py             |  8 +++-
 community/views.py            | 22 ++++++++++
 static/css/join-community.css | 25 +++++++++++
 static/css/main.css           | 23 +++++++---
 static/js/main.js             |  9 +++-
 templates/base.html           | 23 +++++++++-
 templates/index.html          |  2 +-
 templates/join_community.html | 76 ++++++++++++++++++++++++++++++++
 9 files changed, 259 insertions(+), 11 deletions(-)
 create mode 100644 community/forms.py
 create mode 100644 static/css/join-community.css
 create mode 100644 templates/join_community.html

diff --git a/community/forms.py b/community/forms.py
new file mode 100644
index 00000000..c109f7ff
--- /dev/null
+++ b/community/forms.py
@@ -0,0 +1,82 @@
+from django import forms
+
+
+class JoinCommunityForm(forms.Form):
+
+    github_username = forms.CharField(
+        max_length=50, label='GitHub Username',
+        widget=forms.TextInput(
+            attrs={
+                'placeholder': 'Make sure to NOT enter your github profile url',
+                'autocomplete': 'off'
+            }
+        )
+    )
+    gh_first_repo = forms.URLField(
+        required=False, label='GitHub Personal Repository',
+        widget=forms.URLInput(
+            attrs={
+                'placeholder': 'A valid github url of your personal repository',
+                'autocomplete': 'off'
+            }
+        )
+    )
+    gh_git_training_exercise = forms.URLField(
+        required=False, label='From which GitHub repository you have done git'
+                              ' training?',
+        widget=forms.URLInput(
+            attrs={
+                'placeholder': 'A valid github url of git training repository',
+                'autocomplete': 'off'
+            }
+        )
+    )
+    gh_most_contributed_repo = forms.URLField(
+        required=False,
+        label="GitHub Repository to which you've contributed most!",
+        widget=forms.URLInput(
+            attrs={
+                'placeholder': 'A valid github public repository url',
+                'autocomplete': 'off'
+            }
+        )
+    )
+
+    gitlab_user_id = forms.IntegerField(
+        label='GitLab User ID',
+        widget=forms.NumberInput(
+            attrs={
+                'placeholder': 'Make sure to NOT enter your gitlab profile url',
+                'autocomplete': 'off'
+            }
+        )
+    )
+    gl_first_repo_id = forms.IntegerField(
+        required=False, label='GitLab Personal Project ID',
+        widget=forms.NumberInput(
+            attrs={
+                'placeholder': 'Your personal gitlab project ID',
+                'autocomplete': 'off'
+            }
+        )
+    )
+    gl_git_training_exercise = forms.IntegerField(
+        required=False, label='From which GitLab project you have done git'
+                              ' training?',
+        widget=forms.NumberInput(
+            attrs={
+                'placeholder': 'A valid project ID of Git training project',
+                'autocomplete': 'off'
+            }
+        )
+    )
+    gl_most_contributed_repo_id = forms.IntegerField(
+        required=False,
+        label="GitLab Project to which you've contributed most!",
+        widget=forms.NumberInput(
+            attrs={
+                'placeholder': 'A valid ID of gitlab public project',
+                'autocomplete': 'off',
+            }
+        )
+    )
diff --git a/community/urls.py b/community/urls.py
index 42384cb3..a42078b6 100644
--- a/community/urls.py
+++ b/community/urls.py
@@ -6,7 +6,7 @@
 from django.conf.urls.static import static
 from django.conf import settings
 
-from community.views import HomePageView
+from community.views import HomePageView, JoinCommunityView
 from gci.views import GCIStudentsList
 from gci.feeds import LatestTasksFeed as gci_tasks_rss
 from ci_build.view_log import BuildLogsView
@@ -78,6 +78,12 @@ def get_organization():
         distill_func=get_index,
         distill_file='index.html',
     ),
+    distill_url(
+        r'^join/', JoinCommunityView.as_view(),
+        name='join-community',
+        distill_func=get_index,
+        distill_file='join/index.html',
+    ),
     distill_url(
         r'gci/tasks/rss.xml', gci_tasks_rss(),
         name='gci-tasks-rss',
diff --git a/community/views.py b/community/views.py
index 38c83d23..02cb866f 100644
--- a/community/views.py
+++ b/community/views.py
@@ -1,3 +1,5 @@
+import os
+
 import logging
 
 import requests
@@ -10,10 +12,15 @@
     get_org_name,
     get_remote_url
 )
+from .forms import JoinCommunityForm
 from data.models import Team
 from gamification.models import Participant as GamificationParticipant
 from meta_review.models import Participant as MetaReviewer
 
+GL_NEWCOMERS_GRP = 'https://gitlab.com/{}/roles/newcomers'.format(
+    get_org_name()
+)
+
 
 def initialize_org_context_details():
     org_name = get_org_name()
@@ -110,3 +117,18 @@ def get_context_data(self, **kwargs):
         context['top_gamification_users'] = self.get_top_gamification_users(
             count=5)
         return context
+
+
+class JoinCommunityView(TemplateView):
+
+    template_name = 'join_community.html'
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context = get_header_and_footer(context)
+        context['join_community_form'] = JoinCommunityForm()
+        context['gitlab_newcomers_group_url'] = GL_NEWCOMERS_GRP
+        context['join_community_form_name'] = os.environ.get(
+            'JOIN_COMMUNITY_FORM_NAME', None
+        )
+        return context
diff --git a/static/css/join-community.css b/static/css/join-community.css
new file mode 100644
index 00000000..85c9a153
--- /dev/null
+++ b/static/css/join-community.css
@@ -0,0 +1,25 @@
+.join-community-form .row {
+    margin: 5px auto;
+}
+
+.join-community-form .row .input-field,
+.join-community-form p {
+    margin: 0 auto;
+}
+
+.join-community-form label{
+    font-size: 1.3em;
+    color: black;
+}
+
+.join-community-form ::placeholder{
+    color: gray;
+}
+
+.validation-checkboxes {
+    padding: 0 15px;
+}
+
+.submit-btn{
+    margin: 15px;
+}
diff --git a/static/css/main.css b/static/css/main.css
index c9357db6..35a6a027 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -53,7 +53,8 @@ body {
     padding: 5px 10px;
 }
 
-.form-popup {
+.form-popup,
+.form-submission-popup {
     width: 100%;
     height: 100%;
     justify-content: center;
@@ -79,11 +80,16 @@ footer .social-buttons {
     text-transform: none;
 }
 
+.inline-contents {
+    display: inline-flex;
+}
+
 .large-font {
     font-size: larger;
 }
 
-.login-form {
+.login-form,
+.form-submission-message {
     width: 30%;
     min-width: 340px;
     background-color: white;
@@ -100,6 +106,11 @@ footer .social-buttons {
     color: #37474f;
 }
 
+.message {
+    padding: 10px;
+    text-align: justify;
+}
+
 nav {
     background-color: #37474f;
 }
@@ -165,10 +176,6 @@ p {
     background-color: #263238;
 }
 
-.inline-contents {
-    display: inline-flex;
-}
-
 .search-field {
     border-radius: 100px;
     box-shadow: 0 0 25px 2px black;
@@ -202,6 +209,10 @@ p {
     float: none;
 }
 
+strong {
+    font-weight: bold;
+}
+
 .student {
     padding-bottom: 20px;
 }
diff --git a/static/js/main.js b/static/js/main.js
index 91866c38..59fa47bc 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,9 +1,15 @@
-/* globals Cookies, netlify */
+/* globals Cookies, netlify, URLSearchParams */
 $(document).ready(function(){
 
     var login_user_el = $('.login-user');
     var logout_user_el = $('.user-logout');
 
+    var urlParams = new URLSearchParams(location.search);
+    var formSubmitted = urlParams.get('form_submitted');
+    if(formSubmitted==='True'){
+        $('.form-submission-popup').css('display', 'block');
+    }
+
     function activate_dropdown(){
         if ($('nav').width() < 992 ){
             $(".dropdown-trigger-sidenav").dropdown({coverTrigger: false});
@@ -100,6 +106,7 @@ $(document).ready(function(){
 
     $('.close-form').click(function () {
         $('.form-popup').css('display', 'none');
+        $('.form-submission-popup').css('display', 'none');
         $('.oauth-error').css('display', 'none');
     });
 
diff --git a/templates/base.html b/templates/base.html
index cd7cd09c..66427388 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -34,7 +34,7 @@
         <ul class="right hide-on-med-and-down nav-menu-font-size">
           <li><a href="{% url 'index' %}" class="nav-menu-font-size">Home</a></li>
           <li><a href="/#about" class="nav-menu-font-size">About</a></li>
-          <li><a href="#" class="nav-menu-font-size">Join</a></li>
+          <li><a href="{% url 'join-community' %}" class="nav-menu-font-size">Join</a></li>
           <li><a href="{{ org.blog_url }}" target="_blank" class="nav-menu-font-size">Blog</a></li>
           <li><a class="dropdown-trigger nav-menu-font-size" href="#organisation" data-target="organisation-dropdown">Organisation <i class="fa fa-caret-down"></i></a></li>
           <li><a class="dropdown-trigger nav-menu-font-size" href="#contributors" data-target="contributors-dropdown">Contributors <i class="fa fa-caret-down"></i></a></li>
@@ -49,7 +49,7 @@
 
     <ul class="sidenav bold-text" id="mobile-menu">
       <li><a href="/#about" class="nav-menu-font-size">About</a></li>
-      <li><a href="#" class="nav-menu-font-size">Join</a></li>
+      <li><a href="{% url 'join-community' %}" class="nav-menu-font-size">Join</a></li>
       <li><a href="{{ org.blog_url }}" target="_blank" class="nav-menu-font-size">Blog</a></li>
       <li><a class="dropdown-trigger-sidenav nav-menu-font-size" href="#organisation" data-target="organisation-dropdown">Organisation <i class="fa fa-caret-down"></i></a></li>
       <li><a class="dropdown-trigger-sidenav nav-menu-font-size" href="#contributors" data-target="contributors-dropdown">Contributors <i class="fa fa-caret-down"></i></a></li>
@@ -114,6 +114,25 @@
       </div>
     </div>
 
+    <div class="apply-flex form-submission-popup">
+      <div class="form-submission-message">
+        <div class="apply-flex close-form">
+          <i class="fa fa-times" aria-hidden="true"></i>
+        </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 message text-justify">
+          <h6>You request to join community, form has been submitted! You will receive
+          an invite email within 24hrs, if all the validation checks are passed. Else, you
+          will receive an email with the information regarding what all checks got failed!</h6>
+          <h6>Enjoy Coding 'n' Learning</h6>
+        </div>
+      </div>
+    </div>
+
     <div class="main-content">
       {% block main-content %}
       {% endblock %}
diff --git a/templates/index.html b/templates/index.html
index d464c6d2..01ab3414 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -97,7 +97,7 @@ <h4 style="margin-top: 0">{{ team_name }}</h4>
   </div>
 
   <div class="join-btn apply-flex center-content">
-    <a href="#" id="join" class="waves-effect waves-light btn-large">
+    <a href="{% url 'join-community' %}" id="join" class="waves-effect waves-light btn-large">
       <b>Want to join {{ org.name }}?</b>
     </a>
   </div>
diff --git a/templates/join_community.html b/templates/join_community.html
new file mode 100644
index 00000000..72f43830
--- /dev/null
+++ b/templates/join_community.html
@@ -0,0 +1,76 @@
+{% extends 'base.html' %}
+{% load staticfiles %}
+
+{% block add_css_files %}
+  <link rel="stylesheet" href="{% static 'css/join-community.css' %}">
+{% endblock %}
+
+{% block add_js_files %}
+{% endblock %}
+
+{% block main-content %}
+  <div class="web-page-details apply-flex center-content">
+    <h3 style="padding-right: 15px">~</h3>
+    <div class="page-name">
+      <h3>Join Community</h3>
+    </div>
+    <h3 style="padding-left: 15px">~</h3>
+  </div>
+  <div class="apply-flex center-content">
+    <form name="{{ join_community_form_name }}" method="post" netlify-honeypot="bot-field"
+        class="join-community-form" data-netlify="true" action="/?form_submitted=True">
+    {% csrf_token %}
+    {% for field in join_community_form %}
+      <div class="row">
+        <div class="input-field col s12">
+          <p>
+            {{ field.label_tag }}
+          </p>
+          {{ field }}
+        </div>
+      </div>
+    {% endfor %}
+    <div class="validation-checkboxes">
+      <p>
+        <label>
+          <input type="checkbox" required>
+          <span>
+            I have requested access to
+            <a href="{{ gitlab_newcomers_group_url }}" class="bold-text">
+              {{ org.name }} Newcomers Group
+            </a>
+            on GitLab
+          </span>
+        </label>
+      </p>
+      <p>
+        <label>
+          <input type="checkbox" required>
+          <span>I have not created my GitHub or GitLab account in the last 60 minutes.</span>
+        </label>
+      </p>
+      <p>
+        <label>
+          <input type="checkbox" required>
+          <span>All of the above information provided by me has no false entries. If so, I am liable
+            of getting blacklisted.</span>
+        </label>
+      </p>
+      <p style="display: none">
+        <label>
+          <input type="checkbox" name="bot-field">
+          <span>I am a bot</span>
+        </label>
+      </p>
+      <p>
+        <strong>
+          Note: You will receive an invite email within 24 hrs, if all the validation checks are passed.
+        </strong>
+      </p>
+    </div>
+    <div class="apply-flex center-content submit-btn">
+      <input class="waves-effect waves-light btn-large large-font" type="submit" value="Submit">
+    </div>
+    </form>
+  </div>
+{% endblock %}