[add] join discord

src/entry/background.js

@@ -13,7 +13,8 @@ import {
     setMessageCount,
     getMessageInfo,
     readTaskAllMsg,
-    discordLoginCode
+    discordLoginCode,
+    saveDiscordAuthWindowId
 } from "@/logic/background/twitter";
 
 //加载bg.js 执行
@@ -75,6 +76,9 @@ function onMessageMethod(req, sender, sendResponse) {
             case 'CONTENT_HIDE_BADGE':
                 hideBadge();
                 break;
+            case 'RED_PACKET_SAVE_DISCORD_AUTH_WINDOW_ID':
+                saveDiscordAuthWindowId(req);
+                break;
         }
     }
 }

src/logic/background/twitter.js

@@ -60,30 +60,36 @@ export function twitterPinLoginCode(port,code) {
 
 }
 
+let discordAuthWindowId = '';
+export function saveDiscordAuthWindowId (params) {
+    let {windowId = ''} = params.data || {};
+    discordAuthWindowId = windowId;
+}
+
 export function discordLoginCode({code}) {
-    chrome.tabs.query({}, (tab) => {
-        for (let i in tab) {
-            if (tab[i].url.indexOf('denetme.net/auth/discordCallback') > -1) {
-                chrome.tabs.remove(tab[i].id)
+    if(discordAuthWindowId) {
+        chrome.windows.remove(
+            discordAuthWindowId,
+            function () {
+                 // 发送请求
+                getDiscordUserInfo({
+                    authCode: code,
+                    redirectUrl: discordAuthRedirectUri
+                }).then(res => {
+                    if (res.code == 0) {
+                        setTimeout(() => {
+                            sendActivetabMessage({
+                                actionType: 'BACK_DISCORD_LOGIN_SUCCESS'
+                            });
+                        })
+                    }
+                })
             }
-        }
-    })
-    console.log(code)
-    // 发送请求
-    getDiscordUserInfo({
-        authCode: code,
-        redirectUrl: discordAuthRedirectUri
-    }).then(res => {
-        if (res.code == 0) {
-            setTimeout(() => {
-                sendActivetabMessage({
-                    actionType: 'BACK_DISCORD_LOGIN_SUCCESS'
-                });
-            })
-        }
-    })
+        )
+    }
 }
 
+
 export function twitterShortUrl(url) {
     return new Promise(function (resolve, reject) {
         fetchTwitterShortUrl(url).then(res => {

src/view/iframe/publish/give-dialog.vue

@@ -196,11 +196,11 @@
                                             <div v-if="showDiscordInvitePop" 
                                                 class="discord-invite-info"
                                                 @click="showDiscordInvitePop = false">
-                                                <img class="icon" :src="discordInviteInfo.icon" />
+                                                <img class="icon" :src="discordInviteInfo.icon || require('@/assets/svg/icon-discord-mini.svg')" />
                                                 <span class="name">{{discordInviteInfo.name}}</span>
                                             </div>
                                             <input v-model="item.text" 
-                                                placeholder="Enter link address"
+                                                placeholder="Enter discord invite link"
                                                 class="discord-address" 
                                                 @input="onIptDiscordAddress($event, index)"
                                                 @blur="onBlurDiscordAddress($event, index)" />
@@ -209,7 +209,7 @@
                                     <el-switch
                                         v-if="item.type == 2 || item.type == 7"
                                         v-model="item.checked"
-                                        @change="formSwitchChange($event, item)"
+                                        @change="formSwitchChange($event, item, index)"
                                     />
                                     <img
                                         v-if="item.type == 3"
@@ -446,6 +446,10 @@ let currentCurrencyInfo = ref({
     usdEstimateBalance: ""
 });
 
+const discordIptErrTxt = 'Discord invite link is wrong';
+const discordIptEmptyErrTxt = 'Enter discord invite link';
+let iptErrType = ''; //discord
+
 let formList = reactive([
     {
         label: "Follow",
@@ -820,8 +824,11 @@ const calcFontSize = (str, domWidth, maxSize) => {
  */
 const initParams = () => {
     resetFormIpt();
+
+    // clear follow value
     formList[0].text = [];
     atUserList.value = [];
+
     submitIng.value = false;
     isBack.value = false;
     showCurrencyPop.value = false;
@@ -829,6 +836,9 @@ const initParams = () => {
 
     tempCurrentCurrencyInfo.value = {};
     currentCurrencyInfo.value = {};
+
+    // clear discord value
+    formList[3].text = '';
 };
 
 /**
@@ -991,7 +1001,7 @@ const setInputErrorMsg = () => {
 /**
  * 输入时 检测设置错误信息
  */
-const onIptSetErrorTxt = () => {
+const onIptSetErrorTxt = (params = {}) => {
     depositGuide.value = false;
     if(!currentCurrencyInfo.value.currencyCode) {
         iptErrMsgTxt.value = "Select a reward"
@@ -1005,6 +1015,9 @@ const onIptSetErrorTxt = () => {
             iptErrMsgTxt.value = `${baseFormData.amountValue} ${currentCurrencyInfo.value.tokenSymbol} Can send up to ${res.count} winners`;
         } else {
             iptErrMsgTxt.value = "";
+            if(params.actionType != 'discord_blur') {
+                setDiscordErrTxt();
+            }
         }
     } else if(currentCurrencyInfo.value.currencyCode != 'USD') {
         depositGuide.value = true;
@@ -1012,61 +1025,133 @@ const onIptSetErrorTxt = () => {
     } 
 }
 
-const formSwitchChange = (val, params) => {
+/**
+ * 监听开关触发事件
+ */
+const formSwitchChange = (val, params, index) => {
+    console.log('formSwitchChange')
     if(!val) {
         if(params.type == 7) {
-            // 清空discord错误校验
+            //错误类型 discord 清空discord错误校验
+            if(iptErrType == 'discord') {
+                iptErrMsgTxt.value = '';
+                formList[index]['text'] = '';
+                onIptSetErrorTxt();
+            }
         }
     }
 }
 
+/** 监听 discord 输入 */
 const onIptDiscordAddress = (e, index) => {
     let val = formList[index].text;
-
-    onIptDiscordDebounce({value: val, checked: formList[index].checked})
+    let checked = formList[index].checked;
+    if(val && !checked) {
+        checked = true;
+        formList[index].checked = checked;
+        formList[index].text = formList[index].text.replace(/\s/g,'');
+    }
+    onIptDiscordDebounce()
 }
 
 const onBlurDiscordAddress = (e, index) => {
-    let val = formList[index].text;
+    setDiscordErrTxt({fromType: 'discord', showPop: false, actionType: 'discord_blur'});
+}
+
 
+const getDiscordIptData = () => {
+    let discordItem = formList.find(item => item.type == 7);
+    return discordItem;
 }
 
-const onIptDiscordDebounce = debounce(function({value, checked}) {
-    if(value && checked) {
-        let validata = checkInviteUrl(value);
-        if(validata) {
-            getDiscordInviteInfo(value, (res) => {
-                if(res.code != 0) {
-                    // 错误提示
-                } else {
-                    showDiscordInvitePop.value = true;
-                    setTimeout(() => {
-                        showDiscordInvitePop.value = false;
-                    }, 2000)
-                }
-            });
+/**
+ * 设置输入discord错误提示信息
+ */
+const setDiscordErrTxt = (params = {showPop: false}) => {
+    let discordData = getDiscordIptData() || {};
+    if(discordData.checked) {
+        if(discordData.text) {
+            let validata = checkInviteUrl(discordData.text);
+            if(validata) {
+                getDiscordInviteInfo(discordData.text, (res) => {
+                    if(res.code != 0) {
+                        iptErrMsgTxt.value = discordIptErrTxt;
+                        iptErrType = 'discord';
+                    } else {
+                        if(iptErrMsgTxt.value) {
+                            iptErrMsgTxt.value = '';
+                            iptErrType = '';
+                        }
+                        if(params.showPop) {
+                            showDiscordInvitePop.value = true;
+                            setTimeout(() => {
+                                showDiscordInvitePop.value = false;
+                            }, 2000)
+                        }
+                        if(params.fromType == 'discord') {
+                            onIptSetErrorTxt();
+                        }
+                    }
+                }).catch((err) => {
+                    if(iptErrMsgTxt.value) {
+                        iptErrMsgTxt.value = '';
+                        iptErrType = '';
+                    }
+                });
+            } else {
+                iptErrMsgTxt.value = discordIptErrTxt;
+                iptErrType = 'discord';
+            }
         } else {
-            // 错误提示
-
+            if(params.actionType == 'discord_blur') {
+                onIptSetErrorTxt({acitonType: 'discord_blur'});
+            } else {
+                // 设置空提示
+                iptErrMsgTxt.value = discordIptEmptyErrTxt;
+                iptErrType = 'discord';
+            }
         }
     }
+}
+
+const onIptDiscordDebounce = debounce(function() {
+    setDiscordErrTxt({fromType: 'discord', showPop: true});
 }, 800) 
 
+/**
+ * 校验 discord邀请url
+ */
 const checkInviteUrl = (inviteUrl) => {
-    let flag = true;
-    const INVITE_URL_PREFIX = 'https://discord.gg/';
-    const INVITE_URL_PREFIX_OLD = 'https://discord.com/invite/';
+    let flag = false;
+    const INVITE_URL_PREFIX_1 = 'https://discord.gg/';
+    const INVITE_URL_PREFIX_2 = 'https://discord.com/invite/';
+    const INVITE_URL_PREFIX_3 = 'http://discord.gg/';
+    const INVITE_URL_PREFIX_4 = 'http://discord.com/invite/';
+    const INVITE_URL_PREFIX_5 = 'discord.gg/';
+    const INVITE_URL_PREFIX_6 = 'discord.com/invite/';
+
+    const arr = [INVITE_URL_PREFIX_1, INVITE_URL_PREFIX_2, INVITE_URL_PREFIX_3, INVITE_URL_PREFIX_4, INVITE_URL_PREFIX_5, INVITE_URL_PREFIX_6]
 
     if(inviteUrl) {
-        if(inviteUrl == INVITE_URL_PREFIX || inviteUrl == INVITE_URL_PREFIX_OLD || 
-            (!inviteUrl.startsWith(INVITE_URL_PREFIX) && !inviteUrl.startsWith(INVITE_URL_PREFIX_OLD))) {
+        if(arr.indexOf(inviteUrl) > -1) {
             flag = false;
+        } else {
+            let isPass = false;
+            for(let i = 0; i < arr.length; i++) {
+                let item = arr[i];
+                if(inviteUrl.startsWith(item)) {
+                    isPass = true;
+                    break;
+                }
+            }
+            flag = isPass;
         }
-    }
+    } 
 
     return flag;
 }
 
+/**获取discord 邀请信息 */
 const getDiscordInviteInfo = (inviteUrl, cb) => {
     if(!inviteUrl) return;
     getInviteGuildInfo({
@@ -1588,6 +1673,8 @@ onMounted(() => {
                                     box-sizing: border-box;
                                     display: flex;
                                     align-items: center;
+                                    cursor: pointer;
+
                                     .icon {
                                         width: 40px;
                                         height: 40px;

src/view/iframe/red-packet/red-packet.vue

@@ -266,7 +266,7 @@ import { discordAuthRedirectUri } from '@/http/configAPI'
 var moment = require('moment');
 
 let discordAuthorizeRequired = false;
-let joinDiscordActionState = 'default'; //authAndJoinIng  joinIng reAuth
+let joinDiscordActionState = 'default'; //authAndJoinIng  joinIng  reAuth
 
 let data = reactive({
   status: '',
@@ -639,6 +639,9 @@ function initTaskDetail() {
           case 3:
             data.done.retweet = res.data[i].finished
             break
+          case 7:
+            discordAuthorizeRequired = res.data[i].discordAuthorizeRequired
+            break
         }
       }
     } else {
@@ -936,7 +939,7 @@ function handleErrorCode(res) {
       break
     // 需要重新授权 discord
     case '1010': 
-      discordAuth();
+      discordAuth('reAuth');
       break
   }
 }
@@ -986,9 +989,13 @@ function onRuntimeMsg() {
   })
 }
 
+/**
+ * 检查是否加入discord
+ */
 function checkJoinDiscord() {
   // 如果上次的状态是 joinIng 检查是否真正join
   if(joinDiscordActionState == 'joinIng') {
+    joinDiscordActionState = 'default';
     let url = getInviteUrl();
     if(url) {
       checkGuildJoined({
@@ -1000,14 +1007,18 @@ function checkJoinDiscord() {
           let { joined } = res.data || {};
           if(joined) {
             data.done.join_discord = true;
-            joinDiscordActionState = 'default';
           }
+        } else if(res.code == 1010){
+          discordAuth('reAuth');
         }
       })
     }
   }
 }
 
+/**
+ * 加入discord 事件
+ */
 function joinDiscord() {
   //判断是否需要授权
   if(discordAuthorizeRequired) {
@@ -1017,7 +1028,10 @@ function joinDiscord() {
   }
 }
 
-function discordAuth(actionState) {
+/**
+ * discord授权
+ */
+function discordAuth(actionState = 'default') {
     let state = guid();
     discordAuthUrl({
         params : {
@@ -1029,20 +1043,54 @@ function discordAuth(actionState) {
             let {authorizeUrl = ''} = res.data || {};
             if(authorizeUrl) {
               joinDiscordActionState = actionState; 
-              window.open(authorizeUrl)
+              const width = 500, height = 800;
+              chrome.windows.create({
+                width, 
+                height, 
+                left: 0,
+                top: 0,
+                type:'popup', 
+                url: authorizeUrl}, function(window) {
+                  let windowId = window.id;
+                  callEventPageMethod("RED_PACKET_SAVE_DISCORD_AUTH_WINDOW_ID", {
+                    windowId: windowId
+                  }, function (response) {
+                  });
+              })
             }
         }
     })
 }
 
+/**
+ * sendMessage
+ */
+const callEventPageMethod = (actionType, data, callback) => {
+    chrome.runtime.sendMessage(
+        { 
+            actionType: actionType, 
+            data: data 
+        },
+        function (response) {
+            if (typeof callback === "function") callback(response);
+        }
+    );
+};
+
+/**
+ * discord 授权成功
+ */
 function discordLoginSuccess() {
   console.log('discordloginSuccess');
-  // 如果是join并授权 回来后默认打开 邀请链接
+  // 如果是授权并join 默认打开 邀请链接
   if(joinDiscordActionState == 'authAndJoinIng') {
     openInviteUrl();
   } 
 }
 
+/**
+ * 获取discord邀请链接
+ */
 function getInviteUrl () {
   let inviteData = data.detail.taskCondition.find(item => {
     return item.type == 7;
@@ -1054,10 +1102,16 @@ function getInviteUrl () {
   return url;
 }
 
+/**
+ * 打开邀请discord链接
+ */
 function openInviteUrl() {
   joinDiscordActionState = 'joinIng';
   let url = getInviteUrl();
   if(url) {
+    if(!url.startsWith('http')) {
+      url = 'https://' + url;
+    }
     window.open(url);
   }
 }