scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-10-29 18:22:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Enhancement] Remove frontend env file 🔥(#179)

Browse Source
This commit is contained in:
Pranav Raj S
2019-10-25 12:01:05 +05:30
committed by GitHub
parent f4358d9993
commit f869598cb4
7 changed files with 142 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.env.sample
View File

@@ -1 +0,0 @@
fb_app_id=

1
.eslintrc.js
View File

@@ -43,6 +43,5 @@ module.exports = {
},
globals: {
__WEBPACK_ENV__: true,
__FB_APP_ID__: true,
},
};

134
app/javascript/dashboard/routes/dashboard/settings/inbox/Facebook.vue
View File

@@ -1,12 +1,20 @@
<template>
<div class="wizard-body columns content-box small-9">
<div class="login-init full-height" v-if="!hasLoginStarted">
<a href="#" @click="startLogin()"><img src="~dashboard/assets/images/channels/facebook_login.png" alt="Facebook-logo"/></a>
<div v-if="!hasLoginStarted" class="login-init full-height">
<a href="#" @click="startLogin()">
<img
src="~dashboard/assets/images/channels/facebook_login.png"
alt="Facebook-logo"
/>
</a>
<p>{{ $t('INBOX_MGMT.ADD.FB.HELP') }}</p>
</div>
<div v-else>
<loading-state :message="emptyStateMessage" v-if="showLoader"></loading-state>
<form class="row" v-on:submit.prevent="createChannel()" v-if="!showLoader">
<loading-state
v-if="showLoader"
:message="emptyStateMessage"
></loading-state>
<form v-if="!showLoader" class="row" @submit.prevent="createChannel()">
<div class="medium-12 columns">
<page-header
:header-title="$t('INBOX_MGMT.ADD.DETAILS.TITLE')"
@@ -15,7 +23,8 @@
</div>
<div class="medium-7 columns">
<div class="medium-12 columns">
<div class="input-wrap" :class="{ 'error': $v.selectedPage.$error }">Choose Page
<div class="input-wrap" :class="{ error: $v.selectedPage.$error }">
Choose Page
<multiselect
v-model.trim="selectedPage"
:close-on-select="true"
@@ -24,20 +33,30 @@
track-by="id"
label="name"
placeholder="Pick a value"
selected-label=''
selected-label=""
@select="setPageName"
/>
<span class="message" v-if="$v.selectedPage.$error">Select a page from the list</span>
<span v-if="$v.selectedPage.$error" class="message">
Select a page from the list
</span>
</div>
</div>
<div class="medium-12 columns">
<label :class="{ 'error': $v.pageName.$error }">Inbox Name
<input type="text" v-model.trim="pageName" @input="$v.pageName.$touch" placeholder="Pick A Name Your Inbox">
<span class="message" v-if="$v.pageName.$error">Add a name for your inbox</span>
<label :class="{ error: $v.pageName.$error }">
Inbox Name
<input
v-model.trim="pageName"
type="text"
placeholder="Pick A Name Your Inbox"
@input="$v.pageName.$touch"
/>
<span v-if="$v.pageName.$error" class="message">
Add a name for your inbox
</span>
</label>
</div>
<div class="medium-12 columns text-right">
<input type="submit" value="Create Inbox" class="button">
<input type="submit" value="Create Inbox" class="button" />
</div>
</div>
</form>
@@ -48,8 +67,6 @@
/* eslint no-console: 0 */
/* eslint-env browser */
/* global FB */
/* global bus */
/* global $v, __FB_ID__ */
import { required } from 'vuelidate/lib/validators';
import ChannelApi from '../../../../api/channels';
import LoadingState from '../../../../components/widgets/LoadingState';
@@ -57,7 +74,6 @@ import PageHeader from '../SettingsSubPageHeader';
import router from '../../../index';
export default {
components: {
LoadingState,
PageHeader,
@@ -78,7 +94,6 @@ export default {
},
validations: {
pageName: {
required,
},
@@ -88,12 +103,6 @@ export default {
return this.selectedPage !== null && !!this.selectedPage.name;
},
},
},
created() {
this.initFB();
this.loadFBsdk();
},
computed: {
@@ -101,10 +110,15 @@ export default {
return !this.user_access_token || this.isCreating;
},
getSelectablePages() {
return this.pageList.filter(item => (!item.exists));
return this.pageList.filter(item => !item.exists);
},
},
created() {
this.initFB();
this.loadFBsdk();
},
mounted() {
this.initFB();
},
@@ -130,24 +144,22 @@ export default {
if (window.fbSDKLoaded === undefined) {
window.fbAsyncInit = () => {
FB.init({
appId: __FB_ID__,
appId: window.chatwootConfig.fbAppId,
xfbml: true,
version: 'v2.8',
version: 'v4.0',
status: true,
});
window.fbSDKLoaded = true;
FB.AppEvents.logPageView();
// this.tryFBlogin();
};
} else {
// this.tryFBlogin();
}
},
loadFBsdk() {
((d, s, id) => {
let js;
const fjs = js = d.getElementsByTagName(s)[0];
// eslint-disable-next-line
const fjs = (js = d.getElementsByTagName(s)[0]);
if (d.getElementById(id)) {
return;
}
@@ -159,25 +171,37 @@ export default {
},
tryFBlogin() {
FB.login((response) => {
if (response.status === 'connected') {
this.fetchPages(response.authResponse.accessToken);
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
this.emptyStateMessage = this.$t('INBOX_MGMT.DETAILS.ERROR_FB_AUTH');
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
this.emptyStateMessage = this.$t('INBOX_MGMT.DETAILS.ERROR_FB_AUTH');
FB.login(
response => {
if (response.status === 'connected') {
this.fetchPages(response.authResponse.accessToken);
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
this.emptyStateMessage = this.$t(
'INBOX_MGMT.DETAILS.ERROR_FB_AUTH'
);
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
this.emptyStateMessage = this.$t(
'INBOX_MGMT.DETAILS.ERROR_FB_AUTH'
);
}
},
{
scope:
'manage_pages,read_page_mailboxes,pages_messaging,pages_messaging_phone_number',
}
}, { scope: 'manage_pages,read_page_mailboxes,pages_messaging,pages_messaging_phone_number' });
);
},
fetchPages(_token) {
ChannelApi.fetchFacebookPages(_token).then((response) => {
this.pageList = response.data.data.page_details;
this.user_access_token = response.data.data.user_access_token;
}).catch();
ChannelApi.fetchFacebookPages(_token)
.then(response => {
this.pageList = response.data.data.page_details;
this.user_access_token = response.data.data.user_access_token;
})
.catch();
},
channelParams() {
@@ -195,16 +219,20 @@ export default {
if (!this.$v.$error) {
this.emptyStateMessage = this.$t('INBOX_MGMT.DETAILS.CREATING_CHANNEL');
this.isCreating = true;
this.$store.dispatch('addInboxItem', {
channel: this.channel,
params: this.channelParams(),
}).then((response) => {
console.log(response);
router.replace({ name: 'settings_inboxes_add_agents', params: { page: 'new', inbox_id: response.data.id } });
}).catch((error) => {
console.log(error);
this.isCreating = false;
});
this.$store
.dispatch('addInboxItem', {
channel: this.channel,
params: this.channelParams(),
})
.then(response => {
router.replace({
name: 'settings_inboxes_add_agents',
params: { page: 'new', inbox_id: response.data.id },
});
})
.catch(() => {
this.isCreating = false;
});
}
},
},

105
app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
View File

@@ -6,8 +6,12 @@
:header-title="inbox.label"
/>
<div class="code-wrapper">
<p class="title">{{ $t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING') }}</p>
<p class="sub-head">{{ $t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD') }}</p>
<p class="title">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_HEADING') }}
</p>
<p class="sub-head">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.MESSENGER_SUB_HEAD') }}
</p>
<p class="code">
<code>
{{ messengerScript }}
@@ -15,8 +19,12 @@
</p>
</div>
<div class="agent-wrapper">
<p class="title">{{ $t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS') }}</p>
<p class="sub-head">{{ $t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT') }}</p>
<p class="title">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS') }}
</p>
<p class="sub-head">
{{ $t('INBOX_MGMT.SETTINGS_POPUP.INBOX_AGENTS_SUB_TEXT') }}
</p>
<multiselect
v-model="selectedAgents"
:options="agentList"
@@ -31,47 +39,35 @@
/>
<div @click="updateAgents()">
<woot-submit-button
:button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
:loading="isUpdating"
:button-text="$t('INBOX_MGMT.SETTINGS_POPUP.UPDATE')"
:loading="isUpdating"
/>
</div>
</div>
</div>
</div>
</woot-modal>
</template>
<script>
/* global bus, __FB_ID__ */
/* eslint no-console: 0 */
/* eslint-disable no-useless-escape */
/* global bus */
import { mapGetters } from 'vuex';
import PageHeader from '../SettingsSubPageHeader';
export default {
props: [
'onClose',
'inbox',
'show',
],
components: {
PageHeader,
},
props: ['onClose', 'inbox', 'show'],
data() {
return {
selectedAgents: [],
isUpdating: false,
messengerScript: `<script>
window.fbAsyncInit = function() {
FB.init({
appId: "${__FB_ID__}",
appId: "${window.chatwootConfig.fbAppId}",
xfbml: true,
version: "v2.6"
version: "v4.0"
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) { return; }
@@ -82,7 +78,7 @@ export default {
<\/script>
<div class="fb-messengermessageus"
messenger_app_id="${__FB_ID__}"
messenger_app_id="${window.chatwootConfig.fbAppId}"
page_id="${this.inbox.pageId}"
color="blue"
size="standard" >
@@ -95,40 +91,51 @@ export default {
}),
},
mounted() {
this.$store.dispatch('fetchAgents')
.then(() => {
this.fetchAttachedAgents();
});
this.$store.dispatch('fetchAgents').then(() => {
this.fetchAttachedAgents();
});
},
methods: {
fetchAttachedAgents() {
this.$store.dispatch('listInboxAgents', {
inboxId: this.inbox.channel_id,
})
.then((response) => {
const { payload } = response.data;
payload.forEach((el) => {
const [item] = this.agentList.filter(agent => agent.id === el.user_id);
if (item) this.selectedAgents.push(item);
this.$store
.dispatch('listInboxAgents', {
inboxId: this.inbox.channel_id,
})
.then(response => {
const { payload } = response.data;
payload.forEach(el => {
const [item] = this.agentList.filter(
agent => agent.id === el.user_id
);
if (item) this.selectedAgents.push(item);
});
})
.catch(error => {
console.log(error);
});
})
.catch((error) => {
console.log(error);
});
},
updateAgents() {
const agentList = this.selectedAgents.map(el => el.id);
this.isUpdating = true;
this.$store.dispatch('updateInboxAgents', {
inboxId: this.inbox.channel_id,
agentList,
}).then(() => {
this.isUpdating = false;
bus.$emit('newToastMessage', this.$t('AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE'));
}).catch(() => {
this.isUpdating = false;
bus.$emit('newToastMessage', this.$t('AGENT_MGMT.EDIT.API.ERROR_MESSAGE'));
});
this.$store
.dispatch('updateInboxAgents', {
inboxId: this.inbox.channel_id,
agentList,
})
.then(() => {
this.isUpdating = false;
bus.$emit(
'newToastMessage',
this.$t('AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE')
);
})
.catch(() => {
this.isUpdating = false;
bus.$emit(
'newToastMessage',
this.$t('AGENT_MGMT.EDIT.API.ERROR_MESSAGE')
);
});
},
},
validations: {

5
app/views/layouts/vueapp.html.erb
View File

@@ -29,5 +29,10 @@
<div id="app"></div>
<noscript id="noscript">This app works best with JavaScript enabled.</noscript>
<%= yield %>
<script>
window.chatwootConfig = {
fbAppId: <%= ENV['fb_app_id'] %>
}
</script>
</body>
</html>

10
config/webpack/environment.js
View File

@@ -1,6 +1,5 @@
const { environment } = require('@rails/webpacker');
const { VueLoaderPlugin } = require('vue-loader');
const webpack = require('webpack');
const resolve = require('./resolve');
const vue = require('./loaders/vue');
@@ -17,13 +16,4 @@ environment.loaders.append('audio', {
environment.config.merge({ resolve });
const { fb_app_id: fbAppID } = process.env;
environment.plugins.prepend(
'DefinePlugin',
new webpack.DefinePlugin({
__FB_ID__: `"${fbAppID}"`,
})
);
module.exports = environment;

3
configure vendored
View File

@@ -5,6 +5,3 @@
# ref docs for detailed instructions
cp shared/config/database.yml config/database.yml
cp shared/config/application.yml config/application.yml
# copy frontend env file
cp .env.sample .env