Add "Leave Organization" button

src/apps/api/views/profiles.py

@@ -253,6 +253,18 @@ def validate_invite(self, request):
         mem_ser = MembershipSerializer(membership)
         return Response(mem_ser.data, status=status.HTTP_200_OK)
 
+    @action(detail=True, methods=['delete'], permission_classes=[IsAuthenticated])
+    def leave_organization(self, request, pk=None):
+        organization = self.get_object()
+        try:
+            member = organization.membership_set.get(user=request.user)
+        except Membership.DoesNotExist:
+            raise ValidationError('You are not a member of this organization')
+        if member.group == Membership.OWNER:
+            raise PermissionDenied('The owner cannot leave the organization')
+        organization.users.remove(request.user)
+        return Response({'success': True, 'message': 'You have left the organization'}, status=status.HTTP_200_OK)
+
     @action(detail=True, methods=['delete'])
     def delete_organization(self, request, pk=None):
         try:

src/apps/profiles/views.py

@@ -418,11 +418,14 @@ def get_context_data(self, **kwargs):
             context['organization'] = OrganizationDetailSerializer(self.object).data
         membership = self.object.membership_set.filter(user=self.request.user)
         if len(membership) == 1:
-            context['is_editor'] = membership.first().group in Membership.EDITORS_GROUP
-            context['is_member'] = membership.first().group in Membership.SETTABLE_PERMISSIONS
+            group = membership.first().group
+            context['is_editor'] = group in Membership.EDITORS_GROUP
+            context['is_member'] = group in Membership.SETTABLE_PERMISSIONS
+            context['is_owner'] = group == Membership.OWNER
         else:
             context['is_editor'] = False
             context['is_member'] = False
+            context['is_owner'] = False
 
         return context
 

src/static/js/ours/client.js

@@ -335,6 +335,9 @@ CODALAB.api = {
     delete_organization: (id) => {
         return CODALAB.api.request('DELETE', `${URLS.API}organizations/${id}/delete_organization/`)
     },
+    leave_organization: (id) => {
+        return CODALAB.api.request('DELETE', `${URLS.API}organizations/${id}/leave_organization/`)
+    },
     /*---------------------------------------------------------------------
          Participants
     ---------------------------------------------------------------------*/

src/static/riot/profiles/organization_edit.tag

@@ -56,10 +56,8 @@
             </div>
         </div>
         <div class="ui error message"></div>
-        <div class="ui primary button" onclick="{save.bind(this)}" id="submit_button">Submit</div>
-        <a href="{self.organization.url}">
-            <button type="button" class="ui button">Back to Organization Page</button>
-        </a>
+        <div class="ui right floated primary button" onclick="{save.bind(this)}" id="submit_button">Submit</div>
+        <div class="ui button" onclick="{go_back}">Back to Organization Page</div>
     </form>
     </div>
     <script>
@@ -69,6 +67,10 @@
         self.original_org_photo = self.organization.photo
         delete self.organization.photo
 
+        self.go_back = () => {
+            window.location.href = '/profiles/organization/' + self.organization.id + '/'
+        }
+
 
         self.one("mount", function () {
             self.submit_button = $('#submit_button')

src/templates/profiles/organization_detail.html

@@ -4,16 +4,23 @@
 {% load humanize %}
 
 {% block content %}
-    {% if is_editor %}
+    {% if is_editor or is_member %}
         <div class="ui container" style="margin-bottom: 1em">
-            <a href="{{ organization.url }}edit/"><button type="button" class="ui left floated button">Edit Organization</button></a>
-
-            <button class="ui red right floated button" onclick="{self.delete_organization({{ organization.id }})}" >
-                Delete Organization
-            </button>
-
-
-
+            {% if is_editor %}
+                <a href="{{ organization.url }}edit/"><button type="button" class="ui left floated button">Edit Organization</button></a>
+            {% endif %}
+
+            {% if not is_owner %}
+                <button class="ui orange right floated button" data-org-id="{{ organization.id }}" onclick="leave_organization(this.dataset.orgId)">
+                    Leave Organization
+                </button>
+            {% endif %}
+
+            {% if is_editor %}
+                <button class="ui red right floated button" data-org-id="{{ organization.id }}" onclick="delete_organization(this.dataset.orgId)">
+                    Delete Organization
+                </button>
+            {% endif %}
         </div>
     {% endif %}
     <div class="ui container">
@@ -109,20 +116,36 @@ <h1 class="ui dividing header">Users</h1>
 
 {% block extra_js %}
     <script>
-
-        self.delete_organization = (organization_id) => {
-            if (confirm(`Are you sure you want to permanently delete this organization?`)) {
+        function delete_organization(organization_id) {
+            if (confirm('Are you sure you want to permanently delete this organization?')) {
                 CODALAB.api.delete_organization(organization_id)
                     .done((resp) => {
-                        if(resp.success){
+                        if (resp.success) {
+                            toastr.success(resp.message)
+                            setTimeout(function () { window.location.href = '/'; }, 1000)
+                        } else {
+                            toastr.error(resp.message)
+                        }
+                    })
+                    .fail(() => {
+                        toastr.error('An error has occurred')
+                    })
+            }
+        }
+
+        function leave_organization(organization_id) {
+            if (confirm('Are you sure you want to leave this organization?')) {
+                CODALAB.api.leave_organization(organization_id)
+                    .done((resp) => {
+                        if (resp.success) {
                             toastr.success(resp.message)
-                            setTimeout(function (){window.location.href = '/';}, 1000)
-                        }else{
+                            setTimeout(function () { window.location.href = '/'; }, 1000)
+                        } else {
                             toastr.error(resp.message)
                         }
                     })
-                    .fail((errors) => {
-                        toastr.error('An Error has occurred')
+                    .fail(() => {
+                        toastr.error('An error has occurred')
                     })
             }
         }