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.
30 Commits
1 Branch
86 Tags
1008 KiB
 
 
 
 
 
Tree: 5fab545bdd
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '5fab545bdd'
${ noResults }
go-whatsapp-web-multidevice/views/index.html

436 lines
15 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">
<script src="https://code.jquery.com/jquery-3.1.1.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 cards">
<div class="green card" @click="loginModal" style="cursor: pointer">
<div class="content">
<div class="header">Login</div>
<div class="meta">App</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="meta">App</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="meta">App</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 cards">
<div class="green card">
<div class="content">
<div class="header">User Info</div>
<div class="meta">App</div>
<div class="description">
You can search someone user info by phone
</div>
</div>
</div>
<div class="green card">
<div class="content">
<div class="header">User Avatar</div>
<div class="meta">App</div>
<div class="description">
You can search someone avatar by phone
</div>
</div>
</div>
<div class="green card">
<div class="content">
<div class="header">User List Groups</div>
<div class="meta">App</div>
<div class="description">
Display all groups you joined
</div>
</div>
</div>
<div class="green card">
<div class="content">
<div class="header">User Privacy Setting</div>
<div class="meta">App</div>
<div class="description">
Get your privacy settings
</div>
</div>
</div>
</div>
<div class="ui three cards">
<div class="green card" @click="sendMessageModal" style="cursor: pointer">
<div class="content">
<div class="header">Send Message (Text)</div>
<div class="meta">App</div>
<div class="description">
Send any message to any
<div class="ui blue horizontal label">indonesian</div>
whatsapp number
</div>
</div>
</div>
<div class="green card" @click="sendImageModal" style="cursor:pointer;">
<div class="content">
<div class="header">Send Message (Image)</div>
<div class="meta">App</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">
<div class="content">
<div class="header">Send Message (File)</div>
<div class="meta">App</div>
<div class="description">
Send any file up to
<div class="ui blue horizontal label">10MB</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">
</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</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</label>
<input v-model="image_phone" type="text" placeholder="6289..."
aria-label="phone">
</div>
<div class="field">
<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>
<div class="field">
<label>Caption</label>
<input v-model="image_caption" type="text" placeholder="Hello this is image caption"
aria-label="caption">
</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>
</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_phone: '',
message_text: '',
}
},
methods: {
sendMessageModal() {
$('#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)
let response = await axios.post(`${this.app_host}/send/message`, payload)
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 = '';
},
}
}
const sendImage = {
data() {
return {
image_phone: '',
image_caption: '',
}
},
methods: {
sendImageModal() {
$('#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("caption", this.image_caption)
payload.append("image", $("#image_file")[0].files[0])
let response = await axios.post(`${this.app_host}/send/image`, payload)
this.sendImageReset();
resolve(response.data.message)
} catch (error) {
if (error.response) {
reject(error.response.data.message)
} else {
reject(error.message)
}
}
})
},
sendImageReset() {
this.image_phone = '';
this.image_caption = '';
$("#image_file").val('');
},
}
}
Vue.createApp({
delimiters: ['[[', ']]'],
data() {
return {
app_host: "http://localhost:3000",
app_name: 'Whatsapp API Multi Device App'
}
},
mixins: [login, logout, reconnect, sendMessage, sendImage]
}).mount('#app')
</script>
</body>
</html>