Feature/member edit ux (#698)

Co-authored-by: Mark Janssen <[email protected]> Co-authored-by: HeleenSG <[email protected]> Co-authored-by: Jeroen Dekkers <[email protected]> Co-authored-by: Patrick <[email protected]>
minvws · Apr 24, 2023 · af08d69 · af08d69
1 parent 977cfd5
commit af08d69
Show file tree

Hide file tree

Showing 29 changed files with 296 additions and 121 deletions.
diff --git a/rocky/.ci/docker-compose.yml b/rocky/.ci/docker-compose.yml
@@ -13,6 +13,7 @@ services:
     volumes:
       - .:/app/rocky
       - ./.ci/run_rocky.sh:/app/run_rocky.sh
+      - ../octopoes/octopoes:/app/rocky/octopoes
     env_file:
       - .ci/.env.test
 

diff --git a/rocky/account/forms/account_setup.py b/rocky/account/forms/account_setup.py
@@ -5,7 +5,7 @@
 from django.contrib.auth.password_validation import validate_password
 from django.utils.translation import gettext_lazy as _
 from tools.enums import SCAN_LEVEL
-from tools.forms.base import BaseRockyForm
+from tools.forms.base import BaseRockyForm, BaseRockyModelForm
 from tools.models import (
     GROUP_ADMIN,
     GROUP_CLIENT,
@@ -135,7 +135,7 @@ def set_user(self):
         )
 
 
-class OrganizationMemberAddForm(UserAddForm, forms.ModelForm):
+class OrganizationMemberAddForm(UserAddForm, BaseRockyModelForm):
     """
     Form to add a new member
     """
@@ -172,18 +172,28 @@ class Meta:
         fields = ("account_type", "name", "email", "password")
 
 
-class OrganizationMemberEditForm(forms.ModelForm):
+class OrganizationMemberEditForm(BaseRockyModelForm):
     trusted_clearance_level = forms.ChoiceField(
         required=False,
-        label=_("Trusted clearance level"),
+        label=_("Assigned clearance level"),
         choices=[(-1, "")] + SCAN_LEVEL.choices,
         help_text=_("Select a clearance level you trust this member with."),
         widget=forms.RadioSelect(attrs={"radio_paws": True}),
     )
 
+    blocked = forms.BooleanField(
+        required=False,
+        label=_("Blocked"),
+        help_text=_("Set the members status to blocked, so they don't have access to the organization anymore."),
+        widget=forms.CheckboxInput(),
+    )
+
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
-
+        self.fields["blocked"].widget.attrs["field_form_label"] = "Status"
+        if self.instance.user.is_superuser:
+            self.fields["trusted_clearance_level"].disabled = True
+        self.fields["acknowledged_clearance_level"].label = _("Accepted clearance level")
         self.fields["acknowledged_clearance_level"].required = False
         self.fields["acknowledged_clearance_level"].widget.attrs[
             "fixed_paws"
@@ -202,10 +212,10 @@ def save(self, commit=True):
 
     class Meta:
         model = OrganizationMember
-        fields = ["status", "trusted_clearance_level", "acknowledged_clearance_level"]
+        fields = ["blocked", "trusted_clearance_level", "acknowledged_clearance_level"]
 
 
-class OrganizationForm(forms.ModelForm):
+class OrganizationForm(BaseRockyModelForm):
     """
     Form to create a new organization.
     """

diff --git a/rocky/account/mixins.py b/rocky/account/mixins.py
@@ -44,7 +44,7 @@ def setup(self, request, *args, **kwargs):
         except OrganizationMember.DoesNotExist:
             raise Http404()
 
-        if self.organization_member.status == OrganizationMember.STATUSES.BLOCKED:
+        if self.organization_member.blocked:
             raise PermissionDenied()
 
         self.octopoes_api_connector = OctopoesAPIConnector(settings.OCTOPOES_API, organization_code)

diff --git a/rocky/account/models.py b/rocky/account/models.py
@@ -104,10 +104,7 @@ def organizations(self) -> List[Organization]:
         """
         if self.is_superuser:
             return self.all_organizations
-        return [
-            m.organization
-            for m in filter(lambda o: o.status is not OrganizationMember.STATUSES.BLOCKED, self.organization_members)
-        ]
+        return [m.organization for m in self.organization_members if not m.blocked]
 
     @cached_property
     def organizations_including_blocked(self) -> List[Organization]:

diff --git a/rocky/assets/src/bundles/app/css/main.scss b/rocky/assets/src/bundles/app/css/main.scss
@@ -12,6 +12,8 @@
 @import "vendors/graph-override.scss";
 @import "vendors/two-factor.scss";
 @import "vendors/manon-overrides/dl.scss";
+@import "vendors/manon-overrides/form-radio.scss";
+@import "vendors/manon-overrides/form-fieldset-required.scss";
 @import "vendors/manon-overrides/link.scss";
 @import "vendors/manon-overrides/tile.scss";
 

diff --git a/rocky/assets/src/bundles/app/css/themes/soft/manon/form-fieldset.scss b/rocky/assets/src/bundles/app/css/themes/soft/manon/form-fieldset.scss
@@ -0,0 +1,5 @@
+/* Form fieldset - Variables */
+
+:root {
+  --form-horizontal-view-fieldset-label-margin-top: 0;
+}
diff --git a/rocky/assets/src/bundles/app/css/themes/soft/manon/form-radio.scss b/rocky/assets/src/bundles/app/css/themes/soft/manon/form-radio.scss
@@ -0,0 +1,5 @@
+/* Form fieldset - Variables */
+
+:root {
+  --form-radio-margin: 0.25rem var(--form-radio-margin-right) 0.25rem 0;
+}
diff --git a/rocky/assets/src/bundles/app/css/themes/soft/manon/form.scss b/rocky/assets/src/bundles/app/css/themes/soft/manon/form.scss
@@ -20,4 +20,7 @@
 
   /* Fieldset */
   --form-fieldset-legend-font-weight: 600;
+
+  /* Nota bene */
+  --form-horizontal-view-fieldset-nota-bene-required-margin-bottom: 0.5rem;
 }
diff --git a/rocky/assets/src/bundles/app/css/themes/soft/soft.scss b/rocky/assets/src/bundles/app/css/themes/soft/soft.scss
@@ -25,6 +25,8 @@
 @import "manon/button-icon"; /* Icon button */
 @import "manon/description-list";
 @import "manon/filter";
+@import "manon/form-fieldset";
+@import "manon/form-radio";
 @import "manon/layout";
 @import "manon/login-meta";
 @import "manon/navigation";

diff --git a/rocky/assets/src/bundles/app/css/vendors/manon-overrides/form-fieldset-required.scss b/rocky/assets/src/bundles/app/css/vendors/manon-overrides/form-fieldset-required.scss
@@ -0,0 +1,16 @@
+/* Form fieldset required */
+
+form.horizontal-view div.required  {
+
+    label {
+        margin-top: calc(var(--form-horizontal-view-fieldset-nota-bene-required-margin-bottom) + var(--form-input-min-height) /2);
+    }
+
+    .help-button {
+        margin-top: calc(var(--form-horizontal-view-fieldset-nota-bene-required-margin-bottom) + var(--form-input-min-height) /2);
+    }
+
+    select + div + .help-button {
+        margin-top: 2rem;
+    }
+}
diff --git a/rocky/assets/src/bundles/app/css/vendors/manon-overrides/form-radio.scss b/rocky/assets/src/bundles/app/css/vendors/manon-overrides/form-radio.scss
@@ -0,0 +1,5 @@
+/* Form radio */
+
+form input[type="radio"] {
+  margin: var(--form-radio-margin);
+}
diff --git a/rocky/onboarding/views.py b/rocky/onboarding/views.py
@@ -355,6 +355,7 @@ def post(self, request, *args, **kwargs):
     def set_member_onboarded(self):
         member = OrganizationMember.objects.get(user=self.request.user, organization=self.organization)
         member.onboarded = True
+        member.status = OrganizationMember.STATUSES.ACTIVE
         member.save()
 
 
@@ -648,5 +649,6 @@ def get(self, request, *args, **kwargs):
             redteam_group.user_set.add(self.request.user)
             return redirect(reverse("step_introduction", kwargs={"organization_code": self.organization.code}))
         member.onboarded = True
+        member.status = OrganizationMember.STATUSES.ACTIVE
         member.save()
         return redirect(reverse("crisis_room"))
diff --git a/rocky/rocky/templates/organizations/organization_member_add.html b/rocky/rocky/templates/organizations/organization_member_add.html
@@ -4,7 +4,7 @@
 {% load static %}
 
 {% block content %}
-    {% include "header.html" with view_type="onboarding" %}
+    {% include "header.html" %}
 
     <main id="main-content">
         <section>

diff --git a/rocky/rocky/templates/organizations/organization_member_list.html b/rocky/rocky/templates/organizations/organization_member_list.html
@@ -11,8 +11,8 @@
             <div>
                 <h1>{% translate "Organization" %}: {{ organization.name }}</h1>
                 {% blocktranslate with organization_name=organization.name %}
-          An overview of "{{ organization_name }}" its members.
-{% endblocktranslate %}
+                    An overview of "{{ organization_name }}" its members.
+                {% endblocktranslate %}
                 <h2>{% translate "Members" %}</h2>
                 {% if perms.tools.add_organizationmember %}
                     <div class="horizontal-view toolbar">
@@ -33,7 +33,7 @@ <h2>{% translate "Members" %}</h2>
                                 <th>{% translate "Status" %}</th>
                                 <th>{% translate "Added" %}</th>
                                 <th>{% translate "Assigned clearance level" %}</th>
-                                <th>{% translate "Agreed clearance level" %}</th>
+                                <th>{% translate "Accepted clearance level" %}</th>
                                 <th>{% translate "Edit" %}</th>
                                 <th>{% translate "Blocked" %}</th>
                             </tr>
@@ -60,7 +60,8 @@ <h2>{% translate "Members" %}</h2>
                                             {% if member.user.is_superuser %}
                                                 <span class="active"></span><span>&nbsp;{% translate "Active" %}</span>
                                             {% else %}
-                                                <span class="{{ member.status }}"></span><span>&nbsp;{{ member.status|title }}</span>
+                                                <span class="{% if member.blocked %}blocked{% else %}{{ member.status }}{% endif %}"></span>
+                                                <span>&nbsp;{% if member.blocked %}{% translate "Blocked" %}{% else %}{{ member.status|title }}{% endif %}</span>
                                             {% endif %}
                                             <br>
                                         </td>
@@ -88,17 +89,22 @@ <h2>{% translate "Members" %}</h2>
                                             {% endif %}
                                         </td>
                                         <td>
-                                            <a href="{% url "organization_member_edit" organization.code member.id %}">
-                                                <button class="icon ti-edit action-button">{% translate "Edit" %}</button>
-                                            </a>
+                                            {% if member.user.is_superuser %}
+                                                <button class="icon ti-edit action-button disabled">{% translate "Edit" %}</button>
+                                            {% else %}
+                                                <a href="{% url "organization_member_edit" organization.code member.id %}"><button class="icon ti-edit action-button">{% translate "Edit" %}</button></a>
+                                            {% endif %}
                                         </td>
                                         <td>
-                                            {% if member.status == "blocked" %}
+                                            {% if member.blocked %}
                                                 {% include "partials/single_action_checkbox_form.html" with input_checked=member.blocked input_disabled=member.user.is_superuser action="unblock" key="member_id" value=member.id %}
-
                                             {% else %}
-                                                {% include "partials/single_action_checkbox_form.html" with input_checked=member.blocked input_disabled=member.user.is_superuser action="block" key="member_id" value=member.id %}
-
+                                            {% comment %} Disable the "block" checkbox for members that are super users or for the member of the user that's logged in so they can't lock themself out of the organisation by accident{% endcomment %}
+                                                {% if member.user.is_superuser or member.user.email == request.user.email %}
+                                                    {% include "partials/single_action_checkbox_form.html" with input_checked=member.blocked input_disabled="disabled" action="block" key="member_id" value=member.id %}
+                                                  {% else %}
+                                                    {% include "partials/single_action_checkbox_form.html" with input_checked=member.blocked action="block" key="member_id" value=member.id %}
+                                                {% endif %}
                                             {% endif %}
                                         </td>
                                     </tr>

diff --git a/rocky/rocky/templates/partials/form/field_input.html b/rocky/rocky/templates/partials/form/field_input.html
@@ -1,46 +1,45 @@
 {% load i18n %}
 
-<fieldset>
-    <legend>
-        {{ field.label_tag }}
-    </legend>
-    {% if form_view != "vertical" %}
-        <div {% if field.field.required %} class="required"{% endif %}>
-            {% if field.field.required %}
-                <span class="nota-bene">{% translate "This field is required" %}</span>
-            {% endif %}
-            {% if not field.field.widget.attrs.fixed_paws %}
-                {{ field }}
-            {% elif field.field.widget.attrs.fixed_paws < 0 %}
-                {% translate "Unset" %}
-            {% else %}
-                {% include "partials/scan_level_indicator.html" with value=field.field.widget.attrs.fixed_paws custom_class=field.field.widget.attrs.class %}
+<div {% if field.field.required %} class="required"{% endif %}>
+  {{ field.label_tag }}
 
-            {% endif %}
-            {% include "partials/form/field_input_help_text.html" with help_text=field.help_text %}
-            {% include "partials/form/field_input_errors.html" %}
-
-            {% if form_name == 'login' and field.name == "username" %}
-                <div class="input-link">
-                    <a href="{% url 'recover_email' %}">{% translate "Forgot email" %}</a>
-                </div>
-            {% endif %}
-            {% if form_name == 'login' and field.name == "password" %}
-                <div class="input-link">
-                    <a href="{% url 'password_reset' %}">{% translate "Forgot password" %}</a>
-                </div>
-            {% endif %}
-        </div>
-    </fieldset>
-{% else %}
-    {{ field.label_tag }}
-    <div {% if field.field.required %} class="required"{% endif %}>
+  {% if form_view != "vertical" %}
+    <div>
         {% if field.field.required %}
             <span class="nota-bene">{% translate "This field is required" %}</span>
         {% endif %}
-        {{ field }}
+        {% if not field.field.widget.attrs.fixed_paws %}
+            {{ field }}
+        {% elif field.field.widget.attrs.fixed_paws < 0 %}
+            {% translate "Not set" %}
+        {% else %}
+            {% include "partials/scan_level_indicator.html" with value=field.field.widget.attrs.fixed_paws custom_class=field.field.widget.attrs.class %}
+        {% endif %}
+
         {% include "partials/form/field_input_help_text.html" with help_text=field.help_text %}
         {% include "partials/form/field_input_errors.html" %}
 
+        {% if form_name == "login" and field.name == "username" %}
+            <div class="input-link">
+                <a href="{% url "recover_email" %}">{% translate "Forgot email" %}</a>
+            </div>
+        {% endif %}
+        {% if form_name == "login" and field.name == "password" %}
+            <div class="input-link">
+                <a href="{% url "password_reset" %}">{% translate "Forgot password" %}</a>
+            </div>
+        {% endif %}
     </div>
-{% endif %}
+  {% else %}
+      <div>
+          {% if field.field.required %}
+              <span class="nota-bene">{% translate "This field is required" %}</span>
+          {% endif %}
+
+          {{ field }}
+
+          {% include "partials/form/field_input_help_text.html" with help_text=field.help_text %}
+          {% include "partials/form/field_input_errors.html" %}
+      </div>
+  {% endif %}
+</div>
diff --git a/rocky/rocky/templates/partials/form/field_input_checkbox.html b/rocky/rocky/templates/partials/form/field_input_checkbox.html
@@ -2,18 +2,21 @@
 
 {% if field.field.widget.allow_multiple_selected %}
     {% include "partials/form/field_input.html" %}
-
 {% else %}
-    <div class="checkbox {% if field.field.required %}required{% endif %}">
-        {% if field.field.required %}
-            <span class="nota-bene">{% translate "This field is required" %}</span>
-        {% endif %}
-        <div class="horizontal-view">
-            {{ field }}
-            {{ field.label_tag }}
-        </div>
-        {% include "partials/form/field_input_help_text.html" with help_text=field.help_text %}
-        {% include "partials/form/field_input_errors.html" %}
+<div class="{% if field.field.required %}required{% endif %}">
+  <label>
+      {{ field.field.widget.attrs.field_form_label }}
+  </label>
+  <div>
+    {% if field.field.required %}
+        <span class="nota-bene">{% translate "This field is required" %}</span>
+    {% endif %}
+
+    {{ field }}
+    {{ field.label_tag }}
 
-    </div>
+    {% include "partials/form/field_input_help_text.html" with help_text=field.help_text %}
+    {% include "partials/form/field_input_errors.html" %}
+  </div>
+</div>
 {% endif %}
diff --git a/rocky/rocky/templates/partials/form/field_input_radio.html b/rocky/rocky/templates/partials/form/field_input_radio.html
@@ -1,7 +1,6 @@
-<fieldset>
-    <legend>
-        {{ field.label_tag }}
-    </legend>
+<div>
+    {{ field.label_tag }}
+
     {% for choice in field %}
         <div class="horizontal-view">
             <input type="{% if choice.data.value < 0 %}hidden{% else %}radio{% endif %}"
@@ -13,7 +12,6 @@
             <label>
                 {% if choice.data.attrs.radio_paws %}
                     {% include "partials/scan_level_indicator.html" with value=choice.data.value custom_class=choice.data.attrs.class %}
-
                 {% else %}
                     {{ choice.choice_label }}
                 {% endif %}
@@ -23,4 +21,4 @@
 
         </div>
     {% endfor %}
-</fieldset>
+</div>
diff --git a/rocky/rocky/templates/partials/form/field_input_wrapper.html b/rocky/rocky/templates/partials/form/field_input_wrapper.html
@@ -1,8 +1,6 @@
 {# include template for input type, with fallback field_input.html #}
 {% if field.field.widget.input_type in "checkbox,radio,hidden" %}
     {% include "partials/form/field_input_"|add:field.field.widget.input_type|add:".html" %}
-
 {% else %}
     {% include "partials/form/field_input.html" %}
-
 {% endif %}
diff --git a/rocky/rocky/templates/partials/form/fieldset.html b/rocky/rocky/templates/partials/form/fieldset.html
@@ -9,7 +9,6 @@
     {% for field in fields %}
         {% if not fieldset or field.name in fieldset.split %}
             {% include "partials/form/field_input_wrapper.html" %}
-
         {% endif %}
     {% endfor %}
 </fieldset>