From 19c4740ada0fda724e4a3ecfa6868ec4b936ad7f Mon Sep 17 00:00:00 2001
From: flashwave <me@flash.moe>
Date: Fri, 9 Dec 2016 19:09:33 +0100
Subject: [PATCH] made entire accounts section dynamic

---
 .../Settings/AccountController.php            | 67 ++++++-------
 .../assets/less/yuuno/bem/friend-box.less     |  4 +
 .../yuuno/settings/account/_preview.twig      |  2 +-
 .../views/yuuno/settings/account/details.twig |  3 +-
 .../views/yuuno/settings/account/profile.twig |  3 +-
 .../views/yuuno/settings/account/ranks.twig   | 93 +++++++++++++++++--
 .../yuuno/settings/account/signature.twig     |  7 +-
 .../yuuno/settings/account/userpage.twig      |  7 +-
 resources/views/yuuno/settings/master.twig    | 21 ++---
 9 files changed, 141 insertions(+), 66 deletions(-)

diff --git a/app/Controllers/Settings/AccountController.php b/app/Controllers/Settings/AccountController.php
index 104b248..5f7758a 100644
--- a/app/Controllers/Settings/AccountController.php
+++ b/app/Controllers/Settings/AccountController.php
@@ -245,29 +245,26 @@ class AccountController extends Controller
         ];
 
         if (session_check() && $rank && $mode) {
-            $redirect = route('settings.account.ranks');
-
             // Check if user has this rank
             if (!CurrentSession::$user->hasRanks([$rank])) {
-                $message = "You aren't a part of this rank!";
-                return view('global/information', compact('redirect', 'message'));
+                return $this->json(['error' => "You aren't a part of this rank!"]);
             }
 
-            if ($mode == 'remove') {
-                if (in_array($rank, $locked)) {
-                    $message = "You aren't allowed to remove this rank from your account!";
-                    return view('global/information', compact('redirect', 'message'));
-                }
+            switch ($mode) {
+                case 'remove':
+                    if (in_array($rank, $locked)) {
+                        return $this->json(['error' => "You aren't allowed to remove this rank from your account!"]);
+                    }
 
-                CurrentSession::$user->removeRanks([$rank]);
+                    CurrentSession::$user->removeRanks([$rank]);
+                    break;
 
-                $message = "Removed the rank from your account!";
-                return view('global/information', compact('redirect', 'message'));
+                case 'main':
+                    CurrentSession::$user->setMainRank($rank);
+                    break;
             }
 
-            CurrentSession::$user->setMainRank($rank);
-
-            return redirect($redirect);
+            return $this->json(['error' => null]);
         }
 
         return view('settings/account/ranks', compact('locked'));
@@ -287,21 +284,17 @@ class AccountController extends Controller
         $maxLength = config('user.page_max');
 
         if (session_check() && $userpage) {
-            $redirect = route('settings.account.userpage');
-
             if (strlen($userpage) > $maxLength) {
-                $message = 'Your userpage is too long, shorten it a little!';
-            } else {
-                DB::table('users')
-                    ->where('user_id', CurrentSession::$user->id)
-                    ->update([
-                        'user_page' => $userpage,
-                    ]);
-
-                $message = 'Updated your userpage!';
+                return $this->json(['error' => 'Your userpage is too long, shorten it a little!']);
             }
 
-            return view('global/information', compact('message', 'redirect'));
+            DB::table('users')
+                ->where('user_id', CurrentSession::$user->id)
+                ->update([
+                    'user_page' => $userpage,
+                ]);
+
+            return $this->json(['error' => null]);
         }
 
         return view('settings/account/userpage', compact('maxLength'));
@@ -322,21 +315,17 @@ class AccountController extends Controller
         $maxLength = config('user.signature_max');
 
         if (session_check() && $signature) {
-            $redirect = route('settings.account.signature');
-
             if (strlen($signature) > $maxLength) {
-                $message = 'Your signature is too long, shorten it a little!';
-            } else {
-                DB::table('users')
-                    ->where('user_id', CurrentSession::$user->id)
-                    ->update([
-                        'user_signature' => $signature,
-                    ]);
-
-                $message = 'Updated your signature!';
+                return $this->json(['error' => 'Your signature is too long, shorten it a little!']);
             }
 
-            return view('global/information', compact('message', 'redirect'));
+            DB::table('users')
+                ->where('user_id', CurrentSession::$user->id)
+                ->update([
+                    'user_signature' => $signature,
+                ]);
+
+            return $this->json(['error' => null]);
         }
 
         return view('settings/account/signature', compact('maxLength'));
diff --git a/resources/assets/less/yuuno/bem/friend-box.less b/resources/assets/less/yuuno/bem/friend-box.less
index 0104534..4235c11 100644
--- a/resources/assets/less/yuuno/bem/friend-box.less
+++ b/resources/assets/less/yuuno/bem/friend-box.less
@@ -13,11 +13,14 @@
 
     &__container {
         display: block;
+        width: 100%;
+        height: 100%;
         text-decoration: none !important;
         color: #000;
         margin: 5px auto;
         background-color: transparent;
         border: 0;
+        cursor: pointer;
 
         &:active {
             color: inherit;
@@ -61,6 +64,7 @@
         background-color: transparent;
         border: 0;
         transition: color .2s;
+        cursor: pointer;
 
         &:hover {
             color: #333;
diff --git a/resources/views/yuuno/settings/account/_preview.twig b/resources/views/yuuno/settings/account/_preview.twig
index 8d7bd8d..060c039 100644
--- a/resources/views/yuuno/settings/account/_preview.twig
+++ b/resources/views/yuuno/settings/account/_preview.twig
@@ -5,7 +5,7 @@
         preview = document.getElementById("settingsPreview");
 
     parser.SetUrl("{{ route('helper.bbcode.parse') }}");
-    parser.ContentType("application/x-www-form-urlencoded");
+    parser.Form();
 
     function settingsPreview() {
         var text = form.value;
diff --git a/resources/views/yuuno/settings/account/details.twig b/resources/views/yuuno/settings/account/details.twig
index b6c555f..0aaa365 100644
--- a/resources/views/yuuno/settings/account/details.twig
+++ b/resources/views/yuuno/settings/account/details.twig
@@ -8,6 +8,7 @@
 
 {% block settingsContent %}
     <form enctype="multipart/form-data" method="post" action="javascript:;" onsubmit="updateSettingsConfirm(this, '{{ route('settings.account.details') }}');">
+        <input type="hidden" name="session" value="{{ session_id() }}">
         <div class="profile-field">
             <div><h2>E-mail address</h2></div>
             <div><input type="text" name="email" placeholder="{{ user.email }}" class="input__text"></div>
@@ -28,7 +29,7 @@
             <div><h2>Password</h2></div>
             <div><input type="password" name="password" placeholder="Must be at least decently strong, size doesn't matter" class="input__text"></div>
         </div>
-        <button value="{{ session_id() }}" name="session" class="input__button">Save</button>
+        <button class="input__button">Save</button>
         <button type="reset" class="input__button">Reset</button>
     </form>
 {% endblock %}
diff --git a/resources/views/yuuno/settings/account/profile.twig b/resources/views/yuuno/settings/account/profile.twig
index 7fe8096..717eb9e 100644
--- a/resources/views/yuuno/settings/account/profile.twig
+++ b/resources/views/yuuno/settings/account/profile.twig
@@ -91,6 +91,7 @@
 
 {% block settingsContent %}
     <form enctype="multipart/form-data" method="post" action="javascript:;" onsubmit="updateSettings(this, '{{ route('settings.account.profile') }}');">
+        <input type="hidden" name="session" value="{{ session_id() }}">
         {% for id, vars in fields %}
             <div class="profile-field {{ id }}">
                 <div>
@@ -141,7 +142,7 @@
                 </label>
             </div>
         </div>
-        <button name="session" value="{{ session_id() }}" class="input__button">Save</button>
+        <button class="input__button">Save</button>
         <button type="reset" class="input__button">Reset</button>
     </form>
 {% endblock %}
diff --git a/resources/views/yuuno/settings/account/ranks.twig b/resources/views/yuuno/settings/account/ranks.twig
index 79f79ad..5dea897 100644
--- a/resources/views/yuuno/settings/account/ranks.twig
+++ b/resources/views/yuuno/settings/account/ranks.twig
@@ -6,19 +6,100 @@
     <p>Manage what ranks you're in and what is set as your main rank. Your main rank is highlighted. You get the permissions of all of the ranks you're in combined.</p>
 {% endblock %}
 
+{% block js %}
+    <script>
+        function yuunoRankProtected() {
+            var confirm = new Sakura.Dialogue;
+
+            confirm.Title = "Ranks";
+            confirm.Text = "You aren't allowed to remove this rank from your account!";
+
+            confirm.AddCallback(Sakura.DialogueButton.Ok, function () {
+                this.Close();
+            });
+
+            confirm.Display();
+        }
+
+        function yuunoRankSwitch(id, csrf) {
+            // not really that much of an impactful action so just proxy
+            yuunoRankDo(id, csrf, 'main');
+        }
+
+        function yuunoRankRemove(id, csrf, name) {
+            var confirm = new Sakura.Dialogue;
+
+            confirm.SetType(Sakura.DialogueType.ConfirmNegative);
+            confirm.Title = "Ranks";
+            confirm.Text = "You are about to remove the rank '" + name + "' from your account. Are you sure about this?";
+
+            confirm.AddCallback(Sakura.DialogueButton.No, function () {
+                this.Close();
+            });
+
+            confirm.AddCallback(Sakura.DialogueButton.Yes, function () {
+                this.Close();
+                yuunoRankDo(id, csrf, 'remove');
+            });
+
+            confirm.Display();
+        }
+
+        function yuunoRankDo(id, csrf, mode) {
+            var ajax = new Sakura.AJAX,
+                formData = new FormData;
+
+            formData.append('rank', id);
+            formData.append('mode', mode);
+            formData.append('session', csrf);
+
+            ajax.SetUrl("{{ route('settings.account.ranks') }}");
+            ajax.SetFormData(formData);
+
+            ajax.AddCallback(200, function () {
+                var result = ajax.JSON();
+
+                if (result.error) {
+                    var error = new Sakura.Dialogue;
+                    error.Title = "Ranks";
+                    error.Text = result.error;
+                    error.SetType(Sakura.DialogueType.Info);
+
+                    error.AddCallback(Sakura.DialogueButton.Ok, function () {
+                        this.Close();
+                    });
+
+                    error.Display();
+                } else if (mode === 'remove') {
+                    Sakura.DOM.Remove(Sakura.DOM.ID('rank-' + id));
+                } else if (mode === 'main') {
+                    Sakura.DOM.RemoveClass(document.querySelector('.friend-box--active'), ['friend-box--active']);
+                    Sakura.DOM.AddClass(Sakura.DOM.ID('rank-' + id), ['friend-box--active']);
+                }
+            });
+
+            ajax.Start(Sakura.HTTPMethod.POST);
+        }
+    </script>
+{% endblock %}
+
 {% block settingsContent %}
     <div style="text-align: center">
         {% for rank in user.ranks %}
-            <form method="post" action="{{ route('settings.account.ranks') }}" class="friend-box {% if rank.id == user.mainRankId %}friend-box--active{% endif %}">
-                <input type="hidden" name="session" value="{{ session_id() }}">
-                <input type="hidden" name="rank" value="{{ rank.id }}">
-                <button class="friend-box__container" name="mode" value="main">
+            <div class="friend-box {% if rank.id == user.mainRankId %}friend-box--active{% endif %}" id="rank-{{ rank.id }}">
+                <button class="friend-box__container" onclick="yuunoRankSwitch({{ rank.id }}, '{{ session_id() }}')">
                     <div class="friend-box__name" style="color: {{ rank.colour }}">{{ rank.name }}</div>
                 </button>
                 <div class="friend-box__actions">
-                    <button title="{% if rank.id in locked %}You can't leave this rank{% else %}Leave rank{% endif %}" class="friend-box__action friend-box__action--red fa fa-{% if rank.id in locked %}shield{% else %}remove{% endif %}" name="mode" value="remove" {% if rank.id in locked %}disabled{% endif %}></button>
+                    <button
+                        title="{% if rank.id in locked %}You can't leave this rank{% else %}Leave rank{% endif %}"
+                        class="friend-box__action friend-box__action--red fa fa-{% if rank.id in locked %}shield{% else %}remove{% endif %}"
+                        name="mode"
+                        value="remove"
+                        onclick="{% if rank.id in locked %}yuunoRankProtected(){% else %}yuunoRankRemove({{ rank.id }}, '{{ session_id() }}', '{{ rank.name }}'){% endif %}"
+                    ></button>
                 </div>
-            </form>
+            </div>
         {% endfor %}
     </div>
 {% endblock %}
diff --git a/resources/views/yuuno/settings/account/signature.twig b/resources/views/yuuno/settings/account/signature.twig
index 43ea69d..fd7f4b0 100644
--- a/resources/views/yuuno/settings/account/signature.twig
+++ b/resources/views/yuuno/settings/account/signature.twig
@@ -9,13 +9,14 @@
 {% block settingsContent %}
     <div class="bbcode" id="settingsPreview" style="max-height: 500px; overflow-y: auto; background: #C2AEEE; box-shadow: inset 0 0 1em 1em #D3BFFF;">{{ user.signature()|raw|nl2br }}</div>
     <hr>
-    <form enctype="multipart/form-data" method="post" action="{{ route('settings.account.signature') }}">
+    <form enctype="multipart/form-data" method="post" action="javascript:;" onsubmit="updateSettings(this, '{{ route('settings.account.signature') }}');">
+        <input type="hidden" name="session" value="{{ session_id() }}">
         <div>
             <textarea name="signature" id="settingsEditor" class="input__text" style="height: 400px;">{{ user.signature }}</textarea>
         </div>
-        <button value="{{ session_id() }}" name="session" class="input__button">Save</button>
+        <button class="input__button">Save</button>
         <button type="reset" class="input__button">Reset</button>
-        <button type="button" class="input__button" onclick="settingsPreview();">Preview</button>
+        <button type="button" class="input__button" onclick="settingsPreview()">Preview</button>
     </form>
     {% include 'settings/account/_preview.twig' %}
 {% endblock %}
diff --git a/resources/views/yuuno/settings/account/userpage.twig b/resources/views/yuuno/settings/account/userpage.twig
index cc040ac..81a2c09 100644
--- a/resources/views/yuuno/settings/account/userpage.twig
+++ b/resources/views/yuuno/settings/account/userpage.twig
@@ -9,13 +9,14 @@
 {% block settingsContent %}
     <div class="bbcode" id="settingsPreview" style="max-height: 500px; overflow-y: auto; background: #C2AEEE; box-shadow: inset 0 0 1em 1em #D3BFFF;">{{ user.userPage()|raw|nl2br }}</div>
     <hr>
-    <form enctype="multipart/form-data" method="post" action="{{ route('settings.account.userpage') }}">
+    <form enctype="multipart/form-data" method="post" action="javascript:;" onsubmit="updateSettings(this, '{{ route('settings.account.userpage') }}');">
+        <input type="hidden" name="session" value="{{ session_id() }}">
         <div>
             <textarea name="userpage" id="settingsEditor" class="input__text" style="height: 400px;">{% if user.page %}{{ user.page }}{% else %}[header]Welcome to my userpage![/header]{% endif %}</textarea>
         </div>
-        <button value="{{ session_id() }}" name="session" class="input__button">Save</button>
+        <button class="input__button">Save</button>
         <button type="reset" class="input__button">Reset</button>
-        <button type="button" class="input__button" onclick="settingsPreview();">Preview</button>
+        <button type="button" class="input__button" onclick="settingsPreview()">Preview</button>
     </form>
     {% include 'settings/account/_preview.twig' %}
 {% endblock %}
diff --git a/resources/views/yuuno/settings/master.twig b/resources/views/yuuno/settings/master.twig
index 4e1f878..d310c07 100644
--- a/resources/views/yuuno/settings/master.twig
+++ b/resources/views/yuuno/settings/master.twig
@@ -5,25 +5,22 @@
 {% block js %}
 <script>
     function updateSettings(form, action, text) {
-        var forms = {},
-            dialogue = new Sakura.Dialogue,
+        var dialogue = new Sakura.Dialogue,
             updater = new Sakura.AJAX;
 
-        dialogue.AddCallback(Sakura.DialogueButton.Ok, function () {
-            this.Close();
-        });
-
-        for (var a = 0; a < form.elements.length; a++) {
-            forms[form.elements.item(a).name] = form.elements.item(a).value;
-        }
-
         updater.SetUrl(action);
-        updater.Form();
-        updater.SetSend(forms);
+        updater.SetFormData(new FormData(form));
         updater.AddCallback(0, function () {
             var resp = updater.JSON();
             dialogue.Title = resp.error ? "Error" : "Information";
             dialogue.Text = resp.error || text || 'Updated!';
+            dialogue.AddCallback(Sakura.DialogueButton.Ok, function () {
+                if (resp.go) {
+                    window.location.assign(resp.go);
+                }
+
+                this.Close();
+            });
             dialogue.Display();
         });
         updater.Start(Sakura.HTTPMethod.POST);