* Add form validation to the invite users forms.

bgroff · Jun 28, 2018 · bcc6743 · bcc6743
1 parent d32761e
commit bcc6743
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 40 deletions.
diff --git a/django_kala/auth/forms/invite_user.py b/django_kala/auth/forms/invite_user.py
@@ -13,6 +13,8 @@ def __init__(self, *args, **kwargs):
         super(InviteUserForm, self).__init__(*args, **kwargs)
         self.fields['organizations'].widget.attrs['class'] = 'ui fluid dropdown'
         self.fields['user_type'].widget.attrs['class'] = 'ui fluid dropdown'
+        self.fields['first_name'].required = True
+        self.fields['last_name'].required = True
 
     def save(self, commit=True):
         self.instance.is_active = False

diff --git a/django_kala/auth/templates/invite_user.html b/django_kala/auth/templates/invite_user.html
@@ -12,30 +12,54 @@ <h2 class="active section">Invite User
         </div>
         <div class="ui divider"></div>
     </div>
-    {{ form.errors }}
     <div class="ui one column grid container">
         <div class="twelve wide column">
-            <form class="ui form" method="post" enctype="multipart/form-data">
+            <form class="ui form {% if form.errors %}error{% endif %}" method="post">
                 {% csrf_token %}
                 <div class="field">
                     <label>{{ form.email.label }}</label>
                     {{ form.email }}
+                    {% if form.email.errors %}
+                    <div class="ui error message">
+                        {{ form.email.errors }}
+                    </div>
+                    {% endif %}
                 </div>
                 <div class="field">
                     <label>{{ form.first_name.label }}</label>
                     {{ form.first_name }}
+                    {% if form.first_name.errors %}
+                    <div class="ui error message">
+                        {{ form.first_name.errors }}
+                    </div>
+                    {% endif %}
                 </div>
                 <div class="field">
                     <label>{{ form.last_name.label }}</label>
                     {{ form.last_name }}
+                    {% if form.last_name.errors %}
+                    <div class="ui error message">
+                        {{ form.last_name.errors }}
+                    </div>
+                    {% endif %}
                 </div>
                 <div class="field">
                     <label>{{ form.organizations.label }}</label>
                     {{ form.organizations }}
+                    {% if form.organizations.errors %}
+                    <div class="ui error message">
+                        {{ form.organizations.errors }}
+                    </div>
+                    {% endif %}
                 </div>
                 <div class="field">
                     <label>{{ form.user_type.label }}</label>
                     {{ form.user_type }}
+                    {% if form.user_type.errors %}
+                    <div class="ui error message">
+                        {{ form.user_type.errors }}
+                    </div>
+                    {% endif %}
                 </div>
                 <button id="submit-button" class="ui button primary" type="submit">Invite user</button>
             </form>

diff --git a/django_kala/projects/forms/invite_user.py b/django_kala/projects/forms/invite_user.py
@@ -11,7 +11,11 @@ def __init__(self, *args, **kwargs):
         else:
             user_type_choice = [['User', 'User']]
 
+        self.fields['first_name'].required = True
+        self.fields['last_name'].required = True
         self.fields['user_type'] = forms.ChoiceField(choices=user_type_choice)
+        self.fields['user_type'].widget.attrs['class'] = 'ui fluid dropdown'
+
 
     class Meta:
         model = get_user_model()

diff --git a/django_kala/projects/templates/documents/invite_user.html b/django_kala/projects/templates/documents/invite_user.html
@@ -51,35 +51,58 @@ <h2 class="active section">Invite User
             </div>
             <div class="ui divider"></div>
         </div>
-        {{ form.errors }}
         <div class="ui one column grid container">
             <div class="twelve wide column">
-                <form class="ui form" method="post" enctype="multipart/form-data">
-                    {% csrf_token %}
-                    <div class="field">
-                        <label>{{ form.email.label }}</label>
-                        {{ form.email }}
+                <form class="ui form {% if form.errors %}error{% endif %}" method="post">
+                {% csrf_token %}
+                <div class="field">
+                    <label>{{ form.email.label }}</label>
+                    {{ form.email }}
+                    {% if form.email.errors %}
+                    <div class="ui error message">
+                        {{ form.email.errors }}
                     </div>
-                    <div class="field">
-                        <label>{{ form.first_name.label }}</label>
-                        {{ form.first_name }}
-                    </div>
-                    <div class="field">
-                        <label>{{ form.last_name.label }}</label>
-                        {{ form.last_name }}
+                    {% endif %}
+                </div>
+                <div class="field">
+                    <label>{{ form.first_name.label }}</label>
+                    {{ form.first_name }}
+                    {% if form.first_name.errors %}
+                    <div class="ui error message">
+                        {{ form.first_name.errors }}
                     </div>
-                    <div class="field">
-                        <label>{{ form.organizations.label }}</label>
-                        {{ form.organizations }}
+                    {% endif %}
+                </div>
+                <div class="field">
+                    <label>{{ form.last_name.label }}</label>
+                    {{ form.last_name }}
+                    {% if form.last_name.errors %}
+                    <div class="ui error message">
+                        {{ form.last_name.errors }}
                     </div>
-                    <div class="field">
-                        <label>{{ form.user_type.label }}</label>
-                        {{ form.user_type }}
+                    {% endif %}
+                </div>
+                <div class="field">
+                    <label>{{ form.user_type.label }}</label>
+                    {{ form.user_type }}
+                    {% if form.user_type.errors %}
+                    <div class="ui error message">
+                        {{ form.user_type.errors }}
                     </div>
+                    {% endif %}
+                </div>
                     <button id="submit-button" class="ui button primary" type="submit">Invite user</button>
                 </form>
             </div>
         </div>
 
     </div>
 {% endblock content %}
+
+{% block scripts %}
+    <script>
+        $('.ui.dropdown')
+            .dropdown()
+        ;
+    </script>
+{% endblock scripts %}
diff --git a/django_kala/projects/templates/projects/invite_user.html b/django_kala/projects/templates/projects/invite_user.html
@@ -47,35 +47,58 @@ <h2 class="active section">Invite User
             </div>
             <div class="ui divider"></div>
         </div>
-        {{ form.errors }}
         <div class="ui one column grid container">
             <div class="twelve wide column">
-                <form class="ui form" method="post" enctype="multipart/form-data">
-                    {% csrf_token %}
-                    <div class="field">
-                        <label>{{ form.email.label }}</label>
-                        {{ form.email }}
+                <form class="ui form {% if form.errors %}error{% endif %}" method="post">
+                {% csrf_token %}
+                <div class="field">
+                    <label>{{ form.email.label }}</label>
+                    {{ form.email }}
+                    {% if form.email.errors %}
+                    <div class="ui error message">
+                        {{ form.email.errors }}
                     </div>
-                    <div class="field">
-                        <label>{{ form.first_name.label }}</label>
-                        {{ form.first_name }}
-                    </div>
-                    <div class="field">
-                        <label>{{ form.last_name.label }}</label>
-                        {{ form.last_name }}
+                    {% endif %}
+                </div>
+                <div class="field">
+                    <label>{{ form.first_name.label }}</label>
+                    {{ form.first_name }}
+                    {% if form.first_name.errors %}
+                    <div class="ui error message">
+                        {{ form.first_name.errors }}
                     </div>
-                    <div class="field">
-                        <label>{{ form.organizations.label }}</label>
-                        {{ form.organizations }}
+                    {% endif %}
+                </div>
+                <div class="field">
+                    <label>{{ form.last_name.label }}</label>
+                    {{ form.last_name }}
+                    {% if form.last_name.errors %}
+                    <div class="ui error message">
+                        {{ form.last_name.errors }}
                     </div>
-                    <div class="field">
-                        <label>{{ form.user_type.label }}</label>
-                        {{ form.user_type }}
+                    {% endif %}
+                </div>
+                <div class="field">
+                    <label>{{ form.user_type.label }}</label>
+                    {{ form.user_type }}
+                    {% if form.user_type.errors %}
+                    <div class="ui error message">
+                        {{ form.user_type.errors }}
                     </div>
+                    {% endif %}
+                </div>
                     <button id="submit-button" class="ui button primary" type="submit">Invite user</button>
                 </form>
             </div>
         </div>
 
     </div>
 {% endblock content %}
+
+{% block scripts %}
+    <script>
+        $('.ui.dropdown')
+            .dropdown()
+        ;
+    </script>
+{% endblock scripts %}