Moving legal to SiteForm.

src/shared/components/app/footer.tsx

@@ -32,7 +32,7 @@ export class Footer extends Component<FooterProps, any> {
                 {i18n.t("modlog")}
               </NavLink>
             </li>
-            {this.props.site.site_view.site.legal_information && (
+            {this.props.site.site_view?.site.legal_information && (
               <li className="nav-item">
                 <NavLink className="nav-link" to="/legal">
                   {i18n.t("legal_information")}

src/shared/components/home/admin-settings.tsx

@@ -2,7 +2,6 @@ import autosize from "autosize";
 import { Component, linkEvent } from "inferno";
 import {
   BannedPersonsResponse,
-  EditSite,
   GetBannedPersons,
   GetSiteConfig,
   GetSiteConfigResponse,
@@ -38,7 +37,6 @@ interface AdminSettingsState {
   siteRes: GetSiteResponse;
   siteConfigRes: GetSiteConfigResponse;
   siteConfigHjson: string;
-  legalInfo: string;
   loading: boolean;
   banned: PersonViewSafe[];
   siteConfigLoading: boolean;
@@ -47,13 +45,11 @@ interface AdminSettingsState {
 
 export class AdminSettings extends Component<any, AdminSettingsState> {
   private siteConfigTextAreaId = `site-config-${randomStr()}`;
-  private legalInfoTextAreaId = `legal-info-${randomStr()}`;
   private isoData = setIsoData(this.context);
   private subscription: Subscription;
   private emptyState: AdminSettingsState = {
     siteRes: this.isoData.site_res,
     siteConfigHjson: null,
-    legalInfo: null,
     siteConfigRes: {
       config_hjson: null,
     },
@@ -75,8 +71,6 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
     if (this.isoData.path == this.context.router.route.match.url) {
       this.state.siteConfigRes = this.isoData.routeData[0];
       this.state.siteConfigHjson = this.state.siteConfigRes.config_hjson;
-      this.state.legalInfo =
-        this.state.siteRes.site_view.site.legal_information;
       this.state.banned = this.isoData.routeData[1].banned;
       this.state.siteConfigLoading = false;
       this.state.loading = false;
@@ -205,7 +199,7 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
     return (
       <div>
         <h5>{i18n.t("admin_settings")}</h5>
-        <form onSubmit={linkEvent(this, this.handleAdminSettingsSubmit)}>
+        <form onSubmit={linkEvent(this, this.handleSiteConfigSubmit)}>
           <div class="form-group row">
             <label
               class="col-12 col-form-label"
@@ -223,23 +217,6 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
               />
             </div>
           </div>
-          <div class="form-group row">
-            <label
-              class="col-12 col-form-label"
-              htmlFor={this.legalInfoTextAreaId}
-            >
-              {i18n.t("legal_information")}
-            </label>
-            <div class="col-12">
-              <textarea
-                id={this.legalInfoTextAreaId}
-                value={this.state.legalInfo}
-                onInput={linkEvent(this, this.handleLegalInfoChange)}
-                class="form-control text-monospace"
-                rows={3}
-              />
-            </div>
-          </div>
           <div class="form-group row">
             <div class="col-12">
               <button type="submit" class="btn btn-secondary mr-2">
@@ -256,24 +233,14 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
     );
   }
 
-  handleAdminSettingsSubmit(i: AdminSettings, event: any) {
+  handleSiteConfigSubmit(i: AdminSettings, event: any) {
     event.preventDefault();
     i.state.siteConfigLoading = true;
-
-    // save config
-    let form1: SaveSiteConfig = {
+    let form: SaveSiteConfig = {
       config_hjson: i.state.siteConfigHjson,
       auth: authField(),
     };
-    WebSocketService.Instance.send(wsClient.saveSiteConfig(form1));
-
-    // save legal info
-    let form2: EditSite = {
-      legal_information: i.state.legalInfo,
-      auth: authField(),
-    };
-    WebSocketService.Instance.send(wsClient.editSite(form2));
-
+    WebSocketService.Instance.send(wsClient.saveSiteConfig(form));
     i.setState(i.state);
   }
 
@@ -282,11 +249,6 @@ export class AdminSettings extends Component<any, AdminSettingsState> {
     i.setState(i.state);
   }
 
-  handleLegalInfoChange(i: AdminSettings, event: any) {
-    i.state.legalInfo = event.target.value;
-    i.setState(i.state);
-  }
-
   handleLeaveAdminTeam(i: AdminSettings) {
     i.state.leaveAdminTeamLoading = true;
     WebSocketService.Instance.send(wsClient.leaveAdmin({ auth: authField() }));

src/shared/components/home/legal.tsx

@@ -1,7 +1,8 @@
 import { Component } from "inferno";
 import { GetSiteResponse } from "lemmy-js-client";
 import { i18n } from "../../i18next";
-import { md, setIsoData } from "../../utils";
+import { mdToHtml, setIsoData } from "../../utils";
+import { HtmlTags } from "../common/html-tags";
 
 interface LegalState {
   siteRes: GetSiteResponse;
@@ -25,7 +26,16 @@ export class Legal extends Component<any, LegalState> {
   render() {
     return (
       <div class="container">
-        {md(this.state.siteRes.site_view.site.legal_information)}
+        <HtmlTags
+          title={this.documentTitle}
+          path={this.context.router.route.match.url}
+        />
+        <div
+          className="md-div"
+          dangerouslySetInnerHTML={mdToHtml(
+            this.state.siteRes.site_view.site.legal_information
+          )}
+        />
       </div>
     );
   }

src/shared/components/home/site-form.tsx

@@ -54,6 +54,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
 
     this.state = this.emptyState;
     this.handleSiteSidebarChange = this.handleSiteSidebarChange.bind(this);
+    this.handleSiteLegalInfoChange = this.handleSiteLegalInfoChange.bind(this);
     this.handleSiteApplicationQuestionChange =
       this.handleSiteApplicationQuestionChange.bind(this);
 
@@ -201,6 +202,18 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
               />
             </div>
           </div>
+          <div class="form-group row">
+            <label class="col-12 col-form-label">
+              {i18n.t("legal_information")}
+            </label>
+            <div class="col-12">
+              <MarkdownTextArea
+                initialContent={this.state.siteForm.legal_information}
+                onContentChange={this.handleSiteLegalInfoChange}
+                hideNavigationWarnings
+              />
+            </div>
+          </div>
           {this.state.siteForm.require_application && (
             <div class="form-group row">
               <label class="col-12 col-form-label">
@@ -450,6 +463,11 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
     this.setState(this.state);
   }
 
+  handleSiteLegalInfoChange(val: string) {
+    this.state.siteForm.legal_information = val;
+    this.setState(this.state);
+  }
+
   handleSiteApplicationQuestionChange(val: string) {
     this.state.siteForm.application_question = val;
     this.setState(this.state);