Block urls (#2409)

* Add markup

* Make textarea reactive

* Fix bug mixing up urls and instances

* Tweak url enforcement logic

* Extract url list textarea to component

* Add translations

* Add pnpm lock to prettier ignore

Author: SleeplessOne1917

.prettierignore

@@ -4,3 +4,4 @@ src/assets/css/themes/*.css
 src/assets/css/code-themes/*.css
 stats.json
 dist
+pnpm-lock.yaml

lemmy-translations

@@ -0,0 +1,77 @@
+import { linkEvent, Component } from "inferno";
+import { I18NextService } from "../../services/I18NextService";
+
+interface UrlListTextareaProps {
+  urls: string[];
+  onUpdate(urls: string[]): void;
+}
+
+interface UrlListTextareaState {
+  text: string;
+}
+
+function handleTextChange(i: UrlListTextarea, event: any) {
+  i.setState({ text: event.target.value });
+}
+
+function handleTextBlur(i: UrlListTextarea, event: any) {
+  const inputValue: string = event.currentTarget?.value ?? "";
+
+  const intermediateText = inputValue.replace(/\s+/g, "\n");
+  const newUrls: string[] = [];
+
+  for (const str of intermediateText.split("\n")) {
+    let url: string;
+
+    try {
+      url = new URL(str).toString();
+    } catch {
+      try {
+        url = new URL("https://" + str).toString();
+      } catch {
+        continue;
+      }
+    }
+
+    if (newUrls.every(u => u !== url)) {
+      newUrls.push(url);
+    }
+  }
+
+  i.setState({ text: newUrls.join("\n") });
+  i.props.onUpdate(newUrls);
+}
+
+export default class UrlListTextarea extends Component<
+  UrlListTextareaProps,
+  UrlListTextareaState
+> {
+  state: UrlListTextareaState = {
+    text: "",
+  };
+
+  render() {
+    return (
+      <div className="mb-3 row">
+        <label
+          className="col-12 col-form-label"
+          htmlFor="create-site-block-urls"
+        >
+          {I18NextService.i18n.t("block_urls")}
+        </label>
+
+        <div className="col-12">
+          <textarea
+            id="create-site-block-urls"
+            className="form-control"
+            placeholder={I18NextService.i18n.t("block_urls_placeholder")}
+            value={this.state.text}
+            onInput={linkEvent(this, handleTextChange)}
+            onBlur={linkEvent(this, handleTextBlur)}
+            rows={4}
+          />
+        </div>
+      </div>
+    );
+  }
+}

src/shared/components/common/url-list-textarea.tsx

@@ -21,6 +21,7 @@ import { ImageUploadForm } from "../common/image-upload-form";
 import { LanguageSelect } from "../common/language-select";
 import { ListingTypeSelect } from "../common/listing-type-select";
 import { MarkdownTextArea } from "../common/markdown-textarea";
+import UrlListTextarea from "../common/url-list-textarea";
 
 interface SiteFormProps {
   blockedInstances?: Instance[];
@@ -84,6 +85,7 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
       captcha_difficulty: ls.captcha_difficulty,
       allowed_instances: this.props.allowedInstances?.map(i => i.domain),
       blocked_instances: this.props.blockedInstances?.map(i => i.domain),
+      blocked_urls: this.props.siteRes.blocked_urls.map(u => u.url),
     };
   }
 
@@ -112,6 +114,8 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
 
     this.handleInstanceEnterPress = this.handleInstanceEnterPress.bind(this);
     this.handleInstanceTextChange = this.handleInstanceTextChange.bind(this);
+
+    this.handleBlockedUrlsUpdate = this.handleBlockedUrlsUpdate.bind(this);
   }
 
   render() {
@@ -500,6 +504,10 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
           onChange={this.handleDiscussionLanguageChange}
           showAll
         />
+        <UrlListTextarea
+          urls={this.state.siteForm.blocked_urls ?? []}
+          onUpdate={this.handleBlockedUrlsUpdate}
+        />
         <div className="mb-3 row">
           <label
             className="col-12 col-form-label"
@@ -994,4 +1002,14 @@ export class SiteForm extends Component<SiteFormProps, SiteFormState> {
   handleDefaultPostListingTypeChange(val: ListingType) {
     this.setState(s => ((s.siteForm.default_post_listing_type = val), s));
   }
+
+  handleBlockedUrlsUpdate(newBlockedUrls: string[]) {
+    this.setState(prev => ({
+      ...prev,
+      siteForm: {
+        ...prev.siteForm,
+        blocked_urls: newBlockedUrls,
+      },
+    }));
+  }
 }