Skip to content

Commit c892642

Browse files
committed
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 #89, #266
1 parent 161bc93 commit c892642

File tree

9 files changed

+255
-7
lines changed

9 files changed

+255
-7
lines changed

community/forms.py

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
from django import forms
2+
3+
4+
class JoinCommunityForm(forms.Form):
5+
6+
github_username = forms.CharField(
7+
max_length=50, label='GitHub Username',
8+
widget=forms.TextInput(
9+
attrs={
10+
'placeholder': 'Make sure to NOT enter your github profile url',
11+
'autocomplete': 'off'
12+
}
13+
)
14+
)
15+
gh_first_repo = forms.URLField(
16+
required=False, label='GitHub Personal Repository',
17+
widget=forms.URLInput(
18+
attrs={
19+
'placeholder': 'A valid github url of your personal repository',
20+
'autocomplete': 'off'
21+
}
22+
)
23+
)
24+
gh_git_training_exercise = forms.URLField(
25+
required=False, label='From which GitHub repository you have done git'
26+
' training?',
27+
widget=forms.URLInput(
28+
attrs={
29+
'placeholder': 'A valid github url of git training repository',
30+
'autocomplete': 'off'
31+
}
32+
)
33+
)
34+
gh_most_contributed_repo = forms.URLField(
35+
required=False,
36+
label="GitHub Repository to which you've contributed most!",
37+
widget=forms.URLInput(
38+
attrs={
39+
'placeholder': 'A valid github public repository url',
40+
'autocomplete': 'off'
41+
}
42+
)
43+
)
44+
45+
gitlab_user_id = forms.IntegerField(
46+
label='GitLab User ID',
47+
widget=forms.NumberInput(
48+
attrs={
49+
'placeholder': 'Make sure to NOT enter your gitlab profile url',
50+
'autocomplete': 'off'
51+
}
52+
)
53+
)
54+
gl_first_repo_id = forms.IntegerField(
55+
required=False, label='GitLab Personal Project ID',
56+
widget=forms.NumberInput(
57+
attrs={
58+
'placeholder': 'Your personal gitlab project ID',
59+
'autocomplete': 'off'
60+
}
61+
)
62+
)
63+
gl_git_training_exercise = forms.IntegerField(
64+
required=False, label='From which GitLab project you have done git'
65+
' training?',
66+
widget=forms.NumberInput(
67+
attrs={
68+
'placeholder': 'A valid project ID of Git training project',
69+
'autocomplete': 'off'
70+
}
71+
)
72+
)
73+
gl_most_contributed_repo_id = forms.IntegerField(
74+
required=False,
75+
label="GitLab Project to which you've contributed most!",
76+
widget=forms.NumberInput(
77+
attrs={
78+
'placeholder': 'A valid ID of gitlab public project',
79+
'autocomplete': 'off',
80+
}
81+
)
82+
)

community/urls.py

+7-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
from django.conf.urls.static import static
77
from django.conf import settings
88

9-
from community.views import HomePageView
9+
from community.views import HomePageView, JoinCommunityView
1010
from gci.views import GCIStudentsList
1111
from gci.feeds import LatestTasksFeed as gci_tasks_rss
1212
from twitter.view_twitter import index as twitter_index
@@ -79,6 +79,12 @@ def get_organization():
7979
distill_func=get_index,
8080
distill_file='index.html',
8181
),
82+
distill_url(
83+
r'^join/', JoinCommunityView.as_view(),
84+
name='join-community',
85+
distill_func=get_index,
86+
distill_file='join/index.html',
87+
),
8288
distill_url(
8389
r'gci/tasks/rss.xml', gci_tasks_rss(),
8490
name='gci-tasks-rss',

community/views.py

+22
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import os
2+
13
import logging
24

35
import requests
@@ -10,10 +12,15 @@
1012
get_org_name,
1113
get_remote_url
1214
)
15+
from .forms import JoinCommunityForm
1316
from data.models import Team
1417
from gamification.models import Participant as GamificationParticipant
1518
from meta_review.models import Participant as MetaReviewer
1619

20+
GL_NEWCOMERS_GRP = 'https://gitlab.com/{}/roles/newcomers'.format(
21+
get_org_name()
22+
)
23+
1724

1825
def initialize_org_context_details():
1926
org_name = get_org_name()
@@ -107,3 +114,18 @@ def get_context_data(self, **kwargs):
107114
context['top_gamification_users'] = self.get_top_gamification_users(
108115
count=5)
109116
return context
117+
118+
119+
class JoinCommunityView(TemplateView):
120+
121+
template_name = 'join_community.html'
122+
123+
def get_context_data(self, **kwargs):
124+
context = super().get_context_data(**kwargs)
125+
context = get_header_and_footer(context)
126+
context['join_community_form'] = JoinCommunityForm()
127+
context['gitlab_newcomers_group_url'] = GL_NEWCOMERS_GRP
128+
context['join_community_form_name'] = os.environ.get(
129+
'JOIN_COMMUNITY_FORM_NAME', None
130+
)
131+
return context

static/css/join-community.css

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.join-community-form .row {
2+
margin: 5px auto;
3+
}
4+
5+
.join-community-form .row .input-field,
6+
.join-community-form p {
7+
margin: 0 auto;
8+
}
9+
10+
.join-community-form label{
11+
font-size: 1.3em;
12+
color: black;
13+
}
14+
15+
.join-community-form ::placeholder{
16+
color: gray;
17+
}
18+
19+
.validation-checkboxes {
20+
padding: 0 15px;
21+
}
22+
23+
.submit-btn{
24+
margin: 15px;
25+
}

static/css/main.css

+13-2
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,8 @@ body {
5353
padding: 5px 10px;
5454
}
5555

56-
.form-popup {
56+
.form-popup,
57+
.form-submission-popup {
5758
width: 100%;
5859
height: 100%;
5960
justify-content: center;
@@ -82,7 +83,8 @@ footer .social-buttons {
8283
font-size: larger;
8384
}
8485

85-
.login-form {
86+
.login-form,
87+
.form-submission-message {
8688
width: 30%;
8789
min-width: 340px;
8890
background-color: white;
@@ -168,6 +170,11 @@ p {
168170
display: inline-flex;
169171
}
170172

173+
.message {
174+
padding: 10px;
175+
text-align: justify;
176+
}
177+
171178
.search-field {
172179
border-radius: 100px;
173180
box-shadow: 0 0 25px 2px black;
@@ -201,6 +208,10 @@ p {
201208
float: none;
202209
}
203210

211+
strong {
212+
font-weight: bold;
213+
}
214+
204215
.student {
205216
padding-bottom: 20px;
206217
}

static/js/main.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1-
/* globals Cookies, netlify */
1+
/* globals Cookies, netlify, URLSearchParams */
22
$(document).ready(function(){
33

44
var login_user_el = $('.login-user');
55
var logout_user_el = $('.user-logout');
66

7+
var urlParams = new URLSearchParams(location.search);
8+
var formSubmitted = urlParams.get('form_submitted');
9+
if(formSubmitted==='True'){
10+
$('.form-submission-popup').css('display', 'block');
11+
}
12+
713
function activate_dropdown(){
814
if ($('nav').width() < 992 ){
915
$(".dropdown-trigger-sidenav").dropdown({coverTrigger: false});
@@ -102,6 +108,7 @@ $(document).ready(function(){
102108

103109
$('.close-form').click(function () {
104110
$('.form-popup').css('display', 'none');
111+
$('.form-submission-popup').css('display', 'none');
105112
$('.oauth-error').css('display', 'none');
106113
});
107114

templates/base.html

+21-2
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
<ul class="right hide-on-med-and-down nav-menu-font-size">
3535
<li><a href="{% url 'index' %}" class="nav-menu-font-size">Home</a></li>
3636
<li><a href="/#about" class="nav-menu-font-size">About</a></li>
37-
<li><a href="#" class="nav-menu-font-size">Join</a></li>
37+
<li><a href="{% url 'join-community' %}" class="nav-menu-font-size">Join</a></li>
3838
<li><a href="{{ org.blog_url }}" target="_blank" class="nav-menu-font-size">Blog</a></li>
3939
<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>
4040
<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 @@
4949

5050
<ul class="sidenav bold-text" id="mobile-menu">
5151
<li><a href="/#about" class="nav-menu-font-size">About</a></li>
52-
<li><a href="#" class="nav-menu-font-size">Join</a></li>
52+
<li><a href="{% url 'join-community' %}" class="nav-menu-font-size">Join</a></li>
5353
<li><a href="{{ org.blog_url }}" target="_blank" class="nav-menu-font-size">Blog</a></li>
5454
<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>
5555
<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>
@@ -115,6 +115,25 @@
115115
</div>
116116
</div>
117117

118+
<div class="apply-flex form-submission-popup">
119+
<div class="form-submission-message">
120+
<div class="apply-flex close-form">
121+
<i class="fa fa-times" aria-hidden="true"></i>
122+
</div>
123+
<span class="apply-flex organizations">
124+
<img src="{{ org.logo_url }}" class="org-logo" alt="org-logo">
125+
<i class="fa fa-plus" aria-hidden="true"></i>
126+
<img src="//flaviocopes.com/netlify/banner.png" class="netlify-image" alt="netlify-logo">
127+
</span>
128+
<div class="apply-flex message text-justify">
129+
<h6>You request to join community, form has been submitted! You will receive
130+
an invite email within 24hrs, if all the validation checks are passed. Else, you
131+
will receive an email with the information regarding what all checks got failed!</h6>
132+
<h6>Enjoy Coding 'n' Learning</h6>
133+
</div>
134+
</div>
135+
</div>
136+
118137
<div class="main-content">
119138
{% block main-content %}
120139
{% endblock %}

templates/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ <h4 style="margin-top: 0">{{ team_name }}</h4>
9797
</div>
9898

9999
<div class="join-btn apply-flex center-content">
100-
<a href="#" id="join" class="waves-effect waves-light btn-large">
100+
<a href="{% url 'join-community' %}" id="join" class="waves-effect waves-light btn-large">
101101
<b>Want to join {{ org.name }}?</b>
102102
</a>
103103
</div>

templates/join_community.html

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
{% extends 'base.html' %}
2+
{% load staticfiles %}
3+
4+
{% block add_css_files %}
5+
<link rel="stylesheet" href="{% static 'css/join-community.css' %}">
6+
{% endblock %}
7+
8+
{% block add_js_files %}
9+
{% endblock %}
10+
11+
{% block main-content %}
12+
<div class="web-page-details apply-flex center-content">
13+
<h3 style="padding-right: 15px">~</h3>
14+
<div class="page-name">
15+
<h3>Join Community</h3>
16+
</div>
17+
<h3 style="padding-left: 15px">~</h3>
18+
</div>
19+
<div class="apply-flex center-content">
20+
<form name="{{ join_community_form_name }}" method="post" netlify-honeypot="bot-field"
21+
class="join-community-form" data-netlify="true" action="/?form_submitted=True">
22+
{% csrf_token %}
23+
{% for field in join_community_form %}
24+
<div class="row">
25+
<div class="input-field col s12">
26+
<p>
27+
<label for="{{ field.name }}">{{ field.label }}</label>
28+
</p>
29+
{{ field }}
30+
</div>
31+
</div>
32+
{% endfor %}
33+
<div class="validation-checkboxes">
34+
<p>
35+
<label>
36+
<input type="checkbox" required>
37+
<span>
38+
I have requested access to
39+
<a href="{{ gitlab_newcomers_group_url }}" class="bold-text">
40+
{{ org.name }} Newcomers Group
41+
</a>
42+
on GitLab
43+
</span>
44+
</label>
45+
</p>
46+
<p>
47+
<label>
48+
<input type="checkbox" required>
49+
<span>I have not created my GitHub or GitLab account in the last 60 minutes.</span>
50+
</label>
51+
</p>
52+
<p>
53+
<label>
54+
<input type="checkbox" required>
55+
<span>All of the above information provided by me has no false entries. If so, I am liable
56+
of getting blacklisted.</span>
57+
</label>
58+
</p>
59+
<p style="display: none">
60+
<label>
61+
<input type="checkbox" name="bot-field">
62+
<span>I am a bot</span>
63+
</label>
64+
</p>
65+
<p>
66+
<strong>
67+
Note: You will receive an invite email within 24 hrs, if all the validation checks are passed.
68+
</strong>
69+
</p>
70+
</div>
71+
<div class="apply-flex center-content submit-btn">
72+
<input class="waves-effect waves-light btn-large large-font" type="submit" value="Submit">
73+
</div>
74+
</form>
75+
</div>
76+
{% endblock %}

0 commit comments

Comments
 (0)