mirror of https://github.com/statping/statping
removed some eslint file changes
smit95tpatel
parent
1aee4294c1
commit
9ebb8e717d
|
|
@ -42,3 +42,4 @@ tmp
|
||||||
services.yml
|
services.yml
|
||||||
statping.wiki
|
statping.wiki
|
||||||
assets/
|
assets/
|
||||||
|
.vscode
|
||||||
|
|
@ -1,56 +1,53 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<router-view />
|
<router-view/>
|
||||||
<Footer v-if="$route.path !== '/setup'" />
|
<Footer v-if="$route.path !== '/setup'"/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const Footer = () => import(/* webpackChunkName: "index" */ './components/Index/Footer');
|
const Footer = () => import(/* webpackChunkName: "index" */ "./components/Index/Footer");
|
||||||
|
export default {
|
||||||
export default {
|
name: 'app',
|
||||||
name: 'App',
|
|
||||||
components: {
|
components: {
|
||||||
Footer
|
Footer
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
loaded: false,
|
loaded: false,
|
||||||
version: '',
|
version: "",
|
||||||
};
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
core () {
|
core() {
|
||||||
return this.$store.getters.core;
|
return this.$store.getters.core
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async beforeMount () {
|
async beforeMount() {
|
||||||
await this.$store.dispatch('loadCore');
|
await this.$store.dispatch('loadCore')
|
||||||
|
this.$i18n.locale = this.core.language || "en";
|
||||||
this.$i18n.locale = this.core.language || 'en';
|
|
||||||
// this.$i18n.locale = "ru";
|
// this.$i18n.locale = "ru";
|
||||||
|
|
||||||
if (!this.core.setup) {
|
if (!this.core.setup) {
|
||||||
this.$router.push('/setup');
|
this.$router.push('/setup')
|
||||||
}
|
}
|
||||||
if (this.$route.path !== '/setup') {
|
if (this.$route.path !== '/setup') {
|
||||||
if (this.$store.state.admin) {
|
if (this.$store.state.admin) {
|
||||||
await this.$store.dispatch('loadAdmin');
|
await this.$store.dispatch('loadAdmin')
|
||||||
} else {
|
} else {
|
||||||
await this.$store.dispatch('loadRequired');
|
await this.$store.dispatch('loadRequired')
|
||||||
}
|
}
|
||||||
this.loaded = true;
|
this.loaded = true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async mounted () {
|
async mounted() {
|
||||||
if (this.$route.path !== '/setup') {
|
if (this.$route.path !== '/setup') {
|
||||||
if (this.$store.state.admin) {
|
if (this.$store.state.admin) {
|
||||||
this.logged_in = true;
|
this.logged_in = true
|
||||||
// await this.$store.dispatch('loadAdmin')
|
// await this.$store.dispatch('loadAdmin')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
|
||||||
|
|
@ -5,190 +5,88 @@
|
||||||
You currently don't have any services!
|
You currently don't have any services!
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<table
|
<table v-else class="table">
|
||||||
v-else
|
|
||||||
class="table"
|
|
||||||
>
|
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col">
|
<th scope="col">{{$t('name')}}</th>
|
||||||
{{ $t('name') }}
|
<th scope="col" class="d-none d-md-table-cell">{{$t('status')}}</th>
|
||||||
</th>
|
<th scope="col" class="d-none d-md-table-cell">{{$t('visibility')}}</th>
|
||||||
<th
|
<th scope="col" class="d-none d-md-table-cell">{{ $t('group') }}</th>
|
||||||
scope="col"
|
<th scope="col" class="d-none d-md-table-cell" style="width: 130px">
|
||||||
class="d-none d-md-table-cell"
|
{{$t('failures')}}
|
||||||
>
|
<div class="btn-group float-right" role="group">
|
||||||
{{ $t('status') }}
|
<a @click="list_timeframe='3h'" type="button" class="small" :class="{'text-success': list_timeframe==='3h', 'text-muted': list_timeframe!=='3h'}">3h</a>
|
||||||
</th>
|
<a @click="list_timeframe='12h'" type="button" class="small" :class="{'text-success': list_timeframe==='12h', 'text-muted': list_timeframe!=='12h'}">12h</a>
|
||||||
<th
|
<a @click="list_timeframe='24h'" type="button" class="small" :class="{'text-success': list_timeframe==='24h', 'text-muted': list_timeframe!=='24h'}">24h</a>
|
||||||
scope="col"
|
<a @click="list_timeframe='7d'" type="button" class="small" :class="{'text-success': list_timeframe==='7d', 'text-muted': list_timeframe!=='7d'}">7d</a>
|
||||||
class="d-none d-md-table-cell"
|
|
||||||
>
|
|
||||||
{{ $t('visibility') }}
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
scope="col"
|
|
||||||
class="d-none d-md-table-cell"
|
|
||||||
>
|
|
||||||
{{ $t('group') }}
|
|
||||||
</th>
|
|
||||||
<th
|
|
||||||
scope="col"
|
|
||||||
class="d-none d-md-table-cell"
|
|
||||||
style="width: 130px"
|
|
||||||
>
|
|
||||||
{{ $t('failures') }}
|
|
||||||
<div
|
|
||||||
class="btn-group float-right"
|
|
||||||
role="group"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
type="button"
|
|
||||||
class="small"
|
|
||||||
:class="{'text-success': list_timeframe==='3h', 'text-muted': list_timeframe!=='3h'}"
|
|
||||||
@click="list_timeframe='3h'"
|
|
||||||
>
|
|
||||||
3h
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
type="button"
|
|
||||||
class="small"
|
|
||||||
:class="{'text-success': list_timeframe==='12h', 'text-muted': list_timeframe!=='12h'}"
|
|
||||||
@click="list_timeframe='12h'"
|
|
||||||
>
|
|
||||||
12h
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
type="button"
|
|
||||||
class="small"
|
|
||||||
:class="{'text-success': list_timeframe==='24h', 'text-muted': list_timeframe!=='24h'}"
|
|
||||||
@click="list_timeframe='24h'"
|
|
||||||
>
|
|
||||||
24h
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
type="button"
|
|
||||||
class="small"
|
|
||||||
:class="{'text-success': list_timeframe==='7d', 'text-muted': list_timeframe!=='7d'}"
|
|
||||||
@click="list_timeframe='7d'"
|
|
||||||
>
|
|
||||||
7d
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
<th scope="col" />
|
<th scope="col"></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<Draggable
|
<draggable id="services_list" tag="tbody" v-model="servicesList" handle=".drag_icon">
|
||||||
id="services_list"
|
<tr v-for="(service, index) in servicesList" :key="service.id">
|
||||||
v-model="servicesList"
|
|
||||||
tag="tbody"
|
|
||||||
handle=".drag_icon"
|
|
||||||
>
|
|
||||||
<tr
|
|
||||||
v-for="(service, index) in servicesList"
|
|
||||||
:key="service.id"
|
|
||||||
>
|
|
||||||
<td>
|
<td>
|
||||||
<span
|
<span v-if="$store.state.admin" class="drag_icon d-none d-md-inline">
|
||||||
v-if="$store.state.admin"
|
<font-awesome-icon icon="bars" class="mr-3"/>
|
||||||
class="drag_icon d-none d-md-inline"
|
</span> {{service.name}}
|
||||||
>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
icon="bars"
|
|
||||||
class="mr-3"
|
|
||||||
/>
|
|
||||||
</span> {{ service.name }}
|
|
||||||
</td>
|
</td>
|
||||||
<td class="d-none d-md-table-cell">
|
<td class="d-none d-md-table-cell">
|
||||||
<span
|
<span class="badge text-uppercase" :class="{'badge-success': service.online, 'badge-danger': !service.online}">
|
||||||
class="badge text-uppercase"
|
{{service.online ? $t('online') : $t('offline')}}
|
||||||
:class="{'badge-success': service.online, 'badge-danger': !service.online}"
|
|
||||||
>
|
|
||||||
{{ service.online ? $t('online') : $t('offline') }}
|
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td class="d-none d-md-table-cell">
|
<td class="d-none d-md-table-cell">
|
||||||
<span
|
<span class="badge text-uppercase" :class="{'badge-primary': service.public, 'badge-secondary': !service.public}">
|
||||||
class="badge text-uppercase"
|
{{service.public ? $t('public') : $t('private')}}
|
||||||
:class="{'badge-primary': service.public, 'badge-secondary': !service.public}"
|
|
||||||
>
|
|
||||||
{{ service.public ? $t('public') : $t('private') }}
|
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td class="d-none d-md-table-cell">
|
<td class="d-none d-md-table-cell">
|
||||||
<div v-if="service.group_id !== 0">
|
<div v-if="service.group_id !== 0">
|
||||||
<span class="badge badge-secondary">
|
<span class="badge badge-secondary">{{serviceGroup(service)}}</span>
|
||||||
{{ serviceGroup(service) }}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="d-none d-md-table-cell">
|
<td class="d-none d-md-table-cell">
|
||||||
<ServiceSparkList
|
<ServiceSparkList :service="service" :timeframe="list_timeframe"/>
|
||||||
:service="service"
|
|
||||||
:timeframe="list_timeframe"
|
|
||||||
/>
|
|
||||||
</td>
|
</td>
|
||||||
<td class="text-right">
|
<td class="text-right">
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<button
|
<button :disabled="loading" v-if="$store.state.admin" @click.prevent="goto({path: `/dashboard/edit_service/${service.id}`, params: {service: service} })" class="btn btn-sm btn-outline-secondary">
|
||||||
v-if="$store.state.admin"
|
<font-awesome-icon icon="edit" />
|
||||||
:disabled="loading"
|
|
||||||
class="btn btn-sm btn-outline-secondary"
|
|
||||||
@click.prevent="goto({path: `/dashboard/edit_service/${service.id}`, params: {service: service} })"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon="edit" />
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button :disabled="loading" @click.prevent="goto({path: serviceLink(service), params: {service: service} })" class="btn btn-sm btn-outline-secondary">
|
||||||
:disabled="loading"
|
<font-awesome-icon icon="chart-area" />
|
||||||
class="btn btn-sm btn-outline-secondary"
|
|
||||||
@click.prevent="goto({path: serviceLink(service), params: {service: service} })"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon="chart-area" />
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button :disabled="loading" v-if="$store.state.admin" @click.prevent="deleteService(service)" class="btn btn-sm btn-danger">
|
||||||
v-if="$store.state.admin"
|
<font-awesome-icon v-if="!loading" icon="times" />
|
||||||
:disabled="loading"
|
<font-awesome-icon v-if="loading" icon="circle-notch" spin/>
|
||||||
class="btn btn-sm btn-danger"
|
|
||||||
@click.prevent="deleteService(service)"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
v-if="!loading"
|
|
||||||
icon="times"
|
|
||||||
/>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
v-if="loading"
|
|
||||||
icon="circle-notch"
|
|
||||||
spin
|
|
||||||
/>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</Draggable>
|
</draggable>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Api from '../../API';
|
import Api from "../../API";
|
||||||
import ServiceSparkList from '@/components/Service/ServiceSparkList';
|
import ServiceSparkList from "@/components/Service/ServiceSparkList";
|
||||||
import Modal from '@/components/Elements/Modal';
|
import Modal from "@/components/Elements/Modal";
|
||||||
const Draggable = () => import(/* webpackChunkName: "dashboard" */ 'vuedraggable');
|
const draggable = () => import(/* webpackChunkName: "dashboard" */ 'vuedraggable')
|
||||||
const ToggleSwitch = () => import(/* webpackChunkName: "dashboard" */ '../../forms/ToggleSwitch');
|
const ToggleSwitch = () => import(/* webpackChunkName: "dashboard" */ '../../forms/ToggleSwitch');
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ServicesList',
|
name: 'ServicesList',
|
||||||
components: {
|
components: {
|
||||||
Modal,
|
Modal,
|
||||||
ServiceSparkList,
|
ServiceSparkList,
|
||||||
ToggleSwitch,
|
ToggleSwitch,
|
||||||
Draggable
|
draggable
|
||||||
},
|
},
|
||||||
data () {
|
data() {
|
||||||
return {
|
return {
|
||||||
loading: false,
|
loading: false,
|
||||||
list_timeframe: '12h',
|
list_timeframe: "12h",
|
||||||
chartOpts: {
|
chartOpts: {
|
||||||
chart: {
|
chart: {
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
|
|
@ -202,7 +100,7 @@ export default {
|
||||||
},
|
},
|
||||||
showPoint: false,
|
showPoint: false,
|
||||||
fullWidth:true,
|
fullWidth:true,
|
||||||
chartPadding: { top: 0,right: 0,bottom: 0,left: 0 },
|
chartPadding: {top: 0,right: 0,bottom: 0,left: 0},
|
||||||
stroke: {
|
stroke: {
|
||||||
curve: 'straight'
|
curve: 'straight'
|
||||||
},
|
},
|
||||||
|
|
@ -215,7 +113,7 @@ export default {
|
||||||
plotOptions: {
|
plotOptions: {
|
||||||
bar: {
|
bar: {
|
||||||
colors: {
|
colors: {
|
||||||
ranges: [ {
|
ranges: [{
|
||||||
from: 0,
|
from: 0,
|
||||||
to: 1,
|
to: 1,
|
||||||
color: '#39c10a'
|
color: '#39c10a'
|
||||||
|
|
@ -223,7 +121,7 @@ export default {
|
||||||
from: 2,
|
from: 2,
|
||||||
to: 90,
|
to: 90,
|
||||||
color: '#e01a1a'
|
color: '#e01a1a'
|
||||||
} ]
|
}]
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
@ -238,63 +136,63 @@ export default {
|
||||||
enabled: false,
|
enabled: false,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
servicesList: {
|
servicesList: {
|
||||||
get () {
|
get () {
|
||||||
return this.$store.getters.servicesInOrder;
|
return this.$store.getters.servicesInOrder
|
||||||
},
|
},
|
||||||
set (value) {
|
set (value) {
|
||||||
this.updateOrder(value);
|
this.updateOrder(value)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
goto (to) {
|
goto(to) {
|
||||||
this.$router.push(to);
|
this.$router.push(to)
|
||||||
},
|
},
|
||||||
async updateOrder (value) {
|
async updateOrder(value) {
|
||||||
const data = [];
|
let data = [];
|
||||||
value.forEach((s, k) => {
|
value.forEach((s, k) => {
|
||||||
data.push({ service: s.id, order: k + 1 });
|
data.push({ service: s.id, order: k + 1 })
|
||||||
});
|
});
|
||||||
await Api.services_reorder(data);
|
await Api.services_reorder(data)
|
||||||
await this.update();
|
await this.update()
|
||||||
},
|
},
|
||||||
tester (s) {
|
tester(s) {
|
||||||
console.log(s);
|
console.log(s)
|
||||||
},
|
},
|
||||||
async delete (s) {
|
async delete(s) {
|
||||||
this.loading = true;
|
this.loading = true
|
||||||
await Api.service_delete(s.id);
|
await Api.service_delete(s.id)
|
||||||
await this.update();
|
await this.update()
|
||||||
this.loading = false;
|
this.loading = false
|
||||||
},
|
},
|
||||||
async deleteService (s) {
|
async deleteService(s) {
|
||||||
const modal = {
|
const modal = {
|
||||||
visible: true,
|
visible: true,
|
||||||
title: 'Delete Service',
|
title: "Delete Service",
|
||||||
body: `Are you sure you want to delete service ${s.name}? This will also delete all failures, checkins, and incidents for this service.`,
|
body: `Are you sure you want to delete service ${s.name}? This will also delete all failures, checkins, and incidents for this service.`,
|
||||||
btnColor: 'btn-danger',
|
btnColor: "btn-danger",
|
||||||
btnText: 'Delete Service',
|
btnText: "Delete Service",
|
||||||
func: () => this.delete(s),
|
func: () => this.delete(s),
|
||||||
};
|
}
|
||||||
this.$store.commit('setModal', modal);
|
this.$store.commit("setModal", modal)
|
||||||
},
|
},
|
||||||
serviceGroup (s) {
|
serviceGroup(s) {
|
||||||
const group = this.$store.getters.groupById(s.group_id);
|
let group = this.$store.getters.groupById(s.group_id)
|
||||||
if (group) {
|
if (group) {
|
||||||
return group.name;
|
return group.name
|
||||||
}
|
}
|
||||||
return '';
|
return ""
|
||||||
},
|
},
|
||||||
async update () {
|
async update() {
|
||||||
const services = await Api.services();
|
const services = await Api.services()
|
||||||
this.$store.commit('setServices', services);
|
this.$store.commit('setServices', services)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
|
|
||||||
|
|
@ -1,196 +1,127 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<form
|
<form @submit.prevent="login" autocomplete="on">
|
||||||
autocomplete="on"
|
|
||||||
@submit.prevent="login"
|
|
||||||
>
|
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<label
|
<label for="username" class="col-4 col-form-label">{{$t('username')}}</label>
|
||||||
for="username"
|
|
||||||
class="col-4 col-form-label"
|
|
||||||
>
|
|
||||||
{{ $t('username') }}
|
|
||||||
</label>
|
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<input
|
<input @keyup="checkForm" @change="checkForm" type="text" v-model="username" autocomplete="username" name="username" class="form-control" id="username" placeholder="admin" autocorrect="off" autocapitalize="none">
|
||||||
id="username"
|
|
||||||
v-model="username"
|
|
||||||
type="text"
|
|
||||||
autocomplete="username"
|
|
||||||
name="username"
|
|
||||||
class="form-control"
|
|
||||||
placeholder="admin"
|
|
||||||
autocorrect="off"
|
|
||||||
autocapitalize="none"
|
|
||||||
@keyup="checkForm"
|
|
||||||
@change="checkForm"
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<label
|
<label for="password" class="col-4 col-form-label">{{$t('password')}}</label>
|
||||||
for="password"
|
|
||||||
class="col-4 col-form-label"
|
|
||||||
>
|
|
||||||
{{ $t('password') }}
|
|
||||||
</label>
|
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<input
|
<input @keyup="checkForm" @change="checkForm" type="password" v-model="password" autocomplete="current-password" name="password" class="form-control" id="password" placeholder="************">
|
||||||
id="password"
|
|
||||||
v-model="password"
|
|
||||||
type="password"
|
|
||||||
autocomplete="current-password"
|
|
||||||
name="password"
|
|
||||||
class="form-control"
|
|
||||||
placeholder="************"
|
|
||||||
@keyup="checkForm"
|
|
||||||
@change="checkForm"
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-group row">
|
<div class="form-group row">
|
||||||
<div class="col-sm-12">
|
<div class="col-sm-12">
|
||||||
<div
|
<div v-if="error" class="alert alert-danger" role="alert">
|
||||||
v-if="error"
|
{{$t('wrong_login')}}
|
||||||
class="alert alert-danger"
|
|
||||||
role="alert"
|
|
||||||
>
|
|
||||||
{{ $t('wrong_login') }}
|
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button @click.prevent="login" type="submit" class="btn btn-block btn-primary" :disabled="disabled || loading">
|
||||||
type="submit"
|
<font-awesome-icon v-if="loading" icon="circle-notch" class="mr-2" spin/>{{loading ? $t('loading') : $t('sign_in')}}
|
||||||
class="btn btn-block btn-primary"
|
|
||||||
:disabled="disabled || loading"
|
|
||||||
@click.prevent="login"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon
|
|
||||||
v-if="loading"
|
|
||||||
icon="circle-notch"
|
|
||||||
class="mr-2"
|
|
||||||
spin
|
|
||||||
/>{{ loading ? $t('loading') : $t('sign_in') }}
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<a
|
<a v-if="oauth && oauth.gh_client_id" @click.prevent="GHlogin" href="#" class="mt-4 btn btn-block btn-outline-dark">
|
||||||
v-if="oauth && oauth.gh_client_id"
|
<font-awesome-icon :icon="['fab', 'github']" /> Login with Github
|
||||||
href="#"
|
|
||||||
class="mt-4 btn btn-block btn-outline-dark"
|
|
||||||
@click.prevent="GHlogin"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon :icon="['fab', 'github']" /> Login with Github
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a
|
<a v-if="oauth && oauth.slack_client_id" @click.prevent="Slacklogin" href="#" class="btn btn-block btn-outline-dark">
|
||||||
v-if="oauth && oauth.slack_client_id"
|
<font-awesome-icon :icon="['fab', 'slack']" /> Login with Slack
|
||||||
href="#"
|
|
||||||
class="btn btn-block btn-outline-dark"
|
|
||||||
@click.prevent="Slacklogin"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon :icon="['fab', 'slack']" /> Login with Slack
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a
|
<a v-if="oauth && oauth.google_client_id" @click.prevent="Googlelogin" href="#" class="btn btn-block btn-outline-dark">
|
||||||
v-if="oauth && oauth.google_client_id"
|
<font-awesome-icon :icon="['fab', 'google']" /> Login with Google
|
||||||
href="#"
|
|
||||||
class="btn btn-block btn-outline-dark"
|
|
||||||
@click.prevent="Googlelogin"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon :icon="['fab', 'google']" /> Login with Google
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a
|
<a v-if="oauth && oauth.custom_client_id" @click.prevent="Customlogin" href="#" class="btn btn-block btn-outline-dark">
|
||||||
v-if="oauth && oauth.custom_client_id"
|
<font-awesome-icon :icon="['fas', 'address-card']" /> Login with {{oauth.custom_name}}
|
||||||
href="#"
|
|
||||||
class="btn btn-block btn-outline-dark"
|
|
||||||
@click.prevent="Customlogin"
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon :icon="['fas', 'address-card']" /> Login with {{ oauth.custom_name }}
|
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import Api from '../API';
|
import Api from "../API";
|
||||||
|
export default {
|
||||||
export default {
|
|
||||||
name: 'FormLogin',
|
name: 'FormLogin',
|
||||||
data () {
|
computed: {
|
||||||
|
core() {
|
||||||
|
return this.$store.getters.core
|
||||||
|
},
|
||||||
|
oauth() {
|
||||||
|
return this.$store.getters.oauth
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
return {
|
return {
|
||||||
username: '',
|
username: "",
|
||||||
password: '',
|
password: "",
|
||||||
auth: {},
|
auth: {},
|
||||||
loading: false,
|
loading: false,
|
||||||
error: false,
|
error: false,
|
||||||
disabled: true,
|
disabled: true,
|
||||||
google_scope: 'https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email',
|
google_scope: "https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email",
|
||||||
slack_scope: 'identity.email,identity.basic'
|
slack_scope: "identity.email,identity.basic"
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
core () {
|
|
||||||
return this.$store.getters.core;
|
|
||||||
},
|
|
||||||
oauth () {
|
|
||||||
return this.$store.getters.oauth;
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted() {
|
||||||
this.$cookies.remove('statping_auth');
|
this.$cookies.remove("statping_auth")
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
checkForm () {
|
checkForm() {
|
||||||
if (!this.username || !this.password) {
|
if (!this.username || !this.password) {
|
||||||
this.disabled = true;
|
this.disabled = true
|
||||||
} else {
|
} else {
|
||||||
this.disabled = false;
|
this.disabled = false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
async login () {
|
async login() {
|
||||||
this.loading = true;
|
this.loading = true
|
||||||
this.error = false;
|
this.error = false
|
||||||
const auth = await Api.login(this.username, this.password);
|
const auth = await Api.login(this.username, this.password)
|
||||||
if (auth.error) {
|
if (auth.error) {
|
||||||
this.error = true;
|
this.error = true
|
||||||
} else if (auth.token) {
|
} else if (auth.token) {
|
||||||
this.$cookies.set('statping_auth', auth.token);
|
this.$cookies.set("statping_auth", auth.token)
|
||||||
await this.$store.dispatch('loadAdmin');
|
await this.$store.dispatch('loadAdmin')
|
||||||
this.$store.commit('setAdmin', auth.admin);
|
this.$store.commit('setAdmin', auth.admin)
|
||||||
this.$store.commit('setLoggedIn', true);
|
this.$store.commit('setLoggedIn', true)
|
||||||
this.$router.push('/dashboard');
|
this.$router.push('/dashboard')
|
||||||
}
|
}
|
||||||
this.loading = false;
|
this.loading = false
|
||||||
},
|
},
|
||||||
encode (val) {
|
encode(val) {
|
||||||
return encodeURI(val);
|
return encodeURI(val)
|
||||||
},
|
},
|
||||||
custom_scopes () {
|
custom_scopes() {
|
||||||
const scopes = [];
|
let scopes = []
|
||||||
if (this.oauth.custom_open_id) {
|
if (this.oauth.custom_open_id) {
|
||||||
scopes.push('openid');
|
scopes.push("openid")
|
||||||
}
|
}
|
||||||
scopes.push(this.oauth.custom_scopes.split(','));
|
scopes.push(this.oauth.custom_scopes.split(","))
|
||||||
if (scopes.length !== 0) {
|
if (scopes.length !== 0) {
|
||||||
return '&scopes='+scopes.join(',');
|
return "&scopes="+scopes.join(",")
|
||||||
}
|
}
|
||||||
return '';
|
return ""
|
||||||
},
|
},
|
||||||
GHlogin () {
|
GHlogin() {
|
||||||
window.location = `https://github.com/login/oauth/authorize?client_id=${this.oauth.gh_client_id}&redirect_uri=${this.encode(this.core.domain+'/oauth/github')}&scope=read:user,read:org`;
|
window.location = `https://github.com/login/oauth/authorize?client_id=${this.oauth.gh_client_id}&redirect_uri=${this.encode(this.core.domain+"/oauth/github")}&scope=read:user,read:org`
|
||||||
},
|
},
|
||||||
Slacklogin () {
|
Slacklogin() {
|
||||||
window.location = `https://slack.com/oauth/authorize?client_id=${this.oauth.slack_client_id}&redirect_uri=${this.encode(this.core.domain+'/oauth/slack')}&scope=identity.basic`;
|
window.location = `https://slack.com/oauth/authorize?client_id=${this.oauth.slack_client_id}&redirect_uri=${this.encode(this.core.domain+"/oauth/slack")}&scope=identity.basic`
|
||||||
},
|
},
|
||||||
Googlelogin () {
|
Googlelogin() {
|
||||||
window.location = `https://accounts.google.com/signin/oauth?client_id=${this.oauth.google_client_id}&redirect_uri=${this.encode(this.core.domain+'/oauth/google')}&response_type=code&scope=https://www.googleapis.com/auth/userinfo.profile+https://www.googleapis.com/auth/userinfo.email`;
|
window.location = `https://accounts.google.com/signin/oauth?client_id=${this.oauth.google_client_id}&redirect_uri=${this.encode(this.core.domain+"/oauth/google")}&response_type=code&scope=https://www.googleapis.com/auth/userinfo.profile+https://www.googleapis.com/auth/userinfo.email`
|
||||||
},
|
},
|
||||||
Customlogin () {
|
Customlogin() {
|
||||||
window.location = `${this.oauth.custom_endpoint_auth}?client_id=${this.oauth.custom_client_id}&redirect_uri=${this.encode(this.core.domain+'/oauth/custom')}&response_type=code${this.custom_scopes()}`;
|
window.location = `${this.oauth.custom_endpoint_auth}?client_id=${this.oauth.custom_client_id}&redirect_uri=${this.encode(this.core.domain+"/oauth/custom")}&response_type=code${this.custom_scopes()}`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
import Vue from 'vue';
|
import Vue from 'vue'
|
||||||
import VueRouter from 'vue-router';
|
import VueRouter from 'vue-router'
|
||||||
import VueApexCharts from 'vue-apexcharts';
|
import VueApexCharts from 'vue-apexcharts'
|
||||||
import VueObserveVisibility from 'vue-observe-visibility';
|
import VueObserveVisibility from 'vue-observe-visibility'
|
||||||
import VueClipboard from 'vue-clipboard2';
|
import VueClipboard from 'vue-clipboard2'
|
||||||
import VueCookies from 'vue-cookies';
|
import VueCookies from 'vue-cookies'
|
||||||
import VueI18n from 'vue-i18n';
|
import VueI18n from 'vue-i18n'
|
||||||
import router from './routes';
|
import router from './routes'
|
||||||
import './mixin';
|
import "./mixin"
|
||||||
import './icons';
|
import "./icons"
|
||||||
import store from './store';
|
import store from './store'
|
||||||
import language from './languages';
|
import language from './languages'
|
||||||
|
|
||||||
const App = () => import(/* webpackChunkName: "index" */ '@/App.vue');
|
const App = () => import(/* webpackChunkName: "index" */ '@/App.vue')
|
||||||
|
|
||||||
Vue.component('apexchart', VueApexCharts);
|
Vue.component('apexchart', VueApexCharts)
|
||||||
|
|
||||||
Vue.use(VueClipboard);
|
Vue.use(VueClipboard);
|
||||||
Vue.use(VueRouter);
|
Vue.use(VueRouter);
|
||||||
|
|
@ -22,19 +22,19 @@ Vue.use(VueCookies);
|
||||||
Vue.use(VueI18n);
|
Vue.use(VueI18n);
|
||||||
|
|
||||||
const i18n = new VueI18n({
|
const i18n = new VueI18n({
|
||||||
fallbackLocale: 'en',
|
fallbackLocale: "en",
|
||||||
messages: language
|
messages: language
|
||||||
});
|
});
|
||||||
|
|
||||||
Vue.$cookies.config('3d');
|
Vue.$cookies.config('3d')
|
||||||
|
|
||||||
Vue.config.productionTip = process.env.NODE_ENV !== 'production';
|
Vue.config.productionTip = process.env.NODE_ENV !== 'production'
|
||||||
Vue.config.devtools = process.env.NODE_ENV !== 'production';
|
Vue.config.devtools = process.env.NODE_ENV !== 'production'
|
||||||
Vue.config.performance = process.env.NODE_ENV !== 'production';
|
Vue.config.performance = process.env.NODE_ENV !== 'production'
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
router,
|
router,
|
||||||
store,
|
store,
|
||||||
i18n,
|
i18n,
|
||||||
render: h => h(App),
|
render: h => h(App),
|
||||||
}).$mount('#app');
|
}).$mount('#app')
|
||||||
Loading…
Reference in New Issue