impr: hide login/signUp button if user signup is disabled (fehmer) (#5172)

* impr: hide signIn button if user signup is disabled

* move UI modifying code to ready.ts

---------

Co-authored-by: Miodec <jack@monkeytype.com>

frontend/src/html/header.html

@@ -128,7 +128,7 @@
       </div>
       <div class="notificationBubble hidden">5</div>
     </button>
-    <button class="text signInOut" onclick="this.blur();">
+    <button class="text signInOut hidden" onclick="this.blur();">
       <div class="icon">
         <i class="fas fa-fw fa-sign-in-alt"></i>
       </div>

frontend/src/html/pages/login.html

@@ -2,7 +2,10 @@
   <div class="preloader hidden">
     <i class="fas fa-fw fa-spin fa-circle-notch"></i>
   </div>
-  <div class="register side">
+  <div class="disabledNotification">
+    <p>Login/Signup is disabled.</p>
+  </div>
+  <div class="register side hidden">
     <div class="title">register</div>
     <form action="" autocomplete="nope">
       <input
@@ -43,7 +46,7 @@
       </button>
     </form>
   </div>
-  <div class="login side">
+  <div class="login side hidden">
     <div class="title">login</div>
     <button class="text" id="forgotPasswordButton">Forgot password?</button>
     <form action="">

frontend/src/ts/pages/login.ts

@@ -6,6 +6,7 @@ import { InputIndicator } from "../elements/input-indicator";
 import * as Skeleton from "../utils/skeleton";
 import * as Misc from "../utils/misc";
 import TypoList from "../utils/typo-list";
+import * as ServerConfiguration from "../ape/server-configuration";
 
 export function enableSignUpButton(): void {
   $(".page.pageLogin .register.side button").prop("disabled", false);
@@ -353,8 +354,14 @@ export const page = new Page(
   },
   async () => {
     Skeleton.append("pageLogin", "main");
-    enableInputs();
-    enableSignUpButton();
+    if (ServerConfiguration.get()?.users.signUp) {
+      enableInputs();
+      enableSignUpButton();
+
+      $(".register").removeClass("hidden");
+      $(".login").removeClass("hidden");
+      $(".disabledNotification").addClass("hidden");
+    }
   },
   async () => {
     //

frontend/src/ts/ready.ts

@@ -89,7 +89,11 @@ $(document).ready(() => {
     .animate({ opacity: 1 }, 250);
   if (ConnectionState.get()) {
     void PSA.show();
-    void ServerConfiguration.sync();
+    void ServerConfiguration.sync().then(() => {
+      if (ServerConfiguration.get()?.users.signUp) {
+        $(".signInOut").removeClass("hidden");
+      }
+    });
   }
   MonkeyPower.init();