1 import { Component, linkEvent } from 'inferno';
2 import { Prompt } from 'inferno-router';
3 import { MarkdownTextArea } from './markdown-textarea';
4 import { Site, SiteForm as SiteFormI } from '../interfaces';
5 import { WebSocketService } from '../services';
6 import { capitalizeFirstLetter, randomStr } from '../utils';
7 import { i18n } from '../i18next';
9 interface SiteFormProps {
10 site?: Site; // If a site is given, that means this is an edit
14 interface SiteFormState {
19 export class SiteForm extends Component<SiteFormProps, SiteFormState> {
20 private id = `site-form-${randomStr()}`;
21 private emptyState: SiteFormState = {
23 enable_downvotes: true,
24 open_registration: true,
31 constructor(props: any, context: any) {
32 super(props, context);
34 this.state = this.emptyState;
35 this.handleSiteDescriptionChange = this.handleSiteDescriptionChange.bind(
39 if (this.props.site) {
40 this.state.siteForm = {
41 name: this.props.site.name,
42 description: this.props.site.description,
43 enable_downvotes: this.props.site.enable_downvotes,
44 open_registration: this.props.site.open_registration,
45 enable_nsfw: this.props.site.enable_nsfw,
50 // Necessary to stop the loading
51 componentWillReceiveProps() {
52 this.state.loading = false;
53 this.setState(this.state);
56 componentDidUpdate() {
58 !this.state.loading &&
60 (this.state.siteForm.name || this.state.siteForm.description)
62 window.onbeforeunload = () => true;
64 window.onbeforeunload = undefined;
68 componentWillUnmount() {
69 window.onbeforeunload = null;
77 !this.state.loading &&
79 (this.state.siteForm.name || this.state.siteForm.description)
81 message={i18n.t('block_leaving')}
83 <form onSubmit={linkEvent(this, this.handleCreateSiteSubmit)}>
86 ? capitalizeFirstLetter(i18n.t('save'))
87 : capitalizeFirstLetter(i18n.t('name'))
88 } ${i18n.t('your_site')}`}</h5>
89 <div class="form-group row">
90 <label class="col-12 col-form-label" htmlFor="create-site-name">
98 value={this.state.siteForm.name}
99 onInput={linkEvent(this, this.handleSiteNameChange)}
106 <div class="form-group row">
107 <label class="col-12 col-form-label" htmlFor={this.id}>
112 initialContent={this.state.siteForm.description}
113 onContentChange={this.handleSiteDescriptionChange}
114 hideNavigationWarnings
118 <div class="form-group row">
120 <div class="form-check">
122 class="form-check-input"
123 id="create-site-downvotes"
125 checked={this.state.siteForm.enable_downvotes}
128 this.handleSiteEnableDownvotesChange
131 <label class="form-check-label" htmlFor="create-site-downvotes">
132 {i18n.t('enable_downvotes')}
137 <div class="form-group row">
139 <div class="form-check">
141 class="form-check-input"
142 id="create-site-enable-nsfw"
144 checked={this.state.siteForm.enable_nsfw}
145 onChange={linkEvent(this, this.handleSiteEnableNsfwChange)}
148 class="form-check-label"
149 htmlFor="create-site-enable-nsfw"
151 {i18n.t('enable_nsfw')}
156 <div class="form-group row">
158 <div class="form-check">
160 class="form-check-input"
161 id="create-site-open-registration"
163 checked={this.state.siteForm.open_registration}
166 this.handleSiteOpenRegistrationChange
170 class="form-check-label"
171 htmlFor="create-site-open-registration"
173 {i18n.t('open_registration')}
178 <div class="form-group row">
182 class="btn btn-secondary mr-2"
183 disabled={this.state.loading}
185 {this.state.loading ? (
186 <svg class="icon icon-spinner spin">
187 <use xlinkHref="#icon-spinner"></use>
189 ) : this.props.site ? (
190 capitalizeFirstLetter(i18n.t('save'))
192 capitalizeFirstLetter(i18n.t('create'))
195 {this.props.site && (
198 class="btn btn-secondary"
199 onClick={linkEvent(this, this.handleCancel)}
211 handleCreateSiteSubmit(i: SiteForm, event: any) {
212 event.preventDefault();
213 i.state.loading = true;
215 WebSocketService.Instance.editSite(i.state.siteForm);
217 WebSocketService.Instance.createSite(i.state.siteForm);
222 handleSiteNameChange(i: SiteForm, event: any) {
223 i.state.siteForm.name = event.target.value;
227 handleSiteDescriptionChange(val: string) {
228 this.state.siteForm.description = val;
229 this.setState(this.state);
232 handleSiteEnableNsfwChange(i: SiteForm, event: any) {
233 i.state.siteForm.enable_nsfw = event.target.checked;
237 handleSiteOpenRegistrationChange(i: SiteForm, event: any) {
238 i.state.siteForm.open_registration = event.target.checked;
242 handleSiteEnableDownvotesChange(i: SiteForm, event: any) {
243 i.state.siteForm.enable_downvotes = event.target.checked;
247 handleCancel(i: SiteForm) {