Skip to content

Commit

Permalink
feat: add ui getting pair code
Browse files Browse the repository at this point in the history
  • Loading branch information
aldinokemal committed Jul 14, 2024
1 parent df745ac commit 5efe046
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 2 deletions.
1 change: 0 additions & 1 deletion src/internal/rest/app.go
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,6 @@ func (handler *App) LoginWithCode(c *fiber.Ctx) error {
"login_code": loginCode,
},
})

}

func (handler *App) Logout(c *fiber.Ctx) error {
Expand Down
101 changes: 101 additions & 0 deletions src/views/components/AppLoginWithCode.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
export default {
name: 'AppLoginWithCode',
props: {
connected: null,
},
data: () => {
return {
phone: '',
submitting: false,
pair_code: null,
};
},
methods: {
async openModal() {
try {
$('#modalLoginWithCode').modal({
onApprove: function() {
return false;
},
}).modal('show');
} catch (err) {
showErrorInfo(err);
}
},
async handleSubmit() {
if (this.submitting) return;
try {
this.submitting = true;
const { response } = await this.submitApi();
this.pair_code = response.pair_code;
} catch (err) {
showErrorInfo(err);
} finally {
this.submitting = false;
}
},

async submitApi() {
try {
return http.get(`/app/login-with-code`, {
params: {
phone: this.phone,
},
});
} catch (error) {
if (error.response) {
throw Error(error.response.data.message);
}
throw Error(error.message);
}

},
},
template: `
<div class="green card" @click="openModal" style="cursor: pointer">
<div class="content">
<div class="header">Login with Code</div>
<div class="description">
Login with pairing code to get access to your devices
</div>
</div>
</div>
<!-- Modal Login -->
<div class="ui small modal" id="modalLoginWithCode">
<i class="close icon"></i>
<div class="header">
Getting Pair Code
</div>
<div class="content">
<div class="ui message info">
<div class="header">How to pair?</div>
<ol>
<li>Open your Whatsapp</li>
<li>Link a device</li>
<li>Link with pair code</li>
</ol>
</div>
<div class="ui form">
<div class="field">
<label>Phone</label>
<input type="text" v-model="phone" placeholder="Type your phone number"
@keyup.enter="handleSubmit" :disabled="submitting">
<small>Enter to submit</small>
</div>
</div>
<div class="ui grid" v-if="pair_code">
<div class="ui two column centered grid">
<div class="column center aligned">
<div class="header">Pair Code</div>
<p style="font-size: 32px">{{ pair_code }}</p>
</div>
</div>
</div>
</div>
</div>
`,
};
4 changes: 3 additions & 1 deletion src/views/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ <h1 class="ui header center aligned">Whatsapp API Multi Device ({{ .AppVersion }
<app-login></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">
Expand Down Expand Up @@ -127,6 +128,7 @@ <h1 class="ui header center aligned">Whatsapp API Multi Device ({{ .AppVersion }
</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";
Expand Down Expand Up @@ -170,7 +172,7 @@ <h1 class="ui header center aligned">Whatsapp API Multi Device ({{ .AppVersion }

Vue.createApp({
components: {
AppLogin, AppLogout, AppReconnect,
AppLogin, AppLoginWithCode, AppLogout, AppReconnect,
SendMessage, SendImage, SendFile, SendVideo, SendContact, SendLocation, SendAudio, SendPoll,
MessageDelete, MessageUpdate, MessageReact, MessageRevoke,
GroupList, GroupCreate, GroupJoinWithLink, GroupAddParticipants,
Expand Down

0 comments on commit 5efe046

Please sign in to comment.