whatsapp-multi-devicewhatsapp-apiwhatsapprestgolanggorest-apigolang-whatsapp-apigolang-whatsappbotwhatsapp-web-multi-devicewhatsapp-api-go
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
240 lines
8.5 KiB
240 lines
8.5 KiB
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" type="text/css"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.css">
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.4/css/dataTables.semanticui.min.css">
|
|
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.11.4/js/dataTables.semanticui.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.8/semantic.min.js"></script>
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
|
|
<title>Whatsapp API Multi Device {{ .AppVersion }}</title>
|
|
|
|
<style>
|
|
.container {
|
|
padding-top: 2em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="ui container" id="app">
|
|
<h1 class="ui header center aligned">Whatsapp API Multi Device ({{ .AppVersion }})</h1>
|
|
|
|
<div class="ui success message" v-if="connected_devices != null">
|
|
<div class="header">
|
|
Device has connected
|
|
</div>
|
|
<p>
|
|
Device ID: <b>[[ connected_devices[0].device ]]</b>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="ui horizontal divider">
|
|
App
|
|
</div>
|
|
|
|
<div class="ui three column stackable grid cards">
|
|
<app-login :connected="connected_devices"></app-login>
|
|
<app-logout @reload-devices="handleReloadDevice"></app-logout>
|
|
<app-reconnect @reload-devices="handleReloadDevice"></app-reconnect>
|
|
<app-login-with-code :connected="connected_devices"></app-login-with-code>
|
|
</div>
|
|
|
|
<div class="ui horizontal divider">
|
|
Send
|
|
</div>
|
|
|
|
<div class="ui three column doubling grid cards">
|
|
<send-message></send-message>
|
|
<send-image></send-image>
|
|
<send-file max-file-size="{{ .MaxFileSize }}"></send-file>
|
|
|
|
<send-video max-video-size="{{ .MaxVideoSize }}"></send-video>
|
|
<send-contact></send-contact>
|
|
<send-location></send-location>
|
|
|
|
<send-audio></send-audio>
|
|
<send-poll></send-poll>
|
|
</div>
|
|
|
|
<div class="ui horizontal divider">
|
|
Message
|
|
</div>
|
|
|
|
<div class="ui three column doubling grid cards">
|
|
<message-delete></message-delete>
|
|
<message-revoke></message-revoke>
|
|
<message-react></message-react>
|
|
<message-update></message-update>
|
|
</div>
|
|
|
|
<div class="ui horizontal divider">
|
|
Group
|
|
</div>
|
|
|
|
<div class="ui three column doubling grid cards">
|
|
<group-list></group-list>
|
|
<group-create></group-create>
|
|
<group-join-with-link></group-join-with-link>
|
|
<group-add-participants></group-add-participants>
|
|
</div>
|
|
|
|
<div class="ui horizontal divider">
|
|
Newsletter
|
|
</div>
|
|
|
|
<div class="ui three column doubling grid cards">
|
|
<newsletter-list></newsletter-list>
|
|
</div>
|
|
|
|
<div class="ui horizontal divider">
|
|
Account
|
|
</div>
|
|
|
|
<div class="ui three column doubling grid cards">
|
|
<account-avatar></account-avatar>
|
|
<account-user-info></account-user-info>
|
|
<account-privacy></account-privacy>
|
|
</div>
|
|
|
|
</div>
|
|
<script>
|
|
window.TYPEGROUP = "@g.us";
|
|
window.TYPEUSER = "@s.whatsapp.net";
|
|
window.TYPENEWSLETTER = "@newsletter";
|
|
window.showErrorInfo = (message) => {
|
|
$('body').toast({
|
|
position: 'bottom right',
|
|
title: 'Error',
|
|
message: message,
|
|
showProgress: 'bottom',
|
|
classProgress: 'red'
|
|
});
|
|
}
|
|
window.showSuccessInfo = (message) => {
|
|
$('body').toast({
|
|
position: 'bottom right',
|
|
title: 'Success',
|
|
message: message,
|
|
showProgress: 'bottom',
|
|
classProgress: 'green'
|
|
});
|
|
}
|
|
|
|
window.http = axios.create({
|
|
baseURL: `${window.location.protocol}//${window.location.hostname}${window.location.port ? ':' + window.location.port : ''}`
|
|
});
|
|
{{ if isEnableBasicAuth .BasicAuthToken }}
|
|
window.http.defaults.headers.common['Authorization'] = {{ .BasicAuthToken }};
|
|
{{ end }}
|
|
</script>
|
|
<script type="module">
|
|
import AppLogin from "./components/AppLogin.js";
|
|
import AppLoginWithCode from "./components/AppLoginWithCode.js";
|
|
import AppLogout from "./components/AppLogout.js";
|
|
import AppReconnect from "./components/AppReconnect.js";
|
|
import SendMessage from "./components/SendMessage.js";
|
|
import SendImage from "./components/SendImage.js";
|
|
import SendFile from "./components/SendFile.js";
|
|
import SendVideo from "./components/SendVideo.js";
|
|
import SendContact from "./components/SendContact.js";
|
|
import SendLocation from "./components/SendLocation.js";
|
|
import SendAudio from "./components/SendAudio.js";
|
|
import SendPoll from "./components/SendPoll.js";
|
|
import MessageDelete from "./components/MessageDelete.js";
|
|
import MessageUpdate from "./components/MessageUpdate.js";
|
|
import MessageReact from "./components/MessageReact.js";
|
|
import MessageRevoke from "./components/MessageRevoke.js";
|
|
import GroupList from "./components/GroupList.js";
|
|
import GroupCreate from "./components/GroupCreate.js";
|
|
import GroupJoinWithLink from "./components/GroupJoinWithLink.js";
|
|
import GroupAddParticipants from "./components/GroupManageParticipants.js";
|
|
import AccountAvatar from "./components/AccountAvatar.js";
|
|
import AccountUserInfo from "./components/AccountUserInfo.js";
|
|
import AccountPrivacy from "./components/AccountPrivacy.js";
|
|
import NewsletterList from "./components/NewsletterList.js";
|
|
|
|
const showErrorInfo = (message) => {
|
|
$('body').toast({
|
|
position: 'bottom right',
|
|
title: 'Error',
|
|
message: message,
|
|
showProgress: 'bottom',
|
|
classProgress: 'red'
|
|
});
|
|
}
|
|
const showSuccessInfo = (message) => {
|
|
$('body').toast({
|
|
position: 'bottom right',
|
|
title: 'Success',
|
|
message: message,
|
|
showProgress: 'bottom',
|
|
classProgress: 'green'
|
|
});
|
|
}
|
|
|
|
Vue.createApp({
|
|
components: {
|
|
AppLogin, AppLoginWithCode, AppLogout, AppReconnect,
|
|
SendMessage, SendImage, SendFile, SendVideo, SendContact, SendLocation, SendAudio, SendPoll,
|
|
MessageDelete, MessageUpdate, MessageReact, MessageRevoke,
|
|
GroupList, GroupCreate, GroupJoinWithLink, GroupAddParticipants,
|
|
NewsletterList,
|
|
AccountAvatar, AccountUserInfo, AccountPrivacy
|
|
},
|
|
delimiters: ['[[', ']]'],
|
|
data() {
|
|
return {
|
|
app_ws: null,
|
|
connected_devices: null,
|
|
}
|
|
},
|
|
methods: {
|
|
handleReloadDevice() {
|
|
this.app_ws.send(JSON.stringify({"code": "FETCH_DEVICES"}))
|
|
}
|
|
},
|
|
mounted() {
|
|
if (window["WebSocket"]) {
|
|
let wsType = location.protocol !== 'https:' ? 'ws://' : 'wss://';
|
|
this.app_ws = new WebSocket(wsType + document.location.host + "/ws");
|
|
|
|
this.app_ws.onopen = (evt) => {
|
|
this.app_ws.send(JSON.stringify({
|
|
"code": "FETCH_DEVICES",
|
|
"message": "List device"
|
|
}))
|
|
};
|
|
|
|
this.app_ws.onmessage = (evt) => {
|
|
const message = JSON.parse(evt.data)
|
|
switch (message.code) {
|
|
case 'LOGIN_SUCCESS':
|
|
showSuccessInfo(message.message)
|
|
$('#modalLogin').modal('hide');
|
|
|
|
// fetch devices
|
|
this.handleReloadDevice()
|
|
break;
|
|
case 'LIST_DEVICES':
|
|
this.connected_devices = message.result
|
|
break;
|
|
default:
|
|
console.log(message)
|
|
}
|
|
};
|
|
} else {
|
|
console.error('Your browser does not support WebSockets');
|
|
}
|
|
},
|
|
}).mount('#app')
|
|
</script>
|
|
</body>
|
|
</html>
|