implementing vue router

2026-04-05 18:23:48 +00:00 · 2020-04-06 20:45:56 +02:00
parent 01b399e4a6
commit bde58fbf60
9 changed files with 755 additions and 119 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -10383,6 +10383,11 @@
                "vue-style-loader": "^4.1.0"
            }
        },
+        "vue-router": {
+            "version": "3.1.6",
+            "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz",
+            "integrity": "sha512-GYhn2ynaZlysZMkFE5oCHRUTqE8BWs/a9YbKpNLi0i7xD6KG1EzDqpHQmv1F5gXjr8kL5iIVS8EOtRaVUEXTqA=="
+        },
        "vue-style-loader": {
            "version": "4.1.2",
            "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
        "vee-validate": "^3.2.5",
        "vue": "^2.6.10",
        "vue-i18n": "^8.16.0",
+        "vue-router": "^3.1.6",
        "vuex": "^3.0.1"
    }
 }
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,113 +1,11 @@
 {
    "/js/main.js": "/js/main.js",
    "/css/app.css": "/css/app.css",
-    "/js/main.e7f30bdbf0af3612b526.hot-update.js": "/js/main.e7f30bdbf0af3612b526.hot-update.js",
-    "/js/main.ff7c1c1321839e44327f.hot-update.js": "/js/main.ff7c1c1321839e44327f.hot-update.js",
-    "/js/main.53f0d016b94dcb1c715e.hot-update.js": "/js/main.53f0d016b94dcb1c715e.hot-update.js",
-    "/js/main.91dfc6fa641b9cd39c02.hot-update.js": "/js/main.91dfc6fa641b9cd39c02.hot-update.js",
-    "/js/main.667efc00994378e71d93.hot-update.js": "/js/main.667efc00994378e71d93.hot-update.js",
-    "/js/main.7692d2f34f77320bb11f.hot-update.js": "/js/main.7692d2f34f77320bb11f.hot-update.js",
-    "/js/main.7f69426c4fe2e8b497c6.hot-update.js": "/js/main.7f69426c4fe2e8b497c6.hot-update.js",
-    "/js/main.6fdca76d612e9a1f0d0b.hot-update.js": "/js/main.6fdca76d612e9a1f0d0b.hot-update.js",
-    "/js/main.c31ff848b09d13ca7c2d.hot-update.js": "/js/main.c31ff848b09d13ca7c2d.hot-update.js",
-    "/js/main.41b7087afdc9a8fa2918.hot-update.js": "/js/main.41b7087afdc9a8fa2918.hot-update.js",
-    "/js/main.da608518980a26060e6d.hot-update.js": "/js/main.da608518980a26060e6d.hot-update.js",
-    "/js/main.44865fca901443079e80.hot-update.js": "/js/main.44865fca901443079e80.hot-update.js",
-    "/js/main.34f68da0edd206bdf449.hot-update.js": "/js/main.34f68da0edd206bdf449.hot-update.js",
-    "/js/main.76e28a6cf1d089d14407.hot-update.js": "/js/main.76e28a6cf1d089d14407.hot-update.js",
-    "/js/main.42910696b2219784c525.hot-update.js": "/js/main.42910696b2219784c525.hot-update.js",
-    "/js/main.67b8b2d86326cbcc783e.hot-update.js": "/js/main.67b8b2d86326cbcc783e.hot-update.js",
-    "/js/main.2f6b86e9ae2e618eef5c.hot-update.js": "/js/main.2f6b86e9ae2e618eef5c.hot-update.js",
-    "/js/main.eb2e4334f35dc22ae007.hot-update.js": "/js/main.eb2e4334f35dc22ae007.hot-update.js",
-    "/js/main.993617a0d9fe5acd8d0c.hot-update.js": "/js/main.993617a0d9fe5acd8d0c.hot-update.js",
-    "/js/main.eb3f0ccc6ba4c70aa967.hot-update.js": "/js/main.eb3f0ccc6ba4c70aa967.hot-update.js",
-    "/js/main.489694c4592da3a41269.hot-update.js": "/js/main.489694c4592da3a41269.hot-update.js",
-    "/js/main.581b9bcbc6d41f76cc3a.hot-update.js": "/js/main.581b9bcbc6d41f76cc3a.hot-update.js",
-    "/js/main.cfc0762d114afd6424ff.hot-update.js": "/js/main.cfc0762d114afd6424ff.hot-update.js",
-    "/js/main.a7c716373eb673a7f285.hot-update.js": "/js/main.a7c716373eb673a7f285.hot-update.js",
-    "/js/main.e126d1845fd72a5c0161.hot-update.js": "/js/main.e126d1845fd72a5c0161.hot-update.js",
-    "/js/main.352e26546f4fe2821c2e.hot-update.js": "/js/main.352e26546f4fe2821c2e.hot-update.js",
-    "/js/main.922b31c6f37de4446969.hot-update.js": "/js/main.922b31c6f37de4446969.hot-update.js",
-    "/js/main.4b1be0b5c77c9901c35d.hot-update.js": "/js/main.4b1be0b5c77c9901c35d.hot-update.js",
-    "/js/main.3e2b02f36a075c87eeb8.hot-update.js": "/js/main.3e2b02f36a075c87eeb8.hot-update.js",
-    "/js/main.4af814c53a654a34e904.hot-update.js": "/js/main.4af814c53a654a34e904.hot-update.js",
-    "/js/main.6b3c398f901108d13836.hot-update.js": "/js/main.6b3c398f901108d13836.hot-update.js",
-    "/js/main.f41e53673d2e295978b4.hot-update.js": "/js/main.f41e53673d2e295978b4.hot-update.js",
-    "/js/main.5f840767e9c6130f5356.hot-update.js": "/js/main.5f840767e9c6130f5356.hot-update.js",
-    "/js/main.423db5f2e4dfc74a2964.hot-update.js": "/js/main.423db5f2e4dfc74a2964.hot-update.js",
-    "/js/main.12aff97caaae89cd3e8b.hot-update.js": "/js/main.12aff97caaae89cd3e8b.hot-update.js",
-    "/js/main.9f29f80eff6641f65abb.hot-update.js": "/js/main.9f29f80eff6641f65abb.hot-update.js",
-    "/js/main.4124c4b13d33dcae6e72.hot-update.js": "/js/main.4124c4b13d33dcae6e72.hot-update.js",
-    "/js/main.6ff4de79821f8c889c68.hot-update.js": "/js/main.6ff4de79821f8c889c68.hot-update.js",
-    "/js/main.28cb2b46fc2632c022a8.hot-update.js": "/js/main.28cb2b46fc2632c022a8.hot-update.js",
-    "/js/main.571327025a1eb083c342.hot-update.js": "/js/main.571327025a1eb083c342.hot-update.js",
-    "/js/main.d86182800943a3c3db27.hot-update.js": "/js/main.d86182800943a3c3db27.hot-update.js",
-    "/js/main.7003dbcc7ef9f0a96491.hot-update.js": "/js/main.7003dbcc7ef9f0a96491.hot-update.js",
-    "/js/main.979687c964f2b30c2af4.hot-update.js": "/js/main.979687c964f2b30c2af4.hot-update.js",
-    "/js/main.2ee700b6bd0e8c809f86.hot-update.js": "/js/main.2ee700b6bd0e8c809f86.hot-update.js",
-    "/js/main.592d60d033bfcef8b18b.hot-update.js": "/js/main.592d60d033bfcef8b18b.hot-update.js",
-    "/js/main.9ea1d9d63047b8a70709.hot-update.js": "/js/main.9ea1d9d63047b8a70709.hot-update.js",
-    "/js/main.211a33977506e5cc972c.hot-update.js": "/js/main.211a33977506e5cc972c.hot-update.js",
-    "/js/main.fc18269e0e2a57bfa749.hot-update.js": "/js/main.fc18269e0e2a57bfa749.hot-update.js",
-    "/js/main.2d96606dfee12bbf2e2d.hot-update.js": "/js/main.2d96606dfee12bbf2e2d.hot-update.js",
-    "/js/main.a73cc8c938ec93a42697.hot-update.js": "/js/main.a73cc8c938ec93a42697.hot-update.js",
-    "/js/main.8382c3a1344f4204753c.hot-update.js": "/js/main.8382c3a1344f4204753c.hot-update.js",
-    "/js/main.662361c9d724944e080b.hot-update.js": "/js/main.662361c9d724944e080b.hot-update.js",
-    "/js/main.e4e2534d512313077893.hot-update.js": "/js/main.e4e2534d512313077893.hot-update.js",
-    "/js/main.51f2667edf8b2add512c.hot-update.js": "/js/main.51f2667edf8b2add512c.hot-update.js",
-    "/js/main.4d741ebaa620d0385db6.hot-update.js": "/js/main.4d741ebaa620d0385db6.hot-update.js",
-    "/js/main.0c7c1626421531bfde30.hot-update.js": "/js/main.0c7c1626421531bfde30.hot-update.js",
-    "/js/main.5547baee42f7c43a9d68.hot-update.js": "/js/main.5547baee42f7c43a9d68.hot-update.js",
-    "/js/main.379b12896cb2d8dc5dfd.hot-update.js": "/js/main.379b12896cb2d8dc5dfd.hot-update.js",
-    "/js/main.69169d21cb9c798cee55.hot-update.js": "/js/main.69169d21cb9c798cee55.hot-update.js",
-    "/js/main.06e378419c44d61a73a9.hot-update.js": "/js/main.06e378419c44d61a73a9.hot-update.js",
-    "/js/main.abe45830bb5f74a87492.hot-update.js": "/js/main.abe45830bb5f74a87492.hot-update.js",
-    "/js/main.3c26bcfaac1764dcb695.hot-update.js": "/js/main.3c26bcfaac1764dcb695.hot-update.js",
-    "/js/main.42675c137c9be9cc6cbd.hot-update.js": "/js/main.42675c137c9be9cc6cbd.hot-update.js",
-    "/js/main.515ee9927d6ac79600a1.hot-update.js": "/js/main.515ee9927d6ac79600a1.hot-update.js",
-    "/js/main.fd96c8e9517a25f24267.hot-update.js": "/js/main.fd96c8e9517a25f24267.hot-update.js",
-    "/js/main.9ed1f46fd2a980db7a94.hot-update.js": "/js/main.9ed1f46fd2a980db7a94.hot-update.js",
-    "/js/main.e9a46e7cb63345e78d87.hot-update.js": "/js/main.e9a46e7cb63345e78d87.hot-update.js",
-    "/js/main.d15c62c50568d76a382b.hot-update.js": "/js/main.d15c62c50568d76a382b.hot-update.js",
-    "/js/main.6193797d6c1f8c17aaba.hot-update.js": "/js/main.6193797d6c1f8c17aaba.hot-update.js",
-    "/js/main.faf6ee5fbe0a15bd1d8e.hot-update.js": "/js/main.faf6ee5fbe0a15bd1d8e.hot-update.js",
-    "/js/main.b0717733357e2685ae52.hot-update.js": "/js/main.b0717733357e2685ae52.hot-update.js",
-    "/js/main.ce135143a7d035e2e6f0.hot-update.js": "/js/main.ce135143a7d035e2e6f0.hot-update.js",
-    "/js/main.4c778030c5c81c6af821.hot-update.js": "/js/main.4c778030c5c81c6af821.hot-update.js",
-    "/js/main.0550ffbc69d4d875ac6c.hot-update.js": "/js/main.0550ffbc69d4d875ac6c.hot-update.js",
-    "/js/main.6e17a1db946814f637a4.hot-update.js": "/js/main.6e17a1db946814f637a4.hot-update.js",
-    "/js/main.051eb6b27d0c22e1a411.hot-update.js": "/js/main.051eb6b27d0c22e1a411.hot-update.js",
-    "/js/main.4cd63de9d44c1d9f7135.hot-update.js": "/js/main.4cd63de9d44c1d9f7135.hot-update.js",
-    "/js/main.29edb50ea18b55b0c523.hot-update.js": "/js/main.29edb50ea18b55b0c523.hot-update.js",
-    "/js/main.6cdf442892e4847c4f60.hot-update.js": "/js/main.6cdf442892e4847c4f60.hot-update.js",
-    "/js/main.1c51f73087b631f16211.hot-update.js": "/js/main.1c51f73087b631f16211.hot-update.js",
-    "/js/main.1ec761ecadf80f27fffc.hot-update.js": "/js/main.1ec761ecadf80f27fffc.hot-update.js",
-    "/js/main.66e6478ece3f8c617c56.hot-update.js": "/js/main.66e6478ece3f8c617c56.hot-update.js",
-    "/js/main.f892cca704db04f9bd2d.hot-update.js": "/js/main.f892cca704db04f9bd2d.hot-update.js",
-    "/js/main.1a9e29684e0706bff64e.hot-update.js": "/js/main.1a9e29684e0706bff64e.hot-update.js",
-    "/js/main.5b40ae6cfcb202b440e8.hot-update.js": "/js/main.5b40ae6cfcb202b440e8.hot-update.js",
-    "/js/main.f8d02b41c8fe0ddd11f4.hot-update.js": "/js/main.f8d02b41c8fe0ddd11f4.hot-update.js",
-    "/js/main.c2f2d9ba582bf012b3ba.hot-update.js": "/js/main.c2f2d9ba582bf012b3ba.hot-update.js",
-    "/js/main.a4ed8e299894d0f3e170.hot-update.js": "/js/main.a4ed8e299894d0f3e170.hot-update.js",
-    "/js/main.f4d1aceb1493a95f0973.hot-update.js": "/js/main.f4d1aceb1493a95f0973.hot-update.js",
-    "/js/main.e8d9e02ad685eb0cb0a9.hot-update.js": "/js/main.e8d9e02ad685eb0cb0a9.hot-update.js",
-    "/js/main.b61ea149b4679eb735a4.hot-update.js": "/js/main.b61ea149b4679eb735a4.hot-update.js",
-    "/js/main.f4838e6c4cee6bbbd58c.hot-update.js": "/js/main.f4838e6c4cee6bbbd58c.hot-update.js",
-    "/js/main.9793a25b1cbcbbca608f.hot-update.js": "/js/main.9793a25b1cbcbbca608f.hot-update.js",
-    "/js/main.5f82981096301f7c14c6.hot-update.js": "/js/main.5f82981096301f7c14c6.hot-update.js",
-    "/js/main.147de5c546116b82b172.hot-update.js": "/js/main.147de5c546116b82b172.hot-update.js",
-    "/js/main.549924132e085db25697.hot-update.js": "/js/main.549924132e085db25697.hot-update.js",
-    "/js/main.6c6906253d93fd4e9f49.hot-update.js": "/js/main.6c6906253d93fd4e9f49.hot-update.js",
-    "/js/main.5c8df9ef886b2d973d09.hot-update.js": "/js/main.5c8df9ef886b2d973d09.hot-update.js",
-    "/js/main.50c83faee1c7cd29d33e.hot-update.js": "/js/main.50c83faee1c7cd29d33e.hot-update.js",
-    "/js/main.53e3daf64e1e8b0c63d0.hot-update.js": "/js/main.53e3daf64e1e8b0c63d0.hot-update.js",
-    "/js/main.6eb4044b179cc2a36255.hot-update.js": "/js/main.6eb4044b179cc2a36255.hot-update.js",
-    "/js/main.13219cf32b68d75b6fde.hot-update.js": "/js/main.13219cf32b68d75b6fde.hot-update.js",
-    "/js/main.2b85c9dfe8855a302b4c.hot-update.js": "/js/main.2b85c9dfe8855a302b4c.hot-update.js",
-    "/js/main.2945557ddcfe6d700857.hot-update.js": "/js/main.2945557ddcfe6d700857.hot-update.js",
-    "/js/main.3a0f92c1ad27a9f654b8.hot-update.js": "/js/main.3a0f92c1ad27a9f654b8.hot-update.js",
-    "/js/main.a3fd6ea744fa29df6f2f.hot-update.js": "/js/main.a3fd6ea744fa29df6f2f.hot-update.js",
-    "/js/main.fd4a172f187a86625543.hot-update.js": "/js/main.fd4a172f187a86625543.hot-update.js",
-    "/js/main.337958133c59a2cd4cde.hot-update.js": "/js/main.337958133c59a2cd4cde.hot-update.js",
-    "/js/main.df7e7e8e5a9f85c44e94.hot-update.js": "/js/main.df7e7e8e5a9f85c44e94.hot-update.js"
+    "/js/main.b11d3c337dcbe36de92d.hot-update.js": "/js/main.b11d3c337dcbe36de92d.hot-update.js",
+    "/js/main.30de75440af7c882f1a6.hot-update.js": "/js/main.30de75440af7c882f1a6.hot-update.js",
+    "/js/main.dd76ca2f4f2e44b89e28.hot-update.js": "/js/main.dd76ca2f4f2e44b89e28.hot-update.js",
+    "/js/main.efe95c75e3dc04fda73e.hot-update.js": "/js/main.efe95c75e3dc04fda73e.hot-update.js",
+    "/js/main.b2921e5ff3050aa390ce.hot-update.js": "/js/main.b2921e5ff3050aa390ce.hot-update.js",
+    "/js/main.a4123c79b197780e3ade.hot-update.js": "/js/main.a4123c79b197780e3ade.hot-update.js",
+    "/js/main.03410e4c21da6f93734b.hot-update.js": "/js/main.03410e4c21da6f93734b.hot-update.js"
 }
--- a/resources/js/components/VueFileManager.vue
+++ b/resources/js/components/VueFileManager.vue
@@ -1,38 +1,39 @@
 <template>
    <div id="vue-file-manager" :class="appSize">

+        <router-view />
        <!--Authentication pages-->
-        <Auth v-if="isGuest" />
+        <!--<Auth v-if="isGuest" />-->

-        <div v-if="isLogged" id="auth">
+        <!--<div v-if="isLogged" id="auth">

            <div id="popups">

-                <!--System alerts-->
+                &lt;!&ndash;System alerts&ndash;&gt;
                <Alert />

-                <!--Popup-->
+                &lt;!&ndash;Popup&ndash;&gt;
                <PopupMoveItem />

-                <!--Mobile Menu-->
+                &lt;!&ndash;Mobile Menu&ndash;&gt;
                <MobileOptionList />

-                <!--Background vignette-->
+                &lt;!&ndash;Background vignette&ndash;&gt;
                <Vignette />
            </div>

            <div id="application-wrapper">

-                <!--Navigation Sidebar-->
+                &lt;!&ndash;Navigation Sidebar&ndash;&gt;
                <Sidebar />

-                <!--User settings Page-->
+                &lt;!&ndash;User settings Page&ndash;&gt;
                <UserSettings v-if="isCurrentView('user-settings')"/>

-                <!--File page-->
+                &lt;!&ndash;File page&ndash;&gt;
                <FilesView v-if="isCurrentView('files')"/>
            </div>
-        </div>
+        </div>-->
    </div>
 </template>

--- a/resources/js/main.js
+++ b/resources/js/main.js
@@ -1,5 +1,7 @@
 require('./bootstrap');
 import Vue from 'vue'
+import VueRouter from 'vue-router'
+import router from './router'
 import i18n from './i18n/index.js'
 import App from './App.vue'
 import store from './store/index'
@@ -63,12 +65,14 @@ library.add(
 )
 Vue.component('FontAwesomeIcon', FontAwesomeIcon)

+Vue.use(VueRouter)
 Vue.use(Helpers)

 Vue.config.productionTip = false

 var vueFileManager = new Vue({
 	i18n,
+	router,
 	store,
 	data: {
 		config,
--- a/resources/js/router.js
+++ b/resources/js/router.js
@@ -0,0 +1,45 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+
+import Index from './views/Index'
+import SignUp from './views/SignUp'
+import ForgottenPassword from './views/ForgottenPassword'
+//import ForgottenPassword from './views/ForgottenPassword'
+
+Vue.use(Router)
+
+const router = new Router({
+    mode: 'history',
+    routes: [
+        {
+            name: 'index',
+            path: '/',
+            component: Index,
+        },
+        {
+            name: 'SignUp',
+            path: '/sign-up',
+            component: SignUp,
+        },
+        {
+            name: 'ForgottenPassword',
+            path: '/forgotten-password',
+            component: ForgottenPassword,
+        },
+        /*{
+            name: 'CreateNewPassword',
+            path: '/create-new-password',
+            component: CreateNewPassword,
+        },*/
+    ],
+    scrollBehavior(to, from, savedPosition) {
+
+        if (savedPosition) {
+            return savedPosition
+        } else {
+            return {x: 0, y: 0}
+        }
+    }
+})
+
+export default router
--- a/resources/js/views/ForgottenPassword.vue
+++ b/resources/js/views/ForgottenPassword.vue
@@ -0,0 +1,198 @@
+<template>
+    <AuthContentWrapper ref="auth">
+
+        <!--Forgotten your password?-->
+        <AuthContent name="forgotten-password" :visible="true">
+            <img class="logo" :src="config.app_logo" :alt="config.app_name">
+            <h1>{{ $t('page_forgotten_password.title') }}</h1>
+            <h2>{{ $t('page_forgotten_password.subtitle') }}</h2>
+
+            <ValidationObserver @submit.prevent="forgottenPassword" ref="forgotten_password" v-slot="{ invalid }"
+                                tag="form" class="form inline-form">
+                <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
+                                    v-slot="{ errors }">
+                    <input v-model="recoverEmail" :placeholder="$t('page_login.placeholder_email')" type="email"
+                           :class="{'is-error': errors[0]}"/>
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+
+                <AuthButton icon="chevron-right" :text="$t('page_forgotten_password.button_get_link')" :loading="isLoading" :disabled="isLoading"/>
+            </ValidationObserver>
+
+            <span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
+        </AuthContent>
+
+        <!--Password reset link sended-->
+        <AuthContent name="password-reset-link-sended" :visible="false">
+            <img class="logo" :src="config.app_logo" :alt="config.app_name">
+            <h1>{{ $t('page_forgotten_password.pass_sennded_title') }}</h1>
+            <h2>{{ $t('page_forgotten_password.pass_sennded_subtitle') }}</h2>
+
+            <span class="additional-link">{{ $t('page_forgotten_password.password_remember_text') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
+        </AuthContent>
+    </AuthContentWrapper>
+</template>
+
+<script>
+    import AuthContentWrapper from '@/components/VueFileManagerComponents/Auth/AuthContentWrapper'
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import AuthContent from '@/components/VueFileManagerComponents/Auth/AuthContent'
+    import AuthButton from '@/components/VueFileManagerComponents/Auth/AuthButton'
+    import {required} from 'vee-validate/dist/rules'
+    import {mapGetters} from 'vuex'
+    import axios from 'axios'
+
+    export default {
+        name: 'Auth',
+        components: {
+            AuthContentWrapper,
+            ValidationProvider,
+            ValidationObserver,
+            AuthContent,
+            AuthButton,
+            required,
+        },
+        computed: {
+            ...mapGetters(['config']),
+        },
+        data() {
+            return {
+                isLoading: false,
+                recoverEmail: '',
+            }
+        },
+        methods: {
+            goToAuthPage(slug) {
+
+                this.$refs.auth.$children.forEach(page => {
+
+                    // Hide current step
+                    page.isVisible = false
+
+                    if (page.$props.name === slug) {
+
+                        // Go to next step
+                        page.isVisible = true
+                    }
+                })
+            },
+            async forgottenPassword() {
+
+                // Validate fields
+                const isValid = await this.$refs.forgotten_password.validate();
+
+                if (!isValid) return;
+
+                // Start loading
+                this.isLoading = true
+
+                // Send request to get user reset link
+                axios
+                    .post(this.$store.getters.api + '/password/email', {
+                        email: this.recoverEmail
+                    })
+                    .then(() => {
+
+                        // End loading
+                        this.isLoading = false
+
+                        this.goToAuthPage('password-reset-link-sended')
+                    }).catch(error => {
+
+                        if (error.response.status == 422) {
+                            this.$refs.forgotten_password.setErrors({
+                                'E-Mail': error.response.data.message
+                            });
+                        }
+
+                        // End loading
+                        this.isLoading = false
+                    })
+            },
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/app.scss";
+    @import '@assets/vue-file-manager/_forms';
+
+    .auth-form {
+        text-align: center;
+        max-width: 600px;
+        padding: 25px 20px;
+        display: table-cell;
+        vertical-align: middle;
+
+        .user-avatar {
+            width: 100px;
+            height: 100px;
+            object-fit: cover;
+            margin-bottom: 20px;
+            border-radius: 8px;
+            box-shadow: 0 10px 30px rgba(25, 54, 60, 0.2);
+        }
+
+        .logo {
+            width: 120px;
+            margin-bottom: 20px;
+        }
+
+        h1 {
+            @include font-size(34);
+            font-weight: 800;
+            line-height: 1.2;
+            margin-bottom: 2px;
+            color: $text;
+        }
+
+        h2 {
+            @include font-size(23);
+            font-weight: 500;
+            margin-bottom: 50px;
+            color: $text;
+        }
+
+        .block-form {
+            margin-left: auto;
+            margin-right: auto;
+
+            .block-wrapper label {
+                text-align: right;
+            }
+        }
+    }
+
+    @media only screen and (min-width: 690px) and (max-width: 960px) {
+
+        .auth-form {
+            padding-left: 20%;
+            padding-right: 20%;
+        }
+    }
+
+    @media only screen and (max-width: 690px) {
+
+        .auth-form {
+            width: 100%;
+
+            h1 {
+                @include font-size(30);
+            }
+
+            h2 {
+                @include font-size(21);
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .auth-form {
+
+            h1, h2, .additional-link {
+                color: $dark_mode_text_primary;
+            }
+        }
+    }
+
+</style>
--- a/resources/js/views/Index.vue
+++ b/resources/js/views/Index.vue
@@ -0,0 +1,256 @@
+<template>
+    <AuthContentWrapper ref="auth">
+
+        <!--Log In by Email-->
+        <AuthContent name="log-in" :visible="true">
+            <img class="logo" :src="config.app_logo" :alt="config.app_name">
+            <h1>{{ $t('page_login.title') }}</h1>
+            <h2>{{ $t('page_login.subtitle') }}</h2>
+
+            <ValidationObserver @submit.prevent="logIn" ref="log_in" v-slot="{ invalid }" tag="form"
+                                class="form inline-form">
+                <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
+                                    v-slot="{ errors }">
+                    <input v-model="loginEmail" :placeholder="$t('page_login.placeholder_email')" type="email"
+                           :class="{'is-error': errors[0]}"/>
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+
+                <AuthButton icon="chevron-right" :text="$t('page_login.button_next')" :loading="isLoading" :disabled="isLoading"/>
+            </ValidationObserver>
+
+            <span v-if="config.userRegistration" class="additional-link">{{ $t('page_login.registration_text') }} <b
+                    @click="goToAuthPage('sign-up')">{{ $t('page_login.registration_button') }}</b></span>
+        </AuthContent>
+
+        <!--Log in By Password-->
+        <AuthContent name="sign-in" :visible="false">
+
+            <div class="user" v-if="checkedAccount">
+                <img class="user-avatar" :src="checkedAccount.avatar" :alt="checkedAccount.name">
+                <h1>{{ $t('page_sign_in.title', {name: checkedAccount.name}) }}</h1>
+                <h2>{{ $t('page_sign_in.subtitle') }}</h2>
+            </div>
+
+            <ValidationObserver @submit.prevent="singIn" ref="sign_in" v-slot="{ invalid }" tag="form"
+                                class="form inline-form">
+                <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="User Password" rules="required"
+                                    v-slot="{ errors }">
+                    <input v-model="loginPassword" :placeholder="$t('page_sign_in.placeholder_password')" type="password"
+                           :class="{'is-error': errors[0]}"/>
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+
+                <AuthButton icon="chevron-right" :text="$t('page_sign_in.button_log_in')" :loading="isLoading" :disabled="isLoading"/>
+            </ValidationObserver>
+
+            <span class="additional-link">{{ $t('page_sign_in.password_reset_text') }} <b @click="goToAuthPage('forgotten-password')">{{ $t('page_sign_in.password_reset_button') }}</b></span>
+        </AuthContent>
+    </AuthContentWrapper>
+</template>
+
+<script>
+    import AuthContentWrapper from '@/components/VueFileManagerComponents/Auth/AuthContentWrapper'
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import AuthContent from '@/components/VueFileManagerComponents/Auth/AuthContent'
+    import AuthButton from '@/components/VueFileManagerComponents/Auth/AuthButton'
+    import {required} from 'vee-validate/dist/rules'
+    import {mapGetters} from 'vuex'
+    import axios from 'axios'
+
+    export default {
+        name: 'Auth',
+        components: {
+            AuthContentWrapper,
+            ValidationProvider,
+            ValidationObserver,
+            AuthContent,
+            AuthButton,
+            required,
+        },
+        computed: {
+            ...mapGetters(['config']),
+        },
+        data() {
+            return {
+                isLoading: false,
+                checkedAccount: undefined,
+                loginPassword: '',
+                loginEmail: '',
+            }
+        },
+        methods: {
+            goToAuthPage(slug) {
+
+                this.$refs.auth.$children.forEach(page => {
+
+                    // Hide current step
+                    page.isVisible = false
+
+                    if (page.$props.name === slug) {
+
+                        // Go to next step
+                        page.isVisible = true
+                    }
+                })
+            },
+            async logIn() {
+
+                // Validate fields
+                const isValid = await this.$refs.log_in.validate();
+
+                if (!isValid) return;
+
+                // Start loading
+                this.isLoading = true
+
+                // Send request to get verify account
+                axios
+                    .post(this.$store.getters.api + '/user/check', {
+                        email: this.loginEmail,
+                    })
+                    .then(response => {
+
+                        // End loading
+                        this.isLoading = false
+
+                        this.checkedAccount = response.data
+                        this.goToAuthPage('sign-in')
+                    })
+                    .catch(error => {
+
+                        if (error.response.status == 404) {
+
+                            this.$refs.log_in.setErrors({
+                                'E-Mail': [error.response.data.message]
+                            });
+                        }
+
+                        // End loading
+                        this.isLoading = false
+                    })
+            },
+            async singIn() {
+
+                // Validate fields
+                const isValid = await this.$refs.sign_in.validate();
+
+                if (!isValid) return;
+
+                // Start loading
+                this.isLoading = true
+
+                // Send request to get user token
+                axios
+                    .post(this.$store.getters.api + '/user/login', {
+                        email: this.loginEmail,
+                        password: this.loginPassword,
+                    })
+                    .then(() => {
+
+                        // End loading
+                        this.isLoading = false
+
+                        // Set login state
+                        this.$store.commit('SET_AUTHORIZED', true)
+                    })
+                    .catch(error => {
+
+                        if (error.response.status == 400) {
+
+                            this.$refs.sign_in.setErrors({
+                                'User Password': [this.$t('validation_errors.incorrect_password')]
+                            });
+                        }
+
+                        // End loading
+                        this.isLoading = false
+                    })
+            },
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/app.scss";
+    @import '@assets/vue-file-manager/_forms';
+
+    .auth-form {
+        text-align: center;
+        max-width: 600px;
+        padding: 25px 20px;
+        display: table-cell;
+        vertical-align: middle;
+
+        .user-avatar {
+            width: 100px;
+            height: 100px;
+            object-fit: cover;
+            margin-bottom: 20px;
+            border-radius: 8px;
+            box-shadow: 0 10px 30px rgba(25, 54, 60, 0.2);
+        }
+
+        .logo {
+            width: 120px;
+            margin-bottom: 20px;
+        }
+
+        h1 {
+            @include font-size(34);
+            font-weight: 800;
+            line-height: 1.2;
+            margin-bottom: 2px;
+            color: $text;
+        }
+
+        h2 {
+            @include font-size(23);
+            font-weight: 500;
+            margin-bottom: 50px;
+            color: $text;
+        }
+
+        .block-form {
+            margin-left: auto;
+            margin-right: auto;
+
+            .block-wrapper label {
+                text-align: right;
+            }
+        }
+    }
+
+    @media only screen and (min-width: 690px) and (max-width: 960px) {
+
+        .auth-form {
+            padding-left: 20%;
+            padding-right: 20%;
+        }
+    }
+
+    @media only screen and (max-width: 690px) {
+
+        .auth-form {
+            width: 100%;
+
+            h1 {
+                @include font-size(30);
+            }
+
+            h2 {
+                @include font-size(21);
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .auth-form {
+
+            h1, h2, .additional-link {
+                color: $dark_mode_text_primary;
+            }
+        }
+    }
+
+</style>
--- a/resources/js/views/SignUp.vue
+++ b/resources/js/views/SignUp.vue
@@ -0,0 +1,228 @@
+<template>
+    <AuthContentWrapper ref="auth">
+
+        <!--Registration-->
+        <AuthContent name="sign-up" :visible="true">
+            <img class="logo" :src="config.app_logo" :alt="config.app_name">
+            <h1>{{ $t('page_registration.title') }}</h1>
+            <h2>{{ $t('page_registration.subtitle') }}</h2>
+
+            <ValidationObserver @submit.prevent="signUp" ref="sign_up" v-slot="{ invalid }" tag="form"
+                                class="form block-form">
+
+                <div class="block-wrapper">
+                    <label>{{ $t('page_registration.label_email') }}</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
+                                        v-slot="{ errors }">
+                        <input v-model="register.email" :placeholder="$t('page_registration.placeholder_email')" type="email"
+                               :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>{{ $t('page_registration.label_name') }}</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Full Name" rules="required"
+                                        v-slot="{ errors }">
+                        <input v-model="register.name" :placeholder="$t('page_registration.placeholder_name')" type="text"
+                               :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>{{ $t('page_registration.label_pass') }}</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Your New Password"
+                                        rules="required" v-slot="{ errors }">
+                        <input v-model="register.password" :placeholder="$t('page_registration.placeholder_pass')" type="password"
+                               :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div class="block-wrapper">
+                    <label>{{ $t('page_registration.label_confirm_pass') }}</label>
+                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
+                                        rules="required" v-slot="{ errors }">
+                        <input v-model="register.password_confirmation" :placeholder="$t('page_registration.placeholder_confirm_pass')"
+                               type="password" :class="{'is-error': errors[0]}"/>
+                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                    </ValidationProvider>
+                </div>
+
+                <div>
+                    <AuthButton icon="chevron-right" :text="$t('page_registration.button_create_account')" :loading="isLoading" :disabled="isLoading"/>
+                </div>
+            </ValidationObserver>
+
+            <span class="additional-link">{{ $t('page_registration.have_an_account') }} <b @click="goToAuthPage('log-in')">{{ $t('page_forgotten_password.password_remember_button') }}</b></span>
+        </AuthContent>
+
+    </AuthContentWrapper>
+</template>
+
+<script>
+    import AuthContentWrapper from '@/components/VueFileManagerComponents/Auth/AuthContentWrapper'
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import AuthContent from '@/components/VueFileManagerComponents/Auth/AuthContent'
+    import AuthButton from '@/components/VueFileManagerComponents/Auth/AuthButton'
+    import {required} from 'vee-validate/dist/rules'
+    import {mapGetters} from 'vuex'
+    import axios from 'axios'
+
+    export default {
+        name: 'Auth',
+        components: {
+            AuthContentWrapper,
+            ValidationProvider,
+            ValidationObserver,
+            AuthContent,
+            AuthButton,
+            required,
+        },
+        computed: {
+            ...mapGetters(['config']),
+        },
+        data() {
+            return {
+                isLoading: false,
+                register: {
+                    name: '',
+                    email: '',
+                    password: '',
+                    password_confirmation: '',
+                },
+            }
+        },
+        methods: {
+            async signUp() {
+
+                // Validate fields
+                const isValid = await this.$refs.sign_up.validate();
+
+                if (!isValid) return;
+
+                // Start loading
+                this.isLoading = true
+
+                // Send request to get user token
+                axios
+                    .post(this.$store.getters.api + '/user/register', this.register)
+                    .then(() => {
+
+                        // End loading
+                        this.isLoading = false
+
+                        // Set login state
+                        this.$store.commit('SET_AUTHORIZED', true)
+                    })
+                    .catch(error => {
+
+                        if (error.response.status == 422) {
+
+                            if (error.response.data.errors['email']) {
+
+                                this.$refs.sign_up.setErrors({
+                                    'E-Mail': error.response.data.errors['email']
+                                });
+                            }
+
+                            if (error.response.data.errors['password']) {
+
+                                this.$refs.sign_up.setErrors({
+                                    'Your New Password': error.response.data.errors['password']
+                                });
+                            }
+                        }
+
+                        // End loading
+                        this.isLoading = false
+                    })
+            }
+        },
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/app.scss";
+    @import '@assets/vue-file-manager/_forms';
+
+    .auth-form {
+        text-align: center;
+        max-width: 600px;
+        padding: 25px 20px;
+        display: table-cell;
+        vertical-align: middle;
+
+        .user-avatar {
+            width: 100px;
+            height: 100px;
+            object-fit: cover;
+            margin-bottom: 20px;
+            border-radius: 8px;
+            box-shadow: 0 10px 30px rgba(25, 54, 60, 0.2);
+        }
+
+        .logo {
+            width: 120px;
+            margin-bottom: 20px;
+        }
+
+        h1 {
+            @include font-size(34);
+            font-weight: 800;
+            line-height: 1.2;
+            margin-bottom: 2px;
+            color: $text;
+        }
+
+        h2 {
+            @include font-size(23);
+            font-weight: 500;
+            margin-bottom: 50px;
+            color: $text;
+        }
+
+        .block-form {
+            margin-left: auto;
+            margin-right: auto;
+
+            .block-wrapper label {
+                text-align: right;
+            }
+        }
+    }
+
+    @media only screen and (min-width: 690px) and (max-width: 960px) {
+
+        .auth-form {
+            padding-left: 20%;
+            padding-right: 20%;
+        }
+    }
+
+    @media only screen and (max-width: 690px) {
+
+        .auth-form {
+            width: 100%;
+
+            h1 {
+                @include font-size(30);
+            }
+
+            h2 {
+                @include font-size(21);
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .auth-form {
+
+            h1, h2, .additional-link {
+                color: $dark_mode_text_primary;
+            }
+        }
+    }
+
+</style>