Users: Do not reload page when changing status through a popup

Web/Presenters/UserPresenter.php

@@ -134,7 +134,7 @@ final class UserPresenter extends OpenVKPresenter
         
         $user = $this->users->get($id);
         if($_SERVER["REQUEST_METHOD"] === "POST") {
-            $this->willExecuteWriteAction();
+            $this->willExecuteWriteAction($_GET['act'] === "status");
             
             if($_GET['act'] === "main" || $_GET['act'] == NULL) {
                 $user->setFirst_Name(empty($this->postParam("first_name")) ? $user->getFirstName() : $this->postParam("first_name"));
@@ -196,15 +196,15 @@ final class UserPresenter extends OpenVKPresenter
             } elseif($_GET['act'] === "status") {
                 if(mb_strlen($this->postParam("status")) > 255) {
                     $statusLength = (string) mb_strlen($this->postParam("status"));
-                    $this->flashFail("err", "Ошибка", "Статус слишком длинный ($statusLength символов вместо 255 символов)");
+                    $this->flashFail("err", "Ошибка", "Статус слишком длинный ($statusLength символов вместо 255 символов)", NULL, true);
                 }
 
                 $user->setStatus(empty($this->postParam("status")) ? NULL : $this->postParam("status"));
                 $user->save();
 
-                header("HTTP/1.1 302 Found");
+                $this->returnJson([
-                header("Location: /id" . $user->getId());
+                    "success" => true
-                exit;
+                ]);
             }
             
             try {
@@ -376,6 +376,7 @@ final class UserPresenter extends OpenVKPresenter
                     "menu_grupoj"   => "groups",
                     "menu_novajoj"  => "news",
                     "menu_ligiloj"  => "links",
+                    "menu_audioj"   => "audios",
                 ];
                 foreach($settings as $checkbox => $setting)
                     $user->setLeftMenuItemStatus($setting, $this->checkbox($checkbox));

Web/Presenters/templates/User/View.xml

@@ -316,12 +316,12 @@
             <div n:if="!is_null($alert = $user->getAlert())" class="user-alert">{$alert}</div>
             {var thatIsThisUser = isset($thisUser) && $user->getId() == $thisUser->getId()}
             <div n:if="$thatIsThisUser" class="page_status_popup" id="status_editor" style="display: none;">
-                <form method="post" action="/edit?act=status">
+                <form name="status_popup_form" onsubmit="changeStatus(); return false;">
                     <div style="margin-bottom: 10px;">
                         <input type="text" name="status" size="50" value="{$user->getStatus()}" />
                     </div>
                     <input type="hidden" name="hash" value="{$csrfToken}" />
-                    <input type="submit" class="button" value="{_'save'}" />
+                    <button type="submit" name="submit" class="button" style="width: 43px; height: 22px;">{_send}</button>
                 </form>
             </div>
 			<div class="accountInfo clearFix">
@@ -543,7 +543,7 @@
             }
         </script>
 
-        <script n:if="isset($thisUser) && $user->getId() == $thisUser->getId()">
+        <script n:if="isset($thisUser) && $user->getId() == $thisUser->getId()" n:syntax="off">
             function setStatusEditorShown(shown) {
                 document.getElementById("status_editor").style.display = shown ? "block" : "none";
             }
@@ -554,6 +554,26 @@
             });
 
             document.getElementById("page_status_text").onclick = setStatusEditorShown.bind(this, true);
+
+            async function changeStatus() {
+                const status = document.status_popup_form.status.value;
+
+                document.status_popup_form.submit.innerHTML = "<div class=\"button-loading\"></div>";
+
+                const formData = new FormData();
+                formData.append("status", status);
+                formData.append("hash", document.status_popup_form.hash.value);
+                const response = await ky.post("/edit?act=status", {body: formData});
+
+                if(!parseAjaxResponse(await response.text())) {
+                    document.status_popup_form.submit.innerHTML = tr("send");
+                    return;
+                }
+
+                document.querySelector("#page_status_text").innerHTML = status;
+                setStatusEditorShown(false);
+                document.status_popup_form.submit.innerHTML = tr("send");
+            }
         </script>
     </div>
     

Web/static/css/style.css

@@ -416,7 +416,7 @@ table {
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);;
     padding: 10px;
     float: right;
-    margin-top: 5px;
+    margin-top: 6px;
     margin-left: -6px;
 }
 
@@ -440,7 +440,15 @@ table {
 }
 
 .button:hover {
-	color: #e8e8e8;
+    color: #e8e8e8;
+}
+
+.button-loading {
+    display: inline-block;
+    background-image: url('/assets/packages/static/openvk/img/loading_mini.gif');
+    width: 30px;
+    height: 7px;
+    margin-left: -3px;
 }
 
 input[class=button] {