remote_billing: Fold the separate .ts files into remote_billing_auth.ts.

The separation of files no longer makes any sense, with some of these
forms being used by the RemoteRealm and legacy server flows together.
And in general we don't need to scatter this stuff across files.

Also, the unifying of the class of loader on the buttons, fixes a visual
bug on the final "Confirm login" page where you would see it spinning
for half a second upon loading the page, until the .hide() code
triggered.

templates/corporate/legacy_server_login.html

@@ -42,7 +42,7 @@
                         <div id="server-login-page-button-container">
                             <button type="submit" id="server-login-button" class="stripe-button-el invoice-button">
                                 <span class="server-login-button-text">Continue</span>
-                                <img class="loader server-login-button-loader" src="{{ static('images/loading/loader-white.svg') }}" alt="" />
+                                <img class="loader remote-billing-button-loader" src="{{ static('images/loading/loader-white.svg') }}" alt="" />
                             </button>
                         </div>
                     </form>

templates/corporate/remote_billing_confirm_email_form.html

@@ -26,7 +26,7 @@
                 <div class="upgrade-button-container">
                     <button type="submit" id="remote-billing-confirm-email-button" class="stripe-button-el invoice-button">
                         <span class="server-login-button-text">Continue</span>
-                        <img class="loader server-login-button-loader" src="{{ static('images/loading/loader-white.svg') }}" alt="" />
+                        <img class="loader remote-billing-button-loader" src="{{ static('images/loading/loader-white.svg') }}" alt="" />
                     </button>
                 </div>
             </form>

templates/corporate/remote_billing_finalize_login_confirmation.html

@@ -32,7 +32,7 @@
                 <div class="upgrade-button-container">
                     <button type="submit" id="remote-billing-confirm-login-button" class="stripe-button-el invoice-button">
                         <span class="remote-billing-confirm-login-button-text">Continue</span>
-                        <img class="loader remote-billing-confirm-login-button-loader" src="{{ static('images/loading/loader-white.svg') }}" alt="" />
+                        <img class="loader remote-billing-button-loader" src="{{ static('images/loading/loader-white.svg') }}" alt="" />
                     </button>
                 </div>
             </form>

web/src/billing/remote_billing_auth.ts

@@ -1,7 +1,9 @@
 import $ from "jquery";
 
 export function initialize(): void {
-    $("#server-login-form, #remote-billing-confirm-email-form").validate({
+    $(
+        "#server-login-form, #remote-billing-confirm-email-form, #remote-billing-confirm-login-form",
+    ).validate({
         errorClass: "text-error",
         wrapper: "div",
         submitHandler(form) {
@@ -9,6 +11,10 @@ export function initialize(): void {
             $("#server-login-button .server-login-button-text").hide();
             $("#remote-billing-confirm-email-form").find(".loader").css("display", "inline-block");
             $("#remote-billing-confirm-email-button .server-login-button-text").hide();
+            $("#remote-billing-confirm-login-form").find(".loader").css("display", "inline-block");
+            $(
+                "#remote-billing-confirm-login-button .remote-billing-confirm-login-button-text",
+            ).hide();
 
             form.submit();
         },
@@ -17,11 +23,13 @@ export function initialize(): void {
             // by the server.
             $("#server-login-form .alert.alert-error").remove();
             $("#remote-billing-confirm-email-form .alert.alert-error").remove();
+            $("#remote-billing-confirm-login-form .alert.alert-error").remove();
         },
         showErrors(error_map) {
             if (error_map.password) {
                 $("#server-login-form .alert.alert-error").remove();
                 $("#remote-billing-confirm-email-form .alert.alert-error").remove();
+                $("#remote-billing-confirm-login-form .alert.alert-error").remove();
             }
             this.defaultShowErrors!();
         },

web/src/billing/remote_billing_confirmation.ts

@@ -1,31 +0,0 @@
-import $ from "jquery";
-
-export function initialize(): void {
-    $("#remote-billing-confirm-login-form").find(".loader").hide();
-
-    $("#remote-billing-confirm-login-form").validate({
-        errorClass: "text-error",
-        wrapper: "div",
-        submitHandler(form) {
-            $("#remote-billing-confirm-login-form").find(".loader").show();
-            $(
-                "#remote-billing-confirm-login-button .remote-billing-confirm-login-button-text",
-            ).hide();
-
-            form.submit();
-        },
-        invalidHandler() {
-            $("#remote-billing-confirm-login-form .alert.alert-error").remove();
-        },
-        showErrors(error_map) {
-            if (error_map.id_terms) {
-                $("#remote-billing-confirm-login-form .alert.alert-error").remove();
-            }
-            this.defaultShowErrors!();
-        },
-    });
-}
-
-$(() => {
-    initialize();
-});

web/styles/portico/billing.css

@@ -668,7 +668,7 @@ input[name="licenses"] {
     font-weight: 400;
 }
 
-.server-login-button-loader {
+.remote-billing-button-loader {
     display: none;
     vertical-align: top;
     position: relative;

web/webpack.assets.json

@@ -27,8 +27,7 @@
         "./src/billing/helpers",
         "./src/billing/upgrade",
         "jquery-validation",
-        "./src/billing/legacy_server_login",
-        "./src/billing/remote_billing_confirmation",
+        "./src/billing/remote_billing_auth",
         "./styles/portico/billing.css"
     ],
     "billing-event-status": [