From 9b930fcc2c8040cd9eb98e0b7b6f6fb9c9fa86c9 Mon Sep 17 00:00:00 2001
From: Cretu Eusebiu <cretu.eusebiu@gmail.com>
Date: Wed, 14 Mar 2018 17:24:18 +0200
Subject: [PATCH] Enable vue eslint

---
 .eslintrc                                     | 15 ++++++--
 resources/assets/js/app.js                    |  1 +
 resources/assets/js/components/App.vue        |  2 +-
 resources/assets/js/components/Button.vue     | 15 +++++---
 resources/assets/js/components/Card.vue       |  4 ++-
 resources/assets/js/components/Checkbox.vue   | 35 +++++++++----------
 resources/assets/js/components/Loading.vue    |  4 +--
 .../assets/js/components/LocaleDropdown.vue   |  6 ++--
 .../assets/js/components/LoginWithGithub.vue  |  2 +-
 resources/assets/js/components/Navbar.vue     | 23 ++++++------
 resources/assets/js/layouts/basic.vue         |  1 -
 resources/assets/js/pages/auth/login.vue      |  8 ++---
 .../assets/js/pages/auth/password/email.vue   |  3 +-
 .../assets/js/pages/auth/password/reset.vue   |  9 ++---
 resources/assets/js/pages/auth/register.vue   | 14 +++-----
 resources/assets/js/pages/settings/index.vue  |  2 +-
 .../assets/js/pages/settings/password.vue     |  8 ++---
 .../assets/js/pages/settings/profile.vue      |  8 ++---
 resources/assets/js/pages/welcome.vue         |  8 ++---
 resources/assets/js/plugins/fontawesome.js    |  4 +--
 resources/assets/js/router/index.js           |  6 ++--
 resources/assets/js/router/routes.js          | 12 ++++---
 22 files changed, 96 insertions(+), 94 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 24f2a4aa1..b906376a9 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,6 +1,15 @@
 {
-  "parser": "babel-eslint",
+  "root": true,
+  "parserOptions": {
+    "parser": "babel-eslint",
+    "ecmaVersion": 2017,
+    "sourceType": "module"
+  },
   "extends": [
-    "plugin:vue-libs/recommended"
-  ]
+    "plugin:vue/recommended",
+    "@vue/standard"
+  ],
+  "rules": {
+    "vue/max-attributes-per-line": "off"
+  }
 }
diff --git a/resources/assets/js/app.js b/resources/assets/js/app.js
index 869a6b309..525edb8e8 100644
--- a/resources/assets/js/app.js
+++ b/resources/assets/js/app.js
@@ -9,6 +9,7 @@ import '~/components'
 
 Vue.config.productionTip = false
 
+/* eslint-disable no-new */
 new Vue({
   i18n,
   store,
diff --git a/resources/assets/js/components/App.vue b/resources/assets/js/components/App.vue
index 39b3ad715..4d6ab1186 100644
--- a/resources/assets/js/components/App.vue
+++ b/resources/assets/js/components/App.vue
@@ -3,7 +3,7 @@
     <loading ref="loading"/>
 
     <transition name="page" mode="out-in">
-      <component v-if="layout" :is="layout"></component>
+      <component v-if="layout" :is="layout"/>
     </transition>
   </div>
 </template>
diff --git a/resources/assets/js/components/Button.vue b/resources/assets/js/components/Button.vue
index a50152742..9c206bb52 100644
--- a/resources/assets/js/components/Button.vue
+++ b/resources/assets/js/components/Button.vue
@@ -1,10 +1,10 @@
 <template>
-  <button :type="nativeType" :disabled="loading" class="btn" :class="{
+  <button :type="nativeType" :disabled="loading" :class="{
     [`btn-${type}`]: true,
     'btn-block': block,
     'btn-lg': large,
     'btn-loading': loading
-  }">
+  }" class="btn">
     <slot/>
   </button>
 </template>
@@ -29,8 +29,15 @@ export default {
       default: false
     },
 
-    block: Boolean,
-    large: Boolean
+    block: {
+      type: Boolean,
+      default: false
+    },
+
+    large: {
+      type: Boolean,
+      default: false
+    }
   }
 }
 </script>
diff --git a/resources/assets/js/components/Card.vue b/resources/assets/js/components/Card.vue
index 67bd91ca4..bbf9ab742 100644
--- a/resources/assets/js/components/Card.vue
+++ b/resources/assets/js/components/Card.vue
@@ -14,6 +14,8 @@
 export default {
   name: 'Card',
 
-  props: ['title']
+  props: {
+    title: { type: String, default: null }
+  }
 }
 </script>
diff --git a/resources/assets/js/components/Checkbox.vue b/resources/assets/js/components/Checkbox.vue
index 6f42d059e..49b8a34de 100644
--- a/resources/assets/js/components/Checkbox.vue
+++ b/resources/assets/js/components/Checkbox.vue
@@ -1,14 +1,13 @@
 <template>
-  <div class="custom-control custom-checkbox">
+  <div class="custom-control custom-checkbox d-flex">
     <input
-      type="checkbox"
       :name="name"
-      @click="handleClick"
       :checked="internalValue"
+      :id="id || name"
+      type="checkbox"
       class="custom-control-input"
-      :id="id || name || 'checkbox'"
-    >
-    <label class="custom-control-label" :for="id || name || 'checkbox'">
+      @click="handleClick">
+    <label :for="id || name" class="custom-control-label my-auto">
       <slot/>
     </label>
   </div>
@@ -19,24 +18,16 @@ export default {
   name: 'Checkbox',
 
   props: {
-    id: String,
-    name: String,
-    value: Boolean,
-    checked: Boolean
+    id: { type: String, default: null },
+    name: { type: String, default: 'checkbox' },
+    value: { type: Boolean, default: false },
+    checked: { type: Boolean, default: false }
   },
 
   data: () => ({
     internalValue: false
   }),
 
-  created () {
-    this.internalValue = this.value
-
-    if ('checked' in this.$options.propsData) {
-      this.internalValue = this.checked
-    }
-  },
-
   watch: {
     value (val) {
       this.internalValue = val
@@ -53,6 +44,14 @@ export default {
     }
   },
 
+  created () {
+    this.internalValue = this.value
+
+    if ('checked' in this.$options.propsData) {
+      this.internalValue = this.checked
+    }
+  },
+
   methods: {
     handleClick (e) {
       this.$emit('click', e)
diff --git a/resources/assets/js/components/Loading.vue b/resources/assets/js/components/Loading.vue
index 829606149..97b29f808 100644
--- a/resources/assets/js/components/Loading.vue
+++ b/resources/assets/js/components/Loading.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="progress" :style="{
+  <div :style="{
     width: `${percent}%`,
     height: height,
     opacity: show ? 1 : 0,
     'background-color': canSuccess ? color : failedColor
-  }"/>
+  }" class="progress"/>
 </template>
 
 <script>
diff --git a/resources/assets/js/components/LocaleDropdown.vue b/resources/assets/js/components/LocaleDropdown.vue
index ec6c6f74c..b3d67fd43 100644
--- a/resources/assets/js/components/LocaleDropdown.vue
+++ b/resources/assets/js/components/LocaleDropdown.vue
@@ -1,12 +1,12 @@
 <template>
   <li class="nav-item dropdown">
     <a class="nav-link dropdown-toggle" href="#" role="button"
-      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+       data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       {{ locales[locale] }}
     </a>
     <div class="dropdown-menu">
-      <a v-for="(value, key) in locales" class="dropdown-item" href="#"
-        @click.prevent="setLocale(key)">
+      <a v-for="(value, key) in locales" :key="key" class="dropdown-item" href="#"
+         @click.prevent="setLocale(key)">
         {{ value }}
       </a>
     </div>
diff --git a/resources/assets/js/components/LoginWithGithub.vue b/resources/assets/js/components/LoginWithGithub.vue
index 4db11aed3..fec062468 100644
--- a/resources/assets/js/components/LoginWithGithub.vue
+++ b/resources/assets/js/components/LoginWithGithub.vue
@@ -1,5 +1,5 @@
 <template>
-  <button v-if="githubAuth" @click="login" type="button" class="btn btn-dark ml-auto">
+  <button v-if="githubAuth" class="btn btn-dark ml-auto" type="button" @click="login">
     {{ $t('login_with') }}
     <fa :icon="['fab', 'github']"/>
   </button>
diff --git a/resources/assets/js/components/Navbar.vue b/resources/assets/js/components/Navbar.vue
index 231d9d171..71c3aaced 100644
--- a/resources/assets/js/components/Navbar.vue
+++ b/resources/assets/js/components/Navbar.vue
@@ -5,14 +5,11 @@
         {{ appName }}
       </router-link>
 
-      <button class="navbar-toggler" type="button" data-toggle="collapse"
-        data-target="#navbarToggler" aria-controls="navbarToggler"
-        aria-expanded="false" :aria-label="$t('toggle_navigation')"
-      >
-        <span class="navbar-toggler-icon"></span>
+      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false">
+        <span class="navbar-toggler-icon"/>
       </button>
 
-      <div class="collapse navbar-collapse" id="navbarToggler">
+      <div id="navbarToggler" class="collapse navbar-collapse">
         <ul class="navbar-nav">
           <locale-dropdown/>
           <!-- <li class="nav-item">
@@ -24,7 +21,7 @@
           <!-- Authenticated -->
           <li v-if="user" class="nav-item dropdown">
             <a class="nav-link dropdown-toggle text-dark"
-              href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+               href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               <img :src="user.photo_url" class="rounded-circle profile-photo mr-1">
               {{ user.name }}
             </a>
@@ -34,8 +31,8 @@
                 {{ $t('settings') }}
               </router-link>
 
-              <div class="dropdown-divider"></div>
-              <a @click.prevent="logout" class="dropdown-item pl-3"  href="#">
+              <div class="dropdown-divider"/>
+              <a href="#" class="dropdown-item pl-3" @click.prevent="logout">
                 <fa icon="sign-out-alt" fixed-width/>
                 {{ $t('logout') }}
               </a>
@@ -65,6 +62,10 @@ import { mapGetters } from 'vuex'
 import LocaleDropdown from './LocaleDropdown'
 
 export default {
+  components: {
+    LocaleDropdown
+  },
+
   data: () => ({
     appName: window.config.appName
   }),
@@ -73,10 +74,6 @@ export default {
     user: 'auth/user'
   }),
 
-  components: {
-    LocaleDropdown
-  },
-
   methods: {
     async logout () {
       // Log out the user.
diff --git a/resources/assets/js/layouts/basic.vue b/resources/assets/js/layouts/basic.vue
index 8eb2298d3..b308e352b 100644
--- a/resources/assets/js/layouts/basic.vue
+++ b/resources/assets/js/layouts/basic.vue
@@ -28,4 +28,3 @@ export default {
   }
 }
 </style>
-
diff --git a/resources/assets/js/pages/auth/login.vue b/resources/assets/js/pages/auth/login.vue
index 8240ad917..71dbdce4a 100644
--- a/resources/assets/js/pages/auth/login.vue
+++ b/resources/assets/js/pages/auth/login.vue
@@ -7,8 +7,7 @@
           <div class="form-group row">
             <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
             <div class="col-md-7">
-              <input v-model="form.email" type="email" name="email" class="form-control"
-                :class="{ 'is-invalid': form.errors.has('email') }">
+              <input v-model="form.email" :class="{ 'is-invalid': form.errors.has('email') }" class="form-control" type="email" name="email">
               <has-error :form="form" field="email"/>
             </div>
           </div>
@@ -17,15 +16,14 @@
           <div class="form-group row">
             <label class="col-md-3 col-form-label text-md-right">{{ $t('password') }}</label>
             <div class="col-md-7">
-              <input v-model="form.password" type="password" name="password" class="form-control"
-                :class="{ 'is-invalid': form.errors.has('password') }">
+              <input v-model="form.password" :class="{ 'is-invalid': form.errors.has('password') }" class="form-control" type="password" name="password">
               <has-error :form="form" field="password"/>
             </div>
           </div>
 
           <!-- Remember Me -->
           <div class="form-group row">
-            <div class="col-md-3"></div>
+            <div class="col-md-3"/>
             <div class="col-md-7 d-flex">
               <checkbox v-model="remember" name="remember">
                 {{ $t('remember_me') }}
diff --git a/resources/assets/js/pages/auth/password/email.vue b/resources/assets/js/pages/auth/password/email.vue
index c2f17f9b5..7502bec34 100644
--- a/resources/assets/js/pages/auth/password/email.vue
+++ b/resources/assets/js/pages/auth/password/email.vue
@@ -9,8 +9,7 @@
           <div class="form-group row">
             <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
             <div class="col-md-7">
-              <input v-model="form.email" type="email" name="email" class="form-control"
-                :class="{ 'is-invalid': form.errors.has('email') }">
+              <input v-model="form.email" :class="{ 'is-invalid': form.errors.has('email') }" class="form-control" type="email" name="email">
               <has-error :form="form" field="email"/>
             </div>
           </div>
diff --git a/resources/assets/js/pages/auth/password/reset.vue b/resources/assets/js/pages/auth/password/reset.vue
index a99d55dc2..09d4edec5 100644
--- a/resources/assets/js/pages/auth/password/reset.vue
+++ b/resources/assets/js/pages/auth/password/reset.vue
@@ -9,8 +9,7 @@
           <div class="form-group row">
             <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
             <div class="col-md-7">
-              <input v-model="form.email" type="email" name="email" class="form-control"
-                :class="{ 'is-invalid': form.errors.has('email') }" readonly>
+              <input v-model="form.email" :class="{ 'is-invalid': form.errors.has('email') }" class="form-control" type="email" name="email" readonly>
               <has-error :form="form" field="email"/>
             </div>
           </div>
@@ -19,8 +18,7 @@
           <div class="form-group row">
             <label class="col-md-3 col-form-label text-md-right">{{ $t('password') }}</label>
             <div class="col-md-7">
-              <input v-model="form.password" type="password" name="password" class="form-control"
-                :class="{ 'is-invalid': form.errors.has('password') }">
+              <input v-model="form.password" :class="{ 'is-invalid': form.errors.has('password') }" class="form-control" type="password" name="password">
               <has-error :form="form" field="password"/>
             </div>
           </div>
@@ -29,8 +27,7 @@
           <div class="form-group row">
             <label class="col-md-3 col-form-label text-md-right">{{ $t('confirm_password') }}</label>
             <div class="col-md-7">
-              <input v-model="form.password_confirmation" type="password" name="password_confirmation" class="form-control"
-                :class="{ 'is-invalid': form.errors.has('password_confirmation') }">
+              <input v-model="form.password_confirmation" :class="{ 'is-invalid': form.errors.has('password_confirmation') }" class="form-control" type="password" name="password_confirmation">
               <has-error :form="form" field="password_confirmation"/>
             </div>
           </div>
diff --git a/resources/assets/js/pages/auth/register.vue b/resources/assets/js/pages/auth/register.vue
index ebf521812..e2f516ccf 100644
--- a/resources/assets/js/pages/auth/register.vue
+++ b/resources/assets/js/pages/auth/register.vue
@@ -7,8 +7,7 @@
           <div class="form-group row">
             <label class="col-md-3 col-form-label text-md-right">{{ $t('name') }}</label>
             <div class="col-md-7">
-              <input v-model="form.name" type="text" name="name" class="form-control"
-                :class="{ 'is-invalid': form.errors.has('name') }">
+              <input v-model="form.name" :class="{ 'is-invalid': form.errors.has('name') }" class="form-control" type="text" name="name">
               <has-error :form="form" field="name"/>
             </div>
           </div>
@@ -17,8 +16,7 @@
           <div class="form-group row">
             <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
             <div class="col-md-7">
-              <input v-model="form.email" type="email" name="email" class="form-control"
-                :class="{ 'is-invalid': form.errors.has('email') }">
+              <input v-model="form.email" :class="{ 'is-invalid': form.errors.has('email') }" class="form-control" type="email" name="email">
               <has-error :form="form" field="email"/>
             </div>
           </div>
@@ -27,8 +25,7 @@
           <div class="form-group row">
             <label class="col-md-3 col-form-label text-md-right">{{ $t('password') }}</label>
             <div class="col-md-7">
-              <input v-model="form.password" type="password" name="password" class="form-control"
-                :class="{ 'is-invalid': form.errors.has('password') }">
+              <input v-model="form.password" :class="{ 'is-invalid': form.errors.has('password') }" class="form-control" type="password" name="password">
               <has-error :form="form" field="password"/>
             </div>
           </div>
@@ -37,8 +34,7 @@
           <div class="form-group row">
             <label class="col-md-3 col-form-label text-md-right">{{ $t('confirm_password') }}</label>
             <div class="col-md-7">
-              <input v-model="form.password_confirmation" type="password" name="password_confirmation" class="form-control"
-                :class="{ 'is-invalid': form.errors.has('password_confirmation') }">
+              <input v-model="form.password_confirmation" :class="{ 'is-invalid': form.errors.has('password_confirmation') }" class="form-control" type="password" name="password_confirmation">
               <has-error :form="form" field="password_confirmation"/>
             </div>
           </div>
@@ -90,7 +86,7 @@ export default {
       const { data } = await this.form.post('/api/register')
 
       // Log in the user.
-      const { data: { token }} = await this.form.post('/api/login')
+      const { data: { token } } = await this.form.post('/api/login')
 
       // Save the token.
       this.$store.dispatch('auth/saveToken', { token })
diff --git a/resources/assets/js/pages/settings/index.vue b/resources/assets/js/pages/settings/index.vue
index afc10bd97..12d576072 100644
--- a/resources/assets/js/pages/settings/index.vue
+++ b/resources/assets/js/pages/settings/index.vue
@@ -3,7 +3,7 @@
     <div class="col-md-3">
       <card :title="$t('settings')" class="settings-card">
         <ul class="nav flex-column nav-pills">
-          <li v-for="tab in tabs" class="nav-item">
+          <li v-for="tab in tabs" :key="tab.route" class="nav-item">
             <router-link :to="{ name: tab.route }" class="nav-link" active-class="active">
               <fa :icon="tab.icon" fixed-width/>
               {{ tab.name }}
diff --git a/resources/assets/js/pages/settings/password.vue b/resources/assets/js/pages/settings/password.vue
index daa22e3c7..0f90fc21b 100644
--- a/resources/assets/js/pages/settings/password.vue
+++ b/resources/assets/js/pages/settings/password.vue
@@ -7,8 +7,7 @@
       <div class="form-group row">
         <label class="col-md-3 col-form-label text-md-right">{{ $t('new_password') }}</label>
         <div class="col-md-7">
-          <input v-model="form.password" type="password" name="password" class="form-control"
-            :class="{ 'is-invalid': form.errors.has('password') }">
+          <input v-model="form.password" :class="{ 'is-invalid': form.errors.has('password') }" class="form-control" type="password" name="password">
           <has-error :form="form" field="password"/>
         </div>
       </div>
@@ -17,8 +16,7 @@
       <div class="form-group row">
         <label class="col-md-3 col-form-label text-md-right">{{ $t('confirm_password') }}</label>
         <div class="col-md-7">
-          <input v-model="form.password_confirmation" type="password" name="password_confirmation" class="form-control"
-            :class="{ 'is-invalid': form.errors.has('password_confirmation') }">
+          <input v-model="form.password_confirmation" :class="{ 'is-invalid': form.errors.has('password_confirmation') }" class="form-control" type="password" name="password_confirmation">
           <has-error :form="form" field="password_confirmation"/>
         </div>
       </div>
@@ -26,7 +24,7 @@
       <!-- Submit Button -->
       <div class="form-group row">
         <div class="col-md-9 ml-md-auto">
-          <v-button type="success" :loading="form.busy">{{ $t('update') }}</v-button>
+          <v-button :loading="form.busy" type="success">{{ $t('update') }}</v-button>
         </div>
       </div>
     </form>
diff --git a/resources/assets/js/pages/settings/profile.vue b/resources/assets/js/pages/settings/profile.vue
index 8e0160f3d..ba1b2e4a9 100644
--- a/resources/assets/js/pages/settings/profile.vue
+++ b/resources/assets/js/pages/settings/profile.vue
@@ -7,8 +7,7 @@
       <div class="form-group row">
         <label class="col-md-3 col-form-label text-md-right">{{ $t('name') }}</label>
         <div class="col-md-7">
-          <input v-model="form.name" type="text" name="name" class="form-control"
-            :class="{ 'is-invalid': form.errors.has('name') }">
+          <input v-model="form.name" :class="{ 'is-invalid': form.errors.has('name') }" class="form-control" type="text" name="name">
           <has-error :form="form" field="name"/>
         </div>
       </div>
@@ -17,8 +16,7 @@
       <div class="form-group row">
         <label class="col-md-3 col-form-label text-md-right">{{ $t('email') }}</label>
         <div class="col-md-7">
-          <input v-model="form.email" type="email" name="email" class="form-control"
-            :class="{ 'is-invalid': form.errors.has('email') }">
+          <input v-model="form.email" :class="{ 'is-invalid': form.errors.has('email') }" class="form-control" type="email" name="email">
           <has-error :form="form" field="email" />
         </div>
       </div>
@@ -26,7 +24,7 @@
       <!-- Submit Button -->
       <div class="form-group row">
         <div class="col-md-9 ml-md-auto">
-          <v-button type="success" :loading="form.busy">{{ $t('update') }}</v-button>
+          <v-button :loading="form.busy" type="success">{{ $t('update') }}</v-button>
         </div>
       </div>
     </form>
diff --git a/resources/assets/js/pages/welcome.vue b/resources/assets/js/pages/welcome.vue
index fe3337bc5..9b5a3b26a 100644
--- a/resources/assets/js/pages/welcome.vue
+++ b/resources/assets/js/pages/welcome.vue
@@ -42,12 +42,12 @@ export default {
     return { title: this.$t('home') }
   },
 
-  computed: mapGetters({
-    authenticated: 'auth/check'
-  }),
-
   data: () => ({
     title: window.config.appName
+  }),
+
+  computed: mapGetters({
+    authenticated: 'auth/check'
   })
 }
 </script>
diff --git a/resources/assets/js/plugins/fontawesome.js b/resources/assets/js/plugins/fontawesome.js
index 9de0f03f7..45b4e322f 100644
--- a/resources/assets/js/plugins/fontawesome.js
+++ b/resources/assets/js/plugins/fontawesome.js
@@ -2,8 +2,6 @@ import Vue from 'vue'
 import fontawesome from '@fortawesome/fontawesome'
 import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
 
-Vue.component('fa', FontAwesomeIcon)
-
 // import { } from '@fortawesome/fontawesome-free-regular/shakable.es'
 
 import {
@@ -17,3 +15,5 @@ import {
 fontawesome.library.add(
   faUser, faLock, faSignOutAlt, faCog, faGithub
 )
+
+Vue.component('fa', FontAwesomeIcon)
diff --git a/resources/assets/js/router/index.js b/resources/assets/js/router/index.js
index b43b817ce..0216062b4 100644
--- a/resources/assets/js/router/index.js
+++ b/resources/assets/js/router/index.js
@@ -130,9 +130,9 @@ function callMiddleware (middleware, to, from, next) {
  * @param  {Array} components
  * @return {Array}
  */
-async function resolveComponents (components) {
-  return await Promise.all(components.map(async component => {
-    return typeof component === 'function' ? await component() : component
+function resolveComponents (components) {
+  return Promise.all(components.map(component => {
+    return typeof component === 'function' ? component() : component
   }))
 }
 
diff --git a/resources/assets/js/router/routes.js b/resources/assets/js/router/routes.js
index ce346f4ae..c54f29a09 100644
--- a/resources/assets/js/router/routes.js
+++ b/resources/assets/js/router/routes.js
@@ -19,11 +19,13 @@ export default [
   { path: '/password/reset/:token', name: 'password.reset', component: PasswordReset },
 
   { path: '/home', name: 'home', component: Home },
-  { path: '/settings', component: Settings, children: [
-    { path: '', redirect: { name: 'settings.profile' }},
-    { path: 'profile', name: 'settings.profile', component: SettingsProfile },
-    { path: 'password', name: 'settings.password', component: SettingsPassword }
-  ] },
+  { path: '/settings',
+    component: Settings,
+    children: [
+      { path: '', redirect: { name: 'settings.profile' } },
+      { path: 'profile', name: 'settings.profile', component: SettingsProfile },
+      { path: 'password', name: 'settings.password', component: SettingsPassword }
+    ] },
 
   { path: '*', component: NotFound }
 ]