Reorganize resources/js folder

resources/js/app.js

@@ -1,38 +1,22 @@
 import Vue          from 'vue'
 import VueRouter    from 'vue-router'
-import VueInternationalization from 'vue-i18n';
-import Locale from './vue-i18n-locales.generated';
-
-Vue.use(VueRouter)
-Vue.use(VueInternationalization);
+import axios        from './packages/axios'
+import i18n         from './packages/i18n'
+import FontAwesome  from './packages/fontawesome'
 
 import App              from './views/App'
-import Login            from './views/Login'
-import Register         from './views/Register'
 import Accounts         from './views/Accounts'
-import Create           from './views/Create'
-import Edit             from './views/Edit'
+import Create           from './views/twofaccounts/Create'
+import Edit             from './views/twofaccounts/Edit'
+import Login            from './views/auth/Login'
+import Register         from './views/auth/Register'
 import PasswordRequest  from './views/auth/password/Request'
 import PasswordReset    from './views/auth/password/Reset'
 import NotFound         from './views/Error'
 
 import './components'
 
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faPlus, faQrcode, faImage, faTrash, faEdit, faCheck, faLock, faLockOpen, faSearch } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-
-library.add(faPlus, faQrcode, faImage, faTrash, faEdit, faCheck, faLock, faLockOpen, faSearch);
-
-Vue.component('font-awesome-icon', FontAwesomeIcon)
-
-// const lang = document.documentElement.lang.substr(0, 2);
-const lang = 'en';
-
-const i18n = new VueInternationalization({
-    locale: lang,
-    messages: Locale
-});
+Vue.use(VueRouter)
 
 const router = new VueRouter({
     mode: 'history',

resources/js/packages/axios.js

@@ -0,0 +1,13 @@
+
+axios.interceptors.request.use(request => {
+
+    const token = localStorage.getItem('jwt')
+
+    if(token) {
+        request.headers.common['Authorization'] = 'Bearer ' + token
+    }
+
+    request.headers.common['Content-Type'] = 'application/json'
+
+    return request
+})

resources/js/packages/fontawesome.js

@@ -0,0 +1,31 @@
+import Vue  from 'vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+
+import {
+    faPlus,
+    faQrcode,
+    faImage,
+    faTrash,
+    faEdit,
+    faCheck,
+    faLock,
+    faLockOpen,
+    faSearch
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+    faPlus,
+    faQrcode,
+    faImage,
+    faTrash,
+    faEdit,
+    faCheck,
+    faLock,
+    faLockOpen,
+    faSearch
+);
+
+Vue.component('font-awesome-icon', FontAwesomeIcon)

resources/js/packages/i18n.js

@@ -0,0 +1,16 @@
+import Vue  from 'vue'
+import VueInternationalization from 'vue-i18n';
+import Locale from './vue-i18n-locales.generated';
+
+
+Vue.use(VueInternationalization);
+
+// const lang = document.documentElement.lang.substr(0, 2);
+const lang = 'en';
+
+const i18n = new VueInternationalization({
+    locale: lang,
+    messages: Locale
+});
+
+export default i18n

resources/js/vue-i18n-locales.generated.js → resources/js/packages/vue-i18n-locales.generated.js

@@ -18,11 +18,12 @@ export default {
                 "already_register": "Already registered?",
                 "password_do_not_match": "Password do not match",
                 "forgot_your_password": "Forgot your password?",
-                "request_password_reset": "Request a password reset"
-            },
-            "send_password_reset_link": "Send password reset link",
-            "reset_password": "Reset your password",
-            "new_password": "New password"
+                "request_password_reset": "Request a password reset",
+                "reset_password": "Reset password",
+                "new_password": "New password",
+                "change_password": "Change password",
+                "send_password_reset_link": "Send password reset link"
+            }
         },
         "commons": {
             "cancel": "Cancel"

resources/js/views/Accounts.vue

@@ -73,17 +73,7 @@
                 </div>
             </div>
             <div class="content has-text-centered">
-                <span v-if="token">
-                    {{ $t('auth.hello', {username: username}) }} <a class="has-text-grey" @click="logout">{{ $t('auth.sign_out') }}</a>
-                </span>
-                <span v-else>
-                    <router-link :to="{ name: 'login' }" class="button is-black">
-                        {{ $t('auth.sign_in') }}
-                    </router-link>
-                    <router-link :to="{ name: 'register' }" class="button is-black">
-                        {{ $t('auth.register') }}
-                    </router-link>
-                </span>
+                {{ $t('auth.hello', {username: username}) }} <a class="has-text-grey" @click="logout">{{ $t('auth.sign_out') }}</a>
             </div>
         </footer>
     </div>
@@ -91,6 +81,7 @@
 
 
 <script>
+    // import axios from '../packages/axios'
     import Modal from '../components/Modal'
     import TwofaccountShow from '../components/TwofaccountShow'
     import OneTimePassword from '../components/OneTimePassword'
@@ -124,11 +115,8 @@
         props: ['InitialEditMode'],
 
         mounted(){
-            this.token = localStorage.getItem('jwt')
-            this.username = localStorage.getItem('user')
 
-            axios.defaults.headers.common['Content-Type'] = 'application/json'
-            axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.token
+            this.username = localStorage.getItem('user')
 
             axios.get('api/twofaccounts').then(response => {
                 response.data.forEach((data) => {
@@ -166,9 +154,6 @@
             getAccount: function (id) {
                 let accountId = id
 
-                axios.defaults.headers.common['Content-Type'] = 'application/json'
-                axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.token
-
                 axios.get('api/twofaccounts/' + id).then(response => {
 
                     this.twofaccount.id = response.data.id
@@ -194,9 +179,6 @@
             deleteAccount:  function (id) {
                 if(confirm(this.$t('twofaccounts.confirm.delete'))) {
 
-                    axios.defaults.headers.common['Content-Type'] = 'application/json'
-                    axios.defaults.headers.common['Authorization'] = 'Bearer ' + this.token
-
                     axios.delete('/api/twofaccounts/' + id)
 
                     this.accounts.splice(this.accounts.findIndex(x => x.id === id), 1);

resources/js/views/Login.vue → resources/js/views/auth/Login.vue

@@ -61,8 +61,6 @@
                     password: this.password
                 })
                 .then(response => {
-                    localStorage.setItem('user',response.data.message.name)
-                    localStorage.setItem('jwt',response.data.message.token)
 
                     if (localStorage.getItem('jwt') != null){
                         this.$router.go('/');

resources/js/views/Register.vue → resources/js/views/auth/Register.vue

@@ -92,9 +92,6 @@
                     password_confirmation : this.password_confirmation
                 })
                 .then(response => {
-                    localStorage.setItem('user',response.data.message.name)
-                    localStorage.setItem('jwt',response.data.message.token)
-
                     if (localStorage.getItem('jwt') != null){
                         this.$router.go('/');
                     }

resources/js/views/Create.vue → resources/js/views/twofaccounts/Create.vue

@@ -111,11 +111,6 @@
                 this.twofaccount.icon = this.tempIcon
 
                 // store the account
-                let token = localStorage.getItem('jwt')
-
-                axios.defaults.headers.common['Content-Type'] = 'application/json'
-                axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
-
                 axios.post('/api/twofaccounts', this.twofaccount)
                 .then(response => {
                     this.$router.push({name: 'accounts', params: { InitialEditMode: false }});
@@ -141,11 +136,6 @@
 
             uploadQrcode(event) {
 
-                let token = localStorage.getItem('jwt')
-
-                axios.defaults.headers.common['Content-Type'] = 'application/json'
-                axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
-
                 let imgdata = new FormData();
 
                 imgdata.append('qrcode', this.$refs.qrcodeInput.files[0]); 
@@ -174,11 +164,6 @@
 
             uploadIcon(event) {
 
-                let token = localStorage.getItem('jwt')
-
-                axios.defaults.headers.common['Content-Type'] = 'application/json'
-                axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
-
                 // clean possible already uploaded temp icon
                 if( this.tempIcon ) {
                     this.deleteIcon()
@@ -214,11 +199,6 @@
             deleteIcon(event) {
 
                 if(this.tempIcon) {
-                    let token = localStorage.getItem('jwt')
-
-                    axios.defaults.headers.common['Content-Type'] = 'application/json'
-                    axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
-
                     axios.delete('/api/icon/delete/' + this.tempIcon).then(response => {
                             this.tempIcon = ''
                         }

resources/js/views/Edit.vue → resources/js/views/twofaccounts/Edit.vue

@@ -73,11 +73,6 @@
 
         methods: {
             getAccount: function () {
-                let token = localStorage.getItem('jwt')
-
-                axios.defaults.headers.common['Content-Type'] = 'application/json'
-                axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
-
                 axios.get('/api/twofaccounts/' + this.$route.params.twofaccountId).then(response => {
                     this.twofaccount = response.data
                     this.twofaccountExists = true
@@ -109,11 +104,6 @@
                 }
 
                 // store the account
-                let token = localStorage.getItem('jwt')
-
-                axios.defaults.headers.common['Content-Type'] = 'application/json'
-                axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
-
                 axios.put('/api/twofaccounts/' + this.$route.params.twofaccountId, this.twofaccount)
                 .then(response => {
                     this.$router.push({name: 'accounts', params: { InitialEditMode: true }});
@@ -142,11 +132,6 @@
 
             uploadIcon(event) {
 
-                let token = localStorage.getItem('jwt')
-
-                axios.defaults.headers.common['Content-Type'] = 'application/json'
-                axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
-
                 // clean possible tempIcon but keep original one
                 // if( this.tempIcon && this.tempIcon !== this.twofaccount.icon ) {
                     this.deleteIcon()
@@ -181,11 +166,6 @@
             deleteIcon(event) {
 
                 if( this.tempIcon && this.tempIcon !== this.twofaccount.icon ) {
-                    let token = localStorage.getItem('jwt')
-
-                    axios.defaults.headers.common['Content-Type'] = 'application/json'
-                    axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
-
                     axios.delete('/api/icon/delete/' + this.tempIcon)
                         .then(response => {
                             this.tempIcon = ''

webpack.mix.js

@@ -13,7 +13,7 @@ const mix = require('laravel-mix');
 
 mix.js('resources/js/app.js', 'public/js')
     .js('resources/js/bootstrap.js', 'public/js')
-    .js('resources/js/vue-i18n-locales.generated.js', 'public/js')
+    .js('resources/js/packages/vue-i18n-locales.generated.js', 'public/js')
     .sass('resources/sass/app.scss', 'public/css');
 
 if (mix.inProduction()) {