ts-glitter 20.7.3 → 20.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,75 +4,78 @@ import { ApiUser } from '../glitter-base/route/user.js';
4
4
  import { ShareDialog } from '../glitterBundle/dialog/ShareDialog.js';
5
5
 
6
6
  export class ThirdPartyGoggle {
7
- public static main(gvc: GVC) {
8
- return (
9
- BgWidget.container(
10
- gvc.bindView(() => {
11
- const id = gvc.glitter.getUUID();
12
- const key = 'login_google_setting';
13
- const vm: {
14
- loading: boolean;
15
- data: {
16
- google_toggle: boolean;
17
- id: string;
18
- app_id: string;
19
- secret: string;
20
- pixel: string;
21
- };
22
- ga: {
23
- ga4: { code: string }[];
24
- g_tag: { code: string }[];
25
- };
26
- } = {
27
- loading: true,
28
- data: {
29
- google_toggle: false,
30
- id: '',
31
- app_id: '',
32
- secret: '',
33
- pixel: '',
34
- },
35
- ga: {
36
- ga4: [],
37
- g_tag: [],
38
- },
39
- };
7
+ public static main(gvc: GVC) {
8
+ return (
9
+ BgWidget.container(
10
+ gvc.bindView(() => {
11
+ const id = gvc.glitter.getUUID();
12
+ const key = 'login_google_setting';
13
+ const vm: {
14
+ loading: boolean;
15
+ data: {
16
+ google_toggle: boolean;
17
+ id: string;
18
+ app_id: string;
19
+ android_app_id:string;
20
+ secret: string;
21
+ pixel: string;
22
+ };
23
+ ga: {
24
+ ga4: { code: string }[];
25
+ g_tag: { code: string }[];
26
+ };
27
+ } = {
28
+ loading: true,
29
+ data: {
30
+ android_app_id:'',
31
+ google_toggle: false,
32
+ id: '',
33
+ app_id: '',
34
+ secret: '',
35
+ pixel: '',
36
+ },
37
+ ga: {
38
+ ga4: [],
39
+ g_tag: [],
40
+ },
41
+ };
40
42
 
41
- ApiUser.getPublicConfig(key, 'manager').then((dd) => {
42
- vm.loading = false;
43
- if(Object.keys(dd.response.value).length){
44
- dd.response.value && (vm.data = dd.response.value);
45
- }
46
- ApiUser.getPublicConfig('ga4_config', 'manager').then((res) => {
47
- if(Object.keys(res.response.value).length){
48
- res.response.value && (vm.ga = res.response.value);
49
- }
50
- gvc.notifyDataChange(id);
51
- });
52
- });
43
+ ApiUser.getPublicConfig(key, 'manager').then(dd => {
44
+ vm.loading = false;
45
+ if (Object.keys(dd.response.value).length) {
46
+ dd.response.value && (vm.data = dd.response.value);
47
+ }
48
+ ApiUser.getPublicConfig('ga4_config', 'manager').then(res => {
49
+ if (Object.keys(res.response.value).length) {
50
+ res.response.value && (vm.ga = res.response.value);
51
+ }
52
+ gvc.notifyDataChange(id);
53
+ });
54
+ });
53
55
 
54
- return {
55
- bind: id,
56
- view: () => {
57
- if (vm.loading) {
58
- return BgWidget.spinner();
59
- }
60
- const html = String.raw;
61
- function renderCodeSelect(array: any) {
62
- return [
63
- array
64
- .map((dd: any, index: number) => {
65
- return html`<div
66
- class="col-12 col-sm-4 mb-2 ps-0"
67
- style="align-self: stretch;
56
+ return {
57
+ bind: id,
58
+ view: () => {
59
+ if (vm.loading) {
60
+ return BgWidget.spinner();
61
+ }
62
+ const html = String.raw;
63
+
64
+ function renderCodeSelect(array: any) {
65
+ return [
66
+ array
67
+ .map((dd: any, index: number) => {
68
+ return html` <div
69
+ class="col-12 col-sm-4 mb-2 ps-0"
70
+ style="align-self: stretch;
68
71
  justify-content: flex-start;
69
72
  align-items: flex-start;
70
73
  gap: 0px;
71
74
  display: inline-flex;"
72
- >
73
- <input
74
- class="w-100"
75
- style="flex: 1 1 0;
75
+ >
76
+ <input
77
+ class="w-100"
78
+ style="flex: 1 1 0;
76
79
  height: 40px;
77
80
  padding: 9px 18px;
78
81
  overflow: hidden;
@@ -83,14 +86,14 @@ export class ThirdPartyGoggle {
83
86
  display: flex;
84
87
  border-right: 0px;
85
88
  border-radius: 10px 0px 0px 10px;"
86
- placeholder="請輸入編號"
87
- value="${dd.code}"
88
- onchange="${gvc.event((e, event) => {
89
- dd.code = e.value;
90
- })}"
91
- />
92
- <div
93
- style="height: 100%;
89
+ placeholder="請輸入編號"
90
+ value="${dd.code}"
91
+ onchange="${gvc.event((e, event) => {
92
+ dd.code = e.value;
93
+ })}"
94
+ />
95
+ <div
96
+ style="height: 100%;
94
97
  background: #f2f2f2;
95
98
  justify-content: center;
96
99
  align-items: center;
@@ -100,200 +103,228 @@ export class ThirdPartyGoggle {
100
103
  border-top-right-radius: 10px;
101
104
  border-bottom-right-radius: 10px;
102
105
  cursor: pointer;"
103
- onclick="${gvc.event(() => {
104
- const dialog = new ShareDialog(gvc.glitter);
105
- dialog.checkYesOrNot({
106
- text: '是否確認刪除此追蹤編號?',
107
- callback: (response) => {
108
- if (response) {
109
- array.splice(index, 1);
110
- gvc.notifyDataChange(id);
111
- }
112
- },
113
- });
114
- })}"
115
- >
116
- <div class="" style=""><i class="fa-regular fa-trash-can" aria-hidden="true"></i></div>
117
- </div>
118
- </div>`;
119
- })
120
- .join(''),
121
- html`<div
122
- class="col-12 col-sm-4 mb-2 ps-0"
123
- onclick="${gvc.event(() => {
124
- array.push({ code: '' });
125
- gvc.notifyDataChange(id);
126
- })}"
127
- >
128
- <div class="bt_orange">新增編號</div>
129
- </div>`,
130
- ].join(``);
131
- }
132
- return [
133
- html`<div class="title-container">
134
- ${BgWidget.title('Google 串接設定')}
135
- <div class="flex-fill"></div>
136
- </div>`,
137
- BgWidget.mbContainer(18),
138
- BgWidget.container1x2(
139
- {
140
- html: [
141
- BgWidget.mainCard(
142
- [
143
- html`<div class="tx_700">串接綁定</div>`,
144
- html`<div class="d-flex align-items-center" style="gap:10px;">
145
- 啟用Google登入${BgWidget.switchButton(gvc, vm.data.google_toggle, () => {
146
- vm.data.google_toggle = !vm.data.google_toggle;
147
- gvc.notifyDataChange(id);
148
- })}
149
- </div>`,
150
- BgWidget.editeInput({
151
- gvc: gvc,
152
- title: html`<div class="d-flex align-items-center" style="gap:10px;">客户端 ID</div>`,
153
- default: vm.data.id,
154
- placeHolder: '請前往GOOGLE開發者後台取得客户端 ID',
155
- callback: (text) => {
156
- vm.data.id = text;
157
- },
158
- }),
159
- BgWidget.editeInput({
160
- gvc: gvc,
161
- title: html`<div class="d-flex align-items-center" style="gap:10px;">APP客户端 ID『 非必填 』</div>`,
162
- default: vm.data.app_id,
163
- placeHolder: '請前往Google Cloud後台取得客户端 ID',
164
- callback: (text) => {
165
- vm.data.app_id = text;
166
- },
167
- }),
168
- BgWidget.editeInput({
169
- gvc: gvc,
170
- title: html`<div class="d-flex align-items-center" style="gap:10px;">應用程式密鑰</div>`,
171
- default: vm.data.secret,
172
- placeHolder: '請前往GOOGLE開發者後台取得應用程式密鑰',
173
- callback: (text) => {
174
- vm.data.secret = text;
175
- },
176
- }),
177
- html`<div
178
- onclick="${gvc.event(() => {
179
- const dialog = new ShareDialog(gvc.glitter);
180
- navigator.clipboard.writeText(`https://` + (window.parent as any).glitter.share.editorViewModel.domain + '/login');
181
- dialog.successMessage({ text: '已複製至剪貼簿' });
182
- })}"
183
- >
184
- ${BgWidget.editeInput({
185
- readonly: true,
186
- gvc: gvc,
187
- title: html`<div class="d-flex flex-column" style="gap:5px;">
188
- 重新導向URI『 登入頁 』 ${BgWidget.grayNote('點擊複製此連結至Google Cloud後台的OAuth重定向URI')}
189
- </div>`,
190
- default: `https://` + (window.parent as any).glitter.share.editorViewModel.domain + '/login',
191
- placeHolder: '',
192
- callback: (text) => {},
193
- })}
194
- </div>`,
195
- html`<div
196
- onclick="${gvc.event(() => {
197
- const dialog = new ShareDialog(gvc.glitter);
198
- navigator.clipboard.writeText(`https://` + (window.parent as any).glitter.share.editorViewModel.domain + '/register');
199
- dialog.successMessage({ text: '已複製至剪貼簿' });
200
- })}"
201
- >
202
- ${BgWidget.editeInput({
203
- readonly: true,
204
- gvc: gvc,
205
- title: html`<div class="d-flex flex-column" style="gap:5px;">
206
- 重新導向URI『 註冊頁 』 ${BgWidget.grayNote('點擊複製此連結至Google Cloud後台的OAuth重定向URI')}
207
- </div>`,
208
- default: `https://` + (window.parent as any).glitter.share.editorViewModel.domain + '/register',
209
- placeHolder: '',
210
- callback: (text) => {},
211
- })}
212
- </div>`,
213
- ].join(BgWidget.mbContainer(12))
214
- ),
215
- BgWidget.mainCard(
216
- [
217
- html`<div class="tx_700 d-flex align-items-center" style="gap:10px;">
218
- <img style="width: 25px;height: 25px;" src="https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1718208842472-ic_analytics.svg" />
219
- 資料分析 Google Analytics ( GA4 )
220
- </div>`,
221
- html`<div class="tx_700">追蹤編號</div>`,
222
- html`<div class="row m-0">${renderCodeSelect(vm.ga.ga4)}</div>`,
223
- ].join(BgWidget.mbContainer(12))
224
- ),
225
- BgWidget.mainCard(
226
- [
227
- html`<div class="tx_700 d-flex align-items-center" style="gap:10px;">
228
- <img style="width: 25px;height: 25px;" src="https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1718210156723-ic_tag_manager.svg" />
229
- 追蹤代碼管理工具 Google Tag Manager
230
- </div>`,
231
- html`<div class="tx_700">追蹤編號含GTM</div>`,
232
- html`<div class="row m-0">${renderCodeSelect(vm.ga.g_tag)}</div>`,
233
- ].join(BgWidget.mbContainer(12))
234
- ),
235
- ].join(BgWidget.mbContainer(24)),
236
- ratio: 70,
237
- },
238
- {
239
- // 摘要預覽
240
- html: [
241
- BgWidget.summaryCard(
242
- [
243
- html`<div class="tx_700">操作說明</div>`,
244
- html`<div class="tx_normal">設定Google串接,實現Google登入,與 GA4 用戶行為追蹤</div>`,
245
- html`<div class="tx_normal">
246
- 前往
247
- ${BgWidget.blueNote(
248
- `『 教學步驟 』`,
249
- gvc.event(() => {
250
- (window.parent as any).glitter.openNewTab('https://shopnex.tw/blogs/googleapiconnect');
251
- })
252
- )}
253
- 查看串接設定流程
254
- </div>`,
255
- ].join(BgWidget.mbContainer(12))
256
- ),
257
- ].join(BgWidget.mbContainer(24)),
258
- ratio: 30,
259
- }
260
- ),
261
- html`<div class="update-bar-container">
262
- ${BgWidget.save(
263
- gvc.event(async () => {
264
- const dialog = new ShareDialog(gvc.glitter);
265
- dialog.dataLoading({ visible: true });
266
- const cf = (await ApiUser.getPublicConfig('login_config', 'manager')).response.value || {};
267
- cf.google = vm.data.google_toggle;
268
- await ApiUser.setPublicConfig({
269
- key: 'login_config',
270
- value: cf,
271
- user_id: 'manager',
272
- });
273
- await ApiUser.setPublicConfig({
274
- key: 'ga4_config',
275
- value: vm.ga,
276
- user_id: 'manager',
277
- });
278
- ApiUser.setPublicConfig({
279
- key: key,
280
- value: vm.data,
281
- user_id: 'manager',
282
- }).then(() => {
283
- dialog.dataLoading({ visible: false });
284
- dialog.successMessage({ text: '設定成功' });
285
- gvc.closeDialog();
286
- });
287
- })
288
- )}
289
- </div>`,
290
- ].join('');
291
- },
292
- };
293
- })
294
- ) + BgWidget.mbContainer(120)
295
- );
296
- }
106
+ onclick="${gvc.event(() => {
107
+ const dialog = new ShareDialog(gvc.glitter);
108
+ dialog.checkYesOrNot({
109
+ text: '是否確認刪除此追蹤編號?',
110
+ callback: response => {
111
+ if (response) {
112
+ array.splice(index, 1);
113
+ gvc.notifyDataChange(id);
114
+ }
115
+ },
116
+ });
117
+ })}"
118
+ >
119
+ <div class="" style=""><i class="fa-regular fa-trash-can" aria-hidden="true"></i></div>
120
+ </div>
121
+ </div>`;
122
+ })
123
+ .join(''),
124
+ html` <div
125
+ class="col-12 col-sm-4 mb-2 ps-0"
126
+ onclick="${gvc.event(() => {
127
+ array.push({ code: '' });
128
+ gvc.notifyDataChange(id);
129
+ })}"
130
+ >
131
+ <div class="bt_orange">新增編號</div>
132
+ </div>`,
133
+ ].join(``);
134
+ }
135
+
136
+ return [
137
+ html` <div class="title-container">
138
+ ${BgWidget.title('Google 串接設定')}
139
+ <div class="flex-fill"></div>
140
+ </div>`,
141
+ BgWidget.mbContainer(18),
142
+ BgWidget.container1x2(
143
+ {
144
+ html: [
145
+ BgWidget.mainCard(
146
+ [
147
+ html` <div class="tx_700">串接綁定</div>`,
148
+ html` <div class="d-flex align-items-center" style="gap:10px;">
149
+ 啟用Google登入${BgWidget.switchButton(gvc, vm.data.google_toggle, () => {
150
+ vm.data.google_toggle = !vm.data.google_toggle;
151
+ gvc.notifyDataChange(id);
152
+ })}
153
+ </div>`,
154
+ BgWidget.editeInput({
155
+ gvc: gvc,
156
+ title: html` <div class="d-flex align-items-center" style="gap:10px;">客户端 ID</div>`,
157
+ default: vm.data.id,
158
+ placeHolder: '請前往GOOGLE開發者後台取得客户端 ID',
159
+ callback: text => {
160
+ vm.data.id = text;
161
+ },
162
+ }),
163
+ BgWidget.editeInput({
164
+ gvc: gvc,
165
+ title: html` <div class="d-flex align-items-center" style="gap:10px;">
166
+ APP客户端 ID『 IOS應用程式
167
+ </div>`,
168
+ default: vm.data.app_id,
169
+ placeHolder: '請前往Google Cloud後台取得客户端 ID',
170
+ callback: text => {
171
+ vm.data.app_id = text;
172
+ },
173
+ }),
174
+ BgWidget.editeInput({
175
+ gvc: gvc,
176
+ title: html` <div class="d-flex align-items-center" style="gap:10px;">
177
+ APP客户端 ID『 Android應用程式 』
178
+ </div>`,
179
+ default: vm.data.android_app_id,
180
+ placeHolder: '請前往Google Cloud後台取得客户端 ID',
181
+ callback: text => {
182
+ vm.data.android_app_id = text;
183
+ },
184
+ }),
185
+ BgWidget.editeInput({
186
+ gvc: gvc,
187
+ title: html` <div class="d-flex align-items-center" style="gap:10px;">應用程式密鑰</div>`,
188
+ default: vm.data.secret,
189
+ placeHolder: '請前往GOOGLE開發者後台取得應用程式密鑰',
190
+ callback: text => {
191
+ vm.data.secret = text;
192
+ },
193
+ }),
194
+ html` <div
195
+ onclick="${gvc.event(() => {
196
+ const dialog = new ShareDialog(gvc.glitter);
197
+ navigator.clipboard.writeText(
198
+ `https://` + (window.parent as any).glitter.share.editorViewModel.domain + '/login'
199
+ );
200
+ dialog.successMessage({ text: '已複製至剪貼簿' });
201
+ })}"
202
+ >
203
+ ${BgWidget.editeInput({
204
+ readonly: true,
205
+ gvc: gvc,
206
+ title: html` <div class="d-flex flex-column" style="gap:5px;">
207
+ 重新導向URI『 登入頁 』
208
+ ${BgWidget.grayNote('點擊複製此連結至Google Cloud後台的OAuth重定向URI')}
209
+ </div>`,
210
+ default:
211
+ `https://` + (window.parent as any).glitter.share.editorViewModel.domain + '/login',
212
+ placeHolder: '',
213
+ callback: text => {},
214
+ })}
215
+ </div>`,
216
+ html` <div
217
+ onclick="${gvc.event(() => {
218
+ const dialog = new ShareDialog(gvc.glitter);
219
+ navigator.clipboard.writeText(
220
+ `https://` + (window.parent as any).glitter.share.editorViewModel.domain + '/register'
221
+ );
222
+ dialog.successMessage({ text: '已複製至剪貼簿' });
223
+ })}"
224
+ >
225
+ ${BgWidget.editeInput({
226
+ readonly: true,
227
+ gvc: gvc,
228
+ title: html` <div class="d-flex flex-column" style="gap:5px;">
229
+ 重新導向URI『 註冊頁 』
230
+ ${BgWidget.grayNote('點擊複製此連結至Google Cloud後台的OAuth重定向URI')}
231
+ </div>`,
232
+ default:
233
+ `https://` + (window.parent as any).glitter.share.editorViewModel.domain + '/register',
234
+ placeHolder: '',
235
+ callback: text => {},
236
+ })}
237
+ </div>`,
238
+ ].join(BgWidget.mbContainer(12))
239
+ ),
240
+ BgWidget.mainCard(
241
+ [
242
+ html` <div class="tx_700 d-flex align-items-center" style="gap:10px;">
243
+ <img
244
+ style="width: 25px;height: 25px;"
245
+ src="https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1718208842472-ic_analytics.svg"
246
+ />
247
+ 資料分析 Google Analytics ( GA4 )
248
+ </div>`,
249
+ html` <div class="tx_700">追蹤編號</div>`,
250
+ html` <div class="row m-0">${renderCodeSelect(vm.ga.ga4)}</div>`,
251
+ ].join(BgWidget.mbContainer(12))
252
+ ),
253
+ BgWidget.mainCard(
254
+ [
255
+ html` <div class="tx_700 d-flex align-items-center" style="gap:10px;">
256
+ <img
257
+ style="width: 25px;height: 25px;"
258
+ src="https://d3jnmi1tfjgtti.cloudfront.net/file/252530754/1718210156723-ic_tag_manager.svg"
259
+ />
260
+ 追蹤代碼管理工具 Google Tag Manager
261
+ </div>`,
262
+ html` <div class="tx_700">追蹤編號含GTM</div>`,
263
+ html` <div class="row m-0">${renderCodeSelect(vm.ga.g_tag)}</div>`,
264
+ ].join(BgWidget.mbContainer(12))
265
+ ),
266
+ ].join(BgWidget.mbContainer(24)),
267
+ ratio: 70,
268
+ },
269
+ {
270
+ // 摘要預覽
271
+ html: [
272
+ BgWidget.summaryCard(
273
+ [
274
+ html` <div class="tx_700">操作說明</div>`,
275
+ html` <div class="tx_normal">設定Google串接,實現Google登入,與 GA4 用戶行為追蹤</div>`,
276
+ html` <div class="tx_normal">
277
+ 前往
278
+ ${BgWidget.blueNote(
279
+ `『 教學步驟 』`,
280
+ gvc.event(() => {
281
+ (window.parent as any).glitter.openNewTab('https://shopnex.tw/blogs/googleapiconnect');
282
+ })
283
+ )}
284
+ 查看串接設定流程
285
+ </div>`,
286
+ ].join(BgWidget.mbContainer(12))
287
+ ),
288
+ ].join(BgWidget.mbContainer(24)),
289
+ ratio: 30,
290
+ }
291
+ ),
292
+ html` <div class="update-bar-container">
293
+ ${BgWidget.save(
294
+ gvc.event(async () => {
295
+ const dialog = new ShareDialog(gvc.glitter);
296
+ dialog.dataLoading({ visible: true });
297
+ const cf = (await ApiUser.getPublicConfig('login_config', 'manager')).response.value || {};
298
+ cf.google = vm.data.google_toggle;
299
+ await ApiUser.setPublicConfig({
300
+ key: 'login_config',
301
+ value: cf,
302
+ user_id: 'manager',
303
+ });
304
+ await ApiUser.setPublicConfig({
305
+ key: 'ga4_config',
306
+ value: vm.ga,
307
+ user_id: 'manager',
308
+ });
309
+ ApiUser.setPublicConfig({
310
+ key: key,
311
+ value: vm.data,
312
+ user_id: 'manager',
313
+ }).then(() => {
314
+ dialog.dataLoading({ visible: false });
315
+ dialog.successMessage({ text: '設定成功' });
316
+ gvc.closeDialog();
317
+ });
318
+ })
319
+ )}
320
+ </div>`,
321
+ ].join('');
322
+ },
323
+ };
324
+ })
325
+ ) + BgWidget.mbContainer(120)
326
+ );
327
+ }
297
328
  }
298
329
 
299
330
  (window as any).glitter.setModule(import.meta.url, ThirdPartyGoggle);
@@ -608,7 +608,7 @@ export class UMLogin {
608
608
  google_token: gvc.glitter.getUrlParameter('code'),
609
609
  redirect: (() => {
610
610
  if (glitter.deviceType !== glitter.deviceTypeEnum.Web) {
611
- return 'app';
611
+ return (glitter.deviceType === glitter.deviceTypeEnum.Android) ? 'android' : 'app';
612
612
  }
613
613
  else {
614
614
  const googleRedirect = localStorage.getItem('google_redirect');
@@ -638,7 +638,7 @@ export class UMLogin {
638
638
  ApiUser.getPublicConfig('login_google_setting', 'manager').then((dd) => {
639
639
  widget.share.google = dd.response.value || {};
640
640
  gvc.glitter.runJsInterFace('google_login', {
641
- app_id: widget.share.google.app_id,
641
+ app_id: (glitter.deviceType === glitter.deviceTypeEnum.Android) ? widget.share.google.android_app_id : widget.share.google.app_id,
642
642
  }, (response) => {
643
643
  if (response.result) {
644
644
  gvc.glitter.setUrlParameter('state', 'google_login');