YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

linting…

Browse source
This commit is contained in:
Axolotle 2020-07-15 16:39:24 +02:00
parent d69bb8b906
commit 6f8457381a
15 changed files with 577 additions and 546 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
app/src/App.vue
View file

@ -2,15 +2,21 @@
<div id="app" class="container"> <div id="app" class="container">
<header> <header>
<b-navbar> <b-navbar>
<b-navbar-brand to="/" exact exact-active-class="active"><img alt="Yunohost logo" src="./assets/logo.png"></b-navbar-brand> <b-navbar-brand to="/" exact exact-active-class="active">
<img alt="Yunohost logo" src="./assets/logo.png">
</b-navbar-brand>
<b-navbar-nav class="ml-auto"> <b-navbar-nav class="ml-auto">
<li class="nav-item"> <li class="nav-item">
<b-button href="/yunohost/sso" variant="primary" block size="sm"> <b-button href="/yunohost/sso"
variant="primary" size="sm" block
>
{{ $t('user_interface_link') }} <icon iname="user" /> {{ $t('user_interface_link') }} <icon iname="user" />
</b-button> </b-button>
</li> </li>
<li class="nav-item" v-show="connected"> <li class="nav-item" v-show="connected">
<b-button @click.prevent="logout" to="/logout" variant="outline-dark" block size="sm" > <b-button @click.prevent="logout" to="/logout"
variant="outline-dark" block size="sm"
>
{{ $t('logout') }} <icon iname="sign-out" /> {{ $t('logout') }} <icon iname="sign-out" />
</b-button> </b-button>
</li> </li>
@ -25,19 +31,29 @@
<footer> <footer>
<nav> <nav>
<b-nav> <b-nav>
<b-nav-item href="https://yunohost.org/docs" target="_blank" link-classes='text-secondary'> <b-nav-item href="https://yunohost.org/docs" target="_blank" link-classes="text-secondary">
<icon iname="book" /> Documentation <icon iname="book" /> Documentation
</b-nav-item> </b-nav-item>
<b-nav-item href="https://yunohost.org/help" target="_blank" link-classes='text-secondary'> <b-nav-item href="https://yunohost.org/help" target="_blank" link-classes="text-secondary">
<icon iname="life-ring" /> Need help? <icon iname="life-ring" /> Need help?
</b-nav-item> </b-nav-item>
<b-nav-item href="https://donate.yunohost.org/" target="_blank" link-classes='text-secondary'> <b-nav-item href="https://donate.yunohost.org/" target="_blank" link-classes="text-secondary">
<icon iname="heart" /> Donate <icon iname="heart" /> Donate
</b-nav-item> </b-nav-item>
<i18n v-if="yunohostInfos" path="footer_version" tag="b-nav-text" class="ml-auto" id="yunohost-version"> <i18n v-if="yunohostInfos" path="footer_version" tag="b-nav-text"
<template v-slot:ynh><b-link href="https://yunohost.org">YunoHost</b-link></template> id="yunohost-version" class="ml-auto"
<template v-slot:version>{{ yunohostInfos.version }}</template> >
<template v-slot:repo>{{ yunohostInfos.repo }}</template> <template v-slot:ynh>
<b-link href="https://yunohost.org">
YunoHost
</b-link>
</template>
<template v-slot:version>
{{ yunohostInfos.version }}
</template>
<template v-slot:repo>
{{ yunohostInfos.repo }}
</template>
</i18n> </i18n>
</b-nav> </b-nav>
</nav> </nav>
@ -50,25 +66,24 @@ import { mapState } from 'vuex'
import api from '@/helpers/api' import api from '@/helpers/api'
export default { export default {
name: 'App', name: 'App',
data: () => { data: () => {
return { return {
// isReady blocks the rendering of the rooter-view until we have a true info // isReady blocks the rendering of the rooter-view until we have a true info
// about the connected state of the user. // about the connected state of the user.
isReady: false, isReady: false
} }
}, },
computed: { computed: {
...mapState(['connected', 'yunohostInfos']), ...mapState(['connected', 'yunohostInfos'])
}, },
methods: { methods: {
async logout () { async logout () {
await api.logout() await api.logout()
this.$store.commit('CONNECTED', false); this.$store.commit('CONNECTED', false)
this.$router.push('/login') this.$router.push('/login')
}, }
}, },
// This hook is only triggered at page reload so the value of state.connected // This hook is only triggered at page reload so the value of state.connected
// always come from the localStorage // always come from the localStorage
@ -87,11 +102,11 @@ export default {
// Session expired, reset the 'connected' state and redirect with a query // Session expired, reset the 'connected' state and redirect with a query
// FIXME is there a case where the error may not be a 401 therefor requires // FIXME is there a case where the error may not be a 401 therefor requires
// better handling ? // better handling ?
this.$store.commit('CONNECTED', false); this.$store.commit('CONNECTED', false)
this.$router.push({ name: 'login', query: { redirect: this.$route.path } }) this.$router.push({ name: 'login', query: { redirect: this.$route.path } })
} finally { } finally {
// in any case allow the router-view to be rendered // in any case allow the router-view to be rendered
this.isReady = true; this.isReady = true
} }
} }
} }

4
app/src/components/Breadcrumb.vue
View file

@ -38,8 +38,8 @@ export default {
}, },
lastIndex: function () { lastIndex: function () {
return this.breadcrumb.length - 1 return this.breadcrumb.length - 1
}, }
}, }
} }
</script> </script>

8
app/src/components/globals/Icon.vue
View file

@ -1,11 +1,13 @@
<template> <template>
<span :class="'icon fa fa-' + iname" aria-hidden="true"></span> <span :class="'icon fa fa-' + iname" aria-hidden="true" />
</template> </template>
<script> <script>
export default { export default {
name: 'icon', name: 'Icon',
props: ['iname'], props: {
iname: { type: String, required: true }
}
} }
</script> </script>

16
app/src/helpers/api.js
View file

@ -1,26 +1,21 @@
function objectToParams (object) { function objectToParams (object) {
const urlParams = new URLSearchParams(); const urlParams = new URLSearchParams()
for (const [key, value] of Object.entries(object)) { for (const [key, value] of Object.entries(object)) {
urlParams.append(key, value) urlParams.append(key, value)
} }
return urlParams return urlParams
} }
function handleResponse (response, type = 'json') { function handleResponse (response, type = 'json') {
return response.ok ? response[type]() : handleErrors(response) return response.ok ? response[type]() : handleErrors(response)
} }
function handleErrors (response) { function handleErrors (response) {
if (response.status == 401) { if (response.status === 401) {
throw new Error('Unauthorized'); throw new Error('Unauthorized')
} }
} }
export default { export default {
options: { options: {
credentials: 'include', credentials: 'include',
@ -32,7 +27,7 @@ export default {
// "Accept": "*/*", // "Accept": "*/*",
// Also is this still important ? (needed by back-end) // Also is this still important ? (needed by back-end)
'X-Requested-With': 'XMLHttpRequest', 'X-Requested-With': 'XMLHttpRequest'
} }
}, },
@ -57,7 +52,6 @@ export default {
}, },
getVersion () { getVersion () {
return fetch('/api/versions', this.options) return fetch('/api/versions', this.options).then(response => handleResponse(response))
.then(response => handleResponse(response))
} }
} }

5
app/src/main.js
View file

@ -7,11 +7,10 @@ import store from './plugins/store'
import * as globalsComponents from './components/globals' import * as globalsComponents from './components/globals'
Vue.config.productionTip = false Vue.config.productionTip = false
// Register global components // Register global components
for (let component of Object.values(globalsComponents)) { for (const component of Object.values(globalsComponents)) {
Vue.component(component.name, component) Vue.component(component.name, component)
} }
@ -19,5 +18,5 @@ new Vue({
i18n, i18n,
router, router,
store, store,
render: h => h(App), render: h => h(App)
}).$mount('#app') }).$mount('#app')

1
app/src/plugins/i18n.js
View file

@ -1,7 +1,6 @@
import Vue from 'vue' import Vue from 'vue'
import VueI18n from 'vue-i18n' import VueI18n from 'vue-i18n'
Vue.use(VueI18n) Vue.use(VueI18n)
function loadLocaleMessages () { function loadLocaleMessages () {

4
app/src/plugins/router.js
View file

@ -3,7 +3,6 @@ import VueRouter from 'vue-router'
import routes from '../routes' import routes from '../routes'
import store from './store' import store from './store'
Vue.use(VueRouter) Vue.use(VueRouter)
const router = new VueRouter({ const router = new VueRouter({
@ -22,5 +21,4 @@ router.beforeEach((to, from, next) => {
} }
}) })
export default router
export default router;

7
app/src/plugins/store.js
View file

@ -1,7 +1,6 @@
import Vue from 'vue' import Vue from 'vue'
import Vuex from 'vuex' import Vuex from 'vuex'
Vue.use(Vuex) Vue.use(Vuex)
export default new Vuex.Store({ export default new Vuex.Store({
@ -11,15 +10,15 @@ export default new Vuex.Store({
}, },
// Mutations must be synchronous. They are used to change the store state. // Mutations must be synchronous. They are used to change the store state.
mutations: { mutations: {
['CONNECTED'] (state, connected) { 'CONNECTED' (state, connected) {
localStorage.setItem('connected', connected) localStorage.setItem('connected', connected)
state.connected = connected state.connected = connected
if (!connected) { if (!connected) {
state.yunohostInfos = null state.yunohostInfos = null
} }
}, },
['YUNOHOST_INFOS'] (state, data) { 'YUNOHOST_INFOS' (state, data) {
console.log('version changed', data); console.log('version changed', data)
state.yunohostInfos = data state.yunohostInfos = data
} }
}, },

24
app/src/routes.js
View file

@ -3,21 +3,29 @@ import Login from './views/Login'
import Users from './views/Users' import Users from './views/Users'
import User from './views/User' import User from './views/User'
const routes = [ const routes = [
{ name: 'home', path: '/', component: Home }, { name: 'home', path: '/', component: Home },
{name: 'login', path: '/login', component: Login, meta: { { name: 'login', path: '/login', component: Login, meta: { noAuth: true } },
noAuth: true {
}}, name: 'users',
{name: 'users', path: '/users', component: Users, meta: { path: '/users',
component: Users,
meta: {
breadcrumb: [{ name: 'users', trad: 'users' }] breadcrumb: [{ name: 'users', trad: 'users' }]
}}, }
{name: 'user', path: '/user/:name', component: User, props: true, meta: { },
{
name: 'user',
path: '/user/:name',
component: User,
props: true,
meta: {
breadcrumb: [ breadcrumb: [
{ name: 'users', trad: 'users' }, { name: 'users', trad: 'users' },
{ name: 'user', param: 'name' } { name: 'user', param: 'name' }
] ]
}}, }
}
] ]
export default routes export default routes

4
app/src/views/Home.vue
View file

@ -23,10 +23,10 @@ export default {
{ id: 4, uri: '/services', icon: 'cog', translation: 'services' }, { id: 4, uri: '/services', icon: 'cog', translation: 'services' },
{ id: 5, uri: '/tools', icon: 'wrench', translation: 'tools' }, { id: 5, uri: '/tools', icon: 'wrench', translation: 'tools' },
{ id: 6, uri: '/diagnosis', icon: 'stethoscope', translation: 'diagnosis' }, { id: 6, uri: '/diagnosis', icon: 'stethoscope', translation: 'diagnosis' },
{id: 7, uri: '/backup', icon: 'archive', translation: 'backup'}, { id: 7, uri: '/backup', icon: 'archive', translation: 'backup' }
] ]
} }
}, }
} }
</script> </script>

25
app/src/views/Login.vue
View file

@ -8,14 +8,16 @@
<icon iname="lock" class="sm" /> <icon iname="lock" class="sm" />
</b-input-group-text> </b-input-group-text>
</template> </template>
<b-form-input required id="input-password" <b-form-input
id="input-password"
required type="password"
v-model="password" v-model="password"
type="password" :placeholder="$t('administration_password')" :state="isValid"
:placeholder="$t('administration_password')" />
:state="isValid"
></b-form-input>
<template v-slot:append> <template v-slot:append>
<b-button type="submit" variant="success">{{ $t('login') }}</b-button> <b-button type="submit" variant="success">
{{ $t('login') }}
</b-button>
</template> </template>
</b-input-group> </b-input-group>
<b-form-invalid-feedback :state="isValid"> <b-form-invalid-feedback :state="isValid">
@ -27,29 +29,28 @@
<script> <script>
import api from '@/helpers/api' import api from '@/helpers/api'
export default { export default {
name: 'Login', name: 'Login',
data: () => { data: () => {
return { return {
password: '', password: '',
isValid: null, isValid: null
} }
}, },
methods: { methods: {
async login () { async login () {
const connected = await api.login(this.password) const connected = await api.login(this.password)
if (connected) { if (connected) {
this.$store.commit('CONNECTED', true); this.$store.commit('CONNECTED', true)
this.$router.push(this.$route.query.redirect || '/') this.$router.push(this.$route.query.redirect || '/')
const infos = await api.getVersion(); const infos = await api.getVersion()
this.$store.commit('YUNOHOST_INFOS', infos.yunohost) this.$store.commit('YUNOHOST_INFOS', infos.yunohost)
} else { } else {
this.$store.commit('CONNECTED', false); this.$store.commit('CONNECTED', false)
this.isValid = false this.isValid = false
} }
} }
}, }
// TODO checkInstall // TODO checkInstall
// beforeRouteEnter (to, from, next) { // beforeRouteEnter (to, from, next) {
// }, // },

34
app/src/views/User.vue
View file

@ -6,7 +6,7 @@
<h2>{{ user ? user.fullname : '' }}</h2> <h2>{{ user ? user.fullname : '' }}</h2>
</template> </template>
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<icon iname="user" class="fa-fw"></icon> <icon iname="user" class="fa-fw" />
<div class="w-100"> <div class="w-100">
<template v-if="user"> <template v-if="user">
<b-row> <b-row>
@ -15,7 +15,9 @@
</b-row> </b-row>
<b-row> <b-row>
<b-col><strong>{{ $t('user_email') }}</strong></b-col> <b-col><strong>{{ $t('user_email') }}</strong></b-col>
<b-col class="font-italic">{{ user.mail }}</b-col> <b-col class="font-italic">
{{ user.mail }}
</b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col><strong>{{ $t('user_mailbox_quota') }}</strong></b-col> <b-col><strong>{{ $t('user_mailbox_quota') }}</strong></b-col>
@ -42,18 +44,26 @@
<!-- skeleton --> <!-- skeleton -->
<template v-else> <template v-else>
<b-row v-for="(n, index) in 6" :key="index"> <b-row v-for="(n, index) in 6" :key="index">
<b-col><strong class="rounded"></strong></b-col> <b-col>
<b-col><span v-if="n <= 4" class="rounded"></span></b-col> <strong class="rounded" />
</b-col>
<b-col>
<span v-if="n <= 4" class="rounded" />
</b-col>
</b-row> </b-row>
</template> </template>
</div> </div>
</div> </div>
<template v-slot:footer> <template v-slot:footer>
<div class="d-flex d-flex justify-content-end"> <div class="d-flex d-flex justify-content-end">
<b-button :to="user ? {name: 'user-edit', params: {user: user}} : null" :variant="user ? 'info' : 'dark'" > <b-button :to="user ? {name: 'user-edit', params: {user: user}} : null"
:variant="user ? 'info' : 'dark'"
>
{{ user ? $t('user_username_edit', {name: user.username}) : '' }} {{ user ? $t('user_username_edit', {name: user.username}) : '' }}
</b-button> </b-button>
<b-button :variant="user ? 'danger' : 'dark'" class="ml-2">{{ user ? $t('delete') : '' }}</b-button> <b-button :variant="user ? 'danger' : 'dark'" class="ml-2">
{{ user ? $t('delete') : '' }}
</b-button>
</div> </div>
</template> </template>
</b-card> </b-card>
@ -66,15 +76,20 @@ import Breadcrumb from '@/components/Breadcrumb'
export default { export default {
name: 'User', name: 'User',
props: ['name'], props: {
name: {
type: Object,
required: true
}
},
data: function () { data: function () {
return { return {
user: undefined, user: undefined
} }
}, },
async created () { async created () {
const data = await api.get('users/' + this.name) const data = await api.get('users/' + this.name)
if (!data) return; if (!data) return
this.user = data this.user = data
}, },
components: { components: {
@ -130,7 +145,6 @@ ul {
h2 { h2 {
height: #{2 * 1.2}rem; height: #{2 * 1.2}rem;
} }
.col { .col {

8
app/src/views/Users.vue
View file

@ -10,17 +10,19 @@
<template v-else> <template v-else>
<b-list-group :class="{skeleton: !users}"> <b-list-group :class="{skeleton: !users}">
<b-list-group-item <b-list-group-item
class="d-flex justify-content-between align-items-center pr-0"
v-for="(user, index) in (users ? users : 3)" v-for="(user, index) in (users ? users : 3)"
:key="index" :key="index"
:to="users ? { name: 'user', params: { name: user.username }} : null" :to="users ? { name: 'user', params: { name: user.username }} : null"
class="d-flex justify-content-between align-items-center pr-0"
> >
<div> <div>
<h5 :class="{rounded: !users}"> <h5 :class="{rounded: !users}">
{{ user.username }} {{ user.username }}
<small>({{ user.fullname }})</small> <small>({{ user.fullname }})</small>
</h5> </h5>
<p :class="{rounded: !users}">{{ user.mail }}</p> <p :class="{rounded: !users}">
{{ user.mail }}
</p>
</div> </div>
<icon iname="chevron-right" class="lg fs-sm ml-auto" /> <icon iname="chevron-right" class="lg fs-sm ml-auto" />
</b-list-group-item> </b-list-group-item>
@ -52,7 +54,7 @@ export default {
}, },
components: { components: {
Breadcrumb Breadcrumb
}, }
} }
</script> </script>