From d34313440f8deb76801a5495226fc3110dd1034a 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             | 10 ++++-
 community/views.py            | 24 ++++++++++
 static/css/join-community.css | 25 +++++++++++
 static/css/main.css           | 20 +++++++--
 static/js/main.js             |  1 +
 templates/base.html           | 25 ++++++++++-
 templates/index.html          |  2 +-
 templates/join_community.html | 70 ++++++++++++++++++++++++++++++
 9 files changed, 251 insertions(+), 8 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 c03de2e2..637f83aa 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, info
+from community.views import HomePageView, info, JoinCommunityView
 from gci.views import index as gci_index
 from gci.feeds import LatestTasksFeed as gci_tasks_rss
 from twitter.view_twitter import index as twitter_index
@@ -79,9 +79,15 @@ 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(
         'info.txt', info,
-        name='index',
+        name='deploy-info',
         distill_func=get_index,
         distill_file='info.txt',
     ),
diff --git a/community/views.py b/community/views.py
index 4f98bebe..d44af09e 100644
--- a/community/views.py
+++ b/community/views.py
@@ -1,3 +1,5 @@
+import os
+
 import logging
 
 import requests
@@ -14,10 +16,15 @@
     get_upstream_deploy_url,
     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,6 +117,23 @@ def get_context_data(self, **kwargs):
             count=5)
         context['top_gamification_users'] = self.get_top_gamification_users(
             count=5)
+        context['form_submitted'] = self.request.GET.get('form_submitted',
+                                                         False)
+        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..826077e1
--- /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;
+}
\ No newline at end of file
diff --git a/static/css/main.css b/static/css/main.css
index 711f7378..02e82289 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -53,15 +53,19 @@ body {
     padding: 5px 10px;
 }
 
-.form-popup {
+.form-popup,
+.form-submission-popup {
     width: 100%;
     height: 100%;
     justify-content: center;
-    display: none;
     opacity:.95;
     position:absolute;
 }
 
+.form-popup {
+    display: none;
+}
+
 footer .footer-icons {
     display: flex;
     flex-wrap: wrap;
@@ -82,7 +86,8 @@ footer .social-buttons {
     font-size: larger;
 }
 
-.login-form {
+.login-form,
+.form-submission-message {
     width: 30%;
     min-width: 340px;
     background-color: white;
@@ -168,6 +173,11 @@ p {
     display: inline-flex;
 }
 
+.message {
+    padding: 10px;
+    text-align: justify;
+}
+
 .search-field {
     border-radius: 100px;
     box-shadow: 0px 0px 25px 2px black;
@@ -202,6 +212,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 1b80a78d..691e1ea7 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -100,6 +100,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 5d2d503e..ff801b90 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="/" 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>
@@ -116,6 +116,27 @@
       </div>
     </div>
 
+    {% if form_submitted %}
+      <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>
+    {% endif %}{# if form_submitted #}
+
     <div class="main-content">
       {% block main-content %}
       {% endblock %}
diff --git a/templates/index.html b/templates/index.html
index 055bfd5f..b12e71ff 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..64ba8922
--- /dev/null
+++ b/templates/join_community.html
@@ -0,0 +1,70 @@
+{% 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>
+            <label for="{{ field.name }}">{{ field.label }}</label>
+          </p>
+          {{ field }}
+        </div>
+      </div>
+    {% endfor %}
+    <div class="validation-checkboxes">
+      <p>
+        <label>
+          <input type="checkbox" required>
+          <span>I've requested access to {{ org.name }} newcomers group on GitLab</span>
+        </label>
+      </p>
+      <p>
+        <label>
+          <input type="checkbox" required>
+          <span>I haven't 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'm 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 %}
\ No newline at end of file