alamin
/
go-whatsapp-web-multidevice
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
46 Commits
1 Branch
86 Tags
1008 KiB
 
 
 
 
 
Tree: 49b90684e6
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '49b90684e6'
${ noResults }
go-whatsapp-web-multidevice/src/views/index.html

1010 lines
37 KiB
Raw Blame History

<!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"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>Whatsapp Web Multi</title>
<style>
.container {
padding-top: 2em;
}
</style>
</head>
<body>
<div class="ui container" id="app">
<h1 class="ui dividing header">[[ app_name ]]</h1>
<h3 class="first">Features</h3>
<div class="ui three column stackable grid cards">
<div class="green card" @click="loginModal" style="cursor: pointer">
<div class="content">
<div class="header">Login</div>
<div class="description">
Scan your QRCode and you can use all this API feature
</div>
</div>
</div>
<div class="green card" @click="logoutProcess" style="cursor: pointer">
<div class="content">
<div class="header">Logout</div>
<div class="description">
Remove your login session in application
</div>
</div>
</div>
<div class="green card" @click="reconnectProcess" style="cursor: pointer">
<div class="content">
<div class="header">Reconnect</div>
<div class="description">
Reconnect to whatsapp server, please do this if your api doesn't work or your application is down or
restart
</div>
</div>
</div>
</div>
<div class="ui four column doubling grid cards">
<div class="green card" @click="infoModal" style="cursor: pointer;">
<div class="content">
<div class="header">User Info</div>
<div class="description">
You can search someone user info by phone
</div>
</div>
</div>
<div class="green card" @click="avatarModal" style="cursor: pointer;">
<div class="content">
<div class="header">User Avatar</div>
<div class="description">
You can search someone avatar by phone
</div>
</div>
</div>
<div class="green card" @click="groupModal" style="cursor: pointer">
<div class="content">
<div class="header">User List Groups</div>
<div class="description">
Display all groups you joined
</div>
</div>
</div>
<div class="green card" @click="privacyModal" style="cursor: pointer">
<div class="content">
<div class="header">User Privacy Setting</div>
<div class="description">
Get your privacy settings
</div>
</div>
</div>
</div>
<div class="ui four column doubling grid cards">
<div class="green card" @click="sendMessageModal('user')" style="cursor: pointer">
<div class="content">
<a class="ui blue right ribbon label">Private</a>
<div class="header">Send Message</div>
<div class="description">
Send any message to any whatsapp number
</div>
</div>
</div>
<div class="green card" @click="sendImageModal('user')" style="cursor:pointer;">
<div class="content">
<a class="ui blue right ribbon label">Private</a>
<div class="header">Send Image</div>
<div class="description">
Send image with
<div class="ui blue horizontal label">jpg/jpeg/png</div>
type
</div>
</div>
</div>
<div class="green card" @click="sendFileModal('user')" style="cursor: pointer">
<div class="content">
<a class="ui blue right ribbon label">Private</a>
<div class="header">Send File</div>
<div class="description">
Send any file up to
<div class="ui blue horizontal label">{{ .MaxFileSize }}</div>
</div>
</div>
</div>
<div class="green card" @click="sendVideoModal('user')" style="cursor: pointer">
<div class="content">
<a class="ui blue right ribbon label">Private</a>
<div class="header">Send Video</div>
<div class="description">
Send video
<div class="ui blue horizontal label">mp4</div>
up to
<div class="ui blue horizontal label">{{ .MaxVideoSize }}</div>
</div>
</div>
</div>
</div>
<div class="ui four column doubling grid cards">
<div class="green card" @click="sendMessageModal('group')" style="cursor: pointer">
<div class="content">
<a class="ui teal right ribbon label">Group</a>
<div class="header">Send Message</div>
<div class="description">
Send any message to any whatsapp number
</div>
</div>
</div>
<div class="green card" @click="sendImageModal('group')" style="cursor:pointer;">
<div class="content">
<a class="ui teal right ribbon label">Group</a>
<div class="header">Send Image</div>
<div class="description">
Send image with
<div class="ui teal horizontal label">jpg/jpeg/png</div>
type
</div>
</div>
</div>
<div class="green card" @click="sendFileModal('group')" style="cursor: pointer">
<div class="content">
<a class="ui teal right ribbon label">Group</a>
<div class="header">Send File</div>
<div class="description">
Send any file up to
<div class="ui teal horizontal label">{{ .MaxFileSize }}</div>
</div>
</div>
</div>
<div class="green card" @click="sendVideoModal('group')" style="cursor: pointer">
<div class="content">
<a class="ui teal right ribbon label">Group</a>
<div class="header">Send Video</div>
<div class="description">
Send video
<div class="ui teal horizontal label">mp4</div>
up to
<div class="ui teal horizontal label">{{ .MaxVideoSize }}</div>
</div>
</div>
</div>
</div>
<!-- Modal Login -->
<div class="ui small modal" id="modalLogin">
<i class="close icon"></i>
<div class="header">
Login Whatsapp
</div>
<div class="image content">
<div class="ui medium image">
<img :src="login_link" alt="qrCodeLogin">
</div>
<div class="description">
<div class="ui header">Please scan to connect</div>
<p>Open Setting > Linked Devices > Link Device</p>
</div>
</div>
<div class="actions">
<div class="ui positive right labeled icon button">
Done
<i class="checkmark icon"></i>
</div>
</div>
</div>
<!-- Modal SendMessage -->
<div class="ui small modal" id="modalSendMessage">
<i class="close icon"></i>
<div class="header">
Send Message
</div>
<div class="content">
<form class="ui form">
<div class="field">
<label>Phone / Group ID</label>
<input v-model="message_phone" type="text" placeholder="6289..."
aria-label="phone">
</div>
<div class="field">
<label>Message</label>
<input v-model="message_text" type="text" placeholder="Hello this is message text"
aria-label="message">
</div>
</form>
</div>
<div class="actions">
<div class="ui positive right labeled icon button" @click="sendMessageProcess">
Send
<i class="send icon"></i>
</div>
</div>
</div>
<!-- Modal SendImage -->
<div class="ui small modal" id="modalSendImage">
<i class="close icon"></i>
<div class="header">
Send Image
</div>
<div class="content">
<form class="ui form">
<div class="field">
<label>Phone / Group ID</label>
<input v-model="image_phone" type="text" placeholder="6289..."
aria-label="phone">
</div>
<div class="field">
<label>Caption</label>
<input v-model="image_caption" type="text" placeholder="Hello this is image caption"
aria-label="caption">
</div>
<div class="field">
<label>View Once</label>
<div class="ui toggle checkbox">
<input type="checkbox" aria-label="view once" v-model="image_view_once">
<label>Check for enable one time view</label>
</div>
</div>
<div class="field">
<label>Compress</label>
<div class="ui toggle checkbox">
<input type="checkbox" aria-label="view once" v-model="image_compress">
<label>Check for compressing image to smaller size</label>
</div>
</div>
<div class="field" style="padding-bottom: 30px">
<label>Image</label>
<input type="file" class="inputfile" id="image_file" style="display: none"
accept="image/png,image/jpg,image/jpeg"/>
<label for="image_file" class="ui positive medium green left floated button" style="color: white">
<i class="ui upload icon"></i>
Upload image
</label>
</div>
</form>
</div>
<div class="actions">
<div class="ui positive right labeled icon button" @click="sendImageProcess">
Send
<i class="send icon"></i>
</div>
</div>
</div>
<!-- Modal SendFile -->
<div class="ui small modal" id="modalSendFile">
<i class="close icon"></i>
<div class="header">
Send File
</div>
<div class="content">
<form class="ui form">
<div class="field">
<label>Phone / Group ID</label>
<input v-model="file_phone" type="text" placeholder="6289..."
aria-label="phone">
</div>
<div class="field">
<label>Caption</label>
<input v-model="file_caption" type="text" placeholder="Type some caption (optional)..."
aria-label="caption">
</div>
<div class="field" style="padding-bottom: 30px">
<label>File</label>
<input type="file" class="inputfile" id="file_file" style="display: none"/>
<label for="file_file" class="ui positive medium green left floated button" style="color: white">
<i class="ui upload icon"></i>
Upload file
</label>
</div>
</form>
</div>
<div class="actions">
<div class="ui positive right labeled icon button" @click="sendFileProcess">
Send
<i class="send icon"></i>
</div>
</div>
</div>
<!-- Modal SendFile -->
<div class="ui small modal" id="modalSendVideo">
<i class="close icon"></i>
<div class="header">
Send Video
</div>
<div class="content">
<form class="ui form">
<div class="field">
<label>Phone / Group ID</label>
<input v-model="video_phone" type="text" placeholder="6289..."
aria-label="phone">
</div>
<div class="field">
<label>Caption</label>
<input v-model="video_caption" type="text" placeholder="Type some caption (optional)..."
aria-label="caption">
</div>
<div class="field">
<label>View Once</label>
<div class="ui toggle checkbox">
<input type="checkbox" aria-label="view once" v-model="video_view_once">
<label>Check for enable one time view</label>
</div>
</div>
<div class="field">
<label>Compress</label>
<div class="ui toggle checkbox">
<input type="checkbox" aria-label="view once" v-model="video_compress">
<label>Check for compressing image to smaller size</label>
</div>
</div>
<div class="field" style="padding-bottom: 30px">
<label>Video</label>
<input type="file" class="inputfile" id="video_file" style="display: none" accept="video/*"/>
<label for="video_file" class="ui positive medium green left floated button" style="color: white">
<i class="ui upload icon"></i>
Upload video
</label>
</div>
</form>
</div>
<div class="actions">
<div class="ui positive right labeled icon button" @click="sendVideoProcess">
Send
<i class="send icon"></i>
</div>
</div>
</div>
<!-- Modal UserGroup -->
<div class="ui small modal" id="modalUserGroup">
<i class="close icon"></i>
<div class="header">
My Group List
</div>
<div class="content">
<table class="ui celled table" id="user_groups_table">
<thead>
<tr>
<th>Group ID</th>
<th>Group Name</th>
<th>Group Participants</th>
<th>Group Created At</th>
</tr>
</thead>
<tbody v-if="data_groups != null">
<tr v-for="g in data_groups">
<td data-label="GID">[[ g.JID.split('@')[0] ]]</td>
<td data-label="Name">[[ g.Name ]]</td>
<td data-label="Age">[[ g.Participants.length ]]</td>
<td data-label="Job">[[ g.GroupCreated ]]</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Modal UserPrivacy -->
<div class="ui small modal" id="modalUserPrivacy">
<i class="close icon"></i>
<div class="header">
My Privacy
</div>
<div class="content">
<ol v-if="data_privacy != null">
<li>Who can add Group : <b>[[ data_privacy.group_add ]]</b></li>
<li>Who can see my Last Seen : <b>[[ data_privacy.last_seen ]]</b></li>
<li>Who can see my Status : <b>[[ data_privacy.status ]]</b></li>
<li>Who can see my Profile : <b>[[ data_privacy.profile ]]</b></li>
<li>Read Receipts : <b>[[ data_privacy.read_receipts ]]</b></li>
</ol>
</div>
</div>
<!-- Modal UserAvatar -->
<div class="ui small modal" id="modalUserAvatar">
<i class="close icon"></i>
<div class="header">
Search User Avatar
</div>
<div class="content">
<form class="ui form">
<div class="field">
<label>Phone</label>
<input v-model="avatar_phone" type="text" placeholder="6289..."
aria-label="phone">
</div>
<button type="button" class="ui primary button" :class="{'loading': avatar_loading}"
@click="avatarProcess">
Search
</button>
</form>
<div v-if="avatar_image != null" class="center">
<img :src="avatar_image" alt="profile picture" style="padding-top: 10px;">
</div>
</div>
</div>
<!-- Modal UserInfo -->
<div class="ui small modal" id="modalUserInfo">
<i class="close icon"></i>
<div class="header">
Search User Information
</div>
<div class="content">
<form class="ui form">
<div class="field">
<label>Phone</label>
<input v-model="info_phone" type="text" placeholder="6289..."
aria-label="phone">
</div>
<button type="button" class="ui primary button" :class="{'loading': info_loading}"
@click="infoProcess">
Search
</button>
</form>
<div v-if="info_devices.length > 0" class="center">
<ol>
<li>Nama: [[ info_name ]]</li>
<li>Status: [[ info_status ]]</li>
<li>Device:
<ul>
<li v-for="d in info_devices">
[[ d.Device ]]
</li>
</ul>
</li>
</ol>
</div>
</div>
</div>
</div>
<script>
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'
});
}
const login = {
data() {
return {
login_link: '',
login_duration_sec: 0,
}
},
methods: {
async loginModal() {
try {
await this.loginApiGetQrCode();
$('#modalLogin').modal('show');
} catch (err) {
showErrorInfo(err)
}
},
loginApiGetQrCode() {
return new Promise(async (resolve, reject) => {
try {
let response = await axios.get(`${this.app_host}/app/login`)
let results = response.data.results;
this.login_link = results.qr_link;
this.login_duration_sec = results.qr_duration;
resolve()
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
}
})
}
}
}
const logout = {
methods: {
async logoutProcess() {
try {
await this.logoutApi()
showSuccessInfo("Logout success")
} catch (err) {
showErrorInfo(err)
}
},
logoutApi() {
return new Promise(async (resolve, reject) => {
try {
await axios.get(`${this.app_host}/app/logout`)
resolve()
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
}
})
}
}
}
const reconnect = {
methods: {
async reconnectProcess() {
try {
await this.reconnectApi()
showSuccessInfo("Reconnect success")
} catch (err) {
showErrorInfo(err)
}
},
reconnectApi() {
return new Promise(async (resolve, reject) => {
try {
await axios.get(`${this.app_host}/app/reconnect`)
resolve()
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
}
})
}
}
}
const sendMessage = {
data() {
return {
message_type: 'user',
message_phone: '',
message_text: '',
}
},
methods: {
sendMessageModal(type) {
this.message_type = type
$('#modalSendMessage').modal('show');
},
async sendMessageProcess() {
try {
let response = await this.sendMessageApi()
showSuccessInfo(response)
} catch (err) {
showErrorInfo(err)
}
},
sendMessageApi() {
return new Promise(async (resolve, reject) => {
try {
let payload = new FormData();
payload.append("phone", this.message_phone)
payload.append("message", this.message_text)
payload.append("type", this.message_type)
let response = await axios.post(`${this.app_host}/send/message`, payload, {
// Axios Bug, always content-type that make boundary not set default by browser https://github.com/axios/axios/issues/1603
transformRequest: (data, headers) => {
delete headers.post['Content-Type'];
return data;
}
})
this.sendMessageReset();
resolve(response.data.message)
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
}
})
},
sendMessageReset() {
this.message_phone = '';
this.message_text = '';
this.message_type = 'user';
},
}
}
const sendImage = {
data() {
return {
image_phone: '',
image_view_once: false,
image_compress: false,
image_caption: '',
image_type: 'user',
}
},
methods: {
sendImageModal(type) {
this.image_type = type
$('#modalSendImage').modal('show');
},
async sendImageProcess() {
try {
let response = await this.sendImageApi()
showSuccessInfo(response)
} catch (err) {
showErrorInfo(err)
}
},
sendImageApi() {
return new Promise(async (resolve, reject) => {
try {
let payload = new FormData();
payload.append("phone", this.image_phone)
payload.append("view_once", this.image_view_once)
payload.append("compress", this.image_compress)
payload.append("caption", this.image_caption)
payload.append("image", $("#image_file")[0].files[0])
payload.append("type", this.image_type)
let response = await axios.post(`${this.app_host}/send/image`, payload, {
// Axios Bug, always content-type that make boundary not set default by browser https://github.com/axios/axios/issues/1603
transformRequest: (data, headers) => {
delete headers.post['Content-Type'];
return data;
}
})
this.sendImageReset();
resolve(response.data.message)
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
}
})
},
sendImageReset() {
this.image_view_once = false;
this.image_compress = false;
this.image_phone = '';
this.image_caption = '';
this.image_type = 'user';
$("#image_file").val('');
},
}
}
const sendFile = {
data() {
return {
file_caption: '',
file_type: 'user',
file_phone: '',
}
},
methods: {
sendFileModal(type) {
this.file_type = type
$('#modalSendFile').modal('show');
},
async sendFileProcess() {
try {
let response = await this.sendFileApi()
showSuccessInfo(response)
} catch (err) {
showErrorInfo(err)
}
},
sendFileApi() {
return new Promise(async (resolve, reject) => {
try {
let payload = new FormData();
payload.append("caption", this.file_caption)
payload.append("phone", this.file_phone)
payload.append("file", $("#file_file")[0].files[0])
payload.append("type", this.file_type)
let response = await axios.post(`${this.app_host}/send/file`, payload, {
// Axios Bug, always content-type that make boundary not set default by browser https://github.com/axios/axios/issues/1603
transformRequest: (data, headers) => {
delete headers.post['Content-Type'];
return data;
}
})
this.sendFileReset();
resolve(response.data.message)
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
}
})
},
sendFileReset() {
this.file_caption = '';
this.file_phone = '';
this.file_type = 'user';
$("#file_file").val('');
},
}
}
const sendVideo = {
data() {
return {
video_caption: '',
video_view_once: false,
video_compress: false,
video_type: 'user',
video_phone: '',
}
},
methods: {
sendVideoModal(type) {
this.video_type = type
$('#modalSendVideo').modal('show');
},
async sendVideoProcess() {
try {
let response = await this.sendVideoApi()
showSuccessInfo(response)
} catch (err) {
showErrorInfo(err)
}
},
sendVideoApi() {
return new Promise(async (resolve, reject) => {
try {
let payload = new FormData();
payload.append("phone", this.video_phone)
payload.append("caption", this.video_caption)
payload.append("view_once", this.video_view_once)
payload.append("compress", this.video_compress)
payload.append("video", $("#video_file")[0].files[0])
payload.append("type", this.video_type)
let response = await axios.post(`${this.app_host}/send/video`, payload, {
// Axios Bug, always content-type that make boundary not set default by browser https://github.com/axios/axios/issues/1603
transformRequest: (data, headers) => {
delete headers.post['Content-Type'];
return data;
}
})
this.sendVideoReset();
resolve(response.data.message)
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
}
})
},
sendVideoReset() {
this.video_caption = '';
this.video_view_once = false;
this.video_compress = false;
this.video_phone = '';
this.video_type = 'user';
$("#video_file").val('');
},
}
}
const userGroups = {
data() {
return {
data_groups: []
}
},
methods: {
async groupModal() {
try {
await this.groupApi();
$('#modalUserGroup').modal('show');
$('#user_groups_table').DataTable().destroy();
$('#user_groups_table').DataTable({
"pageLength": 100,
});
showSuccessInfo("Groups fetched")
} catch (err) {
showErrorInfo(err)
}
},
groupApi() {
return new Promise(async (resolve, reject) => {
try {
let response = await axios.get(`${this.app_host}/user/my/groups`)
this.data_groups = response.data.results.data;
resolve()
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
}
})
}
}
}
const userPrivacy = {
data() {
return {
data_privacy: null
}
},
methods: {
async privacyModal() {
try {
await this.privacyApi();
$('#modalUserPrivacy').modal('show');
showSuccessInfo("Privacy fetched")
} catch (err) {
showErrorInfo(err)
}
},
privacyApi() {
return new Promise(async (resolve, reject) => {
try {
let response = await axios.get(`${this.app_host}/user/my/privacy`)
this.data_privacy = response.data.results;
resolve()
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
}
})
}
}
}
const userAvatar = {
data() {
return {
avatar_phone: '',
avatar_image: null,
avatar_loading: false,
}
},
methods: {
async avatarModal() {
this.avatarReset();
$('#modalUserAvatar').modal('show');
},
async avatarProcess() {
try {
this.avatar_loading = true;
await this.avatarApi();
this.avatar_loading = false;
showSuccessInfo("Avatar fetched")
} catch (err) {
this.avatar_loading = false;
showErrorInfo(err)
}
},
avatarApi() {
return new Promise(async (resolve, reject) => {
try {
let response = await axios.get(`${this.app_host}/user/avatar?phone=${this.avatar_phone}`)
this.avatar_image = response.data.results.url;
resolve()
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
}
})
},
avatarReset() {
this.avatar_phone = '';
this.avatar_image = null;
}
}
}
const userInfo = {
data() {
return {
info_phone: '',
//
info_name: null,
info_status: null,
info_devices: [],
//
info_loading: false,
}
},
methods: {
async infoModal() {
this.infoReset();
$('#modalUserInfo').modal('show');
},
async infoProcess() {
try {
this.info_loading = true;
await this.infoApi();
this.info_loading = false;
showSuccessInfo("Info fetched")
} catch (err) {
this.info_loading = false;
showErrorInfo(err)
}
},
infoApi() {
return new Promise(async (resolve, reject) => {
try {
let response = await axios.get(`${this.app_host}/user/info?phone=${this.info_phone}`)
this.info_name = response.data.results.verified_name;
this.info_status = response.data.results.status;
this.info_devices = response.data.results.devices;
resolve()
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
}
})
},
infoReset() {
this.info_phone = '';
this.info_name = null;
this.info_status = null;
this.info_devices = [];
}
}
}
Vue.createApp({
delimiters: ['[[', ']]'],
data() {
return {
app_host: {{ .AppHost }},
app_name: 'Whatsapp API Multi Device (v{{ .AppVersion }})'
}
},
mixins: [login, logout, reconnect, sendMessage, sendImage, sendFile, sendVideo, userGroups, userPrivacy, userAvatar, userInfo]
}).mount('#app')
</script>
</body>
</html>