Add Site settings > General (#133)

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;