v1.5-alpha.1

2026-04-28 02:50:39 +00:00 · 2020-05-15 17:31:25 +02:00
parent cfecf542ca
commit 41656235fc
97 changed files with 4108 additions and 2118 deletions
@@ -171,7 +171,6 @@
 </script>

 <style scoped lang="scss">
-    @import "@assets/app.scss";
-    @import '@assets/vue-file-manager/_forms';
+    @import '@assets/vue-file-manager/_auth-form';
    @import '@assets/vue-file-manager/_auth';
 </style>
@@ -122,7 +122,6 @@
 </script>

 <style scoped lang="scss">
-    @import "@assets/app.scss";
-    @import '@assets/vue-file-manager/_forms';
+    @import '@assets/vue-file-manager/_auth-form';
    @import '@assets/vue-file-manager/_auth';
 </style>
@@ -86,8 +86,8 @@
            return {
                isLoading: false,
                checkedAccount: undefined,
-                loginPassword: '',
-                loginEmail: '',
+                loginPassword: 'secret',
+                loginEmail: 'howdy@hi5ve.digital',
            }
        },
        methods: {
@@ -208,7 +208,6 @@
 </script>

 <style scoped lang="scss">
-    @import "@assets/app.scss";
-    @import '@assets/vue-file-manager/_forms';
+    @import '@assets/vue-file-manager/_auth-form';
    @import '@assets/vue-file-manager/_auth';
 </style>
@@ -172,7 +172,6 @@
 </script>

 <style scoped lang="scss">
-    @import "@assets/app.scss";
-    @import '@assets/vue-file-manager/_forms';
+    @import '@assets/vue-file-manager/_auth-form';
    @import '@assets/vue-file-manager/_auth';
 </style>
@@ -0,0 +1,178 @@
+<template>
+    <section id="viewport" v-if="app">
+
+        <ContentSidebar>
+
+            <!--Locations-->
+            <ContentGroup title="Base">
+                <div class="menu-list-wrapper">
+                    <a class="menu-list-item link" :class="{'is-active': $isThisLocation(['base'])}" @click="goHome">
+                        <div class="icon">
+                            <home-icon size="17"></home-icon>
+                        </div>
+                        <div class="label">
+                            Home
+                        </div>
+                    </a>
+                    <a class="menu-list-item link" :class="{'is-active': $isThisLocation(['latest'])}"
+                       @click="getLatest">
+                        <div class="icon">
+                            <upload-cloud-icon size="17"></upload-cloud-icon>
+                        </div>
+                        <div class="label">
+                            Recent Uploads
+                        </div>
+                    </a>
+                </div>
+            </ContentGroup>
+
+            <!--Navigator-->
+            <ContentGroup title="Navigator" class="navigator">
+                <TreeMenuNavigator class="folder-tree" :depth="0" :nodes="items" v-for="items in app.tree"
+                                   :key="items.unique_id"/>
+            </ContentGroup>
+
+            <!--Favourites-->
+            <ContentGroup :title="$t('sidebar.favourites')">
+
+                <div class="menu-list-wrapper favourites"
+                     :class="{ 'is-dragenter': area }"
+                     @dragover.prevent="dragEnter"
+                     @dragleave="dragLeave"
+                     @drop="dragFinish($event)"
+                >
+                    <transition-group tag="div" class="menu-list" name="folder-item">
+                        <a class="empty-list" v-if="app.favourites.length == 0" :key="0">
+                            {{ $t('sidebar.favourites_empty') }}
+                        </a>
+
+                        <a @click.stop="openFolder(folder)"
+                           class="menu-list-item"
+                           :class="{'is-current': currentFolder.unique_id === folder.unique_id}"
+                           v-for="folder in app.favourites"
+                           :key="folder.unique_id">
+                            <div>
+                                <folder-icon size="17" class="folder-icon"></folder-icon>
+                                <span class="label">{{ folder.name }}</span>
+                            </div>
+                            <x-icon size="17" @click.stop="removeFavourite(folder)" class="delete-icon"></x-icon>
+                        </a>
+                    </transition-group>
+                </div>
+            </ContentGroup>
+        </ContentSidebar>
+
+        <ContentFileView/>
+    </section>
+</template>
+
+<script>
+    import TreeMenuNavigator from '@/components/Others/TreeMenuNavigator'
+    import ContentFileView from '@/components/Others/ContentFileView'
+    import ContentSidebar from '@/components/Sidebar/ContentSidebar'
+    import ContentGroup from '@/components/Sidebar/ContentGroup'
+    import {mapGetters} from 'vuex'
+    import {events} from '@/bus'
+    import {
+        UploadCloudIcon,
+        FolderIcon,
+        HomeIcon,
+        XIcon,
+    } from 'vue-feather-icons'
+
+    export default {
+        name: 'FilesView',
+        components: {
+            TreeMenuNavigator,
+            ContentFileView,
+            ContentSidebar,
+            UploadCloudIcon,
+            ContentGroup,
+            FolderIcon,
+            HomeIcon,
+            XIcon,
+        },
+        computed: {
+            ...mapGetters(['app', 'homeDirectory', 'currentFolder']),
+        },
+        data() {
+            return {
+                area: false,
+                draggedItem: undefined,
+            }
+        },
+        methods: {
+            getLatest() {
+                this.$store.dispatch('getLatest')
+            },
+            goHome() {
+                this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
+            },
+            openFolder(folder) {
+                this.$store.dispatch('getFolder', [{folder: folder, back: false, init: false}])
+            },
+            dragEnter() {
+                if (this.draggedItem && this.draggedItem.type !== 'folder') return
+
+                this.area = true
+            },
+            dragLeave() {
+                this.area = false
+            },
+            dragFinish() {
+                this.area = false
+
+                // Check if draged item is folder
+                if (this.draggedItem && this.draggedItem.type !== 'folder') return
+
+                // Check if folder exist in favourites
+                if (this.app.favourites.find(folder => folder.unique_id == this.draggedItem.unique_id)) return
+
+                // Store favourites folder
+                this.$store.dispatch('addToFavourites', this.draggedItem)
+
+            },
+            removeFavourite(folder) {
+                this.$store.dispatch('removeFromFavourites', folder)
+            }
+        },
+        created() {
+            this.goHome()
+
+            // Listen for dragstart folder items
+            events.$on('dragstart', (item) => this.draggedItem = item)
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+
+    .navigator {
+        width: 100%;
+        overflow-x: auto;
+    }
+
+    // Transition
+    .folder-item-move {
+        transition: transform 300s ease;
+    }
+
+    .folder-item-enter-active {
+        transition: all 300ms ease;
+    }
+
+    .folder-item-leave-active {
+        transition: all 300ms;
+    }
+
+    .folder-item-enter, .folder-item-leave-to /* .list-leave-active below version 2.1.8 */
+    {
+        opacity: 0;
+        transform: translateX(30px);
+    }
+
+    .folder-item-leave-active {
+        position: absolute;
+    }
+
+</style>
@@ -0,0 +1,67 @@
+<template>
+    <section id="viewport">
+
+        <ContentSidebar>
+
+            <!--Navigator-->
+            <ContentGroup title="Base">
+                <div class="menu-list-wrapper">
+                    <li class="menu-list-item link" :class="{'is-active': $isThisLocation(['shared'])}" @click="getShared()">
+                        <div class="icon">
+                            <link-icon size="17"></link-icon>
+                        </div>
+                        <div class="label">
+                            My Shared Items
+                        </div>
+                    </li>
+                    <li class="menu-list-item link" :class="{'is-active': $isThisLocation(['participant_uploads'])}" @click="getParticipantUploads()">
+                        <div class="icon">
+                            <users-icon size="17"></users-icon>
+                        </div>
+                        <div class="label">
+                            Participant Uploads
+                        </div>
+                    </li>
+                </div>
+            </ContentGroup>
+
+        </ContentSidebar>
+
+        <ContentFileView />
+    </section>
+</template>
+
+<script>
+    import ContentFileView from '@/components/Others/ContentFileView'
+    import ContentSidebar from '@/components/Sidebar/ContentSidebar'
+    import ContentGroup from '@/components/Sidebar/ContentGroup'
+    import {
+        LinkIcon,
+        UsersIcon,
+    } from 'vue-feather-icons'
+
+    export default {
+        name: 'FilesView',
+        components: {
+            ContentFileView,
+            ContentSidebar,
+            ContentGroup,
+            LinkIcon,
+            UsersIcon,
+        },
+        methods: {
+            getShared() {
+                this.$store.dispatch('getShared', [{back: false, init: false}])
+            },
+            getParticipantUploads() {
+                this.$store.dispatch('getParticipantUploads')
+            },
+        },
+        mounted() {
+            this.getShared()
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+</style>
@@ -0,0 +1,51 @@
+<template>
+    <section id="viewport">
+        <ContentSidebar>
+
+            <!--Tools-->
+            <ContentGroup title="Tools" class="navigator">
+                <div class="menu-list-wrapper">
+                    <div class="menu-list-item link" @click="emptyTrash()">
+                        <div class="icon">
+                            <trash-icon size="17"></trash-icon>
+                        </div>
+                        <div class="label">
+                            Empty Trash
+                        </div>
+                    </div>
+                </div>
+            </ContentGroup>
+        </ContentSidebar>
+        <ContentFileView/>
+    </section>
+</template>
+
+<script>
+    import ContentFileView from '@/components/Others/ContentFileView'
+    import ContentSidebar from '@/components/Sidebar/ContentSidebar'
+    import ContentGroup from '@/components/Sidebar/ContentGroup'
+    import {
+        TrashIcon,
+    } from 'vue-feather-icons'
+
+    export default {
+        name: 'FilesView',
+        components: {
+            ContentFileView,
+            ContentSidebar,
+            ContentGroup,
+            TrashIcon,
+        },
+        methods: {
+            emptyTrash() {
+                this.$store.dispatch('emptyTrash')
+            },
+        },
+        created() {
+            this.$store.dispatch('getTrash')
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+</style>
@@ -1,253 +0,0 @@
-<template>
-    <div @click="fileViewClick" @contextmenu.prevent.capture="contextMenu($event, undefined)" id="files-view" :class="filesViewWidth">
-        <ContextMenu />
-        <DesktopToolbar />
-        <FileBrowser />
-    </div>
-</template>
-
-<script>
-    import DesktopToolbar from '@/components/FilesView/DesktopToolbar'
-    import FileBrowser from '@/components/FilesView/FileBrowser'
-    import ContextMenu from '@/components/FilesView/ContextMenu'
-    import {ResizeSensor} from 'css-element-queries'
-    import {mapGetters} from 'vuex'
-    import {events} from '@/bus'
-
-    export default {
-        name: 'FilesView',
-        components: {
-            DesktopToolbar,
-            FileBrowser,
-            ContextMenu,
-        },
-        computed: {
-            ...mapGetters(['config', 'filesViewWidth']),
-        },
-        methods: {
-            fileViewClick() {
-                events.$emit('contextMenu:hide')
-            },
-            contextMenu(event, item) {
-                events.$emit('contextMenu:show', event, item)
-            },
-            handleContentResize() {
-                let filesView = document.getElementById('files-view')
-                    .clientWidth
-
-                if (filesView >= 0 && filesView <= 690)
-                    this.$store.commit('SET_FILES_VIEW_SIZE', 'minimal-scale')
-
-                else if (filesView >= 690 && filesView <= 960)
-                    this.$store.commit('SET_FILES_VIEW_SIZE', 'compact-scale')
-
-                else if (filesView >= 960)
-                    this.$store.commit('SET_FILES_VIEW_SIZE', 'full-scale')
-            },
-        },
-        mounted() {
-
-            let homeDirectory = {
-                name: this.$t('locations.home'),
-                location: 'base',
-                unique_id: 0,
-            }
-
-            // Set start directory
-            this.$store.commit('SET_START_DIRECTORY', homeDirectory)
-
-            // Load folder
-            this.$store.dispatch('getFolder', [homeDirectory, false, true])
-
-            var filesView = document.getElementById('files-view');
-            new ResizeSensor(filesView, this.handleContentResize);
-        }
-    }
-</script>
-
-<style lang="scss">
-    @import "@assets/app.scss";
-
-    #files-view {
-        font-family: 'Nunito', sans-serif;
-        font-size: 16px;
-        //overflow: hidden;
-        width: 100%;
-        height: 100%;
-        position: relative;
-        min-width: 320px;
-        overflow-x: hidden;
-
-        &.minimal-scale {
-            padding: 0;
-
-            .mobile-toolbar {
-                padding: 10px 0 5px;
-            }
-
-            .popup-wrapper {
-                left: 15px;
-                right: 15px;
-                padding: 25px 15px;
-            }
-
-            .toolbar {
-                display: block;
-                position: sticky;
-                top: 0;
-            }
-
-            .toolbar-go-back {
-                padding-top: 15px;
-            }
-
-            .toolbar-tools {
-                text-align: left;
-                display: flex;
-
-                .toolbar-button-wrapper {
-                    width: 100%;
-
-                    &:last-child {
-                        text-align: right;
-                    }
-                }
-            }
-
-            .files-container {
-                padding-left: 15px;
-                padding-right: 15px;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                position: absolute;
-                overflow-y: auto;
-
-                .file-list {
-                    //height: 100%;
-
-                    &.grid {
-                        grid-template-columns: repeat(auto-fill, 120px);
-
-                        .file-wrapper {
-
-                            .file-item {
-                                width: 120px;
-                            }
-
-                            .icon-item {
-                                margin-bottom: 10px;
-                                height: 90px;
-
-                                .file-icon {
-                                    @include font-size(75);
-                                }
-
-                                .file-icon-text {
-                                    @include font-size(12);
-                                }
-
-                                .folder-icon {
-                                    @include font-size(75);
-                                    margin-top: 0;
-                                    margin-bottom: 0;
-                                }
-
-                                .image {
-                                    width: 90px;
-                                    height: 90px;
-                                }
-                            }
-
-                            .item-name .name {
-                                @include font-size(13);
-                                line-height: 1.2;
-                                max-height: 30px;
-                            }
-                        }
-                    }
-                }
-            }
-
-            .file-wrapper {
-                .item-name .name {
-                    max-width: 220px;
-                }
-            }
-
-            .search-bar {
-
-                input {
-                    min-width: initial;
-                    width: 100%;
-                }
-            }
-
-            .item-shared {
-                .label {
-                    display: none;
-                }
-            }
-        }
-
-        &.compact-scale {
-            padding-left: 15px;
-            padding-right: 15px;
-
-            .file-content {
-                position: absolute;
-                top: 72px;
-                left: 15px;
-                right: 15px;
-                bottom: 0;
-                @include transition;
-
-                &.is-offset {
-                    margin-top: 50px;
-                }
-            }
-
-            .toolbar-tools {
-
-                .toolbar-button-wrapper {
-                    margin-left: 35px;
-                }
-            }
-
-            .search-bar input {
-                min-width: 190px;
-            }
-
-            .toolbar-go-back span {
-                max-width: 120px;
-            }
-
-            .grid .file-wrapper {
-
-                .icon-item {
-                    margin-bottom: 15px;
-                }
-            }
-        }
-
-        &.full-scale {
-            padding-left: 15px;
-            padding-right: 15px;
-
-            .file-content {
-                position: absolute;
-                top: 72px;
-                left: 15px;
-                right: 15px;
-                bottom: 0;
-                @include transition;
-
-                &.is-offset {
-                    margin-top: 50px;
-                }
-            }
-        }
-    }
-
-</style>
@@ -0,0 +1,94 @@
+<template>
+    <div class="page">
+
+        <MobileHeader />
+
+        <nav class="mobile-navigation">
+
+            <!--Navigation-->
+            <MenuItemList :navigation="navigation" />
+        </nav>
+    </div>
+</template>
+
+<script>
+    import MenuItemList from '@/components/Mobile/MenuItemList'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
+
+    export default {
+        name: 'MobileSettings',
+        components: {
+            MenuItemList,
+            MobileHeader,
+        },
+        data() {
+            return {
+                navigation: [
+                    {
+                        icon: 'hard-drive',
+                        title: 'Profile Settings',
+                        routeName: 'Profile',
+                    },
+                    {
+                        icon: 'latest',
+                        title: 'Password',
+                        routeName: 'Password',
+                    },
+                ]
+            }
+        },
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .page {
+        width: 100%;
+    }
+
+    .mobile-navigation {
+        padding: 0 20px;
+        width: 100%;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 99;
+    }
+
+    @media only screen and (max-width: 690px) {
+
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+    // Transition
+    .context-menu-enter-active,
+    .fade-enter-active {
+        transition: all 200ms;
+    }
+
+    .context-menu-leave-active,
+    .fade-leave-active {
+        transition: all 200ms;
+    }
+
+    .fade-enter,
+    .fade-leave-to {
+        opacity: 0;
+    }
+
+    .context-menu-enter,
+    .context-menu-leave-to {
+        opacity: 0;
+        transform: translateY(100%);
+    }
+
+    .context-menu-leave-active {
+        position: absolute;
+    }
+
+</style>
@@ -0,0 +1,70 @@
+<template>
+    <section id="viewport">
+
+        <ContentSidebar>
+
+            <!--User Headline-->
+            <UserHeadline class="user-headline"/>
+
+            <!--Locations-->
+            <ContentGroup title="Menu" class="navigator">
+                <div class="menu-list-wrapper">
+                    <router-link :to="{name: 'Profile'}" class="menu-list-item link">
+                        <div class="icon">
+                            <user-icon size="17"></user-icon>
+                        </div>
+                        <div class="label">
+                            Profile Settings
+                        </div>
+                    </router-link>
+                    <router-link :to="{name: 'Password'}" class="menu-list-item link">
+                        <div class="icon">
+                            <lock-icon size="17"></lock-icon>
+                        </div>
+                        <div class="label">
+                            Password
+                        </div>
+                    </router-link>
+                    <!--<router-link :to="{name: 'Profile'}" class="menu-list-item link">
+                        <div class="icon">
+                            <hard-drive-icon size="17"></hard-drive-icon>
+                        </div>
+                        <div class="label">
+                            Storage
+                        </div>
+                    </router-link>-->
+                </div>
+            </ContentGroup>
+        </ContentSidebar>
+
+        <router-view/>
+    </section>
+</template>
+
+<script>
+    import ContentSidebar from '@/components/Sidebar/ContentSidebar'
+    import ContentGroup from '@/components/Sidebar/ContentGroup'
+    import UserHeadline from '@/components/Sidebar/UserHeadline'
+    import {
+        UserIcon,
+        LockIcon,
+    } from 'vue-feather-icons'
+
+    export default {
+        name: 'Settings',
+        components: {
+            ContentSidebar,
+            UserHeadline,
+            ContentGroup,
+            UserIcon,
+            LockIcon,
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+
+    .user-headline {
+        margin-bottom: 38px;
+    }
+</style>
@@ -47,7 +47,5 @@
 </script>

 <style scoped lang="scss">
-    @import "@assets/app.scss";
-    @import '@assets/vue-file-manager/_forms';
    @import '@assets/vue-file-manager/_auth';
 </style>
@@ -38,7 +38,7 @@
        </div>

        <!--File browser-->
-        <div v-if="currentPage === 'page-files'" id="files-view" :class="filesViewWidth">
+        <div v-if="currentPage === 'page-files'" id="files-view">
            <div id="single-file" v-if="sharedDetail.type === 'file'">
                <div class="single-file-wrapper">
                    <FileItemGrid v-if="sharedFile" :data="sharedFile" :context-menu="false"/>
@@ -103,7 +103,7 @@
            Alert,
        },
        computed: {
-            ...mapGetters(['config', 'filesViewWidth', 'sharedDetail', 'sharedFile', 'appSize']),
+            ...mapGetters(['config', 'sharedDetail', 'sharedFile', 'appSize']),
        },
        data() {
            return {
@@ -164,16 +164,8 @@
                        location: 'public',
                    }

-                    // Set start directory
-                    this.$store.commit('SET_START_DIRECTORY', homeDirectory)
-
                    // Load folder
-                    this.$store.dispatch('browseShared', [homeDirectory, false, true])
-                        .then(() => {
-
-                            var filesView = document.getElementById('files-view')
-                            new ResizeSensor(filesView, this.handleContentResize)
-                        })
+                    this.$store.dispatch('browseShared', [{folder: homeDirectory, back: false, init: true}])
                }

                // Get file
@@ -190,18 +182,6 @@
            contextMenu(event, item) {
                events.$emit('contextMenu:show', event, item)
            },
-            handleContentResize() {
-                let filesView = document.getElementById('files-view').clientWidth
-
-                if (filesView >= 0 && filesView <= 690)
-                    this.$store.commit('SET_FILES_VIEW_SIZE', 'minimal-scale')
-
-                else if (filesView >= 690 && filesView <= 960)
-                    this.$store.commit('SET_FILES_VIEW_SIZE', 'compact-scale')
-
-                else if (filesView >= 960)
-                    this.$store.commit('SET_FILES_VIEW_SIZE', 'full-scale')
-            },
        },
        created() {

@@ -235,9 +215,10 @@
    }
 </script>

-<style lang="scss">
-    @import "@assets/app.scss";
-    @import '@assets/vue-file-manager/_forms';
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_auth-form';
    @import '@assets/vue-file-manager/_auth';

    #shared {
@@ -1,52 +1,20 @@
 <template>
    <div id="user-settings">

-        <PageHeader :title="$t('profile.page_title')" />
+        <MobileHeader />
+        <PageHeader title="Password Settings"/>

        <div class="content-page">
-            <div class="avatar-upload">
-                <UserImageInput
-                        v-model="avatar"
-                        :avatar="app.user.avatar"
-                />
-                <div class="info">
-                    <span class="description">{{ $t('profile.photo_description') }}</span>
-                    <span class="supported">{{ $t('profile.photo_supported') }}</span>
-                </div>
-            </div>
-
-            <ValidationObserver ref="account" v-slot="{ invalid }" tag="form" class="form block-form">
-
-                <ThemeLabel>{{ $t('profile.profile_info') }}</ThemeLabel>
-                <div class="block-wrapper">
-                    <label>{{ $t('page_registration.label_email') }}</label>
-                    <div class="input-wrapper">
-                        <input :value="app.user.email" :placeholder="$t('page_registration.placeholder_email')" type="email" disabled/>
-                    </div>
-                </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 @keyup="$updateText('/user/profile', 'name', name)" v-model="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>
-            </ValidationObserver>

            <ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form"
                                class="form block-form">

-                <ThemeLabel>{{ $t('profile.change_pass') }}</ThemeLabel>
-
                <div class="block-wrapper">
                    <label>{{ $t('page_create_password.label_new_pass') }}:</label>
                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
                                        rules="required" v-slot="{ errors }">
-                        <input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')" type="password"
+                        <input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')"
+                               type="password"
                               :class="{'is-error': errors[0]}"/>
                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                    </ValidationProvider>
@@ -56,7 +24,8 @@
                    <label>{{ $t('page_create_password.label_confirm_pass') }}:</label>
                    <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
                                        rules="required" v-slot="{ errors }">
-                        <input v-model="newPasswordConfirmation" :placeholder="$t('page_create_password.label_confirm_pass')" type="password"
+                        <input v-model="newPasswordConfirmation"
+                               :placeholder="$t('page_create_password.label_confirm_pass')" type="password"
                               :class="{'is-error': errors[0]}"/>
                        <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                    </ValidationProvider>
@@ -75,12 +44,12 @@
 <script>
    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
    import UserImageInput from '@/components/Others/UserImageInput'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
    import ButtonBase from '@/components/FilesView/ButtonBase'
    import PageHeader from '@/components/Others/PageHeader'
    import ThemeLabel from '@/components/Others/ThemeLabel'
    import {required} from 'vee-validate/dist/rules'
    import {mapGetters} from 'vuex'
-    import {debounce} from 'lodash'
    import {events} from '@/bus'
    import axios from 'axios'

@@ -90,6 +59,7 @@
            ValidationProvider,
            ValidationObserver,
            UserImageInput,
+            MobileHeader,
            PageHeader,
            ButtonBase,
            ThemeLabel,
@@ -98,19 +68,10 @@
        computed: {
            ...mapGetters(['app']),
        },
-        watch: {
-            name: debounce(function (val) {
-                if (val === '') return
-
-                this.$store.commit('UPDATE_NAME', val)
-            }, 300),
-        },
        data() {
            return {
                newPasswordConfirmation: '',
                newPassword: '',
-                avatar: undefined,
-                name: '',
            }
        },
        methods: {
@@ -124,9 +85,9 @@
                // Send request to get user reset link
                axios
                    .post(this.$store.getters.api + '/user/password', {
-                            password: this.newPassword,
-                            password_confirmation: this.newPasswordConfirmation,
-                        })
+                        password: this.newPassword,
+                        password_confirmation: this.newPasswordConfirmation,
+                    })
                    .then(() => {

                        // Reset inputs
@@ -155,67 +116,15 @@
                        }
                    })
            }
-        },
-        created() {
-            this.name = this.app.user.name
-            this.avatar = this.app.user.avatar
        }
    }
 </script>

-<style lang="scss">
-    @import "@assets/app.scss";
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
    @import '@assets/vue-file-manager/_forms';

-    .avatar-upload {
-        display: flex;
-        align-items: center;
-        margin-top: 20px;
-
-        .info {
-            margin-left: 25px;
-
-            .description {
-                @include font-size(18);
-                font-weight: 700;
-                color: $text;
-            }
-
-            .supported {
-                display: block;
-                @include font-size(12);
-                font-weight: 500;
-                color: $light_text;
-            }
-        }
-    }
-
-    .form {
-
-        .confirm-form {
-            margin-top: 30px;
-            text-align: right;
-        }
-
-        &.block-form {
-            margin-top: 50px;
-            max-width: 700px;
-
-            .block-wrapper {
-                justify-content: flex-start;
-
-                label {
-                    text-align: left;
-                    flex: 0 0 220px;
-                }
-
-                .input-wrapper, input {
-                    width: 100%;
-                }
-            }
-        }
-    }
-
    #user-settings {
        overflow: hidden;
        width: 100%;
@@ -223,11 +132,12 @@
        position: relative;

        .content-page {
-            padding-left: 30px;
-            padding-right: 30px;
            overflow-y: auto;
            height: 100%;
            padding-bottom: 100px;
+            max-width: 700px;
+            width: 100%;
+            margin: 0 auto;
        }
    }

@@ -241,10 +151,6 @@
            }
        }

-        .avatar-upload {
-            margin-top: 30px;
-        }
-
        .form {
            .button-base {
                width: 100%;
@@ -256,16 +162,6 @@

    @media (prefers-color-scheme: dark) {

-        .avatar-upload .info {
-
-            .description {
-                color: $dark_mode_text_primary;
-            }
-
-            .supported {
-                color: $dark_mode_text_secondary;
-            }
-        }
    }

 </style>
@@ -0,0 +1,170 @@
+<template>
+    <div id="user-settings" v-if="app">
+
+        <MobileHeader />
+        <PageHeader :title="$t('profile.page_title')" />
+
+        <div class="content-page">
+            <div class="avatar-upload">
+                <UserImageInput
+                        v-model="avatar"
+                        :avatar="app.user.avatar"
+                />
+                <div class="info">
+                    <span class="description">{{ $t('profile.photo_description') }}</span>
+                    <span class="supported">{{ $t('profile.photo_supported') }}</span>
+                </div>
+            </div>
+
+            <ValidationObserver ref="account" v-slot="{ invalid }" tag="form" class="form block-form">
+
+                <div class="block-wrapper">
+                    <label>{{ $t('page_registration.label_email') }}</label>
+                    <div class="input-wrapper">
+                        <input :value="app.user.email" :placeholder="$t('page_registration.placeholder_email')" type="email" disabled/>
+                    </div>
+                </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 @keyup="$updateText('/user/profile', 'name', name)" v-model="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>
+            </ValidationObserver>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import UserImageInput from '@/components/Others/UserImageInput'
+    import MobileHeader from '@/components/Mobile/MobileHeader'
+    import ButtonBase from '@/components/FilesView/ButtonBase'
+    import PageHeader from '@/components/Others/PageHeader'
+    import ThemeLabel from '@/components/Others/ThemeLabel'
+    import {required} from 'vee-validate/dist/rules'
+    import {mapGetters} from 'vuex'
+    import {debounce} from 'lodash'
+    import {events} from '@/bus'
+    import axios from 'axios'
+
+    export default {
+        name: 'Profile',
+        components: {
+            ValidationProvider,
+            ValidationObserver,
+            UserImageInput,
+            MobileHeader,
+            PageHeader,
+            ButtonBase,
+            ThemeLabel,
+            required,
+        },
+        computed: {
+            ...mapGetters(['app']),
+        },
+        watch: {
+            name: debounce(function (val) {
+                if (val === '') return
+
+                this.$store.commit('UPDATE_NAME', val)
+            }, 300),
+        },
+        data() {
+            return {
+                avatar: undefined,
+                name: '',
+            }
+        },
+        created() {
+            if (this.app) {
+                this.name = this.app.user.name
+                this.avatar = this.app.user.avatar
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_forms';
+
+    .avatar-upload {
+        display: flex;
+        align-items: center;
+        margin-bottom: 30px;
+
+        .info {
+            margin-left: 25px;
+
+            .description {
+                @include font-size(15);
+                font-weight: 700;
+                color: $text;
+            }
+
+            .supported {
+                display: block;
+                @include font-size(12);
+                font-weight: 500;
+                color: $light_text;
+            }
+        }
+    }
+
+    #user-settings {
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+        position: relative;
+
+        .content-page {
+            overflow-y: auto;
+            height: 100%;
+            padding-bottom: 100px;
+            max-width: 700px;
+            width: 100%;
+            margin: 0 auto;
+        }
+    }
+
+    @media only screen and (max-width: 960px) {
+
+        #user-settings {
+
+            .content-page {
+                padding-left: 15px;
+                padding-right: 15px;
+            }
+        }
+
+        .form {
+            .button-base {
+                width: 100%;
+                margin-top: 0;
+                text-align: center;
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        .avatar-upload .info {
+
+            .description {
+                color: $dark_mode_text_primary;
+            }
+
+            .supported {
+                color: $dark_mode_text_secondary;
+            }
+        }
+    }
+
+</style>