Add linter options

This commit is contained in:
nemunaire 2020-05-07 13:18:04 +02:00
parent 345793ca28
commit 9d1ae96043
16 changed files with 727 additions and 603 deletions

View File

@ -38,12 +38,15 @@
"node": true
},
"extends": [
"plugin:vue/essential",
"plugin:vue/recommended",
"@vue/standard"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {
"vue/html-closing-bracket-newline": "off",
"vue/max-attributes-per-line": "off"
}
},
"postcss": {

View File

@ -32,52 +32,66 @@
-->
<template>
<div id="app">
<b-navbar :class="loggedUser?'p-0':''">
<b-container>
<b-navbar-brand class="navbar-brand" to="/" style="font-family: 'Fortheenas01';font-weight:bold;">
happy<span style="font-family: 'Fortheenas01 Bold';margin-left:.1em;">DNS</span>
</b-navbar-brand>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#adminMenu" aria-controls="adminMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div id="app">
<b-navbar :class="loggedUser?'p-0':''">
<b-container>
<b-navbar-brand class="navbar-brand" to="/" style="font-family: 'Fortheenas01';font-weight:bold;">
happy<span style="font-family: 'Fortheenas01 Bold';margin-left:.1em;">DNS</span>
</b-navbar-brand>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#adminMenu" aria-controls="adminMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" />
</button>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-navbar-toggle target="nav-collapse" />
<b-navbar-nav class="ml-auto">
<b-nav-item-dropdown right v-if="loggedUser">
<template slot="button-content"><b-button size="sm" variant="dark"><b-icon icon="person" aria-hidden="true"></b-icon> {{ loggedUser.email }}</b-button></template>
<b-dropdown-item to="/domains/">My domains</b-dropdown-item>
<b-dropdown-item to="/sources/">My sources</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item to="/tools/client">DNS client</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item @click="logout()">Logout</b-dropdown-item>
</b-nav-item-dropdown>
<b-button v-if="!loggedUser" variant="outline-dark" to="/join"><b-icon icon="person-plus-fill" aria-hidden="true"></b-icon> Sign up</b-button>
<b-button v-if="!loggedUser" variant="primary" class="ml-2" to="/login"><b-icon icon="person-check" aria-hidden="true"></b-icon> Sign in</b-button>
</b-navbar-nav>
</b-container>
</b-navbar>
<b-navbar-nav class="ml-auto">
<b-nav-item-dropdown v-if="loggedUser" right>
<template slot="button-content">
<b-button size="sm" variant="dark">
<b-icon icon="person" aria-hidden="true" /> {{ loggedUser.email }}
</b-button>
</template>
<b-dropdown-item to="/domains/">
My domains
</b-dropdown-item>
<b-dropdown-item to="/sources/">
My sources
</b-dropdown-item>
<b-dropdown-divider />
<b-dropdown-item to="/tools/client">
DNS client
</b-dropdown-item>
<b-dropdown-divider />
<b-dropdown-item @click="logout()">
Logout
</b-dropdown-item>
</b-nav-item-dropdown>
<b-button v-if="!loggedUser" variant="outline-dark" to="/join">
<b-icon icon="person-plus-fill" aria-hidden="true" /> Sign up
</b-button>
<b-button v-if="!loggedUser" variant="primary" class="ml-2" to="/login">
<b-icon icon="person-check" aria-hidden="true" /> Sign in
</b-button>
</b-navbar-nav>
</b-container>
</b-navbar>
<router-view/>
<router-view />
<b-toaster name="b-toaster-content-right" style="position: fixed; top: 70px; right: 0; z-index: 10; min-width: 30vw;"></b-toaster>
<b-toaster name="b-toaster-content-right" style="position: fixed; top: 70px; right: 0; z-index: 10; min-width: 30vw;" />
<footer class="pt-2 pb-2 bg-dark text-light">
<b-container>
<b-row>
<b-col md="12" lg="6">
&copy; <span style="font-family: 'Fortheenas01';font-weight:bold;">happy<span style="font-family: 'Fortheenas01 Bold';margin-left:.1em;">DNS</span></span> 2019-2020 All rights reserved
</b-col>
<b-col md="6" lg="3">
</b-col>
<b-col md="6" lg="3">
</b-col>
</b-row>
</b-container>
</footer>
</div>
<footer class="pt-2 pb-2 bg-dark text-light">
<b-container>
<b-row>
<b-col md="12" lg="6">
&copy; <span style="font-family: 'Fortheenas01';font-weight:bold;">happy<span style="font-family: 'Fortheenas01 Bold';margin-left:.1em;">DNS</span></span> 2019-2020 All rights reserved
</b-col>
<b-col md="6" lg="3" />
<b-col md="6" lg="3" />
</b-row>
</b-container>
</footer>
</div>
</template>
<script>

View File

@ -32,7 +32,7 @@
-->
<template>
<component :is="homeComponent"></component>
<component :is="homeComponent" />
</template>
<script>

View File

@ -32,46 +32,52 @@
-->
<template>
<b-container class="mt-4 mb-5">
<h1 class="text-center mb-4">Welcome to <span style="font-family: 'Fortheenas01';font-weight:bold;">happy<span style="font-family: 'Fortheenas01 Bold';margin-left:.1em;">DNS</span></span>!</h1>
<b-row>
<div class="offset-md-2 col-md-8">
<b-list-group>
<b-list-group-item v-if="isLoading" class="d-flex justify-content-center align-items-center">
<b-spinner variant="primary" label="Spinning" class="mr-3"></b-spinner> Retrieving your domains...
</b-list-group-item>
<b-list-group-item :to="'/domains/' + domain.domain" v-for="(domain, index) in domains" v-bind:key="index" class="d-flex justify-content-between align-items-center">
<div class="text-monospace">
<div class="d-inline-block text-center" style="width: 50px;">
<img :src="'/api/source_specs/' + sources[domain.id_source]._srctype + '.png'" :alt="sources[domain.id_source]._srctype" :title="sources[domain.id_source]._srctype" style="max-width: 100%; max-height: 2.5em; margin: -.6em .4em -.6em -.6em" v-if="sources[domain.id_source]">
</div>
{{ domain.domain }}
</div>
<b-badge variant="success">OK</b-badge>
</b-list-group-item>
</b-list-group>
<b-list-group class="mt-2">
<form @submit.stop.prevent="submitNewDomain" v-if="!isLoading">
<b-list-group-item class="d-flex justify-content-between align-items-center">
<b-input-group>
<template v-slot:prepend>
<b-input-group-prepend @click="$refs.newdomain.focus()">
<b-icon icon="plus" style="width: 2.3em; height: 2.3rem; margin-left: -.5em"></b-icon>
</b-input-group-prepend>
</template>
<b-form-input placeholder="my.new.domain" ref="newdomain" v-model="newDomain" @update="validateNewDomain" :state="newDomainState" class="text-monospace" style="border:none;box-shadow:none;z-index:0"></b-form-input>
<template v-slot:append>
<b-input-group-append v-show="newDomain.length">
<b-button type="submit" variant="outline-primary">Add new domain</b-button>
</b-input-group-append>
</template>
</b-input-group>
<b-container class="mt-4 mb-5">
<h1 class="text-center mb-4">
Welcome to <span style="font-family: 'Fortheenas01';font-weight:bold;">happy<span style="font-family: 'Fortheenas01 Bold';margin-left:.1em;">DNS</span></span>!
</h1>
<b-row>
<div class="offset-md-2 col-md-8">
<b-list-group>
<b-list-group-item v-if="isLoading" class="d-flex justify-content-center align-items-center">
<b-spinner variant="primary" label="Spinning" class="mr-3" /> Retrieving your domains...
</b-list-group-item>
</form>
</b-list-group>
</div>
</b-row>
</b-container>
<b-list-group-item v-for="(domain, index) in domains" :key="index" :to="'/domains/' + domain.domain" class="d-flex justify-content-between align-items-center">
<div class="text-monospace">
<div class="d-inline-block text-center" style="width: 50px;">
<img v-if="sources[domain.id_source]" :src="'/api/source_specs/' + sources[domain.id_source]._srctype + '.png'" :alt="sources[domain.id_source]._srctype" :title="sources[domain.id_source]._srctype" style="max-width: 100%; max-height: 2.5em; margin: -.6em .4em -.6em -.6em">
</div>
{{ domain.domain }}
</div>
<b-badge variant="success">
OK
</b-badge>
</b-list-group-item>
</b-list-group>
<b-list-group class="mt-2">
<form v-if="!isLoading" @submit.stop.prevent="submitNewDomain">
<b-list-group-item class="d-flex justify-content-between align-items-center">
<b-input-group>
<template v-slot:prepend>
<b-input-group-prepend @click="$refs.newdomain.focus()">
<b-icon icon="plus" style="width: 2.3em; height: 2.3rem; margin-left: -.5em" />
</b-input-group-prepend>
</template>
<b-form-input ref="newdomain" v-model="newDomain" placeholder="my.new.domain" :state="newDomainState" class="text-monospace" style="border:none;box-shadow:none;z-index:0" @update="validateNewDomain" />
<template v-slot:append>
<b-input-group-append v-show="newDomain.length">
<b-button type="submit" variant="outline-primary">
Add new domain
</b-button>
</b-input-group-append>
</template>
</b-input-group>
</b-list-group-item>
</form>
</b-list-group>
</div>
</b-row>
</b-container>
</template>
<script>
@ -88,6 +94,12 @@ export default {
}
},
computed: {
isLoading () {
return this.domains == null
}
},
mounted () {
setTimeout(() =>
axios
@ -105,12 +117,6 @@ export default {
, 100)
},
computed: {
isLoading () {
return this.domains == null
}
},
methods: {
show (domain) {
this.$router.push('/domains/' + domain.domain)

View File

@ -32,109 +32,115 @@
-->
<template>
<b-container fluid class="mt-4">
<b-container fluid class="mt-4">
<h1 class="text-center mb-4">
<button type="button" class="btn font-weight-bolder" @click="$router.go(-1)">
<b-icon icon="chevron-left" />
</button>
Select the source where lives your domain <span class="text-monospace">{{ $route.params.domain }}</span>
</h1>
<hr style="margin-bottom:0">
<h1 class="text-center mb-4">
<button type="button" @click="$router.go(-1)" class="btn font-weight-bolder"><b-icon icon="chevron-left"></b-icon></button>
Select the source where lives your domain <span class="text-monospace">{{ $route.params.domain }}</span>
</h1>
<hr style="margin-bottom:0">
<b-row v-if="step === 0" class="mb-5">
<b-col>
<h3 v-if="mySources.length > 0">Your existing sources</h3>
<div class="d-flex flex-row justify-content-around flex-wrap align-self-center" v-if="!isLoading && mySources.length > 0">
<div type="button" @click="selectExistingSource(src)" class="p-3 source" v-for="(src, index) in mySources" v-bind:key="index">
<img :src="'/api/source_specs/' + src._srctype + '.png'" :alt="sources[src['_srctype']].name">
{{ src._comment }}
</div>
</div>
</b-col>
<b-col lg="6" v-if="sources">
<h3>Use a new source</h3>
<div class="d-flex flex-row justify-content-around flex-wrap align-self-center" v-if="!isLoading">
<div type="button" @click="selectNewSource(index)" class="p-3 source" v-for="(src, index) in sources" v-bind:key="index">
<img :src="'/api/source_specs/' + index + '.png'" :alt="src.name">
{{ src.name }}<br>
<p class="text-muted" style="position: absolute;font-size: 80%;margin-top: 10.5em;width: 20%">
{{ src.description }}
</p>
</div>
</div>
</b-col>
</b-row>
<div v-if="step & 1">
<b-row>
<b-col lg="4" md="5" class="bg-light">
<div class="text-center mb-3 mt-2">
<img :src="'/api/source_specs/' + source_specs_selected + '.png'" :alt="sources[source_specs_selected].name" style="max-width: 100%; max-height: 10em">
</div>
<h3>
{{ sources[source_specs_selected].name }}
<b-row v-if="step === 0" class="mb-5">
<b-col>
<h3 v-if="mySources.length > 0">
Your existing sources
</h3>
<p class="text-muted text-justify">{{ sources[source_specs_selected].description }}</p>
</b-col>
<b-col lg="8" md="7">
<form @submit.stop.prevent="submitNewSource" v-if="!isLoading" class="mt-2 mb-5">
<b-form-group
id="input-spec-name"
label="Name your source:"
label-for="source-name"
description="Give an explicit name in order to easily find this service."
>
<b-form-input
id="source-name"
v-model="new_source_name"
required
:placeholder="sources[source_specs_selected].name + ' 1'"
></b-form-input>
</b-form-group>
<b-form-group
v-for="(spec, index) in source_specs.fields"
v-bind:key="index"
:id="'input-spec-' + index"
:label="spec.label"
:label-for="'spec-' + index"
:description="spec.description"
>
<b-form-input
:id="'spec-' + index"
v-model="spec.value"
:required="spec.required !== undefined && spec.required"
:placeholder="spec.placeholder"
v-if="spec.choices === undefined"
></b-form-input>
<b-form-select
:id="'spec-' + index"
v-model="spec.value"
:required="spec.required !== undefined && spec.required"
:options="spec.choices"
v-if="spec.choices !== undefined"
></b-form-select>
</b-form-group>
<div class="ml-3 mr-3">
<b-button type="button" variant="secondary" @click="step=step&(~1)">&lt; Use another source</b-button>
<b-button class="float-right" type="submit" variant="primary">Add this source &gt;</b-button>
<div v-if="!isLoading && mySources.length > 0" class="d-flex flex-row justify-content-around flex-wrap align-self-center">
<div v-for="(src, index) in mySources" :key="index" type="button" class="p-3 source" @click="selectExistingSource(src)">
<img :src="'/api/source_specs/' + src._srctype + '.png'" :alt="sources[src['_srctype']].name">
{{ src._comment }}
</div>
</form>
</div>
</b-col>
<b-col v-if="sources" lg="6">
<h3>Use a new source</h3>
<div v-if="!isLoading" class="d-flex flex-row justify-content-around flex-wrap align-self-center">
<div v-for="(src, index) in sources" :key="index" type="button" class="p-3 source" @click="selectNewSource(index)">
<img :src="'/api/source_specs/' + index + '.png'" :alt="src.name">
{{ src.name }}<br>
<p class="text-muted" style="position: absolute;font-size: 80%;margin-top: 10.5em;width: 20%">
{{ src.description }}
</p>
</div>
</div>
</b-col>
</b-row>
</div>
<div v-if="step & 2 && isLoading" class="d-flex justify-content-center align-items-center">
<b-spinner variant="primary" label="Spinning" class="mr-3"></b-spinner> Validating source...
</div>
<div v-if="step & 1">
<b-row>
<b-col lg="4" md="5" class="bg-light">
<div class="text-center mb-3 mt-2">
<img :src="'/api/source_specs/' + source_specs_selected + '.png'" :alt="sources[source_specs_selected].name" style="max-width: 100%; max-height: 10em">
</div>
<h3>
{{ sources[source_specs_selected].name }}
</h3>
</b-container>
<p class="text-muted text-justify">
{{ sources[source_specs_selected].description }}
</p>
</b-col>
<b-col lg="8" md="7">
<form v-if="!isLoading" class="mt-2 mb-5" @submit.stop.prevent="submitNewSource">
<b-form-group
id="input-spec-name"
label="Name your source:"
label-for="source-name"
description="Give an explicit name in order to easily find this service."
>
<b-form-input
id="source-name"
v-model="new_source_name"
required
:placeholder="sources[source_specs_selected].name + ' 1'"
/>
</b-form-group>
<b-form-group
v-for="(spec, index) in source_specs.fields"
:id="'input-spec-' + index"
:key="index"
:label="spec.label"
:label-for="'spec-' + index"
:description="spec.description"
>
<b-form-input
v-if="spec.choices === undefined"
:id="'spec-' + index"
v-model="spec.value"
:required="spec.required !== undefined && spec.required"
:placeholder="spec.placeholder"
/>
<b-form-select
v-if="spec.choices !== undefined"
:id="'spec-' + index"
v-model="spec.value"
:required="spec.required !== undefined && spec.required"
:options="spec.choices"
/>
</b-form-group>
<div class="ml-3 mr-3">
<b-button type="button" variant="secondary" @click="step=step&(~1)">
&lt; Use another source
</b-button>
<b-button class="float-right" type="submit" variant="primary">
Add this source &gt;
</b-button>
</div>
</form>
</b-col>
</b-row>
</div>
<div v-if="step & 2 && isLoading" class="d-flex justify-content-center align-items-center">
<b-spinner variant="primary" label="Spinning" class="mr-3" /> Validating source...
</div>
</b-container>
</template>
<script>
@ -153,15 +159,6 @@ export default {
}
},
mounted () {
axios
.get('/api/sources')
.then(response => (this.mySources = response.data))
axios
.get('/api/source_specs')
.then(response => (this.sources = response.data))
},
computed: {
isLoading () {
if (this.step === 0) {
@ -176,6 +173,15 @@ export default {
}
},
mounted () {
axios
.get('/api/sources')
.then(response => (this.mySources = response.data))
axios
.get('/api/source_specs')
.then(response => (this.sources = response.data))
},
methods: {
selectNewSource (sourceSpec) {

View File

@ -32,32 +32,32 @@
-->
<template>
<div>
<div v-if="isLoading" class="mt-5 d-flex justify-content-center align-items-center">
<b-spinner variant="primary" label="Spinning" class="mr-3"></b-spinner> Retrieving source information...
<div>
<div v-if="isLoading" class="mt-5 d-flex justify-content-center align-items-center">
<b-spinner variant="primary" label="Spinning" class="mr-3" /> Retrieving source information...
</div>
<div v-if="!isLoading">
<h2 class="mt-3 mb-3">
<span class="text-monospace">{{ domain.domain }}</span>
<small class="text-muted">
Source parameters
</small>
</h2>
<p>
<span class="text-primary">Name</span><br>
<strong>{{ source._comment }}</strong>
</p>
<p>
<span class="text-primary">Source type</span><br>
<strong :title="source._srctype">{{ specs[source._srctype].name }}</strong><br>
<span class="text-muted">{{ specs[source._srctype].description }}</span>
</p>
<p v-for="(spec,index) in source_specs.fields" v-show="!spec.secret" :key="index">
<span class="text-primary">{{ spec.label }}</span><br>
<strong>{{ source.Source[spec.id] }}</strong>
</p>
</div>
</div>
<div v-if="!isLoading">
<h2 class="mt-3 mb-3">
<span class="text-monospace">{{ domain.domain }}</span>
<small class="text-muted">
Source parameters
</small>
</h2>
<p>
<span class="text-primary">Name</span><br>
<strong>{{ source._comment }}</strong>
</p>
<p>
<span class="text-primary">Source type</span><br>
<strong :title="source._srctype">{{ specs[source._srctype].name }}</strong><br>
<span class="text-muted">{{ specs[source._srctype].description }}</span>
</p>
<p v-for="(spec,index) in source_specs.fields" v-bind:key="index" v-show="!spec.secret">
<span class="text-primary">{{ spec.label }}</span><br>
<strong>{{ source.Source[spec.id] }}</strong>
</p>
</div>
</div>
</template>
<script>
@ -65,6 +65,13 @@ import axios from 'axios'
export default {
props: {
domain: {
type: Object,
required: true
}
},
data: function () {
return {
source: null,
@ -73,6 +80,18 @@ export default {
}
},
computed: {
isLoading () {
return this.source == null || this.source_specs == null || this.specs == null
}
},
watch: {
domain: function (domain) {
this.updDomain()
}
},
mounted () {
axios
.get('/api/source_specs')
@ -84,12 +103,6 @@ export default {
}
},
computed: {
isLoading () {
return this.source == null || this.source_specs == null || this.specs == null
}
},
methods: {
updDomain () {
axios
@ -105,14 +118,6 @@ export default {
))
})
}
},
props: ['domain'],
watch: {
domain: function (domain) {
this.updDomain()
}
}
}
</script>

View File

@ -32,28 +32,42 @@
-->
<template>
<b-container fluid>
<b-alert variant="danger" :show="error.length != 0"><strong>Error:</strong> {{ error }}</b-alert>
<div class="text-center" v-if="!domain && error.length == 0">
<b-spinner label="Spinning"></b-spinner>
<p>Loading the domain&nbsp;&hellip;</p>
</div>
<b-row>
<b-col sm="4" md="3" class="bg-light pb-5">
<router-link to="/domains/" class="btn font-weight-bolder"><b-icon icon="chevron-up"></b-icon></router-link>
<b-nav pills vertical variant="secondary">
<b-nav-item :to="'/domains/' + domain.domain" :active="$route.name == 'domain-source'">Domain source</b-nav-item>
<b-nav-item :to="'/domains/' + domain.domain + '/services'" :active="$route.name == 'zone-services'">View services</b-nav-item>
<b-nav-item :to="'/zones/' + domain.domain + '/records'" :active="$route.name == 'zone-records'">View records</b-nav-item>
<b-nav-item :to="'/domain/' + domain.domain + '/monitoring'" :active="$route.name == 'domain-monitoring'">Monitoring</b-nav-item>
<hr>
<b-nav-form>
<b-button type="button" @click="detachDomain()" variant="outline-danger"><b-icon icon="trash-fill"></b-icon> Stop managing this domain</b-button>
</b-nav-form>
</b-nav>
</b-col>
<b-col sm="8" md="9" class="mb-5">
<router-view :domain="domain"></router-view>
<b-container fluid>
<b-alert variant="danger" :show="error.length != 0">
<strong>Error:</strong> {{ error }}
</b-alert>
<div v-if="!domain && error.length == 0" class="text-center">
<b-spinner label="Spinning" />
<p>Loading the domain&nbsp;&hellip;</p>
</div>
<b-row>
<b-col sm="4" md="3" class="bg-light pb-5">
<router-link to="/domains/" class="btn font-weight-bolder">
<b-icon icon="chevron-up" />
</router-link>
<b-nav pills vertical variant="secondary">
<b-nav-item :to="'/domains/' + domain.domain" :active="$route.name == 'domain-source'">
Domain source
</b-nav-item>
<b-nav-item :to="'/domains/' + domain.domain + '/services'" :active="$route.name == 'zone-services'">
View services
</b-nav-item>
<b-nav-item :to="'/zones/' + domain.domain + '/records'" :active="$route.name == 'zone-records'">
View records
</b-nav-item>
<b-nav-item :to="'/domain/' + domain.domain + '/monitoring'" :active="$route.name == 'domain-monitoring'">
Monitoring
</b-nav-item>
<hr>
<b-nav-form>
<b-button type="button" variant="outline-danger" @click="detachDomain()">
<b-icon icon="trash-fill" /> Stop managing this domain
</b-button>
</b-nav-form>
</b-nav>
</b-col>
<b-col sm="8" md="9" class="mb-5">
<router-view :domain="domain" />
</b-col>
</b-row>
</b-container>

View File

@ -37,53 +37,61 @@
<b-col sm="4" class="d-none d-sm-flex align-items-center">
<div>
Don't already have an account on our beautiful platform?
<router-link to="/join" variant="outline-primary" class="font-weight-bold">Join now!</router-link>
<router-link to="/join" variant="outline-primary" class="font-weight-bold">
Join now!
</router-link>
</div>
</b-col>
<b-col sm="8">
<b-card header-tag="div">
<template v-slot:header>
<h6 class="mb-0 font-weight-bold">Happy to see you again!</h6>
<h6 class="mb-0 font-weight-bold">
Happy to see you again!
</h6>
</template>
<form @submit.stop.prevent="testlogin" ref="form">
<b-form-group
:state="loginForm.emailState"
label="Email address"
label-for="email-input"
invalid-feedback="Email address is required"
>
<b-form-input
id="email-input"
v-model="loginForm.email"
<form ref="form" @submit.stop.prevent="testlogin">
<b-form-group
:state="loginForm.emailState"
required
autofocus
type="email"
placeholder="pMockapetris@usc.edu"
ref="loginemail"
></b-form-input>
</b-form-group>
<b-form-group
:state="loginForm.passwordState"
label="Password"
label-for="password-input"
invalid-feedback="Password is required"
label="Email address"
label-for="email-input"
invalid-feedback="Email address is required"
>
<b-form-input
type="password"
id="password-input"
v-model="loginForm.password"
<b-form-input
id="email-input"
ref="loginemail"
v-model="loginForm.email"
:state="loginForm.emailState"
required
autofocus
type="email"
placeholder="pMockapetris@usc.edu"
/>
</b-form-group>
<b-form-group
:state="loginForm.passwordState"
required
placeholder="xXxXxXxXxX"
ref="loginpassword"
></b-form-input>
</b-form-group>
<div class="d-flex justify-content-around">
<b-button type="submit" variant="primary">Go!</b-button>
<b-button type="button" variant="outline-dark">Forgotten password?</b-button>
</div>
</form>
label="Password"
label-for="password-input"
invalid-feedback="Password is required"
>
<b-form-input
id="password-input"
ref="loginpassword"
v-model="loginForm.password"
type="password"
:state="loginForm.passwordState"
required
placeholder="xXxXxXxXxX"
/>
</b-form-group>
<div class="d-flex justify-content-around">
<b-button type="submit" variant="primary">
Go!
</b-button>
<b-button type="button" variant="outline-dark">
Forgotten password?
</b-button>
</div>
</form>
</b-card>
</b-col>
</b-row>

View File

@ -43,63 +43,69 @@
<b-col sm="8">
<b-card header-tag="div">
<template v-slot:header>
<h6 class="mb-0 font-weight-bold">Join our nice platform in less than 2 minutes!</h6>
<h6 class="mb-0 font-weight-bold">
Join our nice platform in less than 2 minutes!
</h6>
</template>
<form class="container mt-2" @submit.stop.prevent="goSignUp" ref="form">
<b-form-group
:state="signupForm.emailState"
label="Email address"
label-for="email-input"
invalid-feedback="Email address is required"
>
<b-form-input
id="email-input"
v-model="signupForm.email"
:state="signupForm.emailState"
required
autofocus
type="email"
placeholder="jPostel@isi.edu"
ref="signupemail"
></b-form-input>
</b-form-group>
<b-form-group
:state="signupForm.passwordState"
label="Password"
label-for="password-input"
invalid-feedback="Password is required"
>
<b-form-input
type="password"
id="password-input"
v-model="signupForm.password"
:state="signupForm.passwordState"
required
placeholder="xXxXxXxXxX"
ref="signuppassword"
></b-form-input>
</b-form-group>
<b-form-group
:state="signupForm.passwordConfirmState"
label="Password confirmation"
label-for="passwordconfirm-input"
invalid-feedback="Password confirmation is required"
>
<b-form-input
type="password"
id="passwordconfirm-input"
v-model="signupForm.passwordConfirm"
:state="signupForm.passwordConfirmState"
required
placeholder="xXxXxXxXxX"
ref="signuppasswordconfirm"
></b-form-input>
</b-form-group>
<div class="d-flex justify-content-around">
<b-button type="submit" variant="primary">Sign up!</b-button>
<b-button to="/login" variant="outline-dark">Already member?</b-button>
</div>
</form>
<form ref="form" class="container mt-2" @submit.stop.prevent="goSignUp">
<b-form-group
:state="signupForm.emailState"
label="Email address"
label-for="email-input"
invalid-feedback="Email address is required"
>
<b-form-input
id="email-input"
ref="signupemail"
v-model="signupForm.email"
:state="signupForm.emailState"
required
autofocus
type="email"
placeholder="jPostel@isi.edu"
/>
</b-form-group>
<b-form-group
:state="signupForm.passwordState"
label="Password"
label-for="password-input"
invalid-feedback="Password is required"
>
<b-form-input
id="password-input"
ref="signuppassword"
v-model="signupForm.password"
type="password"
:state="signupForm.passwordState"
required
placeholder="xXxXxXxXxX"
/>
</b-form-group>
<b-form-group
:state="signupForm.passwordConfirmState"
label="Password confirmation"
label-for="passwordconfirm-input"
invalid-feedback="Password confirmation is required"
>
<b-form-input
id="passwordconfirm-input"
ref="signuppasswordconfirm"
v-model="signupForm.passwordConfirm"
type="password"
:state="signupForm.passwordConfirmState"
required
placeholder="xXxXxXxXxX"
/>
</b-form-group>
<div class="d-flex justify-content-around">
<b-button type="submit" variant="primary">
Sign up!
</b-button>
<b-button to="/login" variant="outline-dark">
Already member?
</b-button>
</div>
</form>
</b-card>
</b-col>
</b-row>

View File

@ -32,31 +32,34 @@
-->
<template>
<b-container class="mt-4 mb-5">
<h1 class="text-center mb-4">
Domains living on <span v-if="mySource">{{ mySource._comment }}</span>
</h1>
<b-row>
<b-col offset-md="2" md="8">
<div class="text-right">
</div>
<b-list-group>
<b-list-group-item v-if="isLoading" class="text-center">
<b-spinner variant="secondary" label="Spinning"></b-spinner> Asking provider for the existing domains...
</b-list-group-item>
<b-list-group-item v-for="(domain, index) in domains" v-bind:key="index" class="d-flex justify-content-between align-items-center">
<div>
{{ domain }}
</div>
<div>
<b-badge class="ml-1" variant="success" v-if="myDomains.indexOf(domain) > -1"><b-icon icon="check" /> Already managed</b-badge>
<b-button type="button" class="ml-1" variant="primary" size="sm" @click="importDomain(domain)" v-else>Add now</b-button>
</div>
</b-list-group-item>
</b-list-group>
</b-col>
</b-row>
</b-container>
<b-container class="mt-4 mb-5">
<h1 class="text-center mb-4">
Domains living on <span v-if="mySource">{{ mySource._comment }}</span>
</h1>
<b-row>
<b-col offset-md="2" md="8">
<div class="text-right" />
<b-list-group>
<b-list-group-item v-if="isLoading" class="text-center">
<b-spinner variant="secondary" label="Spinning" /> Asking provider for the existing domains...
</b-list-group-item>
<b-list-group-item v-for="(domain, index) in domains" :key="index" class="d-flex justify-content-between align-items-center">
<div>
{{ domain }}
</div>
<div>
<b-badge v-if="myDomains.indexOf(domain) > -1" class="ml-1" variant="success">
<b-icon icon="check" /> Already managed
</b-badge>
<b-button v-else type="button" class="ml-1" variant="primary" size="sm" @click="importDomain(domain)">
Add now
</b-button>
</div>
</b-list-group-item>
</b-list-group>
</b-col>
</b-row>
</b-container>
</template>
<script>
@ -64,6 +67,17 @@ import axios from 'axios'
export default {
props: {
parentLoading: {
type: Function,
required: true
},
mySource: {
type: Object,
required: true
}
},
data: function () {
return {
myDomains: null,
@ -71,6 +85,12 @@ export default {
}
},
computed: {
isLoading () {
return this.parentLoading || this.domains == null || this.myDomains == null
}
},
mounted () {
axios
.get('/api/sources/' + this.$route.params.source + '/domains')
@ -86,12 +106,6 @@ export default {
})
},
computed: {
isLoading () {
return this.parentLoading || this.domains == null || this.myDomains == null
}
},
methods: {
importDomain (domain) {
axios
@ -124,8 +138,6 @@ export default {
}
)
}
},
props: ['parentLoading', 'mySource']
}
}
</script>

View File

@ -32,40 +32,43 @@
-->
<template>
<b-container class="mt-4 mb-5">
<b-button type="button" @click="newSource" variant="primary" class="float-right">
<b-icon icon="plus"></b-icon>
Add new source
</b-button>
<h1 class="text-center mb-4">
Your sources
</h1>
<b-row>
<b-col offset-md="2" md="8">
<div class="text-right">
</div>
<b-list-group>
<b-list-group-item v-if="isLoading" class="d-flex justify-content-center align-items-center">
<b-spinner variant="primary" label="Spinning" class="mr-3"></b-spinner> Retrieving your sources...
</b-list-group-item>
<b-list-group-item v-if="!isLoading && sources.length == 0" class="text-center">
You have no source defined currently. Try <a to="new">adding one</a>!
</b-list-group-item>
<b-list-group-item :to="'/sources/' + source._id" v-for="(source, index) in sources" v-bind:key="index" class="d-flex justify-content-between align-items-center">
<div>
<img :src="'/api/source_specs/' + source._srctype + '.png'" :alt="sources_specs[source._srctype].name" :title="sources_specs[source._srctype].name" style="max-width: 100%; max-height: 2.5em; margin: -.6em .4em -.6em -.6em">
<span v-if="source._comment">{{ source._comment }}</span>
<em v-else>No name</em>
</div>
<div>
<b-badge class="ml-1" :variant="domain_in_sources[index] > 0 ? 'success' : 'danger'">{{ domain_in_sources[index] }} domain(s) associated</b-badge>
<b-badge class="ml-1" variant="secondary" :title="source._srctype">{{ sources_specs[source._srctype].name }}</b-badge>
</div>
</b-list-group-item>
</b-list-group>
</b-col>
</b-row>
</b-container>
<b-container class="mt-4 mb-5">
<b-button type="button" variant="primary" class="float-right" @click="newSource">
<b-icon icon="plus" />
Add new source
</b-button>
<h1 class="text-center mb-4">
Your sources
</h1>
<b-row>
<b-col offset-md="2" md="8">
<div class="text-right" />
<b-list-group>
<b-list-group-item v-if="isLoading" class="d-flex justify-content-center align-items-center">
<b-spinner variant="primary" label="Spinning" class="mr-3" /> Retrieving your sources...
</b-list-group-item>
<b-list-group-item v-if="!isLoading && sources.length == 0" class="text-center">
You have no source defined currently. Try <a to="new">adding one</a>!
</b-list-group-item>
<b-list-group-item v-for="(source, index) in sources" :key="index" :to="'/sources/' + source._id" class="d-flex justify-content-between align-items-center">
<div>
<img :src="'/api/source_specs/' + source._srctype + '.png'" :alt="sources_specs[source._srctype].name" :title="sources_specs[source._srctype].name" style="max-width: 100%; max-height: 2.5em; margin: -.6em .4em -.6em -.6em">
<span v-if="source._comment">{{ source._comment }}</span>
<em v-else>No name</em>
</div>
<div>
<b-badge class="ml-1" :variant="domain_in_sources[index] > 0 ? 'success' : 'danger'">
{{ domain_in_sources[index] }} domain(s) associated
</b-badge>
<b-badge class="ml-1" variant="secondary" :title="source._srctype">
{{ sources_specs[source._srctype].name }}
</b-badge>
</div>
</b-list-group-item>
</b-list-group>
</b-col>
</b-row>
</b-container>
</template>
<script>
@ -81,20 +84,6 @@ export default {
}
},
mounted () {
setTimeout(() => {
axios
.get('/api/domains')
.then(response => { this.domains = response.data; return true })
axios
.get('/api/sources')
.then(response => { this.sources = response.data; return true })
}, 100)
axios
.get('/api/source_specs')
.then(response => { this.sources_specs = response.data; return true })
},
computed: {
domain_in_sources () {
var ret = {}
@ -118,6 +107,20 @@ export default {
}
},
mounted () {
setTimeout(() => {
axios
.get('/api/domains')
.then(response => { this.domains = response.data; return true })
axios
.get('/api/sources')
.then(response => { this.sources = response.data; return true })
}, 100)
axios
.get('/api/source_specs')
.then(response => { this.sources_specs = response.data; return true })
},
methods: {
show (source) {
this.$router.push('/sources/' + source.source)

View File

@ -32,61 +32,61 @@
-->
<template>
<form @submit.stop.prevent="submitSource" v-if="!isLoading" class="mt-2 mb-5">
<div class="float-right">
<b-button type="button" variant="outline-primary" @click="edit=true" v-if="!edit">
<b-icon icon="pencil" />
Edit
</b-button>
<b-button type="button" variant="primary" @click="submitSource()" v-else>
<b-icon icon="check" />
Update this source
</b-button>
</div>
<form v-if="!isLoading" class="mt-2 mb-5" @submit.stop.prevent="submitSource">
<div class="float-right">
<b-button v-if="!edit" type="button" variant="outline-primary" @click="edit=true">
<b-icon icon="pencil" />
Edit
</b-button>
<b-button v-else type="button" variant="primary" @click="submitSource()">
<b-icon icon="check" />
Update this source
</b-button>
</div>
<b-form-group
id="input-spec-name"
label="Source's name"
label-for="source-name"
:description="edit?'Give an explicit name in order to easily find this service.':''"
<b-form-group
id="input-spec-name"
label="Source's name"
label-for="source-name"
:description="edit?'Give an explicit name in order to easily find this service.':''"
>
<b-form-input
id="source-name"
v-model="mySource._comment"
required
:placeholder="sources[source_specs_selected].name + ' 1'"
:plaintext="!edit"
></b-form-input>
</b-form-group>
<b-form-input
id="source-name"
v-model="mySource._comment"
required
:placeholder="sources[sourceSpecsSelected].name + ' 1'"
:plaintext="!edit"
/>
</b-form-group>
<hr>
<hr>
<b-form-group
v-for="(spec, index) in source_specs.fields"
v-bind:key="index"
:id="'input-spec-' + index"
:label="spec.label"
:label-for="'spec-' + index"
:description="edit?spec.description:''"
v-show="edit || !spec.secret"
<b-form-group
v-for="(spec, index) in sourceSpecs.fields"
v-show="edit || !spec.secret"
:id="'input-spec-' + index"
:key="index"
:label="spec.label"
:label-for="'spec-' + index"
:description="edit?spec.description:''"
>
<b-form-input
:id="'spec-' + index"
v-model="mySource.Source[spec.id]"
:required="spec.required !== undefined && spec.required"
:placeholder="spec.placeholder"
:plaintext="!edit"
v-if="!edit || spec.choices === undefined"
></b-form-input>
<b-form-select
:id="'spec-' + index"
v-model="mySource.Source[spec.id]"
:required="spec.required !== undefined && spec.required"
:options="spec.choices"
v-if="edit && spec.choices !== undefined"
></b-form-select>
</b-form-group>
</form>
<b-form-input
v-if="!edit || spec.choices === undefined"
:id="'spec-' + index"
v-model="mySource.Source[spec.id]"
:required="spec.required !== undefined && spec.required"
:placeholder="spec.placeholder"
:plaintext="!edit"
/>
<b-form-select
v-if="edit && spec.choices !== undefined"
:id="'spec-' + index"
v-model="mySource.Source[spec.id]"
:required="spec.required !== undefined && spec.required"
:options="spec.choices"
/>
</b-form-group>
</form>
</template>
<script>
@ -94,6 +94,29 @@ import axios from 'axios'
export default {
props: {
parentLoading: {
type: Boolean,
required: true
},
mySource: {
type: Object,
default: null
},
sources: {
type: Object,
default: null
},
sourceSpecs: {
type: Object,
default: null
},
sourceSpecsSelected: {
type: String,
default: null
}
},
data: function () {
return {
edit: false,
@ -143,9 +166,7 @@ export default {
)
}
},
props: ['parentLoading', 'mySource', 'sources', 'source_specs', 'source_specs_selected']
}
}
</script>

View File

@ -32,38 +32,41 @@
-->
<template>
<b-container fluid class="mt-4">
<b-container fluid class="mt-4">
<h1 class="text-center mb-4">
<button type="button" class="btn font-weight-bolder" @click="$router.go(-1)">
<b-icon icon="chevron-left" />
</button>
Updating your domain name source <em v-if="mySource">{{ mySource._comment }}</em>
</h1>
<hr style="margin-bottom:0">
<h1 class="text-center mb-4">
<button type="button" @click="$router.go(-1)" class="btn font-weight-bolder"><b-icon icon="chevron-left"></b-icon></button>
Updating your domain name source <em v-if="mySource">{{ mySource._comment }}</em>
</h1>
<hr style="margin-bottom:0">
<b-row>
<b-col v-if="source_specs_selected && sources" lg="4" md="5" class="bg-light">
<div class="text-center mb-3">
<img :src="'/api/source_specs/' + source_specs_selected + '.png'" :alt="sources[source_specs_selected].name" style="max-width: 100%; max-height: 10em">
</div>
<h3>
{{ sources[source_specs_selected].name }}
</h3>
<b-row>
<b-col lg="4" md="5" class="bg-light" v-if="source_specs_selected && sources">
<div class="text-center mb-3">
<img :src="'/api/source_specs/' + source_specs_selected + '.png'" :alt="sources[source_specs_selected].name" style="max-width: 100%; max-height: 10em">
</div>
<h3>
{{ sources[source_specs_selected].name }}
</h3>
<p class="text-muted text-justify">
{{ sources[source_specs_selected].description }}
</p>
<p class="text-muted text-justify">{{ sources[source_specs_selected].description }}</p>
<div class="text-center">
<b-button v-if="source_specs && source_specs.capabilities && source_specs.capabilities.indexOf('ListDomains') > -1" type="button" variant="secondary" @click="showListImportableDomain()">
<b-icon icon="list-task" />
List importable domains
</b-button>
</div>
</b-col>
<div class="text-center">
<b-button type="button" variant="secondary" @click="showListImportableDomain()" v-if="source_specs && source_specs.capabilities && source_specs.capabilities.indexOf('ListDomains') > -1">
<b-icon icon="list-task" />
List importable domains
</b-button>
</div>
</b-col>
<b-col lg="8" md="7">
<router-view :parentLoading="isLoading" :mySource="mySource" :sources="sources" :source_specs="source_specs" :source_specs_selected="source_specs_selected"></router-view>
</b-col>
</b-row>
</b-container>
<b-col lg="8" md="7">
<router-view :parent-loading="isLoading" :my-source="mySource" :sources="sources" :source-specs="source_specs" :source-specs-selected="source_specs_selected" />
</b-col>
</b-row>
</b-container>
</template>
<script>
@ -80,6 +83,12 @@ export default {
}
},
computed: {
isLoading () {
return this.mySource == null || this.sources == null || this.source_specs == null || this.source_specs_selected == null
}
},
mounted () {
axios
.get('/api/sources/' + this.$route.params.source)
@ -104,12 +113,6 @@ export default {
})
},
computed: {
isLoading () {
return this.mySource == null || this.sources == null || this.source_specs == null || this.source_specs_selected == null
}
},
methods: {
showListImportableDomain () {
this.$router.push('/sources/' + this.$route.params.source + '/domains')

View File

@ -32,75 +32,73 @@
-->
<template>
<b-container class="mt-4 mb-5">
<h1 class="text-center mb-4">
DNS resolver
</h1>
<b-row class="mb-4">
<b-col offset-md="2" md="8">
<form @submit.stop.prevent="submitRequest" class="mb-5">
<b-form-group
id="input-resolver"
label="Resolver"
label-for="resolver"
description="Give an explicit name in order to easily find this service."
<b-container class="mt-4 mb-5">
<h1 class="text-center mb-4">
DNS resolver
</h1>
<b-row class="mb-4">
<b-col offset-md="2" md="8">
<form class="mb-5" @submit.stop.prevent="submitRequest">
<b-form-group
id="input-resolver"
label="Resolver"
label-for="resolver"
description="Give an explicit name in order to easily find this service."
>
<b-form-select
id="resolver"
v-model="form.resolver"
required
:options="existing_resolvers"
></b-form-select>
</b-form-group>
<b-form-select
id="resolver"
v-model="form.resolver"
required
:options="existing_resolvers"
/>
</b-form-group>
<b-form-group
id="input-domain"
label="Domain or subdomain"
label-for="domain"
description="spec.description"
<b-form-group
id="input-domain"
label="Domain or subdomain"
label-for="domain"
description="spec.description"
>
<b-form-input
id="domain"
v-model="form.domain"
required
placeholder="happydns.org"
></b-form-input>
</b-form-group>
<b-form-input
id="domain"
v-model="form.domain"
required
placeholder="happydns.org"
/>
</b-form-group>
<b-form-group
id="input-type"
label="Field"
label-for="type"
description="spec.type"
<b-form-group
id="input-type"
label="Field"
label-for="type"
description="spec.type"
>
<b-form-select
id="type"
v-model="form.type"
required
:options="existing_types"
></b-form-select>
</b-form-group>
<b-form-select
id="type"
v-model="form.type"
required
:options="existing_types"
/>
</b-form-group>
<div class="ml-3 mr-3">
<b-button class="float-right" type="submit" variant="primary" :disabled="request_pending">
<b-spinner label="Spinning" small v-if="request_pending"></b-spinner>
Run the request!
</b-button>
</div>
</form>
</b-col>
</b-row>
<div class="ml-3 mr-3">
<b-button class="float-right" type="submit" variant="primary" :disabled="request_pending">
<b-spinner v-if="request_pending" label="Spinning" small />
Run the request!
</b-button>
</div>
</form>
</b-col>
</b-row>
<b-row v-if="responses.length">
<b-col offset-md="1" md="10">
<b-alert v-for="(response,index) in responses" v-bind:key="index" v-model="show_responses[index]" variant="success" dismissible>
<pre>{{response}}</pre>
</b-alert>
</b-col>
</b-row>
</b-container>
<b-row v-if="responses.length">
<b-col offset-md="1" md="10">
<b-alert v-for="(response,index) in responses" :key="index" v-model="show_responses[index]" variant="success" dismissible>
<pre>{{ response }}</pre>
</b-alert>
</b-col>
</b-row>
</b-container>
</template>
<script>

View File

@ -34,40 +34,62 @@
<template>
<div class="container mt-2">
<h2>
<b-button @click="addRR()" class="float-right ml-2" size="sm" variant="primary" v-show="rrs && rrs.length"><b-icon icon="plus" aria-hidden="true"></b-icon> Add RR</b-button>
<b-button v-show="rrs && rrs.length" class="float-right ml-2" size="sm" variant="primary" @click="addRR()">
<b-icon icon="plus" aria-hidden="true" /> Add RR
</b-button>
<b-button-group v-show="rrs && rrs.length" class="float-right ml-2" size="sm" variant="secondary">
<b-button :pressed.sync="showDNSSEC">DNSSEC</b-button>
<b-button :pressed.sync="showDNSSEC">
DNSSEC
</b-button>
</b-button-group>
<router-link :to="'/domains/' + domain.domain" class="btn"><b-icon icon="chevron-left"></b-icon></router-link>
<router-link :to="'/domains/' + domain.domain" class="btn">
<b-icon icon="chevron-left" />
</router-link>
<span class="text-monospace">{{ domain.domain }}</span>
<small class="text-muted">Resource Records <span v-if="rrs && rrs.length">({{ rrsFiltered.length }}/{{ rrs.length }})</span></small>
</h2>
<b-alert variant="danger" :show="error.length != 0"><strong>Error:</strong> {{ error }}</b-alert>
<b-alert variant="danger" :show="error.length != 0">
<strong>Error:</strong> {{ error }}
</b-alert>
<div v-show="rrs.length">
<table class="table table-hover table-bordered table-striped table-sm" style="table-layout: fixed;">
<thead>
<tr>
<th>resource records</th>
<th style="width: 5%;">act</th>
<th style="width: 5%;">
act
</th>
</tr>
</thead>
<tbody>
<tr v-for="(rr, index) in rrsFiltered" v-bind:key="index">
<tr v-for="(rr, index) in rrsFiltered" :key="index">
<td v-if="!rr.edit" style="overflow:hidden; text-overflow: ellipsis;white-space: nowrap;">
<b-icon @click="toogleRR(index)" icon="chevron-right" v-if="!expandrrs[index]"></b-icon>
<b-icon @click="toogleRR(index)" icon="chevron-down" v-if="expandrrs[index]"></b-icon>
<span @click="toogleRR(index)" class="text-monospace" :title="rr.string">{{ rr.string }}</span>
<div class="row" v-show="expandrrs[index]">
<b-icon v-if="!expandrrs[index]" icon="chevron-right" @click="toogleRR(index)" />
<b-icon v-if="expandrrs[index]" icon="chevron-down" @click="toogleRR(index)" />
<span class="text-monospace" :title="rr.string" @click="toogleRR(index)">{{ rr.string }}</span>
<div v-show="expandrrs[index]" class="row">
<dl class="col-sm-6 row">
<dt class="col-sm-3 text-right">Class</dt>
<dd class="col-sm-9 text-muted text-monospace">{{ rr.fields.Hdr.Class | nsclass }}</dd>
<dt class="col-sm-3 text-right">TTL</dt>
<dd class="col-sm-9 text-muted text-monospace">{{ rr.fields.Hdr.Ttl }}</dd>
<dt class="col-sm-3 text-right">RRType</dt>
<dd class="col-sm-9 text-muted text-monospace">{{ rr.fields.Hdr.Rrtype | nsrrtype }}</dd>
<dt class="col-sm-3 text-right">
Class
</dt>
<dd class="col-sm-9 text-muted text-monospace">
{{ rr.fields.Hdr.Class | nsclass }}
</dd>
<dt class="col-sm-3 text-right">
TTL
</dt>
<dd class="col-sm-9 text-muted text-monospace">
{{ rr.fields.Hdr.Ttl }}
</dd>
<dt class="col-sm-3 text-right">
RRType
</dt>
<dd class="col-sm-9 text-muted text-monospace">
{{ rr.fields.Hdr.Rrtype | nsrrtype }}
</dd>
</dl>
<ul class="col-sm-6" style="list-style: none">
<li v-for="(v,k) in rr.fields" v-bind:key="k">
<li v-for="(v,k) in rr.fields" :key="k">
<strong class="float-left mr-2">{{ k }}</strong> <span class="text-muted text-monospace" style="display:block;overflow:hidden; text-overflow: ellipsis;white-space: nowrap;" :title="v">{{ v }}</span>
</li>
</ul>
@ -75,20 +97,23 @@
</td>
<td v-if="rr.edit">
<form @submit.stop.prevent="newRR(index)">
<input autofocus class="form-control text-monospace" v-model="rr.string">
<input v-model="rr.string" autofocus class="form-control text-monospace">
</form>
</td>
<td>
<button type="button" @click="deleteRR(index)" class="btn btn-sm btn-danger" v-if="!rr.edit && rr.fields.Hdr.Rrtype != 6"><b-icon icon="trash-fill" aria-hidden="true"></b-icon></button>
<button type="button" @click="newRR(index)" class="btn btn-sm btn-success" v-if="rr.edit"><b-icon icon="check" aria-hidden="true"></b-icon></button>
<button v-if="!rr.edit && rr.fields.Hdr.Rrtype != 6" type="button" class="btn btn-sm btn-danger" @click="deleteRR(index)">
<b-icon icon="trash-fill" aria-hidden="true" />
</button>
<button v-if="rr.edit" type="button" class="btn btn-sm btn-success" @click="newRR(index)">
<b-icon icon="check" aria-hidden="true" />
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="text-center mt-5" v-if="!rrs.length && error.length == 0">
<b-spinner label="Spinning"></b-spinner>
<div v-if="!rrs.length && error.length == 0" class="text-center mt-5">
<b-spinner label="Spinning" />
<p>Loading records&nbsp;&hellip;</p>
</div>
</div>

View File

@ -34,7 +34,7 @@
<template>
<div>
<div class="d-flex flex-row justify-content-around flex-wrap align-self-center">
<div class="p-3 service" v-for="(svc, index) in services" v-bind:key="index">
<div v-for="(svc, index) in services" :key="index" class="p-3 service">
<img :src="svc.logo" :alt="svc.name">
Utiliser {{ svc.name }}
</div>