1 import { None, Option, Some } from "@sniptt/monads";
2 import { Component, linkEvent } from "inferno";
3 import { Prompt } from "inferno-router";
10 } from "lemmy-js-client";
11 import { i18n } from "../../i18next";
12 import { WebSocketService } from "../../services";
15 capitalizeFirstLetter,
19 import { Spinner } from "../common/icon";
20 import { ImageUploadForm } from "../common/image-upload-form";
21 import { ListingTypeSelect } from "../common/listing-type-select";
22 import { MarkdownTextArea } from "../common/markdown-textarea";
24 interface SiteFormProps {
25 site: Option<Site>; // If a site is given, that means this is an edit
31 interface SiteFormState {
34 themeList: Option<string[]>;
37 export class SiteForm extends Component<SiteFormProps, SiteFormState> {
38 private emptyState: SiteFormState = {
39 siteForm: new EditSite({
40 enable_downvotes: Some(true),
41 open_registration: Some(true),
42 enable_nsfw: Some(true),
46 require_email_verification: None,
47 require_application: None,
48 application_question: None,
49 private_instance: None,
52 default_post_listing_type: None,
53 legal_information: None,
55 community_creation_admin_only: None,
57 hide_modlog_mod_names: Some(true),
63 constructor(props: any, context: any) {
64 super(props, context);
66 this.state = this.emptyState;
67 this.handleSiteSidebarChange = this.handleSiteSidebarChange.bind(this);
68 this.handleSiteLegalInfoChange = this.handleSiteLegalInfoChange.bind(this);
69 this.handleSiteApplicationQuestionChange =
70 this.handleSiteApplicationQuestionChange.bind(this);
72 this.handleIconUpload = this.handleIconUpload.bind(this);
73 this.handleIconRemove = this.handleIconRemove.bind(this);
75 this.handleBannerUpload = this.handleBannerUpload.bind(this);
76 this.handleBannerRemove = this.handleBannerRemove.bind(this);
78 this.handleDefaultPostListingTypeChange =
79 this.handleDefaultPostListingTypeChange.bind(this);
81 this.props.site.match({
83 this.state.siteForm = new EditSite({
84 name: Some(site.name),
85 sidebar: site.sidebar,
86 description: site.description,
87 enable_downvotes: Some(site.enable_downvotes),
88 open_registration: Some(site.open_registration),
89 enable_nsfw: Some(site.enable_nsfw),
90 community_creation_admin_only: Some(
91 site.community_creation_admin_only
95 require_email_verification: Some(site.require_email_verification),
96 require_application: Some(site.require_application),
97 application_question: site.application_question,
98 private_instance: Some(site.private_instance),
99 default_theme: Some(site.default_theme),
100 default_post_listing_type: Some(site.default_post_listing_type),
101 legal_information: site.legal_information,
102 hide_modlog_mod_names: site.hide_modlog_mod_names,
110 async componentDidMount() {
111 this.state.themeList = Some(await fetchThemeList());
112 this.setState(this.state);
115 // Necessary to stop the loading
116 componentWillReceiveProps() {
117 this.state.loading = false;
118 this.setState(this.state);
121 componentDidUpdate() {
123 !this.state.loading &&
124 this.props.site.isNone() &&
125 (this.state.siteForm.name ||
126 this.state.siteForm.sidebar ||
127 this.state.siteForm.application_question ||
128 this.state.siteForm.description)
130 window.onbeforeunload = () => true;
132 window.onbeforeunload = undefined;
136 componentWillUnmount() {
137 window.onbeforeunload = null;
145 !this.state.loading &&
146 this.props.site.isNone() &&
147 (this.state.siteForm.name ||
148 this.state.siteForm.sidebar ||
149 this.state.siteForm.application_question ||
150 this.state.siteForm.description)
152 message={i18n.t("block_leaving")}
154 <form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
156 this.props.site.isSome()
157 ? capitalizeFirstLetter(i18n.t("save"))
158 : capitalizeFirstLetter(i18n.t("name"))
159 } ${i18n.t("your_site")}`}</h5>
160 <div class="form-group row">
161 <label class="col-12 col-form-label" htmlFor="create-site-name">
167 id="create-site-name"
169 value={toUndefined(this.state.siteForm.name)}
170 onInput={linkEvent(this, this.handleSiteNameChange)}
177 <div class="form-group">
178 <label>{i18n.t("icon")}</label>
180 uploadTitle={i18n.t("upload_icon")}
181 imageSrc={this.state.siteForm.icon}
182 onUpload={this.handleIconUpload}
183 onRemove={this.handleIconRemove}
187 <div class="form-group">
188 <label>{i18n.t("banner")}</label>
190 uploadTitle={i18n.t("upload_banner")}
191 imageSrc={this.state.siteForm.banner}
192 onUpload={this.handleBannerUpload}
193 onRemove={this.handleBannerRemove}
196 <div class="form-group row">
197 <label class="col-12 col-form-label" htmlFor="site-desc">
198 {i18n.t("description")}
205 value={toUndefined(this.state.siteForm.description)}
206 onInput={linkEvent(this, this.handleSiteDescChange)}
211 <div class="form-group row">
212 <label class="col-12 col-form-label">{i18n.t("sidebar")}</label>
215 initialContent={this.state.siteForm.sidebar}
219 onContentChange={this.handleSiteSidebarChange}
220 hideNavigationWarnings
224 <div class="form-group row">
225 <label class="col-12 col-form-label">
226 {i18n.t("legal_information")}
230 initialContent={this.state.siteForm.legal_information}
234 onContentChange={this.handleSiteLegalInfoChange}
235 hideNavigationWarnings
239 {this.state.siteForm.require_application.unwrapOr(false) && (
240 <div class="form-group row">
241 <label class="col-12 col-form-label">
242 {i18n.t("application_questionnaire")}
246 initialContent={this.state.siteForm.application_question}
250 onContentChange={this.handleSiteApplicationQuestionChange}
251 hideNavigationWarnings
256 <div class="form-group row">
258 <div class="form-check">
260 class="form-check-input"
261 id="create-site-downvotes"
263 checked={toUndefined(this.state.siteForm.enable_downvotes)}
266 this.handleSiteEnableDownvotesChange
269 <label class="form-check-label" htmlFor="create-site-downvotes">
270 {i18n.t("enable_downvotes")}
275 <div class="form-group row">
277 <div class="form-check">
279 class="form-check-input"
280 id="create-site-enable-nsfw"
282 checked={toUndefined(this.state.siteForm.enable_nsfw)}
283 onChange={linkEvent(this, this.handleSiteEnableNsfwChange)}
286 class="form-check-label"
287 htmlFor="create-site-enable-nsfw"
289 {i18n.t("enable_nsfw")}
294 <div class="form-group row">
296 <div class="form-check">
298 class="form-check-input"
299 id="create-site-open-registration"
301 checked={toUndefined(this.state.siteForm.open_registration)}
304 this.handleSiteOpenRegistrationChange
308 class="form-check-label"
309 htmlFor="create-site-open-registration"
311 {i18n.t("open_registration")}
316 <div class="form-group row">
318 <div class="form-check">
320 class="form-check-input"
321 id="create-site-community-creation-admin-only"
323 checked={toUndefined(
324 this.state.siteForm.community_creation_admin_only
328 this.handleSiteCommunityCreationAdminOnly
332 class="form-check-label"
333 htmlFor="create-site-community-creation-admin-only"
335 {i18n.t("community_creation_admin_only")}
340 <div class="form-group row">
342 <div class="form-check">
344 class="form-check-input"
345 id="create-site-require-email-verification"
347 checked={toUndefined(
348 this.state.siteForm.require_email_verification
352 this.handleSiteRequireEmailVerification
356 class="form-check-label"
357 htmlFor="create-site-require-email-verification"
359 {i18n.t("require_email_verification")}
364 <div class="form-group row">
366 <div class="form-check">
368 class="form-check-input"
369 id="create-site-require-application"
371 checked={toUndefined(this.state.siteForm.require_application)}
372 onChange={linkEvent(this, this.handleSiteRequireApplication)}
375 class="form-check-label"
376 htmlFor="create-site-require-application"
378 {i18n.t("require_registration_application")}
383 <div class="form-group row">
386 class="form-check-label mr-2"
387 htmlFor="create-site-default-theme"
392 id="create-site-default-theme"
393 value={toUndefined(this.state.siteForm.default_theme)}
394 onChange={linkEvent(this, this.handleSiteDefaultTheme)}
395 class="custom-select w-auto"
397 <option value="browser">{i18n.t("browser_default")}</option>
398 {this.state.themeList.unwrapOr([]).map(theme => (
399 <option value={theme}>{theme}</option>
404 {this.props.showLocal && (
405 <form className="form-group row">
406 <label class="col-sm-3">{i18n.t("listing_type")}</label>
407 <div class="col-sm-9">
411 this.state.siteForm.default_post_listing_type.unwrapOr(
417 showSubscribed={false}
418 onChange={this.handleDefaultPostListingTypeChange}
423 <div class="form-group row">
425 <div class="form-check">
427 class="form-check-input"
428 id="create-site-private-instance"
430 value={toUndefined(this.state.siteForm.default_theme)}
431 onChange={linkEvent(this, this.handleSitePrivateInstance)}
434 class="form-check-label"
435 htmlFor="create-site-private-instance"
437 {i18n.t("private_instance")}
442 <div class="form-group row">
444 <div class="form-check">
446 class="form-check-input"
447 id="create-site-hide-modlog-mod-names"
449 checked={toUndefined(
450 this.state.siteForm.hide_modlog_mod_names
452 onChange={linkEvent(this, this.handleSiteHideModlogModNames)}
455 class="form-check-label"
456 htmlFor="create-site-hide-modlog-mod-names"
458 {i18n.t("hide_modlog_mod_names")}
463 <div class="form-group row">
467 class="btn btn-secondary mr-2"
468 disabled={this.state.loading}
470 {this.state.loading ? (
472 ) : this.props.site.isSome() ? (
473 capitalizeFirstLetter(i18n.t("save"))
475 capitalizeFirstLetter(i18n.t("create"))
478 {this.props.site.isSome() && (
481 class="btn btn-secondary"
482 onClick={linkEvent(this, this.handleCancel)}
494 handleCreateSiteSubmit(i: SiteForm, event: any) {
495 event.preventDefault();
496 i.state.loading = true;
497 i.state.siteForm.auth = auth().unwrap();
499 if (i.props.site.isSome()) {
500 WebSocketService.Instance.send(wsClient.editSite(i.state.siteForm));
503 let sForm = i.state.siteForm;
504 let form = new CreateSite({
505 name: sForm.name.unwrapOr("My site"),
506 sidebar: sForm.sidebar,
507 description: sForm.description,
509 banner: sForm.banner,
510 community_creation_admin_only: sForm.community_creation_admin_only,
511 enable_nsfw: sForm.enable_nsfw,
512 enable_downvotes: sForm.enable_downvotes,
513 require_application: sForm.require_application,
514 application_question: sForm.application_question,
515 open_registration: sForm.open_registration,
516 require_email_verification: sForm.require_email_verification,
517 private_instance: sForm.private_instance,
518 default_theme: sForm.default_theme,
519 default_post_listing_type: sForm.default_post_listing_type,
520 auth: auth().unwrap(),
521 hide_modlog_mod_names: sForm.hide_modlog_mod_names,
523 WebSocketService.Instance.send(wsClient.createSite(form));
528 handleSiteNameChange(i: SiteForm, event: any) {
529 i.state.siteForm.name = Some(event.target.value);
533 handleSiteSidebarChange(val: string) {
534 this.state.siteForm.sidebar = Some(val);
535 this.setState(this.state);
538 handleSiteLegalInfoChange(val: string) {
539 this.state.siteForm.legal_information = Some(val);
540 this.setState(this.state);
543 handleSiteApplicationQuestionChange(val: string) {
544 this.state.siteForm.application_question = Some(val);
545 this.setState(this.state);
548 handleSiteDescChange(i: SiteForm, event: any) {
549 i.state.siteForm.description = Some(event.target.value);
553 handleSiteEnableNsfwChange(i: SiteForm, event: any) {
554 i.state.siteForm.enable_nsfw = Some(event.target.checked);
558 handleSiteOpenRegistrationChange(i: SiteForm, event: any) {
559 i.state.siteForm.open_registration = Some(event.target.checked);
563 handleSiteCommunityCreationAdminOnly(i: SiteForm, event: any) {
564 i.state.siteForm.community_creation_admin_only = Some(event.target.checked);
568 handleSiteEnableDownvotesChange(i: SiteForm, event: any) {
569 i.state.siteForm.enable_downvotes = Some(event.target.checked);
573 handleSiteRequireApplication(i: SiteForm, event: any) {
574 i.state.siteForm.require_application = Some(event.target.checked);
578 handleSiteRequireEmailVerification(i: SiteForm, event: any) {
579 i.state.siteForm.require_email_verification = Some(event.target.checked);
583 handleSitePrivateInstance(i: SiteForm, event: any) {
584 i.state.siteForm.private_instance = Some(event.target.checked);
588 handleSiteHideModlogModNames(i: SiteForm, event: any) {
589 i.state.siteForm.hide_modlog_mod_names = Some(event.target.checked);
593 handleSiteDefaultTheme(i: SiteForm, event: any) {
594 i.state.siteForm.default_theme = Some(event.target.value);
598 handleCancel(i: SiteForm) {
602 handleIconUpload(url: string) {
603 this.state.siteForm.icon = Some(url);
604 this.setState(this.state);
608 this.state.siteForm.icon = Some("");
609 this.setState(this.state);
612 handleBannerUpload(url: string) {
613 this.state.siteForm.banner = Some(url);
614 this.setState(this.state);
617 handleBannerRemove() {
618 this.state.siteForm.banner = Some("");
619 this.setState(this.state);
622 handleDefaultPostListingTypeChange(val: ListingType) {
623 this.state.siteForm.default_post_listing_type = Some(
624 ListingType[ListingType[val]]
626 this.setState(this.state);