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,
56 application_email_admins: None,
58 hide_modlog_mod_names: Some(true),
64 constructor(props: any, context: any) {
65 super(props, context);
67 this.state = this.emptyState;
68 this.handleSiteSidebarChange = this.handleSiteSidebarChange.bind(this);
69 this.handleSiteLegalInfoChange = this.handleSiteLegalInfoChange.bind(this);
70 this.handleSiteApplicationQuestionChange =
71 this.handleSiteApplicationQuestionChange.bind(this);
73 this.handleIconUpload = this.handleIconUpload.bind(this);
74 this.handleIconRemove = this.handleIconRemove.bind(this);
76 this.handleBannerUpload = this.handleBannerUpload.bind(this);
77 this.handleBannerRemove = this.handleBannerRemove.bind(this);
79 this.handleDefaultPostListingTypeChange =
80 this.handleDefaultPostListingTypeChange.bind(this);
82 if (this.props.site.isSome()) {
83 let site = this.props.site.unwrap();
86 siteForm: new EditSite({
87 name: Some(site.name),
88 sidebar: site.sidebar,
89 description: site.description,
90 enable_downvotes: Some(site.enable_downvotes),
91 open_registration: Some(site.open_registration),
92 enable_nsfw: Some(site.enable_nsfw),
93 community_creation_admin_only: Some(
94 site.community_creation_admin_only
98 require_email_verification: Some(site.require_email_verification),
99 require_application: Some(site.require_application),
100 application_question: site.application_question,
101 private_instance: Some(site.private_instance),
102 default_theme: Some(site.default_theme),
103 default_post_listing_type: Some(site.default_post_listing_type),
104 legal_information: site.legal_information,
105 application_email_admins: Some(site.application_email_admins),
106 hide_modlog_mod_names: site.hide_modlog_mod_names,
113 async componentDidMount() {
114 this.setState({ themeList: Some(await fetchThemeList()) });
117 // Necessary to stop the loading
118 componentWillReceiveProps() {
119 this.setState({ loading: false });
122 componentDidUpdate() {
124 !this.state.loading &&
125 this.props.site.isNone() &&
126 (this.state.siteForm.name ||
127 this.state.siteForm.sidebar ||
128 this.state.siteForm.application_question ||
129 this.state.siteForm.description)
131 window.onbeforeunload = () => true;
133 window.onbeforeunload = undefined;
137 componentWillUnmount() {
138 window.onbeforeunload = null;
146 !this.state.loading &&
147 this.props.site.isNone() &&
148 (this.state.siteForm.name ||
149 this.state.siteForm.sidebar ||
150 this.state.siteForm.application_question ||
151 this.state.siteForm.description)
153 message={i18n.t("block_leaving")}
155 <form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
157 this.props.site.isSome()
158 ? capitalizeFirstLetter(i18n.t("save"))
159 : capitalizeFirstLetter(i18n.t("name"))
160 } ${i18n.t("your_site")}`}</h5>
161 <div className="form-group row">
162 <label className="col-12 col-form-label" htmlFor="create-site-name">
165 <div className="col-12">
168 id="create-site-name"
169 className="form-control"
170 value={toUndefined(this.state.siteForm.name)}
171 onInput={linkEvent(this, this.handleSiteNameChange)}
178 <div className="form-group">
179 <label>{i18n.t("icon")}</label>
181 uploadTitle={i18n.t("upload_icon")}
182 imageSrc={this.state.siteForm.icon}
183 onUpload={this.handleIconUpload}
184 onRemove={this.handleIconRemove}
188 <div className="form-group">
189 <label>{i18n.t("banner")}</label>
191 uploadTitle={i18n.t("upload_banner")}
192 imageSrc={this.state.siteForm.banner}
193 onUpload={this.handleBannerUpload}
194 onRemove={this.handleBannerRemove}
197 <div className="form-group row">
198 <label className="col-12 col-form-label" htmlFor="site-desc">
199 {i18n.t("description")}
201 <div className="col-12">
204 className="form-control"
206 value={toUndefined(this.state.siteForm.description)}
207 onInput={linkEvent(this, this.handleSiteDescChange)}
212 <div className="form-group row">
213 <label className="col-12 col-form-label">{i18n.t("sidebar")}</label>
214 <div className="col-12">
216 initialContent={this.state.siteForm.sidebar}
217 initialLanguageId={None}
221 onContentChange={this.handleSiteSidebarChange}
222 hideNavigationWarnings
227 <div className="form-group row">
228 <label className="col-12 col-form-label">
229 {i18n.t("legal_information")}
231 <div className="col-12">
233 initialContent={this.state.siteForm.legal_information}
234 initialLanguageId={None}
238 onContentChange={this.handleSiteLegalInfoChange}
239 hideNavigationWarnings
244 {this.state.siteForm.require_application.unwrapOr(false) && (
245 <div className="form-group row">
246 <label className="col-12 col-form-label">
247 {i18n.t("application_questionnaire")}
249 <div className="col-12">
251 initialContent={this.state.siteForm.application_question}
252 initialLanguageId={None}
256 onContentChange={this.handleSiteApplicationQuestionChange}
257 hideNavigationWarnings
263 <div className="form-group row">
264 <div className="col-12">
265 <div className="form-check">
267 className="form-check-input"
268 id="create-site-downvotes"
270 checked={toUndefined(this.state.siteForm.enable_downvotes)}
273 this.handleSiteEnableDownvotesChange
277 className="form-check-label"
278 htmlFor="create-site-downvotes"
280 {i18n.t("enable_downvotes")}
285 <div className="form-group row">
286 <div className="col-12">
287 <div className="form-check">
289 className="form-check-input"
290 id="create-site-enable-nsfw"
292 checked={toUndefined(this.state.siteForm.enable_nsfw)}
293 onChange={linkEvent(this, this.handleSiteEnableNsfwChange)}
296 className="form-check-label"
297 htmlFor="create-site-enable-nsfw"
299 {i18n.t("enable_nsfw")}
304 <div className="form-group row">
305 <div className="col-12">
306 <div className="form-check">
308 className="form-check-input"
309 id="create-site-open-registration"
311 checked={toUndefined(this.state.siteForm.open_registration)}
314 this.handleSiteOpenRegistrationChange
318 className="form-check-label"
319 htmlFor="create-site-open-registration"
321 {i18n.t("open_registration")}
326 <div className="form-group row">
327 <div className="col-12">
328 <div className="form-check">
330 className="form-check-input"
331 id="create-site-community-creation-admin-only"
333 checked={toUndefined(
334 this.state.siteForm.community_creation_admin_only
338 this.handleSiteCommunityCreationAdminOnly
342 className="form-check-label"
343 htmlFor="create-site-community-creation-admin-only"
345 {i18n.t("community_creation_admin_only")}
350 <div className="form-group row">
351 <div className="col-12">
352 <div className="form-check">
354 className="form-check-input"
355 id="create-site-require-email-verification"
357 checked={toUndefined(
358 this.state.siteForm.require_email_verification
362 this.handleSiteRequireEmailVerification
366 className="form-check-label"
367 htmlFor="create-site-require-email-verification"
369 {i18n.t("require_email_verification")}
374 <div className="form-group row">
375 <div className="col-12">
376 <div className="form-check">
378 className="form-check-input"
379 id="create-site-require-application"
381 checked={toUndefined(this.state.siteForm.require_application)}
382 onChange={linkEvent(this, this.handleSiteRequireApplication)}
385 className="form-check-label"
386 htmlFor="create-site-require-application"
388 {i18n.t("require_registration_application")}
393 <div className="form-group row">
394 <div className="col-12">
395 <div className="form-check">
397 className="form-check-input"
398 id="create-site-application-email-admins"
400 checked={toUndefined(
401 this.state.siteForm.application_email_admins
405 this.handleSiteApplicationEmailAdmins
409 className="form-check-label"
410 htmlFor="create-site-email-admins"
412 {i18n.t("application_email_admins")}
417 <div className="form-group row">
418 <div className="col-12">
420 className="form-check-label mr-2"
421 htmlFor="create-site-default-theme"
426 id="create-site-default-theme"
427 value={toUndefined(this.state.siteForm.default_theme)}
428 onChange={linkEvent(this, this.handleSiteDefaultTheme)}
429 className="custom-select w-auto"
431 <option value="browser">{i18n.t("browser_default")}</option>
432 {this.state.themeList.unwrapOr([]).map(theme => (
433 <option key={theme} value={theme}>
440 {this.props.showLocal && (
441 <form className="form-group row">
442 <label className="col-sm-3">{i18n.t("listing_type")}</label>
443 <div className="col-sm-9">
447 this.state.siteForm.default_post_listing_type.unwrapOr(
453 showSubscribed={false}
454 onChange={this.handleDefaultPostListingTypeChange}
459 <div className="form-group row">
460 <div className="col-12">
461 <div className="form-check">
463 className="form-check-input"
464 id="create-site-private-instance"
466 checked={toUndefined(this.state.siteForm.private_instance)}
467 onChange={linkEvent(this, this.handleSitePrivateInstance)}
470 className="form-check-label"
471 htmlFor="create-site-private-instance"
473 {i18n.t("private_instance")}
478 <div className="form-group row">
479 <div className="col-12">
480 <div className="form-check">
482 className="form-check-input"
483 id="create-site-hide-modlog-mod-names"
485 checked={toUndefined(
486 this.state.siteForm.hide_modlog_mod_names
488 onChange={linkEvent(this, this.handleSiteHideModlogModNames)}
491 className="form-check-label"
492 htmlFor="create-site-hide-modlog-mod-names"
494 {i18n.t("hide_modlog_mod_names")}
499 <div className="form-group row">
500 <div className="col-12">
503 className="btn btn-secondary mr-2"
504 disabled={this.state.loading}
506 {this.state.loading ? (
508 ) : this.props.site.isSome() ? (
509 capitalizeFirstLetter(i18n.t("save"))
511 capitalizeFirstLetter(i18n.t("create"))
514 {this.props.site.isSome() && (
517 className="btn btn-secondary"
518 onClick={linkEvent(this, this.handleCancel)}
530 handleCreateSiteSubmit(i: SiteForm, event: any) {
531 event.preventDefault();
532 i.setState({ loading: true });
533 i.setState(s => ((s.siteForm.auth = auth().unwrap()), s));
535 if (i.props.site.isSome()) {
536 WebSocketService.Instance.send(wsClient.editSite(i.state.siteForm));
539 let sForm = i.state.siteForm;
540 let form = new CreateSite({
541 name: sForm.name.unwrapOr("My site"),
542 sidebar: sForm.sidebar,
543 description: sForm.description,
545 banner: sForm.banner,
546 community_creation_admin_only: sForm.community_creation_admin_only,
547 enable_nsfw: sForm.enable_nsfw,
548 enable_downvotes: sForm.enable_downvotes,
549 require_application: sForm.require_application,
550 application_question: sForm.application_question,
551 open_registration: sForm.open_registration,
552 require_email_verification: sForm.require_email_verification,
553 private_instance: sForm.private_instance,
554 default_theme: sForm.default_theme,
555 default_post_listing_type: sForm.default_post_listing_type,
556 application_email_admins: sForm.application_email_admins,
557 auth: auth().unwrap(),
558 hide_modlog_mod_names: sForm.hide_modlog_mod_names,
560 WebSocketService.Instance.send(wsClient.createSite(form));
565 handleSiteNameChange(i: SiteForm, event: any) {
566 i.state.siteForm.name = Some(event.target.value);
570 handleSiteSidebarChange(val: string) {
571 this.setState(s => ((s.siteForm.sidebar = Some(val)), s));
574 handleSiteLegalInfoChange(val: string) {
575 this.setState(s => ((s.siteForm.legal_information = Some(val)), s));
578 handleSiteApplicationQuestionChange(val: string) {
579 this.setState(s => ((s.siteForm.application_question = Some(val)), s));
582 handleSiteDescChange(i: SiteForm, event: any) {
583 i.state.siteForm.description = Some(event.target.value);
587 handleSiteEnableNsfwChange(i: SiteForm, event: any) {
588 i.state.siteForm.enable_nsfw = Some(event.target.checked);
592 handleSiteOpenRegistrationChange(i: SiteForm, event: any) {
593 i.state.siteForm.open_registration = Some(event.target.checked);
597 handleSiteCommunityCreationAdminOnly(i: SiteForm, event: any) {
598 i.state.siteForm.community_creation_admin_only = Some(event.target.checked);
602 handleSiteEnableDownvotesChange(i: SiteForm, event: any) {
603 i.state.siteForm.enable_downvotes = Some(event.target.checked);
607 handleSiteRequireApplication(i: SiteForm, event: any) {
608 i.state.siteForm.require_application = Some(event.target.checked);
612 handleSiteRequireEmailVerification(i: SiteForm, event: any) {
613 i.state.siteForm.require_email_verification = Some(event.target.checked);
617 handleSiteApplicationEmailAdmins(i: SiteForm, event: any) {
618 i.state.siteForm.application_email_admins = Some(event.target.checked);
622 handleSitePrivateInstance(i: SiteForm, event: any) {
623 i.state.siteForm.private_instance = Some(event.target.checked);
627 handleSiteHideModlogModNames(i: SiteForm, event: any) {
628 i.state.siteForm.hide_modlog_mod_names = Some(event.target.checked);
632 handleSiteDefaultTheme(i: SiteForm, event: any) {
633 i.state.siteForm.default_theme = Some(event.target.value);
637 handleCancel(i: SiteForm) {
641 handleIconUpload(url: string) {
642 this.setState(s => ((s.siteForm.icon = Some(url)), s));
646 this.setState(s => ((s.siteForm.icon = Some("")), s));
649 handleBannerUpload(url: string) {
650 this.setState(s => ((s.siteForm.banner = Some(url)), s));
653 handleBannerRemove() {
654 this.setState(s => ((s.siteForm.banner = Some("")), s));
657 handleDefaultPostListingTypeChange(val: ListingType) {
660 (s.siteForm.default_post_listing_type = Some(
661 ListingType[ListingType[val]]