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>
     );
   }
 }

app/javascript/components/TenantSignUp/ConfirmSignUpPage.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import I18n from 'i18n-js';
+import Box from '../common/Box';
+
+interface Props {
+  subdomain: string;
+  userEmail: string;
+}
+
+const ConfirmSignUpPage = ({
+  subdomain,
+  userEmail,
+}: Props) => (
+  <Box>
+    <h3>{ I18n.t('signup.step3.title') }</h3>
+
+    <p>{ I18n.t('signup.step3.message', { email: userEmail, subdomain: `${subdomain}.astuto.io` }) }</p>
+  </Box>
+);
+
+export default ConfirmSignUpPage;

app/javascript/components/TenantSignUp/TenantSignUpForm.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import I18n from 'i18n-js';
+
+import Box from '../common/Box';
+import { TenantSignUpTenantFormState } from '../../reducers/tenantSignUpReducer';
+import Button from '../common/Button';
+import Spinner from '../common/Spinner';
+import { DangerText } from '../common/CustomTexts';
+
+interface Props {
+  tenantForm: TenantSignUpTenantFormState;
+  handleChangeTenantSiteName(siteName: string): void;
+  handleChangeTenantSubdomain(subdomain: string): void;
+  
+  isSubmitting: boolean;
+  error: string;
+  handleSubmit(): void;
+}
+
+class TenantSignUpForm extends React.Component<Props> {
+  form: any;
+
+  constructor(props: Props) {
+    super(props);
+
+    this.form = React.createRef();
+  }
+
+  render() {
+    const {
+      tenantForm,
+      handleChangeTenantSiteName,
+      handleChangeTenantSubdomain,
+
+      isSubmitting,
+      error,
+      handleSubmit,
+    } = this.props;
+
+    return (
+      <Box customClass="tenantSignUpStep2">
+        <h3>{ I18n.t('signup.step2.title') }</h3>
+
+        <form ref={this.form}>
+          <div className="formRow">
+            <input
+              type="text"
+              autoFocus
+              value={tenantForm.siteName}
+              onChange={e => handleChangeTenantSiteName(e.target.value)}
+              placeholder={I18n.t('signup.step2.site_name')}
+              required
+              id="tenantSiteName"
+              className="formControl"
+            />
+          </div>
+
+          <div className="formRow">
+            <div className="input-group">
+              <input
+                type="text"
+                value={tenantForm.subdomain}
+                onChange={e => handleChangeTenantSubdomain(e.target.value)}
+                placeholder={I18n.t('signup.step2.subdomain')}
+                required
+                id="tenantSubdomain"
+                className="formControl"
+              />
+              <div className="input-group-append">
+                <div className="input-group-text">.astuto.io</div>
+              </div>
+            </div>
+          </div>
+
+          <Button
+            onClick={e => {
+              e.preventDefault();
+              handleSubmit();
+            }}
+            className="tenantConfirm"
+          >
+            { isSubmitting ? <Spinner /> : I18n.t('signup.step2.create_button') }
+          </Button>
+
+          { error !== '' && <DangerText>{ error }</DangerText> }
+        </form>
+      </Box>
+    );
+  }
+}
+
+export default TenantSignUpForm;

app/javascript/components/TenantSignUp/TenantSignUpP.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { TenantSignUpTenantFormState, TenantSignUpUserFormState } from '../../reducers/tenantSignUpReducer';
+import ConfirmSignUpPage from './ConfirmSignUpPage';
+
+import TenantSignUpForm from './TenantSignUpForm';
+import UserSignUpForm from './UserSignUpForm';
+
+interface Props {
+  authenticityToken: string;
+
+  currentStep: number;
+  emailAuth: boolean;
+  isSubmitting: boolean;
+  error: string;
+
+  toggleEmailAuth(): void;
+
+  userForm: TenantSignUpUserFormState;
+  handleChangeUserFullName(fullName: string): void;
+  handleChangeUserEmail(email: string): void;
+  handleChangeUserPassword(password: string): void;
+  handleChangeUserPasswordConfirmation(passwordConfirmation: string): void;
+  handleUserFormConfirm(): void;
+
+  tenantForm: TenantSignUpTenantFormState;
+  handleChangeTenantSiteName(siteName: string): void;
+  handleChangeTenantSubdomain(subdomain: string): void;
+
+  handleSubmit(
+    userFullName: string,
+    userEmail: string,
+    userPassword: string,
+    siteName: string,
+    subdomain: string,
+    authenticityToken: string,
+  ): void;
+}
+
+class TenantSignUpP extends React.Component<Props> {
+  constructor(props: Props) {
+    super(props);
+
+    this._handleSubmit = this._handleSubmit.bind(this);
+  }
+
+  _handleSubmit() {
+    const { userForm, tenantForm, handleSubmit } = this.props;
+
+    handleSubmit(
+      userForm.fullName,
+      userForm.email,
+      userForm.password,
+      tenantForm.siteName,
+      tenantForm.subdomain,
+      this.props.authenticityToken,
+    );
+  }
+
+  render() {
+    const {
+      currentStep,
+      emailAuth,
+      toggleEmailAuth,
+
+      userForm,
+      handleChangeUserFullName,
+      handleChangeUserEmail,
+      handleChangeUserPassword,
+      handleChangeUserPasswordConfirmation,
+      handleUserFormConfirm,
+
+      tenantForm,
+      handleChangeTenantSiteName,
+      handleChangeTenantSubdomain,
+
+      isSubmitting,
+      error,
+    } = this.props;
+
+    return (
+      <div className="tenantSignUpContainer">
+        {
+          (currentStep === 1 || currentStep === 2) &&
+            <UserSignUpForm
+              currentStep={currentStep}
+    
+              emailAuth={emailAuth}
+              toggleEmailAuth={toggleEmailAuth}
+              userForm={userForm}
+    
+              handleChangeUserFullName={handleChangeUserFullName}
+              handleChangeUserEmail={handleChangeUserEmail}
+              handleChangeUserPassword={handleChangeUserPassword}
+              handleChangeUserPasswordConfirmation={handleChangeUserPasswordConfirmation}
+              handleUserFormConfirm={handleUserFormConfirm}
+            />
+        }
+
+        {
+          currentStep === 2 &&
+            <TenantSignUpForm
+              tenantForm={tenantForm}
+              handleChangeTenantSiteName={handleChangeTenantSiteName}
+              handleChangeTenantSubdomain={handleChangeTenantSubdomain}
+
+              isSubmitting={isSubmitting}
+              error={error}
+              handleSubmit={this._handleSubmit}
+            />
+        }
+
+        {
+          currentStep === 3 &&
+            <ConfirmSignUpPage
+              subdomain={tenantForm.subdomain}
+              userEmail={userForm.email}
+            />
+        }
+      </div>
+    );
+  }
+}
+
+export default TenantSignUpP;

app/javascript/components/TenantSignUp/UserSignUpForm.tsx

@@ -0,0 +1,147 @@
+import * as React from 'react';
+import I18n from 'i18n-js';
+
+import Box from '../common/Box';
+import Button from '../common/Button';
+import { TenantSignUpUserFormState } from '../../reducers/tenantSignUpReducer';
+
+interface Props {
+  currentStep: number;
+  emailAuth: boolean;
+  toggleEmailAuth(): void;
+  userForm: TenantSignUpUserFormState;
+
+  handleChangeUserFullName(fullName: string): void;
+  handleChangeUserEmail(email: string): void;
+  handleChangeUserPassword(password: string): void;
+  handleChangeUserPasswordConfirmation(passwordConfirmation: string): void;
+  handleUserFormConfirm(): void;
+}
+
+class UserSignUpForm extends React.Component<Props> {
+  form: any;
+
+  constructor(props: Props) {
+    super(props);
+
+    this.form = React.createRef();
+  }
+
+  validateUserForm(): boolean {
+    let isValid: boolean = this.form.current.reportValidity();
+    if (this.validateUserPasswordConfirmation() === false)
+      isValid = false;
+
+    return isValid;
+  }
+
+  validateUserPasswordConfirmation(): boolean {
+    const isValid = this.props.userForm.password === this.props.userForm.passwordConfirmation;
+    return isValid;
+  }
+
+  render() {
+    const {
+      currentStep,
+      emailAuth,
+      toggleEmailAuth,
+      userForm,
+    
+      handleChangeUserFullName,
+      handleChangeUserEmail,
+      handleChangeUserPassword,
+      handleChangeUserPasswordConfirmation,
+      handleUserFormConfirm,
+    } = this.props;
+
+    return (
+      <Box customClass="tenantSignUpStep1">
+        <h3>{ I18n.t('signup.step1.title') }</h3>
+
+        {
+          currentStep === 1 && !emailAuth && 
+          <Button className="emailAuth" onClick={toggleEmailAuth}>
+            { I18n.t('signup.step1.email_auth') }
+          </Button>
+        }
+
+        {
+          currentStep === 1 && emailAuth &&
+          <form ref={this.form}>
+            <div className="formRow">
+              <input
+                type="text"
+                autoFocus
+                value={userForm.fullName}
+                onChange={e => handleChangeUserFullName(e.target.value)}
+                placeholder={I18n.t('common.forms.auth.full_name')}
+                required
+                id="userFullName"
+                className="formControl"
+              />
+            </div>
+
+            <div className="formRow">
+              <input
+                type="email"
+                value={userForm.email}
+                onChange={e => handleChangeUserEmail(e.target.value)}
+                placeholder={I18n.t('common.forms.auth.email')}
+                required
+                id="userEmail"
+                className="formControl"
+              />
+            </div>
+
+            <div className="formRow">
+              <div className="formGroup col-6">
+                <input
+                  type="password"
+                  value={userForm.password}
+                  onChange={e => handleChangeUserPassword(e.target.value)}
+                  placeholder={I18n.t('common.forms.auth.password')}
+                  required
+                  minLength={6}
+                  maxLength={128}
+                  id="userPassword"
+                  className="formControl"
+                />
+              </div>
+
+              <div className="formGroup col-6">
+                <input
+                  type="password"
+                  value={userForm.passwordConfirmation}
+                  onChange={e => handleChangeUserPasswordConfirmation(e.target.value)}
+                  placeholder={I18n.t('common.forms.auth.password_confirmation')}
+                  required
+                  minLength={6}
+                  maxLength={128}
+                  id="userPasswordConfirmation"
+                  className={`formControl${userForm.passwordConfirmationError ? ' invalid' : ''}`}
+                />
+              </div>
+            </div>
+
+            <Button
+              onClick={e => {
+                e.preventDefault();
+                this.validateUserForm() && handleUserFormConfirm();
+              }}
+              className="userConfirm"
+            >
+              { I18n.t('common.buttons.confirm') }
+            </Button>
+          </form>
+        }
+
+        {
+          currentStep === 2 &&
+          <p><b>{userForm.fullName}</b> ({userForm.email})</p>
+        }
+      </Box>
+    );
+  }
+}
+
+export default UserSignUpForm;

app/javascript/components/TenantSignUp/index.tsx

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

app/javascript/components/common/SiteSettingsInfoBox.tsx

@@ -7,9 +7,10 @@ import Box from './Box';
 interface Props {
   areUpdating: boolean;
   error: string;
+  areDirty?: boolean;
 }
 
-const SiteSettingsInfoBox = ({ areUpdating, error }: Props) => (
+const SiteSettingsInfoBox = ({ areUpdating, error, areDirty = false }: Props) => (
   <Box customClass="siteSettingsInfo">
   {
     areUpdating ?
@@ -17,10 +18,13 @@ const SiteSettingsInfoBox = ({ areUpdating, error }: Props) => (
     :
       error ?
         <span className="error">
-          {I18n.t('site_settings.info_box.error', { message: JSON.stringify(error) })}
+          { I18n.t('site_settings.info_box.error', { message: JSON.stringify(error) }) }
         </span>
       :
-        <span>{I18n.t('site_settings.info_box.up_to_date')}</span>
+        areDirty ?
+          <span className="warning">{ I18n.t('site_settings.info_box.dirty') }</span>
+        :
+          <span>{ I18n.t('site_settings.info_box.up_to_date') }</span>
   }
   </Box>
 );