feat: Add full name to the user signup form (#1534)

app/builders/account_builder.rb

@@ -2,7 +2,7 @@
 
 class AccountBuilder
   include CustomExceptions::Account
-  pattr_initialize [:account_name!, :email!, :confirmed!, :user]
+  pattr_initialize [:account_name!, :email!, :confirmed!, :user, :user_full_name]
 
   def perform
     if @user.nil?
@@ -60,18 +60,13 @@ class AccountBuilder
     )
   end
 
-  def email_to_name(email)
-    name = email[/[^@]+/]
-    name.split('.').map(&:capitalize).join(' ')
-  end
-
   def create_user
     password = SecureRandom.alphanumeric(12)
 
     @user = User.new(email: @email,
                      password: password,
                      password_confirmation: password,
-                     name: email_to_name(@email))
+                     name: @user_full_name)
     @user.confirm if @confirmed
     @user.save!
   end

app/controllers/api/v1/accounts_controller.rb

@@ -16,6 +16,7 @@ class Api::V1::AccountsController < Api::BaseController
   def create
     @user, @account = AccountBuilder.new(
       account_name: account_params[:account_name],
+      user_full_name: account_params[:user_full_name],
       email: account_params[:email],
       confirmed: confirmed?,
       user: current_user
@@ -54,7 +55,7 @@ class Api::V1::AccountsController < Api::BaseController
   end
 
   def account_params
-    params.permit(:account_name, :email, :name, :locale, :domain, :support_email, :auto_resolve_duration)
+    params.permit(:account_name, :email, :name, :locale, :domain, :support_email, :auto_resolve_duration, :user_full_name)
   end
 
   def check_signup_enabled

app/javascript/dashboard/api/auth.js

@@ -26,7 +26,8 @@ export default {
     const fetchPromise = new Promise((resolve, reject) => {
       axios
         .post(urlData.url, {
-          account_name: creds.name,
+          account_name: creds.accountName.trim(),
+          user_full_name: creds.fullName.trim(),
           email: creds.email,
         })
         .then(response => {

app/javascript/dashboard/assets/scss/_woot.scss

@@ -23,7 +23,6 @@
 @import 'views/settings/inbox';
 @import 'views/settings/channel';
 @import 'views/settings/integrations';
-@import 'views/signup';
 
 @import 'plugins/multiselect';
 @import 'plugins/dropdown';

app/javascript/dashboard/assets/scss/views/_signup.scss

@@ -1,94 +0,0 @@
-.signup {
-  // margin-top: $space-larger*1.2;
-
-  .signup--hero {
-    margin-bottom: $space-larger * 1.5;
-
-    .hero--logo {
-      width: 180px;
-    }
-
-    .hero--title {
-      margin-top: $space-large;
-      font-weight: $font-weight-light;
-    }
-
-    .hero--sub {
-      font-size: $font-size-medium;
-      color: $medium-gray;
-    }
-  }
-
-  .signup--features {
-    list-style-type: none;
-    font-size: $font-size-medium;
-
-    > li {
-      padding: $space-slab;
-
-      > i {
-        margin-right: $space-two;
-        font-size: $font-size-large;
-
-        &.beer {
-          color: #dfb63b;
-        }
-
-        &.report {
-          color: #2196f3;
-        }
-
-        &.canned {
-          color: #1cad22;
-        }
-
-        &.uptime {
-          color: #a753b5;
-        }
-
-        &.secure {
-          color: #607d8b;
-        }
-      }
-    }
-  }
-
-  .signup--box {
-    @include elegant-card;
-    padding: $space-large;
-
-    label {
-      font-size: $font-size-default;
-      color: $color-gray;
-
-      input {
-        padding: $space-slab;
-        height: $space-larger;
-        font-size: $font-size-default;
-      }
-
-      .error {
-        font-size: $font-size-small
-      }
-    }
-  }
-
-  .sigin--footer {
-    padding: $space-medium;
-    font-size: $font-size-default;
-
-    > a {
-      font-weight: $font-weight-bold;
-    }
-  }
-
-  .accept--terms {
-    font-size: $font-size-mini;
-    text-align: center;
-    @include margin($zero);
-
-    a {
-      font-size: $font-size-mini;
-    }
-  }
-}

app/javascript/dashboard/assets/scss/widgets/_forms.scss

@@ -2,12 +2,13 @@
   #{$all-text-inputs},
   select,
   .multiselect > .multiselect__tags {
-    @include thin-border(darken(get-color(alert), 25%));
+    @include thin-border(var(--r-400));
   }
 
   .message {
-    color: darken(get-color(alert), 25%);
+    color: var(--r-400);
     display: block;
+    font-size: var(--font-size-small);
     font-weight: $font-weight-normal;
     margin-bottom: $space-one;
     margin-top: -$space-normal;

app/javascript/dashboard/components/widgets/forms/Input.vue

@@ -6,8 +6,12 @@
       :type="type"
       :placeholder="placeholder"
       @input="onChange"
+      @blur="onBlur"
     />
     <p v-if="helpText" class="help-text"></p>
+    <span v-if="error" class="message">
+      {{ error }}
+    </span>
   </label>
 </template>
 
@@ -34,11 +38,18 @@ export default {
       type: String,
       default: '',
     },
+    error: {
+      type: String,
+      default: '',
+    },
   },
   methods: {
     onChange(e) {
       this.$emit('input', e.target.value);
     },
+    onBlur(e) {
+      this.$emit('blur', e.target.value);
+    },
   },
 };
 </script>

app/javascript/dashboard/i18n/locale/en/signup.json

@@ -4,14 +4,19 @@
     "TITLE": "Register",
     "TERMS_ACCEPT": "By signing up, you agree to our <a href=\"https://www.chatwoot.com/terms\">T & C</a> and <a href=\"https://www.chatwoot.com/privacy-policy\">Privacy policy</a>",
     "ACCOUNT_NAME": {
-      "LABEL": "Account Name",
+      "LABEL": "Account name",
-      "PLACEHOLDER": "Wayne Enterprises",
+      "PLACEHOLDER": "Enter an account name. eg: Wayne Enterprises",
-      "ERROR": "Account Name is too short"
+      "ERROR": "Account name is too short"
+    },
+    "FULL_NAME": {
+      "LABEL": "Full name",
+      "PLACEHOLDER": "Enter your full name. eg: Bruce Wayne",
+      "ERROR": "Full name is too short"
     },
     "EMAIL": {
-      "LABEL": "Email",
+      "LABEL": "Work email",
-      "PLACEHOLDER": "bruce@wayne.enterprises",
+      "PLACEHOLDER": "Enter your work email address. eg: bruce@wayne.enterprises",
-      "ERROR": "Email is invalid"
+      "ERROR": "Email address is invalid"
     },
     "PASSWORD": {
       "LABEL": "Password",
@@ -28,12 +33,6 @@
       "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
     },
     "SUBMIT": "Submit",
-    "FEATURES": {
+    "HAVE_AN_ACCOUNT": "Already have an account?"
-      "UNLIMITED_INBOXES": "Unlimited inboxes",
-      "ROBUST_REPORTING": "Robust Reporting",
-      "CANNED_RESPONSES": "Canned Responses",
-      "AUTO_ASSIGNMENT": "Auto Assignment",
-      "SECURITY": "Enterprise level security"
-    }
   }
 }

app/javascript/dashboard/routes/auth/Signup.vue

@@ -11,73 +11,54 @@
       </h2>
     </div>
     <div class="row align-center">
-      <div class="medium-5 column small-12">
+      <div class="small-12 medium-6 large-5 column">
-        <ul class="signup--features">
+        <form class="signup--box login-box" @submit.prevent="submit">
-          <li>
+          <woot-input
-            <i class="ion-beer beer"></i>
+            v-model="credentials.fullName"
-            <span>{{ $t('REGISTER.FEATURES.UNLIMITED_INBOXES') }}</span>
+            :class="{ error: $v.credentials.fullName.$error }"
-          </li>
+            :label="$t('REGISTER.FULL_NAME.LABEL')"
-          <li>
+            :placeholder="$t('REGISTER.FULL_NAME.PLACEHOLDER')"
-            <i class="ion-stats-bars report"></i>
+            :error="
-            <span>{{ $t('REGISTER.FEATURES.ROBUST_REPORTING') }}</span>
+              $v.credentials.fullName.$error
-          </li>
+                ? $t('REGISTER.FULL_NAME.ERROR')
-          <li>
+                : ''
-            <i class="ion-chatbox-working canned"></i>
+            "
-            <span>{{ $t('REGISTER.FEATURES.CANNED_RESPONSES') }}</span>
+            @blur="$v.credentials.fullName.$touch"
-          </li>
+          />
-          <li>
+          <woot-input
-            <i class="ion-loop uptime"></i>
+            v-model="credentials.accountName"
-            <span>{{ $t('REGISTER.FEATURES.AUTO_ASSIGNMENT') }}</span>
+            :class="{ error: $v.credentials.accountName.$error }"
-          </li>
+            :label="$t('REGISTER.ACCOUNT_NAME.LABEL')"
-          <li>
+            :placeholder="$t('REGISTER.ACCOUNT_NAME.PLACEHOLDER')"
-            <i class="ion-locked secure"></i>
+            :error="
-            <span>{{ $t('REGISTER.FEATURES.SECURITY') }}</span>
+              $v.credentials.accountName.$error
-          </li>
+                ? $t('REGISTER.ACCOUNT_NAME.ERROR')
-        </ul>
+                : ''
-      </div>
+            "
-      <div class="medium-5 column small-12">
+            @blur="$v.credentials.accountName.$touch"
-        <form class="signup--box login-box " @submit.prevent="submit()">
+          />
-          <div class="column log-in-form">
+          <woot-input
-            <label :class="{ error: $v.credentials.name.$error }">
+            v-model.trim="credentials.email"
-              {{ $t('REGISTER.ACCOUNT_NAME.LABEL') }}
+            type="email"
-              <input
+            :class="{ error: $v.credentials.email.$error }"
-                v-model.trim="credentials.name"
+            :label="$t('REGISTER.EMAIL.LABEL')"
-                type="text"
+            :placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
-                :placeholder="$t('REGISTER.ACCOUNT_NAME.PLACEHOLDER')"
+            :error="
-                @input="$v.credentials.name.$touch"
+              $v.credentials.email.$error ? $t('REGISTER.EMAIL.ERROR') : ''
-              />
+            "
-              <span v-if="$v.credentials.name.$error" class="message">
+            @blur="$v.credentials.email.$touch"
-                {{ $t('REGISTER.ACCOUNT_NAME.ERROR') }}
+          />
-              </span>
+          <woot-submit-button
-            </label>
+            :disabled="isSignupInProgress"
-            <label :class="{ error: $v.credentials.email.$error }">
+            :button-text="$t('REGISTER.SUBMIT')"
-              {{ $t('REGISTER.EMAIL.LABEL') }}
+            :loading="isSignupInProgress"
-              <input
+            button-class="large expanded"
-                v-model.trim="credentials.email"
+          >
-                type="email"
+          </woot-submit-button>
-                :placeholder="$t('REGISTER.EMAIL.PLACEHOLDER')"
+          <p class="accept--terms" v-html="termsLink"></p>
-                @input="$v.credentials.email.$touch"
-              />
-              <span v-if="$v.credentials.email.$error" class="message">
-                {{ $t('REGISTER.EMAIL.ERROR') }}
-              </span>
-            </label>
-            <woot-submit-button
-              :disabled="
-                $v.credentials.name.$invalid ||
-                  $v.credentials.email.$invalid ||
-                  register.showLoading
-              "
-              :button-text="$t('REGISTER.SUBMIT')"
-              :loading="register.showLoading"
-              button-class="large expanded"
-            >
-            </woot-submit-button>
-            <p class="accept--terms" v-html="termsLink"></p>
-          </div>
         </form>
         <div class="column text-center sigin--footer">
-          <span>Already have an account?</span>
+          <span>{{ $t('REGISTER.HAVE_AN_ACCOUNT') }}</span>
           <router-link to="/app/login">
             {{
               useInstallationName(
@@ -97,27 +78,30 @@ import { required, minLength, email } from 'vuelidate/lib/validators';
 import Auth from '../../api/auth';
 import { mapGetters } from 'vuex';
 import globalConfigMixin from 'shared/mixins/globalConfigMixin';
+import alertMixin from 'shared/mixins/alertMixin';
 
 export default {
-  mixins: [globalConfigMixin],
+  mixins: [globalConfigMixin, alertMixin],
   data() {
     return {
       credentials: {
-        name: '',
+        accountName: '',
+        fullName: '',
         email: '',
       },
-      register: {
+      isSignupInProgress: false,
-        message: '',
-        showLoading: false,
-      },
       error: '',
     };
   },
   validations: {
     credentials: {
-      name: {
+      accountName: {
         required,
-        minLength: minLength(4),
+        minLength: minLength(2),
+      },
+      fullName: {
+        required,
+        minLength: minLength(2),
       },
       email: {
         required,
@@ -139,27 +123,73 @@ export default {
     },
   },
   methods: {
-    showAlert(message) {
+    async submit() {
-      // Reset loading, current selected agent
+      this.$v.$touch();
-      this.register.showLoading = false;
+      if (this.$v.$invalid) {
-      bus.$emit('newToastMessage', message);
+        return;
-    },
+      }
-    submit() {
+      this.isSignupInProgress = true;
-      this.register.showLoading = true;
+      try {
-      Auth.register(this.credentials)
+        const response = await Auth.register(this.credentials);
-        .then(res => {
+        if (response.status === 200) {
-          if (res.status === 200) {
+          window.location = '/';
-            window.location = '/';
+        }
-          }
+      } catch (error) {
-        })
+        let errorMessage = this.$t('REGISTER.API.ERROR_MESSAGE');
-        .catch(error => {
+        if (error.response && error.response.data.message) {
-          let errorMessage = this.$t('REGISTER.API.ERROR_MESSAGE');
+          errorMessage = error.response.data.message;
-          if (error.response && error.response.data.message) {
+        }
-            errorMessage = error.response.data.message;
+        this.showAlert(errorMessage);
-          }
+      } finally {
-          this.showAlert(errorMessage);
+        this.isSignupInProgress = false;
-        });
+      }
     },
   },
 };
 </script>
+<style scoped lang="scss">
+.signup {
+  .signup--hero {
+    margin-bottom: var(--space-larger);
+
+    .hero--logo {
+      width: 180px;
+    }
+
+    .hero--title {
+      margin-top: var(--space-large);
+      font-weight: var(--font-weight-light);
+    }
+  }
+
+  .signup--box {
+    padding: var(--space-large);
+
+    label {
+      font-size: var(--font-size-default);
+      color: var(--b-600);
+
+      input {
+        padding: var(--space-slab);
+        height: var(--space-larger);
+        font-size: var(--font-size-default);
+      }
+    }
+  }
+
+  .sigin--footer {
+    padding: var(--space-medium);
+    font-size: var(--font-size-default);
+
+    > a {
+      font-weight: var(--font-weight-bold);
+    }
+  }
+
+  .accept--terms {
+    font-size: var(--font-size-small);
+    text-align: center;
+    margin: var(--space-normal) 0 0 0;
+  }
+}
+</style>

spec/controllers/api/v1/accounts_controller_spec.rb

@@ -3,11 +3,12 @@ require 'rails_helper'
 RSpec.describe 'Accounts API', type: :request do
   describe 'POST /api/v1/accounts' do
     let(:email) { Faker::Internet.email }
+    let(:user_full_name) { Faker::Name.name_with_middle }
 
     context 'when posting to accounts with correct parameters' do
       let(:account_builder) { double }
       let(:account) { create(:account) }
-      let(:user) { create(:user, email: email, account: account) }
+      let(:user) { create(:user, email: email, account: account, name: user_full_name) }
 
       before do
         allow(AccountBuilder).to receive(:new).and_return(account_builder)
@@ -17,7 +18,7 @@ RSpec.describe 'Accounts API', type: :request do
       it 'calls account builder' do
         allow(account_builder).to receive(:perform).and_return([user, account])
 
-        params = { account_name: 'test', email: email, user: nil }
+        params = { account_name: 'test', email: email, user: nil, user_full_name: user_full_name }
 
         post api_v1_accounts_url,
              params: params,
@@ -31,7 +32,7 @@ RSpec.describe 'Accounts API', type: :request do
       it 'renders error response on invalid params' do
         allow(account_builder).to receive(:perform).and_return(nil)
 
-        params = { account_name: nil, email: nil, user: nil }
+        params = { account_name: nil, email: nil, user: nil, user_full_name: nil }
 
         post api_v1_accounts_url,
              params: params,
@@ -46,7 +47,7 @@ RSpec.describe 'Accounts API', type: :request do
       it 'ignores confirmed param when called with out super admin token' do
         allow(account_builder).to receive(:perform).and_return(nil)
 
-        params = { account_name: 'test', email: email, confirmed: true, user: nil }
+        params = { account_name: 'test', email: email, confirmed: true, user: nil, user_full_name: user_full_name }
 
         post api_v1_accounts_url,
              params: params,
@@ -63,7 +64,7 @@ RSpec.describe 'Accounts API', type: :request do
       let(:super_admin) { create(:super_admin) }
 
       it 'calls account builder with confirmed true when confirmed param is passed' do
-        params = { account_name: 'test', email: email, confirmed: true }
+        params = { account_name: 'test', email: email, confirmed: true, user_full_name: user_full_name }
 
         post api_v1_accounts_url,
              params: params,
@@ -79,7 +80,7 @@ RSpec.describe 'Accounts API', type: :request do
 
     context 'when ENABLE_ACCOUNT_SIGNUP env variable is set to false' do
       it 'responds 404 on requests' do
-        params = { account_name: 'test', email: email }
+        params = { account_name: 'test', email: email, user_full_name: user_full_name }
         ENV['ENABLE_ACCOUNT_SIGNUP'] = 'false'
 
         post api_v1_accounts_url,
@@ -93,7 +94,7 @@ RSpec.describe 'Accounts API', type: :request do
 
     context 'when ENABLE_ACCOUNT_SIGNUP env variable is set to api_only' do
       it 'does not respond 404 on requests' do
-        params = { account_name: 'test', email: email }
+        params = { account_name: 'test', email: email, user_full_name: user_full_name }
         ENV['ENABLE_ACCOUNT_SIGNUP'] = 'api_only'
 
         post api_v1_accounts_url,