Skip to content

Commit

Permalink
feat(vuejs): add settings view and controller with router config
Browse files Browse the repository at this point in the history 
* refact: fix some lint errors & updated tsconfig
* fix: add temporary fix for routing support with astilectron
  • Loading branch information
@hbollon
hbollon committed Jul 18, 2021
1 parent fff0fdc commit ac3550b
Show file tree
Hide file tree
Showing 11 changed files with 480 additions and 41 deletions.
4 changes: 3 additions & 1 deletion resources/static/vue-igopher/.eslintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ module.exports = {
},
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-undef': 0,
"@typescript-eslint/no-this-alias": ["off"],
}
}
1 change: 1 addition & 0 deletions resources/static/vue-igopher/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
"name": "vue-igopher",
"version": "0.1.0",
"private": true,
"homepage": "./",
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
Expand Down
28 changes: 18 additions & 10 deletions resources/static/vue-igopher/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,23 @@
></a>
</template>

<script lang="ts">
import { Vue, Options } from "vue-class-component";
import LateralNav from "@/components/LateralNav.vue";
import NavBar from "@/components/NavBar.vue";
import Footer from "@/components/Footer.vue";
import "@/theme"
@Options({
components: {
LateralNav,
NavBar,
Footer,
}
})
export default class App extends Vue {}
</script>

<style lang="scss">
#app {
font-family: Roboto, Helvetica, Arial, sans-serif;
Expand Down Expand Up @@ -47,13 +64,4 @@
color: #fff;
background-color: rgb(68, 68, 68);
}
</style>

<script lang="ts">
import { defineComponent } from "vue";
import "@/theme"
export default defineComponent({
name: "App"
});
</script>
</style>
6 changes: 3 additions & 3 deletions resources/static/vue-igopher/src/components/LateralNav.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@
<ul class="navbar-nav text-light" id="accordionSidebar">
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item"><a class="nav-link" href="/"><i class="fa fa-envelope"></i><span>DM Automation&nbsp;</span></a></li>
<li class="nav-item"><a class="nav-link" href="index.html#/"><i class="fa fa-envelope"></i><span>DM Automation&nbsp;</span></a></li>
<li class="nav-item"></li>
<li class="nav-item"><a class="nav-link" href="/settings"><i class="fa fa-gears"></i><span>Settings</span></a></li>
<li class="nav-item"><a class="nav-link" href="/logs"><i class="fa fa-list-alt"></i><span>Logs</span></a></li>
<li class="nav-item"><a class="nav-link" href="index.html#/settings"><i class="fa fa-gears"></i><span>Settings</span></a></li>
<li class="nav-item"><a class="nav-link" href="index.html#/logs"><i class="fa fa-list-alt"></i><span>Logs</span></a></li>
</ul>
<div class="text-center d-none d-md-inline"><button class="btn rounded-circle border-0" id="sidebarToggle" type="button"></button></div>
</div>
Expand Down
135 changes: 135 additions & 0 deletions resources/static/vue-igopher/src/components/SettingsPanel.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
<template>
<div class="container-fluid">
<h3 class="text-dark mb-2">Settings</h3>
<div class="row">
<div class="col-lg-6 col-xl-6">
<div class="card shadow mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="text-primary fw-bold m-0">Interactions quotas</h6>
</div>
<div class="card-body">
<p class="text-center">This module manages and limits the number of interactions performed per hour and per day, in order to respect the limits set. The default settings are those recommended to protect your Instagram account from restrictions.<br>This module is recommended.</p>
<hr>
<form id="quotasForm" novalidate="">
<div class="form-group mb-3"><label class="form-label">Activation:&nbsp;</label><div class="form-check"><input type="radio" class="form-check-input" id="formCheck-5" value="true" name="quotasActivation" required checked /><label class="form-check-label" for="formCheck-1">Enabled</label></div><div class="form-check disabled"><input type="radio" class="form-check-input" id="formCheck-6" value="false" name="quotasActivation" required /><label class="form-check-label" for="formCheck-2">Disabled</label><div class="invalid-feedback">Invalid input!</div></div></div>
<hr>
<div class="form-group mb-3"><div class="input-group"><span class="input-group-text">Likes per day</span><input id="likesPerDayInput" type="number" class="form-control" name="likesPerDay" required min="1" value="100" /><div class="invalid-feedback">Invalid input!</div></div></div>
<div class="form-group mb-3"><div class="input-group"><span class="input-group-text">Likes per hour</span><input id="likesPerHourInput" type="number" class="form-control" name="likesPerHour" required min="1" value="10" /><div class="invalid-feedback">Invalid input!</div></div></div>
<hr>
<div class="form-group mb-3"><div class="input-group"><span class="input-group-text">Follows per day</span><input id="followsPerDayInput" type="number" class="form-control" name="followsPerDay" required min="1" value="80" /><div class="invalid-feedback">Invalid input!</div></div></div>
<div class="form-group mb-3"><div class="input-group"><span class="input-group-text">Follows per hour</span><input id="followsPerHourInput" type="number" class="form-control" name="followsPerHour" required min="1" value="8" /><div class="invalid-feedback">Invalid input!</div></div></div>
<hr>
<div class="form-group mb-3"><div class="input-group"><span class="input-group-text">Unfollows per day</span><input id="unfollowsPerDayInput" type="number" class="form-control" name="unfollowsPerDay" required min="1" value="60" /><div class="invalid-feedback">Invalid input!</div></div></div>
<div class="form-group mb-3"><div class="input-group"><span class="input-group-text">Unfollows per hour</span><input id="unfolllowsPerHourInput" type="number" class="form-control" name="unfolllowsPerHour" required min="1" value="6" /><div class="invalid-feedback">Invalid input!</div></div></div>
<hr>
<div class="form-group mb-3"><div class="input-group"><span class="input-group-text">Direct messages per day</span><input id="dmDayInput" type="number" class="form-control" name="dmDay" required min="1" value="40" /><div class="invalid-feedback">Invalid input!</div></div></div>
<div class="form-group mb-3"><div class="input-group"><span class="input-group-text">Direct messages per hour</span><input id="dmHourInput" type="number" class="form-control" name="dmHour" required min="1" value="4" /><div class="invalid-feedback">Invalid input!</div></div></div>
<div><button class="btn btn-primary" id="quotasFormBtn" type="button">Save</button><button class="btn btn-secondary" type="reset" style="margin-left: 5px;">Reset to default</button></div>
</form>
</div>
</div>
</div>
<div class="col-lg-6 col-xl-6">
<div class="card shadow mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="text-primary fw-bold m-0">Scheduler</h6>
</div>
<div class="card-body">
<p class="text-center">This module defines and manages the bot's operating hours.<br>It is recommended to activate it and leave a period of inactivity.</p>
<hr>
<form id="schedulerForm" novalidate="">
<div class="form-group mb-3"><label class="form-label">Activation:&nbsp;</label><div class="form-check"><input type="radio" class="form-check-input" id="formCheck-1" value="true" name="scheduleActivation" required checked /><label class="form-check-label" for="formCheck-1">Enabled</label></div><div class="form-check disabled"><input type="radio" class="form-check-input" id="formCheck-2" value="false" name="scheduleActivation" required /><label class="form-check-label" for="formCheck-2">Disabled</label><div class="invalid-feedback">Invalid input!</div></div></div>
<hr>
<div class="form-group mb-3"><div class="input-group"><span class="input-group-text">Start time</span><input id="beginAtInput" class="form-control" type="time" name="beginAt" required value="08:00" /><div class="invalid-feedback">Invalid input!</div></div></div>
<div class="form-group mb-3"><div class="input-group"><span class="input-group-text">End time</span><input id="endAtInput" class="form-control" type="time" name="endAt" required value="18:00" /><div class="invalid-feedback">Invalid input!</div></div></div>
<div><button class="btn btn-primary" id="schedulerFormBtn" type="button">Save</button><button class="btn btn-secondary" type="reset" style="margin-left: 5px;">Reset to default</button></div>
</form>
</div>
</div>
<div class="card shadow mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="text-primary fw-bold m-0">Users blacklist</h6>
</div>
<div class="card-body">
<p class="text-center">This module maintains a blacklist where are added the users with whom we have already interacted in order to avoid duplicates and spam.</p>
<hr>
<form id="blacklistForm" novalidate="">
<div class="form-group mb-3"><label class="form-label">Activation:&nbsp;</label><div class="form-check"><input type="radio" class="form-check-input" id="formCheck-3" value="true" name="blacklistActivation" required checked /><label class="form-check-label" for="formCheck-1">Enabled</label></div><div class="form-check disabled"><input type="radio" class="form-check-input" id="formCheck-4" value="false" name="blacklistActivation" required /><label class="form-check-label" for="formCheck-2">Disabled</label><div class="invalid-feedback">Invalid input!</div></div></div>
<div><button class="btn btn-primary" id="blacklistFormBtn" type="button">Save</button><button class="btn btn-secondary" type="reset" style="margin-left: 5px;">Reset to default</button></div>
</form>
</div>
</div>
</div>
</div>
<hr>
<div class="row justify-content-center">
<div class="col-lg-6 col-xl-6">
<div class="card shadow mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="text-primary fw-bold m-0">Proxy</h6>
</div>
<div class="card-body">
<div class="text-start" style="margin-right: 15px;margin-left: 15px;">
<p class="text-center">This proxy configuration will be used for all webdriver operations to ensure the security of your Instagram account.<br>We recommend that you use a proxy to further limit Instagram limitation risks and / or sanctions.</p>
<hr>
<form id="proxyForm" novalidate="">
<div class="form-group mb-3"><div class="input-group"><span class="input-group-text">IP Adress</span><input id="ipInput" type="text" class="form-control" name="ip" pattern="((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)" required /><div class="invalid-feedback">Invalid input!</div></div></div>
<div class="form-group mb-3"><div class="input-group"><span class="input-group-text">Port</span><input id="portInput" type="number" class="form-control" name="port" required min="1" max="65535"/><div class="invalid-feedback">Invalid input!</div></div></div>
<hr>
<div class="row" style="margin-bottom: 12px;">
<div class="col d-flex d-xxl-flex justify-content-center align-items-center">
<p style="margin-bottom: 0px;">Authentication:</p>
</div>
<div class="col d-flex d-xxl-flex justify-content-center align-items-center justify-content-xxl-center align-items-xxl-center"><input type="checkbox" id="proxyAuthCheck" name="auth"></div>
</div>
<div class="d-none" id="proxyAuthInputs">
<div class="form-group mb-3"><div class="input-group"><span class="input-group-text">Username</span><input id="proxyUsernameInput" type="text" class="form-control auth-proxy" name="username" /><div class="invalid-feedback">Invalid input!</div></div></div>
<div class="form-group mb-3"><div class="input-group"><span class="input-group-text">Password</span><input id="proxyPasswordInput" type="password" class="form-control auth-proxy" name="password" /><div class="invalid-feedback">Invalid input!</div></div></div>
</div>
<hr>
<div class="form-group mb-3"><label class="form-label">Activation:&nbsp;</label><div class="form-check disabled"><input type="radio" class="form-check-input" id="proxyCheck-1" value="true" name="proxyActivation" required /><label class="form-check-label" for="proxyCheck-1">Enabled</label></div><div class="form-check"><input type="radio" class="form-check-input" id="proxyCheck-2" value="false" name="proxyActivation" required checked/><label class="form-check-label" for="proxyCheck-2">Disabled</label><div class="invalid-feedback">Invalid input!</div></div></div>
<div><button class="btn btn-primary" id="proxyFormBtn" type="button">Save</button><button class="btn btn-secondary" type="reset" style="margin-left: 5px;">Reset to default</button></div>
</form>
</div>
</div>
</div>
<div class="card shadow mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="text-danger fw-bold m-0">Danger Zone</h6>
</div>
<div class="card-body">
<p class="text-center">Be careful with following settings!<br>Some changes cannot be undone!</p>
<hr>
<form id="igCredentialsForm" method="post" novalidate="">
<p>Instagram credentials:</p>
<div class="form-group mb-3"><div class="input-group"><span class="input-group-text">Username</span><input id="usernameInput" type="text" class="form-control" name="username" required /><div class="invalid-feedback">Invalid input!</div></div></div>
<div class="form-group mb-3"><div class="input-group"><span class="input-group-text">Password</span><input id="passwordInput" type="password" class="form-control" name="password" required /><div class="invalid-feedback">Invalid input!</div></div></div>
<div><button class="btn btn-primary" id="igCredentialsFormBtn" type="button">Save</button><button class="btn btn-secondary" type="reset" style="margin-left: 5px;">Reset to default</button></div>
</form>
<hr>
<div class="text-center" style="margin-right: 15px;margin-left: 15px;">
<div class="row d-xl-flex justify-content-center justify-content-xl-center align-items-xl-center" style="margin-bottom: 15px;">
<div class="col"><button class="btn btn-danger" id="resetGlobalDefaultSettingsBtn" type="button">Reset default settings</button></div>
</div>
<div class="row d-xl-flex justify-content-center justify-content-xl-center align-items-xl-center" style="margin-bottom: 15px;">
<div class="col"><button class="btn btn-danger" id="clearBotDataBtn" type="button">Clear cache &amp; data</button></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

<script>
import { Vue } from "vue-class-component";
export default class SettingsPanel extends Vue {
}
</script>

<style>
</style>
6 changes: 4 additions & 2 deletions resources/static/vue-igopher/src/config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { Astor } from './plugins/astilectron';
export const iziToast: any = require("izitoast"); // eslint-disable-line
export const bootstrap: any = require("@/bootstrap/js/bootstrap.min.js"); // eslint-disable-line
export const SUCCESS = "Success";
Expand Down Expand Up @@ -36,14 +37,15 @@ export const ready = (callback: any) => {
else document.addEventListener("DOMContentLoaded", callback);
}

export function getIgopherConfig(astor: any, callback: () => void) {
export function getIgopherConfig(astor: Astor, callback: () => void) {
// Get actual IGopher configuration to fill inputs
astor.trigger("getConfig", {}, (message: any) => {
astor.trigger("getConfig", {}, function(message: any) {
if (message.status === SUCCESS) {
igopherConfig = JSON.parse(message.msg);
console.log("getIgopherConfig: "+igopherConfig);
callback();
} else {
console.log(message.msg)
iziToast.error({
message: message.msg,
});
Expand Down
18 changes: 12 additions & 6 deletions resources/static/vue-igopher/src/plugins/astilectron.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@ export class Astor {
}

onIsReady(callback: any) {
let self = this;
let delay = 100;
const self = this;
const delay = 100;
if (!this.isReady) {
setTimeout( () => {
if (this.isReady) {
Expand All @@ -52,14 +52,14 @@ export class Astor {
}

onAstilectronMessage(message: any) {
if (Array.prototype.slice.call(arguments).length == 1) {
if (Array.prototype.slice.call(arguments).length == 1) { // eslint-disable-line
if (message) {
this.log('GO -> Vue', message);
this.emit(message.name, message);
}
} else {
let identifier = message;
message = Array.prototype.slice.call(arguments)[1];
const identifier = message;
message = Array.prototype.slice.call(arguments)[1]; // eslint-disable-line
if (message) {
this.log('GO -> Vue', message);
this.emit(identifier, message);
Expand Down Expand Up @@ -126,7 +126,13 @@ export class Astor {
export default {
install (Vue: any, options: any) {
const { debug, skipWait, emitter } = options;

const astor: Astor = new Astor(debug, skipWait, emitter)

Vue.config.globalProperties.$astor = astor;
Vue.config.globalProperties.$astor.debug = debug;
Vue.config.globalProperties.$astor.skipWait = skipWait;
Vue.config.globalProperties.$astor.init();

Vue.provide('astor', astor);
}
}

0 comments on commit ac3550b

Please sign in to comment.