happyDomain/happyDomain
happyDomain/happyDomain
1
0
Fork 0
Code Issues 1 Pull Requests 9 Releases Activity

Rework home page, include an alert on first login

Browse Source
This commit is contained in:
nemunaire 2020-07-19 07:36:19 +02:00
parent 65f47baae4
commit b243200003
5 changed files with 117 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
htdocs/src/components/zoneList.vue → htdocs/src/components/ZoneList.vue
View File

@ -32,59 +32,52 @@
-->
<template>
<b-container class="pt-4 pb-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>
<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 style="width: 50px" @click="$refs.newdomain.focus()">
<b-icon icon="plus" style="width: 100%; height: 2.3rem; margin-right: -.6em; margin-left: -.6em" />
</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>
<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" /> Retrieving your domains...
</b-list-group-item>
<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 style="width: 50px" @click="$refs.newdomain.focus()">
<b-icon icon="plus" style="width: 100%; height: 2.3rem; margin-right: -.6em; margin-left: -.6em" />
</b-input-group-prepend>
</template>
<b-form-input ref="newdomain" v-model="newDomain" autofocus 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>
</template>
<script>
import axios from 'axios'
export default {
name: 'zoneList',
name: 'ZoneList',
data: function () {
return {
@ -101,6 +94,12 @@ export default {
}
},
watch: {
domains: function (domains) {
this.$emit('noDomain', this.domains.length === 0)
}
},
mounted () {
axios
.get('/api/domains')

2
htdocs/src/router/index.js
View File

@ -88,7 +88,7 @@ const routes = [
path: '/domains',
name: 'domains',
component: function () {
return import(/* webpackChunkName: "zone-list" */ '../components/zoneList.vue')
return import(/* webpackChunkName: "zone-list" */ '../views/home.vue')
}
},
{

4
htdocs/src/views/Index.vue
View File

@ -36,7 +36,7 @@
</template>
<script>
import ZoneList from '@/components/zoneList'
import Home from '@/views/home'
export default {
beforeRouteEnter (to, from, next) {
@ -61,7 +61,7 @@ export default {
data () {
return {
homeComponent: sessionStorage.loggedUser !== undefined ? ZoneList : ''
homeComponent: sessionStorage.loggedUser !== undefined ? Home : ''
}
}
}

3
htdocs/src/views/domain-home.vue
View File

@ -32,8 +32,7 @@
-->
<template>
<div>
</div>
<div />
</template>
<script>

67
htdocs/src/views/home.vue Normal file
View File

@ -0,0 +1,67 @@
<!--
Copyright or © or Copr. happyDNS (2020)
contact@happydns.org
This software is a computer program whose purpose is to provide a modern
interface to interact with DNS systems.
This software is governed by the CeCILL license under French law and abiding
by the rules of distribution of free software. You can use, modify and/or
redistribute the software under the terms of the CeCILL license as
circulated by CEA, CNRS and INRIA at the following URL
"http://www.cecill.info".
As a counterpart to the access to the source code and rights to copy, modify
and redistribute granted by the license, users are provided only with a
limited warranty and the software's author, the holder of the economic
rights, and the successive licensors have only limited liability.
In this respect, the user's attention is drawn to the risks associated with
loading, using, modifying and/or developing or reproducing the software by
the user in light of its specific status of free software, that may mean
that it is complicated to manipulate, and that also therefore means that it
is reserved for developers and experienced professionals having in-depth
computer knowledge. Users are therefore encouraged to load and test the
software's suitability as regards their requirements in conditions enabling
the security of their systems and/or data to be ensured and, more generally,
to use and operate it in the same conditions as regards security.
The fact that you are presently reading this means that you have had
knowledge of the CeCILL license and that you accept its terms.
-->
<template>
<b-container class="pt-4 pb-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>
<b-col offset-md="2" md="8">
<b-alert :show="noDomain" dismissible>
<strong>Hi! It seems this is your first time here.</strong>
To begin, enter a domain name you want to manage, in the form just below.
</b-alert>
<zone-list ref="zlist" @noDomain="noDomainChange" />
</b-col>
</b-row>
</b-container>
</template>
<script>
export default {
components: {
ZoneList: () => import('@/components/ZoneList')
},
data () {
return {
noDomain: false
}
},
methods: {
noDomainChange (state) {
setTimeout(() => (this.noDomain = state), 1420)
}
}
}
</script>