Add Site settings > General (#133)

app/javascript/components/SiteSettings/Boards/BoardForm.tsx

@@ -80,18 +80,22 @@ class BoardForm extends React.Component<Props, State> {
     const {name, description} = this.state;
 
     return (
-      <div className="boardForm">
+      <form className="boardForm">
         <div className="boardMandatoryForm">
           <input
             type="text"
             placeholder={I18n.t('site_settings.boards.form.name')}
             value={name}
             onChange={e => this.onNameChange(e.target.value)}
+            autoFocus
             className="form-control"
           />
 
           <Button
-            onClick={this.onSubmit}
+            onClick={e => {
+              e.preventDefault();
+              this.onSubmit();
+            }}
             className="newBoardButton"
             disabled={!this.isFormValid()}
           >
@@ -110,7 +114,7 @@ class BoardForm extends React.Component<Props, State> {
           onChange={e => this.onDescriptionChange(e.target.value)}
           className="form-control"
         />
-      </div>
+      </form>
     );
   }
 }

app/javascript/components/SiteSettings/General/GeneralSiteSettingsP.tsx

@@ -0,0 +1,166 @@
+import * as React from 'react';
+import I18n from 'i18n-js';
+
+import Box from '../../common/Box';
+import SiteSettingsInfoBox from '../../common/SiteSettingsInfoBox';
+import { ISiteSettingsGeneralForm } from '../../../reducers/SiteSettings/generalReducer';
+import Button from '../../common/Button';
+import HttpStatus from '../../../constants/http_status';
+import {
+  TENANT_BRAND_NAME_AND_LOGO,
+  TENANT_BRAND_NAME_ONLY,
+  TENANT_BRAND_LOGO_ONLY,
+  TENANT_BRAND_NONE,
+} from '../../../interfaces/ITenant';
+
+interface Props {
+  originForm: ISiteSettingsGeneralForm;
+  authenticityToken: string;
+
+  form: ISiteSettingsGeneralForm;
+  areDirty: boolean;
+  areLoading: boolean;
+  areUpdating: boolean;
+  error: string;
+
+  requestTenant(): void;
+  updateTenant(
+    siteName: string,
+    siteLogo: string,
+    brandDisplaySetting: string,
+    locale: string,
+    authenticityToken: string
+  ): Promise<any>;
+
+  handleChangeSiteName(siteName: string): void;
+  handleChangeSiteLogo(siteLogo: string): void;
+  handleChangeBrandDisplaySetting(brandDisplaySetting: string)
+  handleChangeLocale(locale: string): void;
+}
+
+class GeneralSiteSettingsP extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+
+    this._handleUpdateTenant = this._handleUpdateTenant.bind(this);
+  }
+
+  componentDidMount() {
+    this.props.requestTenant();
+  }
+
+  _handleUpdateTenant() {
+    const { siteName, siteLogo, brandDisplaySetting, locale } = this.props.form;
+
+    this.props.updateTenant(
+      siteName,
+      siteLogo,
+      brandDisplaySetting,
+      locale,
+      this.props.authenticityToken,
+    ).then(res => {
+      if (res?.status !== HttpStatus.OK) return;
+
+      window.location.reload();
+    });
+  }
+
+  render() {
+    const {
+      originForm,
+      form,
+      areDirty,
+      areLoading,
+      areUpdating,
+      error,
+
+      handleChangeSiteName,
+      handleChangeSiteLogo,
+      handleChangeBrandDisplaySetting,
+      handleChangeLocale,
+    } = this.props;
+
+    return (
+      <>
+        <Box>
+          <h2>{ I18n.t('site_settings.general.title') }</h2>
+
+          <form>
+            <div className="formRow">
+              <div className="formGroup col-4">
+                <label htmlFor="siteName">{ I18n.t('site_settings.general.site_name') }</label>
+                <input
+                  type="text"
+                  value={areLoading ? originForm.siteName : form.siteName}
+                  onChange={e => handleChangeSiteName(e.target.value)}
+                  id="siteName"
+                  className="formControl"
+                />
+              </div>
+
+              <div className="formGroup col-4">
+                <label htmlFor="siteLogo">{ I18n.t('site_settings.general.site_logo') }</label>
+                <input
+                  type="text"
+                  value={areLoading ? originForm.siteLogo : form.siteLogo}
+                  onChange={e => handleChangeSiteLogo(e.target.value)}
+                  id="siteLogo"
+                  className="formControl"
+                />
+              </div>
+
+              <div className="formGroup col-4">
+                <label htmlFor="brandSetting">{ I18n.t('site_settings.general.brand_setting') }</label>
+                <select
+                  value={form.brandDisplaySetting || originForm.brandDisplaySetting}
+                  onChange={e => handleChangeBrandDisplaySetting(e.target.value)}
+                  id="brandSetting"
+                  className="selectPicker"
+                >
+                  <option value={TENANT_BRAND_NAME_AND_LOGO}>
+                    { I18n.t('site_settings.general.brand_setting_both') }
+                  </option>
+                  <option value={TENANT_BRAND_NAME_ONLY}>
+                    { I18n.t('site_settings.general.brand_setting_name') }
+                  </option>
+                  <option value={TENANT_BRAND_LOGO_ONLY}>
+                    { I18n.t('site_settings.general.brand_setting_logo') }
+                  </option>
+                  <option value={TENANT_BRAND_NONE}>
+                    { I18n.t('site_settings.general.brand_setting_none') }
+                  </option>
+                </select>
+              </div>
+            </div>
+
+            <div className="formGroup">
+              <label htmlFor="locale">{ I18n.t('site_settings.general.locale') }</label>
+              <select
+                value={form.locale || originForm.locale}
+                onChange={e => handleChangeLocale(e.target.value)}
+                id="locale"
+                className="selectPicker"
+              >
+                <option value="en">🇬🇧 English</option>
+                <option value="it">🇮🇹 Italiano</option>
+              </select>
+            </div>
+          </form>
+
+          <br />
+
+          <Button
+            onClick={this._handleUpdateTenant}
+            disabled={!areDirty}
+          >
+            { I18n.t('common.buttons.update') }
+          </Button>
+        </Box>
+
+        <SiteSettingsInfoBox areUpdating={areLoading || areUpdating} error={error} areDirty={areDirty} />
+      </>
+    );
+  }
+}
+
+export default GeneralSiteSettingsP;

app/javascript/components/SiteSettings/General/index.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Provider } from 'react-redux';
+import { Store } from 'redux';
+
+import GeneralSiteSettings from '../../../containers/GeneralSiteSettings';
+import createStoreHelper from '../../../helpers/createStore';
+import { State } from '../../../reducers/rootReducer';
+import { ISiteSettingsGeneralForm } from '../../../reducers/SiteSettings/generalReducer';
+
+interface Props {
+  originForm: ISiteSettingsGeneralForm;
+  authenticityToken: string;
+}
+
+class GeneralSiteSettingsRoot extends React.Component<Props> {
+  store: Store<State, any>;
+
+  constructor(props: Props) {
+    super(props);
+
+    this.store = createStoreHelper();
+  }
+
+  render() {
+    return (
+      <Provider store={this.store}>
+        <GeneralSiteSettings
+          originForm={this.props.originForm}
+          authenticityToken={this.props.authenticityToken}
+        />
+      </Provider>
+    );
+  }
+}
+
+export default GeneralSiteSettingsRoot;

app/javascript/components/SiteSettings/PostStatuses/PostStatusForm.tsx

@@ -87,12 +87,13 @@ class PostStatusForm extends React.Component<Props, State> {
     const {name, color} = this.state;
 
     return (
-      <div className="postStatusForm">
+      <form className="postStatusForm">
         <input
           type="text"
           placeholder={I18n.t('site_settings.post_statuses.form.name')}
           value={name}
           onChange={e => this.onNameChange(e.target.value)}
+          autoFocus
           className="form-control"
         />
         
@@ -104,7 +105,10 @@ class PostStatusForm extends React.Component<Props, State> {
         />
 
         <Button
-          onClick={this.onSubmit}
+          onClick={e => {
+            e.preventDefault();
+            this.onSubmit();
+          }}
           className="newPostStatusButton"
           disabled={!this.isFormValid()}
         >
@@ -115,7 +119,7 @@ class PostStatusForm extends React.Component<Props, State> {
                 I18n.t('common.buttons.update')
             }
         </Button>
-      </div>
+      </form>
     );
   }
 }