X-Git-Url: http://these/git/?a=blobdiff_plain;f=src%2Fshared%2Fcomponents%2Fhome%2Fsite-form.tsx;h=3b451e66ab10bd04493faea8b1ece5e4deda08e7;hb=2b1af707c3df6126b3e6890106c03c60ad49b1be;hp=40588ac8cf1ed29df848aabea87d83726de092dd;hpb=f61037f5d89f12818c8100f907a98b74e980112a;p=lemmy-ui.git

diff --git a/src/shared/components/home/site-form.tsx b/src/shared/components/home/site-form.tsx
index 40588ac..3b451e6 100644
--- a/src/shared/components/home/site-form.tsx
+++ b/src/shared/components/home/site-form.tsx
@@ -7,18 +7,12 @@ import {
 import {
   CreateSite,
   EditSite,
-  GetFederatedInstancesResponse,
   GetSiteResponse,
+  Instance,
   ListingType,
 } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { WebSocketService } from "../../services";
-import {
-  capitalizeFirstLetter,
-  fetchThemeList,
-  myAuth,
-  wsClient,
-} from "../../utils";
+import { capitalizeFirstLetter, myAuthRequired } from "../../utils";
 import { Icon, Spinner } from "../common/icon";
 import { ImageUploadForm } from "../common/image-upload-form";
 import { LanguageSelect } from "../common/language-select";
@@ -27,35 +21,73 @@ import { MarkdownTextArea } from "../common/markdown-textarea";
 import NavigationPrompt from "../common/navigation-prompt";
 
 interface SiteFormProps {
-  siteRes: GetSiteResponse;
-  instancesRes?: GetFederatedInstancesResponse;
+  blockedInstances?: Instance[];
+  allowedInstances?: Instance[];
   showLocal?: boolean;
+  themeList?: string[];
+  onSaveSite(form: EditSite): void;
+  siteRes: GetSiteResponse;
 }
 
 interface SiteFormState {
   siteForm: EditSite;
   loading: boolean;
-  themeList?: string[];
   instance_select: {
     allowed_instances: string;
     blocked_instances: string;
   };
+  submitted: boolean;
 }
 
 type InstanceKey = "allowed_instances" | "blocked_instances";
 
 export class SiteForm extends Component<SiteFormProps, SiteFormState> {
   state: SiteFormState = {
-    siteForm: {
-      auth: "TODO",
-    },
+    siteForm: this.initSiteForm(),
     loading: false,
     instance_select: {
       allowed_instances: "",
       blocked_instances: "",
     },
+    submitted: false,
   };
 
+  initSiteForm(): EditSite {
+    const site = this.props.siteRes.site_view.site;
+    const ls = this.props.siteRes.site_view.local_site;
+    return {
+      name: site.name,
+      sidebar: site.sidebar,
+      description: site.description,
+      enable_downvotes: ls.enable_downvotes,
+      registration_mode: ls.registration_mode,
+      enable_nsfw: ls.enable_nsfw,
+      community_creation_admin_only: ls.community_creation_admin_only,
+      icon: site.icon,
+      banner: site.banner,
+      require_email_verification: ls.require_email_verification,
+      application_question: ls.application_question,
+      private_instance: ls.private_instance,
+      default_theme: ls.default_theme,
+      default_post_listing_type: ls.default_post_listing_type,
+      legal_information: ls.legal_information,
+      application_email_admins: ls.application_email_admins,
+      reports_email_admins: ls.reports_email_admins,
+      hide_modlog_mod_names: ls.hide_modlog_mod_names,
+      discussion_languages: this.props.siteRes.discussion_languages,
+      slur_filter_regex: ls.slur_filter_regex,
+      actor_name_max_length: ls.actor_name_max_length,
+      federation_enabled: ls.federation_enabled,
+      federation_debug: ls.federation_debug,
+      federation_worker_count: ls.federation_worker_count,
+      captcha_enabled: ls.captcha_enabled,
+      captcha_difficulty: ls.captcha_difficulty,
+      allowed_instances: this.props.allowedInstances?.map(i => i.domain),
+      blocked_instances: this.props.blockedInstances?.map(i => i.domain),
+      auth: "TODO",
+    };
+  }
+
   constructor(props: any, context: any) {
     super(props, context);
 
@@ -75,53 +107,9 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
 
     this.handleDiscussionLanguageChange =
       this.handleDiscussionLanguageChange.bind(this);
-
-    const site = this.props.siteRes.site_view.site;
-    const ls = this.props.siteRes.site_view.local_site;
-    this.state = {
-      ...this.state,
-      siteForm: {
-        name: site.name,
-        sidebar: site.sidebar,
-        description: site.description,
-        enable_downvotes: ls.enable_downvotes,
-        registration_mode: ls.registration_mode,
-        enable_nsfw: ls.enable_nsfw,
-        community_creation_admin_only: ls.community_creation_admin_only,
-        icon: site.icon,
-        banner: site.banner,
-        require_email_verification: ls.require_email_verification,
-        application_question: ls.application_question,
-        private_instance: ls.private_instance,
-        default_theme: ls.default_theme,
-        default_post_listing_type: ls.default_post_listing_type,
-        legal_information: ls.legal_information,
-        application_email_admins: ls.application_email_admins,
-        reports_email_admins: ls.reports_email_admins,
-        hide_modlog_mod_names: ls.hide_modlog_mod_names,
-        discussion_languages: this.props.siteRes.discussion_languages,
-        slur_filter_regex: ls.slur_filter_regex,
-        actor_name_max_length: ls.actor_name_max_length,
-        federation_enabled: ls.federation_enabled,
-        federation_debug: ls.federation_debug,
-        federation_worker_count: ls.federation_worker_count,
-        captcha_enabled: ls.captcha_enabled,
-        captcha_difficulty: ls.captcha_difficulty,
-        allowed_instances:
-          this.props.instancesRes?.federated_instances?.allowed.map(
-            i => i.domain
-          ),
-        blocked_instances:
-          this.props.instancesRes?.federated_instances?.blocked.map(
-            i => i.domain
-          ),
-        auth: "TODO",
-      },
-    };
-  }
-
-  async componentDidMount() {
-    this.setState({ themeList: await fetchThemeList() });
+    this.handleAddInstance = this.handleAddInstance.bind(this);
+    this.handleInstanceEnterPress = this.handleInstanceEnterPress.bind(this);
+    this.handleInstanceTextChange = this.handleInstanceTextChange.bind(this);
   }
 
   // Necessary to stop the loading
@@ -129,29 +117,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
     this.setState({ loading: false });
   }
 
-  componentDidUpdate() {
-    if (
-      !this.state.loading &&
-      !this.props.siteRes.site_view.local_site.site_setup &&
-      (this.state.siteForm.name ||
-        this.state.siteForm.sidebar ||
-        this.state.siteForm.application_question ||
-        this.state.siteForm.description)
-    ) {
-      window.onbeforeunload = () => true;
-    } else {
-      window.onbeforeunload = null;
-    }
-  }
-
-  componentWillUnmount() {
-    window.onbeforeunload = null;
-  }
-
   render() {
     const siteSetup = this.props.siteRes.site_view.local_site.site_setup;
     return (
-      <>
+      <form onSubmit={linkEvent(this, this.handleSaveSiteSubmit)}>
         <NavigationPrompt
           when={
             !this.state.loading &&
@@ -161,507 +130,498 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
               this.state.siteForm.sidebar ||
               this.state.siteForm.application_question ||
               this.state.siteForm.description
-            )
+            ) &&
+            !this.state.submitted
           }
         />
-        <form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
-          <h5>{`${
-            siteSetup
-              ? capitalizeFirstLetter(i18n.t("save"))
-              : capitalizeFirstLetter(i18n.t("name"))
-          } ${i18n.t("your_site")}`}</h5>
-          <div className="form-group row">
-            <label className="col-12 col-form-label" htmlFor="create-site-name">
-              {i18n.t("name")}
-            </label>
-            <div className="col-12">
-              <input
-                type="text"
-                id="create-site-name"
-                className="form-control"
-                value={this.state.siteForm.name}
-                onInput={linkEvent(this, this.handleSiteNameChange)}
-                required
-                minLength={3}
-                maxLength={20}
-              />
-            </div>
+        <h5>{`${
+          siteSetup
+            ? capitalizeFirstLetter(i18n.t("save"))
+            : capitalizeFirstLetter(i18n.t("name"))
+        } ${i18n.t("your_site")}`}</h5>
+        <div className="form-group row">
+          <label className="col-12 col-form-label" htmlFor="create-site-name">
+            {i18n.t("name")}
+          </label>
+          <div className="col-12">
+            <input
+              type="text"
+              id="create-site-name"
+              className="form-control"
+              value={this.state.siteForm.name}
+              onInput={linkEvent(this, this.handleSiteNameChange)}
+              required
+              minLength={3}
+              maxLength={20}
+            />
           </div>
-          <div className="form-group">
-            <label>{i18n.t("icon")}</label>
-            <ImageUploadForm
-              uploadTitle={i18n.t("upload_icon")}
-              imageSrc={this.state.siteForm.icon}
-              onUpload={this.handleIconUpload}
-              onRemove={this.handleIconRemove}
-              rounded
+        </div>
+        <div className="form-group">
+          <label>{i18n.t("icon")}</label>
+          <ImageUploadForm
+            uploadTitle={i18n.t("upload_icon")}
+            imageSrc={this.state.siteForm.icon}
+            onUpload={this.handleIconUpload}
+            onRemove={this.handleIconRemove}
+            rounded
+          />
+        </div>
+        <div className="form-group">
+          <label>{i18n.t("banner")}</label>
+          <ImageUploadForm
+            uploadTitle={i18n.t("upload_banner")}
+            imageSrc={this.state.siteForm.banner}
+            onUpload={this.handleBannerUpload}
+            onRemove={this.handleBannerRemove}
+          />
+        </div>
+        <div className="form-group row">
+          <label className="col-12 col-form-label" htmlFor="site-desc">
+            {i18n.t("description")}
+          </label>
+          <div className="col-12">
+            <input
+              type="text"
+              className="form-control"
+              id="site-desc"
+              value={this.state.siteForm.description}
+              onInput={linkEvent(this, this.handleSiteDescChange)}
+              maxLength={150}
             />
           </div>
-          <div className="form-group">
-            <label>{i18n.t("banner")}</label>
-            <ImageUploadForm
-              uploadTitle={i18n.t("upload_banner")}
-              imageSrc={this.state.siteForm.banner}
-              onUpload={this.handleBannerUpload}
-              onRemove={this.handleBannerRemove}
+        </div>
+        <div className="form-group row">
+          <label className="col-12 col-form-label">{i18n.t("sidebar")}</label>
+          <div className="col-12">
+            <MarkdownTextArea
+              initialContent={this.state.siteForm.sidebar}
+              onContentChange={this.handleSiteSidebarChange}
+              hideNavigationWarnings
+              allLanguages={[]}
+              siteLanguages={[]}
             />
           </div>
-          <div className="form-group row">
-            <label className="col-12 col-form-label" htmlFor="site-desc">
-              {i18n.t("description")}
-            </label>
-            <div className="col-12">
+        </div>
+        <div className="form-group row">
+          <label className="col-12 col-form-label">
+            {i18n.t("legal_information")}
+          </label>
+          <div className="col-12">
+            <MarkdownTextArea
+              initialContent={this.state.siteForm.legal_information}
+              onContentChange={this.handleSiteLegalInfoChange}
+              hideNavigationWarnings
+              allLanguages={[]}
+              siteLanguages={[]}
+            />
+          </div>
+        </div>
+        <div className="form-group row">
+          <div className="col-12">
+            <div className="form-check">
               <input
-                type="text"
-                className="form-control"
-                id="site-desc"
-                value={this.state.siteForm.description}
-                onInput={linkEvent(this, this.handleSiteDescChange)}
-                maxLength={150}
+                className="form-check-input"
+                id="create-site-downvotes"
+                type="checkbox"
+                checked={this.state.siteForm.enable_downvotes}
+                onChange={linkEvent(this, this.handleSiteEnableDownvotesChange)}
               />
+              <label
+                className="form-check-label"
+                htmlFor="create-site-downvotes"
+              >
+                {i18n.t("enable_downvotes")}
+              </label>
             </div>
           </div>
-          <div className="form-group row">
-            <label className="col-12 col-form-label">{i18n.t("sidebar")}</label>
-            <div className="col-12">
-              <MarkdownTextArea
-                initialContent={this.state.siteForm.sidebar}
-                onContentChange={this.handleSiteSidebarChange}
-                hideNavigationWarnings
-                allLanguages={[]}
-                siteLanguages={[]}
+        </div>
+        <div className="form-group row">
+          <div className="col-12">
+            <div className="form-check">
+              <input
+                className="form-check-input"
+                id="create-site-enable-nsfw"
+                type="checkbox"
+                checked={this.state.siteForm.enable_nsfw}
+                onChange={linkEvent(this, this.handleSiteEnableNsfwChange)}
               />
+              <label
+                className="form-check-label"
+                htmlFor="create-site-enable-nsfw"
+              >
+                {i18n.t("enable_nsfw")}
+              </label>
             </div>
           </div>
+        </div>
+        <div className="form-group row">
+          <div className="col-12">
+            <label
+              className="form-check-label mr-2"
+              htmlFor="create-site-registration-mode"
+            >
+              {i18n.t("registration_mode")}
+            </label>
+            <select
+              id="create-site-registration-mode"
+              value={this.state.siteForm.registration_mode}
+              onChange={linkEvent(this, this.handleSiteRegistrationModeChange)}
+              className="custom-select w-auto"
+            >
+              <option value={"RequireApplication"}>
+                {i18n.t("require_registration_application")}
+              </option>
+              <option value={"Open"}>{i18n.t("open_registration")}</option>
+              <option value={"Closed"}>{i18n.t("close_registration")}</option>
+            </select>
+          </div>
+        </div>
+        {this.state.siteForm.registration_mode == "RequireApplication" && (
           <div className="form-group row">
             <label className="col-12 col-form-label">
-              {i18n.t("legal_information")}
+              {i18n.t("application_questionnaire")}
             </label>
             <div className="col-12">
               <MarkdownTextArea
-                initialContent={this.state.siteForm.legal_information}
-                onContentChange={this.handleSiteLegalInfoChange}
+                initialContent={this.state.siteForm.application_question}
+                onContentChange={this.handleSiteApplicationQuestionChange}
                 hideNavigationWarnings
                 allLanguages={[]}
                 siteLanguages={[]}
               />
             </div>
           </div>
-          <div className="form-group row">
-            <div className="col-12">
-              <div className="form-check">
-                <input
-                  className="form-check-input"
-                  id="create-site-downvotes"
-                  type="checkbox"
-                  checked={this.state.siteForm.enable_downvotes}
-                  onChange={linkEvent(
-                    this,
-                    this.handleSiteEnableDownvotesChange
-                  )}
-                />
-                <label
-                  className="form-check-label"
-                  htmlFor="create-site-downvotes"
-                >
-                  {i18n.t("enable_downvotes")}
-                </label>
-              </div>
-            </div>
-          </div>
-          <div className="form-group row">
-            <div className="col-12">
-              <div className="form-check">
-                <input
-                  className="form-check-input"
-                  id="create-site-enable-nsfw"
-                  type="checkbox"
-                  checked={this.state.siteForm.enable_nsfw}
-                  onChange={linkEvent(this, this.handleSiteEnableNsfwChange)}
-                />
-                <label
-                  className="form-check-label"
-                  htmlFor="create-site-enable-nsfw"
-                >
-                  {i18n.t("enable_nsfw")}
-                </label>
-              </div>
-            </div>
-          </div>
-          <div className="form-group row">
-            <div className="col-12">
+        )}
+        <div className="form-group row">
+          <div className="col-12">
+            <div className="form-check">
+              <input
+                className="form-check-input"
+                id="create-site-community-creation-admin-only"
+                type="checkbox"
+                checked={this.state.siteForm.community_creation_admin_only}
+                onChange={linkEvent(
+                  this,
+                  this.handleSiteCommunityCreationAdminOnly
+                )}
+              />
               <label
-                className="form-check-label mr-2"
-                htmlFor="create-site-registration-mode"
+                className="form-check-label"
+                htmlFor="create-site-community-creation-admin-only"
               >
-                {i18n.t("registration_mode")}
+                {i18n.t("community_creation_admin_only")}
               </label>
-              <select
-                id="create-site-registration-mode"
-                value={this.state.siteForm.registration_mode}
+            </div>
+          </div>
+        </div>
+        <div className="form-group row">
+          <div className="col-12">
+            <div className="form-check">
+              <input
+                className="form-check-input"
+                id="create-site-require-email-verification"
+                type="checkbox"
+                checked={this.state.siteForm.require_email_verification}
                 onChange={linkEvent(
                   this,
-                  this.handleSiteRegistrationModeChange
+                  this.handleSiteRequireEmailVerification
                 )}
-                className="custom-select w-auto"
+              />
+              <label
+                className="form-check-label"
+                htmlFor="create-site-require-email-verification"
               >
-                <option value={"RequireApplication"}>
-                  {i18n.t("require_registration_application")}
-                </option>
-                <option value={"Open"}>{i18n.t("open_registration")}</option>
-                <option value={"Closed"}>{i18n.t("close_registration")}</option>
-              </select>
-            </div>
-          </div>
-          {this.state.siteForm.registration_mode == "RequireApplication" && (
-            <div className="form-group row">
-              <label className="col-12 col-form-label">
-                {i18n.t("application_questionnaire")}
+                {i18n.t("require_email_verification")}
               </label>
-              <div className="col-12">
-                <MarkdownTextArea
-                  initialContent={this.state.siteForm.application_question}
-                  onContentChange={this.handleSiteApplicationQuestionChange}
-                  hideNavigationWarnings
-                  allLanguages={[]}
-                  siteLanguages={[]}
-                />
-              </div>
-            </div>
-          )}
-          <div className="form-group row">
-            <div className="col-12">
-              <div className="form-check">
-                <input
-                  className="form-check-input"
-                  id="create-site-community-creation-admin-only"
-                  type="checkbox"
-                  checked={this.state.siteForm.community_creation_admin_only}
-                  onChange={linkEvent(
-                    this,
-                    this.handleSiteCommunityCreationAdminOnly
-                  )}
-                />
-                <label
-                  className="form-check-label"
-                  htmlFor="create-site-community-creation-admin-only"
-                >
-                  {i18n.t("community_creation_admin_only")}
-                </label>
-              </div>
-            </div>
-          </div>
-          <div className="form-group row">
-            <div className="col-12">
-              <div className="form-check">
-                <input
-                  className="form-check-input"
-                  id="create-site-require-email-verification"
-                  type="checkbox"
-                  checked={this.state.siteForm.require_email_verification}
-                  onChange={linkEvent(
-                    this,
-                    this.handleSiteRequireEmailVerification
-                  )}
-                />
-                <label
-                  className="form-check-label"
-                  htmlFor="create-site-require-email-verification"
-                >
-                  {i18n.t("require_email_verification")}
-                </label>
-              </div>
-            </div>
-          </div>
-          <div className="form-group row">
-            <div className="col-12">
-              <div className="form-check">
-                <input
-                  className="form-check-input"
-                  id="create-site-application-email-admins"
-                  type="checkbox"
-                  checked={this.state.siteForm.application_email_admins}
-                  onChange={linkEvent(
-                    this,
-                    this.handleSiteApplicationEmailAdmins
-                  )}
-                />
-                <label
-                  className="form-check-label"
-                  htmlFor="create-site-email-admins"
-                >
-                  {i18n.t("application_email_admins")}
-                </label>
-              </div>
-            </div>
-          </div>
-          <div className="form-group row">
-            <div className="col-12">
-              <div className="form-check">
-                <input
-                  className="form-check-input"
-                  id="create-site-reports-email-admins"
-                  type="checkbox"
-                  checked={this.state.siteForm.reports_email_admins}
-                  onChange={linkEvent(this, this.handleSiteReportsEmailAdmins)}
-                />
-                <label
-                  className="form-check-label"
-                  htmlFor="create-site-reports-email-admins"
-                >
-                  {i18n.t("reports_email_admins")}
-                </label>
-              </div>
             </div>
           </div>
-          <div className="form-group row">
-            <div className="col-12">
+        </div>
+        <div className="form-group row">
+          <div className="col-12">
+            <div className="form-check">
+              <input
+                className="form-check-input"
+                id="create-site-application-email-admins"
+                type="checkbox"
+                checked={this.state.siteForm.application_email_admins}
+                onChange={linkEvent(
+                  this,
+                  this.handleSiteApplicationEmailAdmins
+                )}
+              />
               <label
-                className="form-check-label mr-2"
-                htmlFor="create-site-default-theme"
+                className="form-check-label"
+                htmlFor="create-site-email-admins"
               >
-                {i18n.t("theme")}
+                {i18n.t("application_email_admins")}
               </label>
-              <select
-                id="create-site-default-theme"
-                value={this.state.siteForm.default_theme}
-                onChange={linkEvent(this, this.handleSiteDefaultTheme)}
-                className="custom-select w-auto"
-              >
-                <option value="browser">{i18n.t("browser_default")}</option>
-                {this.state.themeList?.map(theme => (
-                  <option key={theme} value={theme}>
-                    {theme}
-                  </option>
-                ))}
-              </select>
-            </div>
-          </div>
-          {this.props.showLocal && (
-            <form className="form-group row">
-              <label className="col-sm-3">{i18n.t("listing_type")}</label>
-              <div className="col-sm-9">
-                <ListingTypeSelect
-                  type_={
-                    this.state.siteForm.default_post_listing_type ?? "Local"
-                  }
-                  showLocal
-                  showSubscribed={false}
-                  onChange={this.handleDefaultPostListingTypeChange}
-                />
-              </div>
-            </form>
-          )}
-          <div className="form-group row">
-            <div className="col-12">
-              <div className="form-check">
-                <input
-                  className="form-check-input"
-                  id="create-site-private-instance"
-                  type="checkbox"
-                  checked={this.state.siteForm.private_instance}
-                  onChange={linkEvent(this, this.handleSitePrivateInstance)}
-                />
-                <label
-                  className="form-check-label"
-                  htmlFor="create-site-private-instance"
-                >
-                  {i18n.t("private_instance")}
-                </label>
-              </div>
             </div>
           </div>
-          <div className="form-group row">
-            <div className="col-12">
-              <div className="form-check">
-                <input
-                  className="form-check-input"
-                  id="create-site-hide-modlog-mod-names"
-                  type="checkbox"
-                  checked={this.state.siteForm.hide_modlog_mod_names}
-                  onChange={linkEvent(this, this.handleSiteHideModlogModNames)}
-                />
-                <label
-                  className="form-check-label"
-                  htmlFor="create-site-hide-modlog-mod-names"
-                >
-                  {i18n.t("hide_modlog_mod_names")}
-                </label>
-              </div>
+        </div>
+        <div className="form-group row">
+          <div className="col-12">
+            <div className="form-check">
+              <input
+                className="form-check-input"
+                id="create-site-reports-email-admins"
+                type="checkbox"
+                checked={this.state.siteForm.reports_email_admins}
+                onChange={linkEvent(this, this.handleSiteReportsEmailAdmins)}
+              />
+              <label
+                className="form-check-label"
+                htmlFor="create-site-reports-email-admins"
+              >
+                {i18n.t("reports_email_admins")}
+              </label>
             </div>
           </div>
-          <div className="form-group row">
+        </div>
+        <div className="form-group row">
+          <div className="col-12">
             <label
-              className="col-12 col-form-label"
-              htmlFor="create-site-slur-filter-regex"
+              className="form-check-label mr-2"
+              htmlFor="create-site-default-theme"
             >
-              {i18n.t("slur_filter_regex")}
+              {i18n.t("theme")}
             </label>
-            <div className="col-12">
+            <select
+              id="create-site-default-theme"
+              value={this.state.siteForm.default_theme}
+              onChange={linkEvent(this, this.handleSiteDefaultTheme)}
+              className="custom-select w-auto"
+            >
+              <option value="browser">{i18n.t("browser_default")}</option>
+              {this.props.themeList?.map(theme => (
+                <option key={theme} value={theme}>
+                  {theme}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        {this.props.showLocal && (
+          <form className="form-group row">
+            <label className="col-sm-3">{i18n.t("listing_type")}</label>
+            <div className="col-sm-9">
+              <ListingTypeSelect
+                type_={this.state.siteForm.default_post_listing_type ?? "Local"}
+                showLocal
+                showSubscribed={false}
+                onChange={this.handleDefaultPostListingTypeChange}
+              />
+            </div>
+          </form>
+        )}
+        <div className="form-group row">
+          <div className="col-12">
+            <div className="form-check">
               <input
-                type="text"
-                id="create-site-slur-filter-regex"
-                placeholder="(word1|word2)"
-                className="form-control"
-                value={this.state.siteForm.slur_filter_regex}
-                onInput={linkEvent(this, this.handleSiteSlurFilterRegex)}
-                minLength={3}
+                className="form-check-input"
+                id="create-site-private-instance"
+                type="checkbox"
+                checked={this.state.siteForm.private_instance}
+                onChange={linkEvent(this, this.handleSitePrivateInstance)}
               />
+              <label
+                className="form-check-label"
+                htmlFor="create-site-private-instance"
+              >
+                {i18n.t("private_instance")}
+              </label>
             </div>
           </div>
-          <LanguageSelect
-            allLanguages={this.props.siteRes.all_languages}
-            siteLanguages={this.props.siteRes.discussion_languages}
-            selectedLanguageIds={this.state.siteForm.discussion_languages}
-            multiple={true}
-            onChange={this.handleDiscussionLanguageChange}
-            showAll
-          />
-          <div className="form-group row">
-            <label
-              className="col-12 col-form-label"
-              htmlFor="create-site-actor-name"
-            >
-              {i18n.t("actor_name_max_length")}
-            </label>
-            <div className="col-12">
+        </div>
+        <div className="form-group row">
+          <div className="col-12">
+            <div className="form-check">
               <input
-                type="number"
-                id="create-site-actor-name"
-                className="form-control"
-                min={5}
-                value={this.state.siteForm.actor_name_max_length}
-                onInput={linkEvent(this, this.handleSiteActorNameMaxLength)}
+                className="form-check-input"
+                id="create-site-hide-modlog-mod-names"
+                type="checkbox"
+                checked={this.state.siteForm.hide_modlog_mod_names}
+                onChange={linkEvent(this, this.handleSiteHideModlogModNames)}
               />
+              <label
+                className="form-check-label"
+                htmlFor="create-site-hide-modlog-mod-names"
+              >
+                {i18n.t("hide_modlog_mod_names")}
+              </label>
             </div>
           </div>
-          <div className="form-group row">
-            <div className="col-12">
-              <div className="form-check">
-                <input
-                  className="form-check-input"
-                  id="create-site-federation-enabled"
-                  type="checkbox"
-                  checked={this.state.siteForm.federation_enabled}
-                  onChange={linkEvent(this, this.handleSiteFederationEnabled)}
-                />
-                <label
-                  className="form-check-label"
-                  htmlFor="create-site-federation-enabled"
-                >
-                  {i18n.t("federation_enabled")}
-                </label>
-              </div>
+        </div>
+        <div className="form-group row">
+          <label
+            className="col-12 col-form-label"
+            htmlFor="create-site-slur-filter-regex"
+          >
+            {i18n.t("slur_filter_regex")}
+          </label>
+          <div className="col-12">
+            <input
+              type="text"
+              id="create-site-slur-filter-regex"
+              placeholder="(word1|word2)"
+              className="form-control"
+              value={this.state.siteForm.slur_filter_regex}
+              onInput={linkEvent(this, this.handleSiteSlurFilterRegex)}
+              minLength={3}
+            />
+          </div>
+        </div>
+        <LanguageSelect
+          allLanguages={this.props.siteRes.all_languages}
+          siteLanguages={this.props.siteRes.discussion_languages}
+          selectedLanguageIds={this.state.siteForm.discussion_languages}
+          multiple={true}
+          onChange={this.handleDiscussionLanguageChange}
+          showAll
+        />
+        <div className="form-group row">
+          <label
+            className="col-12 col-form-label"
+            htmlFor="create-site-actor-name"
+          >
+            {i18n.t("actor_name_max_length")}
+          </label>
+          <div className="col-12">
+            <input
+              type="number"
+              id="create-site-actor-name"
+              className="form-control"
+              min={5}
+              value={this.state.siteForm.actor_name_max_length}
+              onInput={linkEvent(this, this.handleSiteActorNameMaxLength)}
+            />
+          </div>
+        </div>
+        <div className="form-group row">
+          <div className="col-12">
+            <div className="form-check">
+              <input
+                className="form-check-input"
+                id="create-site-federation-enabled"
+                type="checkbox"
+                checked={this.state.siteForm.federation_enabled}
+                onChange={linkEvent(this, this.handleSiteFederationEnabled)}
+              />
+              <label
+                className="form-check-label"
+                htmlFor="create-site-federation-enabled"
+              >
+                {i18n.t("federation_enabled")}
+              </label>
             </div>
           </div>
-          {this.state.siteForm.federation_enabled && (
-            <>
-              <div className="form-group row">
-                {this.federatedInstanceSelect("allowed_instances")}
-                {this.federatedInstanceSelect("blocked_instances")}
-              </div>
-              <div className="form-group row">
-                <div className="col-12">
-                  <div className="form-check">
-                    <input
-                      className="form-check-input"
-                      id="create-site-federation-debug"
-                      type="checkbox"
-                      checked={this.state.siteForm.federation_debug}
-                      onChange={linkEvent(this, this.handleSiteFederationDebug)}
-                    />
-                    <label
-                      className="form-check-label"
-                      htmlFor="create-site-federation-debug"
-                    >
-                      {i18n.t("federation_debug")}
-                    </label>
-                  </div>
-                </div>
-              </div>
-              <div className="form-group row">
-                <label
-                  className="col-12 col-form-label"
-                  htmlFor="create-site-federation-worker-count"
-                >
-                  {i18n.t("federation_worker_count")}
-                </label>
-                <div className="col-12">
+        </div>
+        {this.state.siteForm.federation_enabled && (
+          <>
+            <div className="form-group row">
+              {this.federatedInstanceSelect("allowed_instances")}
+              {this.federatedInstanceSelect("blocked_instances")}
+            </div>
+            <div className="form-group row">
+              <div className="col-12">
+                <div className="form-check">
                   <input
-                    type="number"
-                    id="create-site-federation-worker-count"
-                    className="form-control"
-                    min={0}
-                    value={this.state.siteForm.federation_worker_count}
-                    onInput={linkEvent(
-                      this,
-                      this.handleSiteFederationWorkerCount
-                    )}
+                    className="form-check-input"
+                    id="create-site-federation-debug"
+                    type="checkbox"
+                    checked={this.state.siteForm.federation_debug}
+                    onChange={linkEvent(this, this.handleSiteFederationDebug)}
                   />
+                  <label
+                    className="form-check-label"
+                    htmlFor="create-site-federation-debug"
+                  >
+                    {i18n.t("federation_debug")}
+                  </label>
                 </div>
               </div>
-            </>
-          )}
-          <div className="form-group row">
-            <div className="col-12">
-              <div className="form-check">
-                <input
-                  className="form-check-input"
-                  id="create-site-captcha-enabled"
-                  type="checkbox"
-                  checked={this.state.siteForm.captcha_enabled}
-                  onChange={linkEvent(this, this.handleSiteCaptchaEnabled)}
-                />
-                <label
-                  className="form-check-label"
-                  htmlFor="create-site-captcha-enabled"
-                >
-                  {i18n.t("captcha_enabled")}
-                </label>
-              </div>
             </div>
-          </div>
-          {this.state.siteForm.captcha_enabled && (
             <div className="form-group row">
+              <label
+                className="col-12 col-form-label"
+                htmlFor="create-site-federation-worker-count"
+              >
+                {i18n.t("federation_worker_count")}
+              </label>
               <div className="col-12">
-                <label
-                  className="form-check-label mr-2"
-                  htmlFor="create-site-captcha-difficulty"
-                >
-                  {i18n.t("captcha_difficulty")}
-                </label>
-                <select
-                  id="create-site-captcha-difficulty"
-                  value={this.state.siteForm.captcha_difficulty}
-                  onChange={linkEvent(this, this.handleSiteCaptchaDifficulty)}
-                  className="custom-select w-auto"
-                >
-                  <option value="easy">{i18n.t("easy")}</option>
-                  <option value="medium">{i18n.t("medium")}</option>
-                  <option value="hard">{i18n.t("hard")}</option>
-                </select>
+                <input
+                  type="number"
+                  id="create-site-federation-worker-count"
+                  className="form-control"
+                  min={0}
+                  value={this.state.siteForm.federation_worker_count}
+                  onInput={linkEvent(
+                    this,
+                    this.handleSiteFederationWorkerCount
+                  )}
+                />
               </div>
             </div>
-          )}
+          </>
+        )}
+        <div className="form-group row">
+          <div className="col-12">
+            <div className="form-check">
+              <input
+                className="form-check-input"
+                id="create-site-captcha-enabled"
+                type="checkbox"
+                checked={this.state.siteForm.captcha_enabled}
+                onChange={linkEvent(this, this.handleSiteCaptchaEnabled)}
+              />
+              <label
+                className="form-check-label"
+                htmlFor="create-site-captcha-enabled"
+              >
+                {i18n.t("captcha_enabled")}
+              </label>
+            </div>
+          </div>
+        </div>
+        {this.state.siteForm.captcha_enabled && (
           <div className="form-group row">
             <div className="col-12">
-              <button
-                type="submit"
-                className="btn btn-secondary mr-2"
-                disabled={this.state.loading}
+              <label
+                className="form-check-label mr-2"
+                htmlFor="create-site-captcha-difficulty"
               >
-                {this.state.loading ? (
-                  <Spinner />
-                ) : siteSetup ? (
-                  capitalizeFirstLetter(i18n.t("save"))
-                ) : (
-                  capitalizeFirstLetter(i18n.t("create"))
-                )}
-              </button>
+                {i18n.t("captcha_difficulty")}
+              </label>
+              <select
+                id="create-site-captcha-difficulty"
+                value={this.state.siteForm.captcha_difficulty}
+                onChange={linkEvent(this, this.handleSiteCaptchaDifficulty)}
+                className="custom-select w-auto"
+              >
+                <option value="easy">{i18n.t("easy")}</option>
+                <option value="medium">{i18n.t("medium")}</option>
+                <option value="hard">{i18n.t("hard")}</option>
+              </select>
             </div>
           </div>
-        </form>
-      </>
+        )}
+        <div className="form-group row">
+          <div className="col-12">
+            <button
+              type="submit"
+              className="btn btn-secondary mr-2"
+              disabled={this.state.loading}
+            >
+              {this.state.loading ? (
+                <Spinner />
+              ) : siteSetup ? (
+                capitalizeFirstLetter(i18n.t("save"))
+              ) : (
+                capitalizeFirstLetter(i18n.t("create"))
+              )}
+            </button>
+          </div>
+        </div>
+      </form>
     );
   }
 
@@ -688,11 +648,15 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
             type="button"
             className="btn btn-sm bg-success ml-2"
             onClick={linkEvent(key, this.handleAddInstance)}
+            style={"width: 2rem; height: 2rem;"}
             tabIndex={
               -1 /* Making this untabble because handling enter key in text input makes keyboard support for this button redundant */
             }
           >
-            <Icon icon="add" classes="icon-inline text-light m-auto" />
+            <Icon
+              icon="add"
+              classes="icon-inline text-light m-auto d-block position-static"
+            />
           </button>
         </div>
         {selectedInstances && selectedInstances.length > 0 && (
@@ -708,13 +672,17 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
                 <button
                   id={instance}
                   type="button"
+                  style={"width: 2rem; height: 2rem;"}
                   className="btn btn-sm bg-danger"
                   onClick={linkEvent(
                     { key, instance },
                     this.handleRemoveInstance
                   )}
                 >
-                  <Icon icon="x" classes="icon-inline text-light m-auto" />
+                  <Icon
+                    icon="x"
+                    classes="icon-inline text-light m-auto d-block position-static"
+                  />
                 </button>
               </li>
             ))}
@@ -745,48 +713,69 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
     }
   }
 
-  handleCreateSiteSubmit(i: SiteForm, event: any) {
+  handleSaveSiteSubmit(i: SiteForm, event: any) {
     event.preventDefault();
-    i.setState({ loading: true });
-    const auth = myAuth() ?? "TODO";
+    const auth = myAuthRequired();
     i.setState(s => ((s.siteForm.auth = auth), s));
+    i.setState({ loading: true, submitted: true });
+
+    const stateSiteForm = i.state.siteForm;
+
+    let form: EditSite | CreateSite;
+
     if (i.props.siteRes.site_view.local_site.site_setup) {
-      WebSocketService.Instance.send(wsClient.editSite(i.state.siteForm));
+      form = stateSiteForm;
     } else {
-      const sForm = i.state.siteForm;
-      const form: CreateSite = {
-        name: sForm.name ?? "My site",
-        sidebar: sForm.sidebar,
-        description: sForm.description,
-        icon: sForm.icon,
-        banner: sForm.banner,
-        community_creation_admin_only: sForm.community_creation_admin_only,
-        enable_nsfw: sForm.enable_nsfw,
-        enable_downvotes: sForm.enable_downvotes,
-        application_question: sForm.application_question,
-        registration_mode: sForm.registration_mode,
-        require_email_verification: sForm.require_email_verification,
-        private_instance: sForm.private_instance,
-        default_theme: sForm.default_theme,
-        default_post_listing_type: sForm.default_post_listing_type,
-        application_email_admins: sForm.application_email_admins,
-        hide_modlog_mod_names: sForm.hide_modlog_mod_names,
-        legal_information: sForm.legal_information,
-        slur_filter_regex: sForm.slur_filter_regex,
-        actor_name_max_length: sForm.actor_name_max_length,
-        federation_enabled: sForm.federation_enabled,
-        federation_debug: sForm.federation_debug,
-        federation_worker_count: sForm.federation_worker_count,
-        captcha_enabled: sForm.captcha_enabled,
-        captcha_difficulty: sForm.captcha_difficulty,
-        allowed_instances: sForm.allowed_instances,
-        blocked_instances: sForm.blocked_instances,
-        discussion_languages: sForm.discussion_languages,
+      form = {
+        name: stateSiteForm.name ?? "My site",
+        sidebar: stateSiteForm.sidebar,
+        description: stateSiteForm.description,
+        icon: stateSiteForm.icon,
+        banner: stateSiteForm.banner,
+        community_creation_admin_only:
+          stateSiteForm.community_creation_admin_only,
+        enable_nsfw: stateSiteForm.enable_nsfw,
+        enable_downvotes: stateSiteForm.enable_downvotes,
+        application_question: stateSiteForm.application_question,
+        registration_mode: stateSiteForm.registration_mode,
+        require_email_verification: stateSiteForm.require_email_verification,
+        private_instance: stateSiteForm.private_instance,
+        default_theme: stateSiteForm.default_theme,
+        default_post_listing_type: stateSiteForm.default_post_listing_type,
+        application_email_admins: stateSiteForm.application_email_admins,
+        hide_modlog_mod_names: stateSiteForm.hide_modlog_mod_names,
+        legal_information: stateSiteForm.legal_information,
+        slur_filter_regex: stateSiteForm.slur_filter_regex,
+        actor_name_max_length: stateSiteForm.actor_name_max_length,
+        rate_limit_message: stateSiteForm.rate_limit_message,
+        rate_limit_message_per_second:
+          stateSiteForm.rate_limit_message_per_second,
+        rate_limit_comment: stateSiteForm.rate_limit_comment,
+        rate_limit_comment_per_second:
+          stateSiteForm.rate_limit_comment_per_second,
+        rate_limit_image: stateSiteForm.rate_limit_image,
+        rate_limit_image_per_second: stateSiteForm.rate_limit_image_per_second,
+        rate_limit_post: stateSiteForm.rate_limit_post,
+        rate_limit_post_per_second: stateSiteForm.rate_limit_post_per_second,
+        rate_limit_register: stateSiteForm.rate_limit_register,
+        rate_limit_register_per_second:
+          stateSiteForm.rate_limit_register_per_second,
+        rate_limit_search: stateSiteForm.rate_limit_search,
+        rate_limit_search_per_second:
+          stateSiteForm.rate_limit_search_per_second,
+        federation_enabled: stateSiteForm.federation_enabled,
+        federation_debug: stateSiteForm.federation_debug,
+        federation_worker_count: stateSiteForm.federation_worker_count,
+        captcha_enabled: stateSiteForm.captcha_enabled,
+        captcha_difficulty: stateSiteForm.captcha_difficulty,
+        allowed_instances: stateSiteForm.allowed_instances,
+        blocked_instances: stateSiteForm.blocked_instances,
+        discussion_languages: stateSiteForm.discussion_languages,
         auth,
       };
-      WebSocketService.Instance.send(wsClient.createSite(form));
     }
-    i.setState(i.state);
+
+    i.props.onSaveSite(form);
   }
 
   handleAddInstance(key: InstanceKey) {