Make a primary design
This commit is contained in:
parent
728a3b307c
commit
269b523a0f
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<b-navbar size="lg" type="dark" variant="dark" sticky class="text-light">
|
||||
<b-navbar style="border-bottom: 3px solid #aee64e; box-shadow: 0 0 12px 0 #08334833">
|
||||
<b-navbar-brand class="navbar-brand" to="/">
|
||||
<img alt="HappyDNS" src="<%= BASE_URL %>img/logo.png" style="height: 30px">
|
||||
</b-navbar-brand>
|
||||
|
|
@ -10,30 +10,33 @@
|
|||
|
||||
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
|
||||
|
||||
<b-collapse id="nav-collapse" is-nav>
|
||||
<b-navbar-nav>
|
||||
<b-nav-item to="/zones">Zones</b-nav-item>
|
||||
<b-nav-item to="/users" disabled>Users</b-nav-item>
|
||||
</b-navbar-nav>
|
||||
</b-collapse>
|
||||
|
||||
<b-navbar-nav class="ml-auto">
|
||||
<b-nav-item-dropdown right v-if="loggedUser">
|
||||
<template slot="button-content"><div class="btn btn-sm btn-secondary">{{ loggedUser.email }}</div></template>
|
||||
<b-dropdown-item>Some example text that's free-flowing within the dropdown menu.</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Action</b-dropdown-item>
|
||||
<b-dropdown-item href="#">Another action</b-dropdown-item>
|
||||
<template slot="button-content"><div class="btn btn-sm btn-secondary"><b-icon icon="person" aria-hidden="true"></b-icon> {{ loggedUser.email }}</div></template>
|
||||
<b-dropdown-item href="#">My Profile</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="success" @click="signup()"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Sign up</b-button>
|
||||
<b-button v-if="!loggedUser" variant="primary" class="ml-2" @click="signin()"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Sign in</b-button>
|
||||
<b-button v-if="!loggedUser" variant="outline-success" @click="signup()"><b-icon icon="person-fill" aria-hidden="true"></b-icon> Sign up</b-button>
|
||||
<b-button v-if="!loggedUser" variant="primary" class="ml-2" @click="signin()"><b-icon icon="person-fill" aria-hidden="true"></b-icon> Sign in</b-button>
|
||||
</b-navbar-nav>
|
||||
</b-navbar>
|
||||
<div class="progress" style="background-color: #aee64e; height: 3px; border-radius: 0;">
|
||||
<div class="progress-bar bg-secondary" role="progressbar" style="width: 0%"></div>
|
||||
</div>
|
||||
|
||||
<router-view/>
|
||||
|
||||
<div class="mt-5 pt-3 pb-5 bg-dark text-light" style="border-top: 3px solid #aee64e; box-shadow: 0 0 12px 0 #08334833">
|
||||
<b-container>
|
||||
<b-row>
|
||||
<b-col md="4">
|
||||
© HappyDNS 2019-2020 All rights reserved
|
||||
</b-col>
|
||||
<b-col md="4">
|
||||
</b-col>
|
||||
<b-col md="4">
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -53,7 +56,7 @@ function updateSession (t) {
|
|||
console.error('Invalid session, your have been logged out:', error.response.errmsg)
|
||||
t.session = null
|
||||
t.loggedUser = null
|
||||
sessionStorage.token = undefined
|
||||
delete sessionStorage.token
|
||||
}
|
||||
)
|
||||
}
|
||||
|
|
@ -69,8 +72,8 @@ export default {
|
|||
},
|
||||
|
||||
mounted () {
|
||||
this.$on('login', this.login)
|
||||
updateSession(this)
|
||||
this.$on('login', this.login)
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import BootstrapVue from 'bootstrap-vue'
|
||||
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
|
||||
import router from './router'
|
||||
|
||||
import 'bootstrap/dist/css/bootstrap.css'
|
||||
import 'bootstrap-vue/dist/bootstrap-vue.css'
|
||||
|
||||
require('./assets/css/glyphicon.css')
|
||||
import 'bootstrap/dist/css/bootstrap.min.css'
|
||||
import 'bootstrap-vue/dist/bootstrap-vue.min.css'
|
||||
|
||||
Vue.use(BootstrapVue)
|
||||
Vue.use(BootstrapVueIcons)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,55 @@
|
|||
<template>
|
||||
<div class="home">
|
||||
<img alt="Vue logo" src="../assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
<div>
|
||||
<div class="text-light mb-5" style="background-image: radial-gradient(circle at top left,rgba(255,255,128,0.5) 0%,rgba(128,128,128,0.4) 58%),url(/img/ian-dooley-TevqnfbI0Zc-unsplash.jpg); background-size: cover;">
|
||||
<h1 class="text-center display-1" style="padding-top: 20vh; padding-bottom: 5vh; text-shadow: white 0px 0px 15px">
|
||||
HappyDNS
|
||||
</h1>
|
||||
<h2 class="text-center d-1" style="padding-bottom: 30vh; text-shadow: white 0px 0px 10px">
|
||||
Finally a simple interface for domain names
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<b-container class="mb-5">
|
||||
<b-row>
|
||||
<h3 class="text-center font-weight-bolder mt-5 mb-5 offset-md-2 col-md-8" style="line-height: 1.5em">
|
||||
Vous trouvez les <span class="text-highlight">interfaces des hébergeurs</span> de noms de domaine <span class="text-highlight">incompréhensibles</span> ou <span class="text-highlight">inutilisables</span> ?
|
||||
</h3>
|
||||
</b-row>
|
||||
<b-row class="mt-5 mb-5 text-justify">
|
||||
<b-col md="4">
|
||||
<p class="font-weight-bold" style="font-size: 1.15rem">
|
||||
Réconciliez-vous avec vos noms de domaine, grâce à une interface pensée pour vous.
|
||||
</p>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<p>
|
||||
Amis <strong>néophytes</strong>, notre interface <strong>simple</strong> saura vous guider dans la configuration de votre nom de domaine, sans passer par la terminologie propre des noms de domaine.
|
||||
</p>
|
||||
</b-col>
|
||||
<b-col sm="6" md="4">
|
||||
<p>
|
||||
<strong>Experts</strong> chevronnés : changez votre point de vue sur le DNS, avec une interface <strong>ergonomique</strong> dans l’ère du temps, qui répondra à toutes vos attentes.
|
||||
</p>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
|
||||
<div class="mt-5" style="background-image: url(/img/karina-vorozheeva-rW-I87aPY5Y-unsplash.jpg); background-size: cover; background-position-y: 28%; background-attachment: fixed; padding-top: 60vh"></div>
|
||||
|
||||
<b-container class="mb-5">
|
||||
<b-row>
|
||||
<p class="mt-5 mb-5 offset-md-2 col-md-8 font-weight-bolder">
|
||||
Rendez-vous sur <a href="https://git.happydns.org/">notre forge</a> pour télécharger le code source de notre plate-forme.<br><br>
|
||||
Une version précompilée sera prochainement proposée au téléchargement.
|
||||
</p>
|
||||
</b-row>
|
||||
</b-container>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import HelloWorld from '@/components/HelloWorld.vue'
|
||||
|
||||
export default {
|
||||
name: 'home',
|
||||
components: {
|
||||
HelloWorld
|
||||
<style>
|
||||
.text-highlight {
|
||||
background-color: yellow;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,36 +1,60 @@
|
|||
<template>
|
||||
<form class="container mt-2" @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"
|
||||
:state="loginForm.emailState"
|
||||
required
|
||||
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"
|
||||
>
|
||||
<b-form-input
|
||||
type="password"
|
||||
id="password-input"
|
||||
v-model="loginForm.password"
|
||||
:state="loginForm.passwordState"
|
||||
required
|
||||
ref="loginpassword"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
<b-button type="submit" variant="success"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Go!</b-button>
|
||||
</form>
|
||||
<b-container style="margin-top: 10vh; margin-bottom: 10vh;">
|
||||
<b-row>
|
||||
<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>
|
||||
</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>
|
||||
</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"
|
||||
: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"
|
||||
>
|
||||
<b-form-input
|
||||
type="password"
|
||||
id="password-input"
|
||||
v-model="loginForm.password"
|
||||
: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="success">Go!</b-button>
|
||||
<b-button type="button" variant="outline-primary">Forgotten password?</b-button>
|
||||
</div>
|
||||
</form>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,17 @@
|
|||
<template>
|
||||
<b-container style="margin-top: 10vh; margin-bottom: 10vh;">
|
||||
<b-row>
|
||||
<b-col sm="4" class="d-none d-sm-flex flex-column align-items-center">
|
||||
<img src="img/screenshot.png" alt="HappyDNS screenshoot" style="max-height: 100%; max-width: 100%;" class="mt-auto">
|
||||
<div class="mt-3 mb-auto text-justify">
|
||||
Join now our open source and free (as freedom) DNS platform, to manage your domains easily!
|
||||
</div>
|
||||
</b-col>
|
||||
<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>
|
||||
</template>
|
||||
<form class="container mt-2" @submit.stop.prevent="goSignUp" ref="form">
|
||||
<b-form-group
|
||||
:state="signupForm.emailState"
|
||||
|
|
@ -11,6 +24,9 @@
|
|||
v-model="signupForm.email"
|
||||
:state="signupForm.emailState"
|
||||
required
|
||||
autofocus
|
||||
type="email"
|
||||
placeholder="jPostel@isi.edu"
|
||||
ref="signupemail"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
|
@ -26,6 +42,7 @@
|
|||
v-model="signupForm.password"
|
||||
:state="signupForm.passwordState"
|
||||
required
|
||||
placeholder="xXxXxXxXxX"
|
||||
ref="signuppassword"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
|
|
@ -41,11 +58,19 @@
|
|||
v-model="signupForm.passwordConfirm"
|
||||
:state="signupForm.passwordConfirmState"
|
||||
required
|
||||
placeholder="xXxXxXxXxX"
|
||||
ref="signuppasswordconfirm"
|
||||
></b-form-input>
|
||||
</b-form-group>
|
||||
<b-button type="submit" variant="success"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Sign up!</b-button>
|
||||
<div class="d-flex justify-content-around">
|
||||
<b-button type="submit" variant="success">Sign up!</b-button>
|
||||
<router-link to="/login" class="btn btn-outline-primary">Already member?</router-link>
|
||||
</div>
|
||||
</form>
|
||||
</b-card>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,34 @@
|
|||
<template>
|
||||
<div class="container mt-2">
|
||||
<h2>
|
||||
Zones
|
||||
<b-button v-b-modal.newZoneModal variant="primary" size="sm" class="float-right ml-2"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add zone</b-button>
|
||||
</h2>
|
||||
|
||||
<table class="table table-hover table-bordered table-striped">
|
||||
<thead class="thead-dark">
|
||||
<tr>
|
||||
<th>
|
||||
Domain name
|
||||
</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(zone, index) in zones" v-bind:key="index">
|
||||
<td @click="show(zone)" class="text-monospace">
|
||||
{{ zone.domain }}
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" @click="show(zone)" class="btn btn-sm btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
|
||||
<button type="button" @click="deleteZone(zone)" class="btn btn-sm btn-danger"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<b-container class="mt-4">
|
||||
<h1 class="text-center mb-4">Welcome to HappyDNS!</h1>
|
||||
<b-row>
|
||||
<div class="offset-md-2 col-md-8">
|
||||
<b-list-group>
|
||||
<b-list-group-item v-if="loading" class="text-center">
|
||||
<b-spinner variant="secondary" label="Spinning"></b-spinner> Retrieving your zones...
|
||||
</b-list-group-item>
|
||||
<b-list-group-item :to="'zones/' + zone.domain" v-for="(zone, index) in zones" v-bind:key="index" class="d-flex justify-content-between align-items-center">
|
||||
{{ zone.domain }}
|
||||
<b-badge variant="success">OK</b-badge>
|
||||
</b-list-group-item>
|
||||
</b-list-group>
|
||||
<b-list-group class="mt-2">
|
||||
<form @submit.stop.prevent="showModal" v-if="!loading">
|
||||
<b-list-group-item class="d-flex justify-content-between align-items-center">
|
||||
<b-input-group size="sm">
|
||||
<b-input-group-prepend>
|
||||
<b-icon icon="plus"></b-icon>
|
||||
</b-input-group-prepend>
|
||||
<input placeholder="my.new.zone" v-model="newForm.domain" style="border:none; flex: 1 1 auto;">
|
||||
<b-input-group-append v-show="newForm.domain.length">
|
||||
<b-button type="submit" variant="outline-primary">Add new zone</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
</b-list-group-item>
|
||||
</form>
|
||||
</b-list-group>
|
||||
</div>
|
||||
</b-row>
|
||||
|
||||
<b-modal
|
||||
id="newZoneModal"
|
||||
|
|
@ -99,7 +102,7 @@
|
|||
</b-form-group>
|
||||
</form>
|
||||
</b-modal>
|
||||
</div>
|
||||
</b-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -110,57 +113,34 @@ export default {
|
|||
data: function () {
|
||||
return {
|
||||
domainNameState: null,
|
||||
newForm: { storage_facility: 'live' },
|
||||
loading: true,
|
||||
newForm: { domain: '', storage_facility: 'live' },
|
||||
zones: []
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
axios
|
||||
.get('/api/zones')
|
||||
.then(response => (this.zones = response.data))
|
||||
setTimeout(() =>
|
||||
axios
|
||||
.get('/api/zones')
|
||||
.then(response => { this.zones = response.data; this.loading = false; return true })
|
||||
, 100)
|
||||
},
|
||||
|
||||
methods: {
|
||||
attachZone () {
|
||||
axios
|
||||
.post('/api/zones', {
|
||||
domain: this.newForm.domain,
|
||||
server: this.newForm.server,
|
||||
keyname: this.newForm.keyname,
|
||||
keyblob: this.newForm.keyblob
|
||||
})
|
||||
.then(
|
||||
(response) => {
|
||||
if (this.zones == null) this.zones = []
|
||||
this.zones.push(response.data)
|
||||
},
|
||||
(error) => {
|
||||
alert('Unable to attach the given zone: ' + error.response.data.errmsg)
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
deleteZone (zone) {
|
||||
axios
|
||||
.delete('/api/zones/' + zone.domain)
|
||||
.then(response => (
|
||||
axios
|
||||
.get('/api/zones')
|
||||
.then(response => (this.zones = response.data))
|
||||
))
|
||||
},
|
||||
|
||||
show (zone) {
|
||||
this.$router.push('/zones/' + zone.domain)
|
||||
},
|
||||
|
||||
showModal () {
|
||||
this.$bvModal.show('newZoneModal')
|
||||
},
|
||||
|
||||
modalShown () {
|
||||
this.$refs.domainname.focus()
|
||||
this.$refs.domainserver.focus()
|
||||
},
|
||||
|
||||
resetModal () {
|
||||
this.newForm.domain = ''
|
||||
this.newForm.server = ''
|
||||
this.newForm.keyname = ''
|
||||
this.newForm.keyblob = ''
|
||||
|
|
@ -182,6 +162,26 @@ export default {
|
|||
this.handleSubmit()
|
||||
},
|
||||
|
||||
attachZone () {
|
||||
axios
|
||||
.post('/api/zones', {
|
||||
domain: this.newForm.domain,
|
||||
server: this.newForm.server,
|
||||
keyname: this.newForm.keyname,
|
||||
keyblob: this.newForm.keyblob,
|
||||
storage_facility: this.newForm.storage_facility
|
||||
})
|
||||
.then(
|
||||
(response) => {
|
||||
if (this.zones == null) this.zones = []
|
||||
this.zones.push(response.data)
|
||||
},
|
||||
(error) => {
|
||||
alert('Unable to attach the given zone: ' + error.response.data.errmsg)
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
handleSubmit () {
|
||||
if (!this.checkFormValidity()) {
|
||||
return
|
||||
|
|
@ -193,7 +193,6 @@ export default {
|
|||
this.$refs.modal.hide()
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue