From 960566dc8c380b034abfa0d5e51b95cf3648ecc8 Mon Sep 17 00:00:00 2001
From: Clivern <hello@clivern.com>
Date: Mon, 24 Oct 2022 15:22:35 +0200
Subject: [PATCH] feat: allow super admins to update users profile

---
 README.md                                   |  6 +-
 api.yml                                     |  2 +-
 docker-compose-cluster.yml                  |  6 +-
 docker-compose-nginx.yml                    |  2 +-
 docker-compose.yml                          |  2 +-
 docs/index.md                               |  4 +-
 lib/lynx_web/router.ex                      |  2 +-
 lib/lynx_web/templates/page/teams.html.heex | 65 ++++++++++++++++++-
 lib/lynx_web/templates/page/users.html.heex | 65 ++++++++++++++++++-
 mix.exs                                     |  2 +-
 priv/static/theme/app/backend.js            | 72 ++++++++++++++++++++-
 11 files changed, 209 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index db99628..2382934 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 <p align="center">
-    <img alt="Lynx Logo" src="/assets/img/logo.png?v=0.11.17" width="250" />
+    <img alt="Lynx Logo" src="/assets/img/logo.png?v=0.12.0" width="250" />
     <h3 align="center">Lynx</h3>
     <p align="center">A Fast, Secure and Reliable Terraform Backend, Set up in Minutes.</p>
     <p align="center">
@@ -7,10 +7,10 @@
             <img src="https://github.com/Clivern/Lynx/actions/workflows/server_ci.yml/badge.svg"/>
         </a>
         <a href="https://github.com/Clivern/Lynx/releases">
-            <img src="https://img.shields.io/badge/Version-0.11.17-1abc9c.svg">
+            <img src="https://img.shields.io/badge/Version-0.12.0-1abc9c.svg">
         </a>
         <a href="https://hub.docker.com/r/clivern/lynx/tags">
-            <img src="https://img.shields.io/badge/Docker-0.11.17-1abc9c.svg">
+            <img src="https://img.shields.io/badge/Docker-0.12.0-1abc9c.svg">
         </a>
         <a href="https://github.com/Clivern/terraform-provider-lynx">
             <img src="https://img.shields.io/badge/Terraform-Provider-yellow.svg">
diff --git a/api.yml b/api.yml
index 61ee72e..e1be39f 100644
--- a/api.yml
+++ b/api.yml
@@ -7,7 +7,7 @@ info:
   license:
     name: MIT License
     url: https://github.com/Clivern/Lynx/blob/main/LICENSE
-  version: 0.11.17
+  version: 0.12.0
 externalDocs:
   description: Find out more about lynx
   url: https://github.com/Clivern/Lynx
diff --git a/docker-compose-cluster.yml b/docker-compose-cluster.yml
index 3e68b28..34df7b8 100644
--- a/docker-compose-cluster.yml
+++ b/docker-compose-cluster.yml
@@ -2,7 +2,7 @@ version: '3.8'
 
 services:
   app1:
-    image: clivern/lynx:0.11.17
+    image: clivern/lynx:0.12.0
     environment:
       APP_NAME: Lynx
       APP_PORT: 4001
@@ -27,7 +27,7 @@ services:
       - db
 
   app2:
-    image: clivern/lynx:0.11.17
+    image: clivern/lynx:0.12.0
     environment:
       APP_NAME: Lynx
       APP_PORT: 4002
@@ -52,7 +52,7 @@ services:
       - db
 
   app3:
-    image: clivern/lynx:0.11.17
+    image: clivern/lynx:0.12.0
     environment:
       APP_NAME: Lynx
       APP_PORT: 4003
diff --git a/docker-compose-nginx.yml b/docker-compose-nginx.yml
index 2d58006..60c1b88 100644
--- a/docker-compose-nginx.yml
+++ b/docker-compose-nginx.yml
@@ -2,7 +2,7 @@ version: '3.8'
 
 services:
   app:
-    image: clivern/lynx:0.11.17
+    image: clivern/lynx:0.12.0
     environment:
       APP_NAME: Lynx
       APP_PORT: 4000
diff --git a/docker-compose.yml b/docker-compose.yml
index 3a6a612..c4cd5ae 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -2,7 +2,7 @@ version: '3.8'
 
 services:
   app:
-    image: clivern/lynx:0.11.17
+    image: clivern/lynx:0.12.0
     environment:
       APP_NAME: Lynx
       APP_PORT: 4000
diff --git a/docs/index.md b/docs/index.md
index 9a0a270..9f4499a 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -21,8 +21,8 @@ hero:
       icon: edit
 
   download_link:
-    label: Latest Release v0.11.17
-    url: https://github.com/Clivern/Lynx/releases/tag/0.11.17
+    label: Latest Release v0.12.0
+    url: https://github.com/Clivern/Lynx/releases/tag/0.12.0
 
 features:
   rows:
diff --git a/lib/lynx_web/router.ex b/lib/lynx_web/router.ex
index 2950276..dae528b 100644
--- a/lib/lynx_web/router.ex
+++ b/lib/lynx_web/router.ex
@@ -133,7 +133,7 @@ defmodule LynxWeb.Router do
 
   defp add_server_header(conn, _opts) do
     conn
-    |> put_resp_header("x-server-version", "lynx/0.11.17")
+    |> put_resp_header("x-server-version", "lynx/0.12.0")
   end
 
   # Enables LiveDashboard only for development
diff --git a/lib/lynx_web/templates/page/teams.html.heex b/lib/lynx_web/templates/page/teams.html.heex
index f9ec770..1100488 100644
--- a/lib/lynx_web/templates/page/teams.html.heex
+++ b/lib/lynx_web/templates/page/teams.html.heex
@@ -3,7 +3,8 @@
     new_team: '<%= gettext "Team created successfully!" %>',
     delete_team_message: '<%= gettext "Team deleted successfully!" %>',
     delete_team_alert: '<%= gettext "You are trying to delete a team! are you sure?" %>',
-    delete_team_endpoint: '<%= Routes.team_path(@conn, :delete, "UUID") %>'
+    delete_team_endpoint: '<%= Routes.team_path(@conn, :delete, "UUID") %>',
+    update_team_endpoint: '<%= Routes.team_path(@conn, :update, "UUID") %>'
   }
 </script>
 
@@ -294,7 +295,8 @@
                                         <td style="text-align: center">${formatDatetime(team.createdAt)}</td>
                                         <td>
                                             <!--
-                                          <button @click="editTeamAction(team.id)" class="btn btn-dashed btn-sm text-black-100 border-black-100 hp-hover-text-color-black-80 hp-hover-border-color-black-80"><%= gettext "Edit" %></button>-->
+                                            <button @click="editTeamAction(team.id)" class="btn btn-dashed btn-sm text-black-100 border-black-100 hp-hover-text-color-black-80 hp-hover-border-color-black-80" data-bs-toggle="modal" data-bs-target="#edit_team_modal"><%= gettext "Edit" %></button>
+                                            -->
                                           <button @click="deleteTeamAction(team.id)" class="btn btn-dashed btn-sm text-danger border-danger hp-hover-text-color-danger-2 hp-hover-border-color-danger-2"><%= gettext "Delete" %></button>
                                         </td>
                                       </tr>
@@ -391,7 +393,66 @@
                     </div>
                 </div>
             </div>
+            <!--
+            <div class="modal fade" id="edit_team_modal" tabindex="-1" aria-labelledby="editTeamLabel" aria-hidden="true" data-action={Routes.user_path(@conn, :list)}>
+                <div class="modal-dialog modal-dialog-centered">
+                    <div class="modal-content">
+                        <div class="modal-header py-16 px-24">
+                            <h5 class="modal-title" id="editTeamLabel"><%= gettext "Edit Team" %></h5>
+                            <button type="button" class="btn-close hp-bg-none d-flex align-items-center justify-content-center" data-bs-dismiss="modal" aria-label="Close">
+                                <i class="ri-close-line hp-text-color-dark-0 lh-1" style="font-size: 24px;"></i>
+                            </button>
+                        </div>
 
+                        <div class="divider m-0"></div>
+
+                        <form id="update_team_form" action={Routes.team_path(@conn, :update, "UUID")} method="post" v-on:submit.prevent="updateTeamAction">
+                            <input type="hidden" value="" name="uuid">
+                            <div class="modal-body">
+                                <div class="row gx-8">
+                                    <div class="col-12">
+                                        <div class="mb-24">
+                                            <label class="form-label"><%= gettext "Name" %></label>
+                                            <input type="text" v-model="teamName" @input="slugifyTeamName" class="form-control" name="name" required="required" minlength="2" maxlength="60">
+                                        </div>
+                                    </div>
+
+                                    <div class="col-12">
+                                        <div class="mb-24">
+                                            <label class="form-label"><%= gettext "Slug" %></label>
+                                            <input type="text" v-model="teamSlug" class="form-control" name="slug" required="required" minlength="2" maxlength="60">
+                                        </div>
+                                    </div>
+
+                                    <div class="col-12">
+                                        <div class="mb-24">
+                                            <label class="form-label"><%= gettext "Description" %></label>
+                                            <textarea name="description" class="form-control" required="required" minlength="2" maxlength="250"></textarea>
+                                        </div>
+                                    </div>
+
+                                    <div class="col-12">
+                                        <div class="mb-24">
+                                            <label class="form-label"><%= gettext "Members" %></label>
+                                            <select class="form-select" multiple name="members" required="required">
+                                                <template v-for="user in users">
+                                                    <option :value="user.id">${user.name} (${user.email})</option>
+                                                </template>
+                                            </select>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="modal-footer pt-0 px-24 pb-24">
+                                <div class="divider"></div>
+                                <button type="submit" class="m-0 btn btn-primary w-100" :disabled="isInProgress"><%= gettext "Submit" %></button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+            -->
         </div>
 
         <footer class="w-100 py-18 px-16 py-sm-24 px-sm-32 hp-bg-color-black-20 hp-bg-color-dark-90">
diff --git a/lib/lynx_web/templates/page/users.html.heex b/lib/lynx_web/templates/page/users.html.heex
index 8129c33..ae7833f 100644
--- a/lib/lynx_web/templates/page/users.html.heex
+++ b/lib/lynx_web/templates/page/users.html.heex
@@ -2,8 +2,10 @@
   var _globals = {
     new_user: '<%= gettext "User created successfully!" %>',
     delete_user_message: '<%= gettext "User deleted successfully!" %>',
+    update_user_message: '<%= gettext "User updated successfully!" %>',
     delete_user_alert: '<%= gettext "You are trying to delete a user! are you sure?" %>',
-    delete_user_endpoint: '<%= Routes.user_path(@conn, :delete, "UUID") %>'
+    delete_user_endpoint: '<%= Routes.user_path(@conn, :delete, "UUID") %>',
+    update_user_endpoint: '<%= Routes.user_path(@conn, :update, "UUID") %>'
   }
 </script>
 
@@ -293,8 +295,7 @@
                                         <td style="text-align: center">${user.role}</td>
                                         <td style="text-align: center">${formatDatetime(user.createdAt)}</td>
                                         <td>
-                                        <!--
-                                          <button @click="editUserAction(user.id)" class="btn btn-dashed btn-sm text-black-100 border-black-100 hp-hover-text-color-black-80 hp-hover-border-color-black-80"><%= gettext "Edit" %></button>-->
+                                          <button @click="editUserAction(user.id)" class="btn btn-dashed btn-sm text-black-100 border-black-100 hp-hover-text-color-black-80 hp-hover-border-color-black-80" data-bs-toggle="modal" data-bs-target="#edit_user_modal"><%= gettext "Edit" %></button>
                                           <button @click="deleteUserAction(user.id)" class="btn btn-dashed btn-sm text-danger border-danger hp-hover-text-color-danger-2 hp-hover-border-color-danger-2"><%= gettext "Delete" %></button>
                                         </td>
                                       </tr>
@@ -390,6 +391,64 @@
                 </div>
             </div>
 
+            <div class="modal fade" id="edit_user_modal" tabindex="-1" aria-labelledby="editUserLabel" aria-hidden="true">
+                <div class="modal-dialog modal-dialog-centered">
+                    <div class="modal-content">
+                        <div class="modal-header py-16 px-24">
+                            <h5 class="modal-title" id="editUserLabel"><%= gettext "Edit User" %></h5>
+                            <button type="button" class="btn-close hp-bg-none d-flex align-items-center justify-content-center" data-bs-dismiss="modal" aria-label="Close">
+                                <i class="ri-close-line hp-text-color-dark-0 lh-1" style="font-size: 24px;"></i>
+                            </button>
+                        </div>
+
+                        <div class="divider m-0"></div>
+
+                        <form id="update_user_form" action={Routes.user_path(@conn, :update, "UUID")} method="post" v-on:submit.prevent="updateUserAction">
+                            <input type="hidden" value="" name="uuid">
+                            <div class="modal-body">
+                                <div class="row gx-8">
+                                    <div class="col-12">
+                                        <div class="mb-24">
+                                            <label class="form-label"><%= gettext "Nick Name" %></label>
+                                            <input type="text" class="form-control" name="name" required="required" minlength="2" maxlength="60">
+                                        </div>
+                                    </div>
+
+                                    <div class="col-12">
+                                        <div class="mb-24">
+                                            <label class="form-label"><%= gettext "Role" %></label>
+                                            <select class="form-select" name="role" required="required">
+                                                <option value="regular" selected><%= gettext "Regular" %></option>
+                                                <option value="super"><%= gettext "Super" %></option>
+                                            </select>
+                                        </div>
+                                    </div>
+
+                                    <div class="col-12">
+                                        <div class="mb-24">
+                                            <label class="form-label"><%= gettext "Email" %></label>
+                                            <input type="email" class="form-control" name="email" required="required">
+                                        </div>
+                                    </div>
+
+                                    <div class="col-12">
+                                        <div class="mb-24">
+                                            <label class="form-label"><%= gettext "New Password" %></label>
+                                            <input type="password" class="form-control" name="password">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class="modal-footer pt-0 px-24 pb-24">
+                                <div class="divider"></div>
+                                <button type="submit" class="m-0 btn btn-primary w-100" :disabled="isInProgress"><%= gettext "Submit" %></button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+
         </div>
 
         <footer class="w-100 py-18 px-16 py-sm-24 px-sm-32 hp-bg-color-black-20 hp-bg-color-dark-90">
diff --git a/mix.exs b/mix.exs
index 637357a..71ff1f3 100644
--- a/mix.exs
+++ b/mix.exs
@@ -5,7 +5,7 @@
 defmodule Lynx.MixProject do
   use Mix.Project
 
-  @version "0.11.17"
+  @version "0.12.0"
 
   def get_version, do: @version
 
diff --git a/priv/static/theme/app/backend.js b/priv/static/theme/app/backend.js
index 0e26d77..074f6d6 100644
--- a/priv/static/theme/app/backend.js
+++ b/priv/static/theme/app/backend.js
@@ -433,6 +433,10 @@ lynx_app.teams_list = (Vue, axios, $) => {
         methods: {
             editTeamAction(id) {
                 console.log("Edit team with ID:", id);
+                //$('input[name="uuid"]').val(id);
+                //$('form#update_team_form').attr('action', function(i, val) {
+                //    return val.replace('UUID', id);
+                //});
             },
 
             formatDatetime(datatime) {
@@ -520,7 +524,21 @@ lynx_app.users_list = (Vue, axios, $) => {
         },
         methods: {
             editUserAction(id) {
-                console.log("Edit user with ID:", id);
+                $('input[name="uuid"]').val(id);
+                $('form#update_user_form').attr('action', function(i, val) {
+                    return val.replace('UUID', id);
+                });
+                axios.get($("#update_user_form").attr("action"))
+                    .then((response) => {
+                        if (response.status >= 200) {
+                            $('form#update_user_form input[name="name"]').val(response.data.name);
+                            $('form#update_user_form select[name="role"]').val(response.data.role);
+                            $('form#update_user_form input[name="email"]').val(response.data.email);
+                        }
+                    })
+                    .catch((error) => {
+                        show_notification(error.response.data.errorMessage);
+                    });
             },
 
             formatDatetime(datatime) {
@@ -585,6 +603,50 @@ lynx_app.users_list = (Vue, axios, $) => {
     });
 }
 
+
+lynx_app.edit_user_modal = (Vue, axios, $) => {
+
+    return new Vue({
+        delimiters: ['${', '}'],
+        el: '#edit_user_modal',
+        data() {
+            return {
+                isInProgress: false
+            }
+        },
+        methods: {
+            updateUserAction(event) {
+                event.preventDefault();
+                this.isInProgress = true;
+
+                let inputs = {};
+                let _self = $(event.target);
+                let _form = _self.closest("form");
+
+                _form.serializeArray().map((item, index) => {
+                    inputs[item.name] = item.value;
+                });
+
+                axios.put(_form.attr('action'), inputs)
+                    .then((response) => {
+                        if (response.status >= 200) {
+                            show_notification(_globals.update_user_message);
+
+                            setTimeout(() => {
+                                location.reload();
+                            }, 2000);
+                        }
+                    })
+                    .catch((error) => {
+                        this.isInProgress = false;
+                        // Show error
+                        show_notification(error.response.data.errorMessage);
+                    });
+            }
+        }
+    });
+}
+
 // Projects list
 lynx_app.projects_list = (Vue, axios, $) => {
 
@@ -1249,4 +1311,12 @@ $(document).ready(() => {
             $
         );
     }
+
+    if (document.getElementById("edit_user_modal")) {
+        lynx_app.edit_user_modal(
+            Vue,
+            axios,
+            $
+        );
+    }
 });