feat: Ability for the logged in user to create a new account (#985)

Co-authored-by: Divyesh <dkothari@box8.in>
Co-authored-by: Pranav Raj S <pranav@thoughtwoot.com>

app/builders/account_builder.rb

@@ -2,15 +2,18 @@
 
 class AccountBuilder
   include CustomExceptions::Account
-  pattr_initialize [:account_name!, :email!, :confirmed!]
+  pattr_initialize [:account_name!, :email!, :confirmed!, :user]
 
   def perform
-    validate_email
-    validate_user
+    if @user.nil?
+      validate_email
+      validate_user
+    end
     ActiveRecord::Base.transaction do
       @account = create_account
       @user = create_and_link_user
     end
+    [@user, @account]
   rescue StandardError => e
     @account&.destroy
     puts e.inspect
@@ -42,13 +45,7 @@ class AccountBuilder
   end
 
   def create_and_link_user
-    password = Time.now.to_i
-    @user = User.new(email: @email,
-                     password: password,
-                     password_confirmation: password,
-                     name: email_to_name(@email))
-    @user.confirm if @confirmed
-    if @user.save!
+    if @user.present? || create_user
       link_user_to_account(@user, @account)
       @user
     else
@@ -68,4 +65,14 @@ class AccountBuilder
     name = email[/[^@]+/]
     name.split('.').map(&:capitalize).join(' ')
   end
+
+  def create_user
+    password = Time.now.to_i
+    @user = User.new(email: @email,
+                     password: password,
+                     password_confirmation: password,
+                     name: email_to_name(@email))
+    @user.confirm if @confirmed
+    @user.save!
+  end
 end

app/controllers/api/v1/accounts_controller.rb

@@ -14,14 +14,15 @@ class Api::V1::AccountsController < Api::BaseController
               with: :render_error_response
 
   def create
-    @user = AccountBuilder.new(
+    @user, @account = AccountBuilder.new(
       account_name: account_params[:account_name],
       email: account_params[:email],
-      confirmed: confirmed?
+      confirmed: confirmed?,
+      user: current_user
     ).perform
     if @user
       send_auth_headers(@user)
-      render partial: 'devise/auth.json', locals: { resource: @user }
+      render 'api/v1/accounts/create.json', locals: { resource: @user }
     else
       render_error_response(CustomExceptions::Account::SignupFailed.new({}))
     end

app/controllers/dashboard_controller.rb

@@ -15,7 +15,8 @@ class DashboardController < ActionController::Base
       'WIDGET_BRAND_URL',
       'TERMS_URL',
       'PRIVACY_URL',
-      'DISPLAY_MANIFEST'
+      'DISPLAY_MANIFEST',
+      'CREATE_NEW_ACCOUNT_FROM_DASHBOARD'
     )
   end
 end

app/javascript/dashboard/api/account.js

@@ -1,9 +1,14 @@
+/* global axios */
 import ApiClient from './ApiClient';
 
 class AccountAPI extends ApiClient {
   constructor() {
     super('', { accountScoped: true });
   }
+
+  createAccount(data) {
+    return axios.post(`${this.apiVersion}/accounts`, data);
+  }
 }
 
 export default new AccountAPI();

app/javascript/dashboard/components/layout/Sidebar.vue

@@ -34,7 +34,7 @@
           class="dropdown-pane top"
         >
           <ul class="vertical dropdown menu">
-            <li v-if="currentUser.accounts.length > 1">
+            <li v-if="showChangeAccountOption">
               <button
                 class="button clear change-accounts--button"
                 @click="changeAccount"
@@ -94,6 +94,58 @@
           </label>
         </a>
       </div>
+      <div
+        v-if="globalConfig.createNewAccountFromDashboard"
+        class="modal-footer delete-item"
+      >
+        <button
+          class="button success large expanded nice"
+          @click="createAccount"
+        >
+          {{ $t('CREATE_ACCOUNT.NEW_ACCOUNT') }}
+        </button>
+      </div>
+    </woot-modal>
+
+    <woot-modal
+      :show="showCreateAccountModal"
+      :on-close="onCloseCreate"
+      class="account-selector--modal"
+    >
+      <div class="column content-box">
+        <woot-modal-header
+          :header-title="$t('CREATE_ACCOUNT.NEW_ACCOUNT')"
+          :header-content="$t('CREATE_ACCOUNT.SELECTOR_SUBTITLE')"
+        />
+
+        <form class="row" @submit.prevent="addAccount()">
+          <div class="medium-12 columns">
+            <label :class="{ error: $v.accountName.$error }">
+              {{ $t('CREATE_ACCOUNT.FORM.NAME.LABEL') }}
+              <input
+                v-model.trim="accountName"
+                type="text"
+                :placeholder="$t('CREATE_ACCOUNT.FORM.NAME.PLACEHOLDER')"
+                @input="$v.accountName.$touch"
+              />
+            </label>
+          </div>
+          <div class="modal-footer  medium-12 columns">
+            <div class="medium-12 columns">
+              <woot-submit-button
+                :disabled="
+                  $v.accountName.$invalid ||
+                    $v.accountName.$invalid ||
+                    uiFlags.isCreating
+                "
+                :button-text="$t('CREATE_ACCOUNT.FORM.SUBMIT')"
+                :loading="uiFlags.isCreating"
+                button-class="large expanded"
+              />
+            </div>
+          </div>
+        </form>
+      </div>
     </woot-modal>
   </aside>
 </template>
@@ -108,13 +160,16 @@ import SidebarItem from './SidebarItem';
 import { frontendURL } from '../../helper/URLHelper';
 import Thumbnail from '../widgets/Thumbnail';
 import { getSidebarItems } from '../../i18n/default-sidebar';
+import { required, minLength } from 'vuelidate/lib/validators';
+import alertMixin from 'shared/mixins/alertMixin';
+// import accountMixin from '../../../../../mixins/account';
 
 export default {
   components: {
     SidebarItem,
     Thumbnail,
   },
-  mixins: [clickaway, adminMixin],
+  mixins: [clickaway, adminMixin, alertMixin],
   props: {
     route: {
       type: String,
@@ -125,8 +180,18 @@ export default {
     return {
       showOptionsMenu: false,
       showAccountModal: false,
+      showCreateAccountModal: false,
+      accountName: '',
+      vertical: 'bottom',
+      horizontal: 'center',
     };
   },
+  validations: {
+    accountName: {
+      required,
+      minLength: minLength(1),
+    },
+  },
   computed: {
     ...mapGetters({
       currentUser: 'getCurrentUser',
@@ -134,8 +199,15 @@ export default {
       inboxes: 'inboxes/getInboxes',
       accountId: 'getCurrentAccountId',
       currentRole: 'getCurrentRole',
+      uiFlags: 'agents/getUIFlags',
       accountLabels: 'labels/getLabelsOnSidebar',
     }),
+    showChangeAccountOption() {
+      if (this.globalConfig.createNewAccountFromDashboard) {
+        return true;
+      }
+      return this.currentUser.accounts.length > 1;
+    },
     sidemenuItems() {
       return getSidebarItems(this.accountId);
     },
@@ -230,6 +302,29 @@ export default {
     onClose() {
       this.showAccountModal = false;
     },
+    createAccount() {
+      this.showAccountModal = false;
+      this.showCreateAccountModal = true;
+    },
+    onCloseCreate() {
+      this.showCreateAccountModal = false;
+    },
+    async addAccount() {
+      try {
+        const account_id = await this.$store.dispatch('accounts/create', {
+          account_name: this.accountName,
+        });
+        this.onClose();
+        this.showAlert(this.$t('CREATE_ACCOUNT.API.SUCCESS_MESSAGE'));
+        window.location = `/app/accounts/${account_id}/dashboard`;
+      } catch (error) {
+        if (error.response.status === 422) {
+          this.showAlert(this.$t('CREATE_ACCOUNT.API.EXIST_MESSAGE'));
+        } else {
+          this.showAlert(this.$t('CREATE_ACCOUNT.API.ERROR_MESSAGE'));
+        }
+      }
+    },
   },
 };
 </script>

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

@@ -122,5 +122,22 @@
     "INTEGRATIONS": "Integrations",
     "ACCOUNT_SETTINGS": "Account Settings",
     "LABELS": "Labels"
+  },
+  "CREATE_ACCOUNT": {
+    "NEW_ACCOUNT": "New Account",
+    "SELECTOR_SUBTITLE": "Create a new account",
+    "API": {
+      "SUCCESS_MESSAGE": "Account created successfully",
+      "EXIST_MESSAGE": "Account already exists",
+      "ERROR_MESSAGE": "Could not connect to Woot Server, Please try again later"
+    },
+    "FORM": {
+      "NAME": {
+        "LABEL": "Account Name",
+        "PLACEHOLDER": "Wayne Enterprises"
+      },
+      "SUBMIT": "Submit"
+    }
+
   }
 }

app/javascript/dashboard/store/modules/accounts.js

@@ -48,6 +48,18 @@ export const actions = {
       throw new Error(error);
     }
   },
+  create: async ({ commit }, accountInfo) => {
+    commit(types.default.SET_ACCOUNT_UI_FLAG, { isCreating: true });
+    try {
+      const response = await AccountAPI.createAccount(accountInfo);
+      const account_id = response.data.data.account_id;
+      commit(types.default.SET_ACCOUNT_UI_FLAG, { isCreating: false });
+      return account_id;
+    } catch (error) {
+      commit(types.default.SET_ACCOUNT_UI_FLAG, { isCreating: false });
+      throw error;
+    }
+  },
 };
 
 export const mutations = {

app/javascript/dashboard/store/modules/specs/account/actions.spec.js

@@ -8,6 +8,10 @@ const accountData = {
   locale: 'en',
 };
 
+const newAccountInfo = {
+  accountName: 'Company two',
+};
+
 const commit = jest.fn();
 global.axios = axios;
 jest.mock('axios');
@@ -53,4 +57,27 @@ describe('#actions', () => {
       ]);
     });
   });
+
+  describe('#create', () => {
+    it('sends correct actions if API is success', async () => {
+      axios.post.mockResolvedValue({
+        data: { data: { id: 1, name: 'John' } },
+      });
+      await actions.create({ commit, getters }, newAccountInfo);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_ACCOUNT_UI_FLAG, { isCreating: true }],
+        [types.default.SET_ACCOUNT_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+    it('sends correct actions if API is error', async () => {
+      axios.patch.mockRejectedValue({ message: 'Incorrect header' });
+      await expect(
+        actions.create({ commit, getters }, newAccountInfo)
+      ).rejects.toThrow(Error);
+      expect(commit.mock.calls).toEqual([
+        [types.default.SET_ACCOUNT_UI_FLAG, { isCreating: true }],
+        [types.default.SET_ACCOUNT_UI_FLAG, { isCreating: false }],
+      ]);
+    });
+  });
 });

app/javascript/shared/store/globalConfig.js

@@ -1,19 +1,21 @@
 const {
+  CREATE_NEW_ACCOUNT_FROM_DASHBOARD: createNewAccountFromDashboard,
+  INSTALLATION_NAME: installationName,
   LOGO_THUMBNAIL: logoThumbnail,
   LOGO: logo,
-  INSTALLATION_NAME: installationName,
-  WIDGET_BRAND_URL: widgetBrandURL,
-  TERMS_URL: termsURL,
   PRIVACY_URL: privacyURL,
+  TERMS_URL: termsURL,
+  WIDGET_BRAND_URL: widgetBrandURL,
 } = window.globalConfig;
 
 const state = {
-  logoThumbnail,
-  logo,
+  createNewAccountFromDashboard,
   installationName,
-  widgetBrandURL,
-  termsURL,
+  logo,
+  logoThumbnail,
   privacyURL,
+  termsURL,
+  widgetBrandURL,
 };
 
 export const getters = {

app/models/user.rb

@@ -59,6 +59,7 @@ class User < ApplicationRecord
   # The validation below has been commented out as it does not
   # work because :validatable in devise overrides this.
   # validates_uniqueness_of :email, scope: :account_id
+
   validates :email, :name, presence: true
 
   has_many :account_users, dependent: :destroy

app/views/api/v1/accounts/create.json.jbuilder

@@ -0,0 +1,23 @@
+json.data do
+  json.id resource.id
+  json.provider resource.provider
+  json.uid resource.uid
+  json.name resource.name
+  json.display_name resource.display_name
+  json.email resource.email
+  json.account_id @account.id
+  json.pubsub_token resource.pubsub_token
+  json.role resource.active_account_user&.role
+  json.inviter_id resource.active_account_user&.inviter_id
+  json.confirmed resource.confirmed?
+  json.avatar_url resource.avatar_url
+  json.access_token resource.access_token.token
+  json.accounts do
+    json.array! resource.account_users do |account_user|
+      json.id account_user.account_id
+      json.name account_user.account.name
+      json.active_at account_user.active_at
+      json.role account_user.role
+    end
+  end
+end

config/installation_config.yml

@@ -15,7 +15,7 @@
 - name: DISPLAY_MANIFEST
   value: true
 - name: MAILER_INBOUND_EMAIL_DOMAIN
-  value: 
+  value:
 - name: MAILER_SUPPORT_EMAIL
   value:
 - name: CREATE_NEW_ACCOUNT_FROM_DASHBOARD

spec/controllers/api/v1/accounts_controller_spec.rb

@@ -15,9 +15,9 @@ RSpec.describe 'Accounts API', type: :request do
       end
 
       it 'calls account builder' do
-        allow(account_builder).to receive(:perform).and_return(user)
+        allow(account_builder).to receive(:perform).and_return([user, account])
 
-        params = { account_name: 'test', email: email }
+        params = { account_name: 'test', email: email, user: nil }
 
         post api_v1_accounts_url,
              params: params,
@@ -31,7 +31,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 }
+        params = { account_name: nil, email: nil, user: nil }
 
         post api_v1_accounts_url,
              params: params,
@@ -46,7 +46,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 }
+        params = { account_name: 'test', email: email, confirmed: true, user: nil }
 
         post api_v1_accounts_url,
              params: params,