├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .postcssrc.js ├── .stylintrc ├── LICENSE.md ├── README.md ├── package-lock.json ├── package.json ├── quasar.conf.js └── src ├── App.vue ├── assets ├── background.jpg ├── quasar-logo-full.svg └── sad.svg ├── components ├── .gitkeep ├── Cloud │ ├── BreadcrumbNavigation.vue │ ├── Dialogs │ │ ├── CopyDialog.vue │ │ ├── CreateFolderDialog.vue │ │ ├── DeleteDialog.vue │ │ ├── MoveDialog.vue │ │ └── RenameDialog.vue │ ├── ImageViewer.vue │ ├── ItemListRow.vue │ ├── ItemsGrid.vue │ ├── ItemsList.vue │ └── Uploader.vue └── InnerLoading.vue ├── css ├── app.styl └── themes │ ├── common.variables.styl │ ├── variables.ios.styl │ └── variables.mat.styl ├── index.template.html ├── layouts ├── auth.vue └── main.vue ├── pages ├── 404.vue ├── auth │ ├── login.vue │ └── register.vue ├── cloud.vue ├── home.vue ├── news.vue └── profile.vue ├── plugins ├── .gitkeep ├── auth.js ├── axios.js ├── title.js └── vuelidate.js ├── router ├── index.js └── routes.js ├── statics ├── icons │ ├── apple-icon-152x152.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── icon-128x128.png │ ├── icon-192x192.png │ ├── icon-256x256.png │ ├── icon-384x384.png │ ├── icon-512x512.png │ └── ms-icon-144x144.png └── quasar-logo.png └── store ├── cloud ├── actions.js ├── getters.js ├── index.js ├── mutations.js └── state.js ├── index.js └── session ├── actions.js ├── getters.js ├── helpers.js ├── index.js ├── mutations.js └── state.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ "env", {"modules": false} ], 4 | "stage-2" 5 | ], 6 | "plugins": ["transform-runtime"], 7 | "comments": false 8 | } 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /dist 2 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parserOptions: { 4 | parser: 'babel-eslint', 5 | sourceType: 'module' 6 | }, 7 | env: { 8 | browser: true 9 | }, 10 | extends: [ 11 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 12 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 13 | 'plugin:vue/essential', 14 | // https://github.com/standard/standard/blob/master/docs/RULES-en.md 15 | 'standard' 16 | ], 17 | // required to lint *.vue files 18 | plugins: [ 19 | 'vue' 20 | ], 21 | globals: { 22 | 'ga': true, // Google Analytics 23 | 'cordova': true, 24 | '__statics': true 25 | }, 26 | // add your custom rules here 27 | 'rules': { 28 | // allow async-await 29 | 'generator-star-spacing': 'off', 30 | 31 | // allow paren-less arrow functions 32 | 'arrow-parens': 0, 33 | 'one-var': 0, 34 | 35 | 'import/first': 0, 36 | 'import/named': 2, 37 | 'import/namespace': 2, 38 | 'import/default': 2, 39 | 'import/export': 2, 40 | 'import/extensions': 0, 41 | 'import/no-unresolved': 0, 42 | 'import/no-extraneous-dependencies': 0, 43 | 44 | // allow debugger during development 45 | 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .quasar 2 | .DS_Store 3 | .thumbs.db 4 | node_modules 5 | /dist 6 | /src-cordova/platforms 7 | /src-cordova/plugins 8 | /src-cordova/www 9 | npm-debug.log* 10 | yarn-debug.log* 11 | yarn-error.log* 12 | 13 | # Editor directories and files 14 | .idea 15 | .vscode 16 | *.suo 17 | *.ntvs* 18 | *.njsproj 19 | *.sln 20 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | plugins: [ 5 | // to edit target browsers: use "browserslist" field in package.json 6 | require('autoprefixer') 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /.stylintrc: -------------------------------------------------------------------------------- 1 | { 2 | "blocks": "never", 3 | "brackets": "never", 4 | "colons": "never", 5 | "colors": "always", 6 | "commaSpace": "always", 7 | "commentSpace": "always", 8 | "cssLiteral": "never", 9 | "depthLimit": false, 10 | "duplicates": true, 11 | "efficient": "always", 12 | "extendPref": false, 13 | "globalDupe": true, 14 | "indentPref": 2, 15 | "leadingZero": "never", 16 | "maxErrors": false, 17 | "maxWarnings": false, 18 | "mixed": false, 19 | "namingConvention": false, 20 | "namingConventionStrict": false, 21 | "none": "never", 22 | "noImportant": false, 23 | "parenSpace": "never", 24 | "placeholder": false, 25 | "prefixVarsWithDollar": "always", 26 | "quotePref": "single", 27 | "semicolons": "never", 28 | "sortOrder": false, 29 | "stackedProperties": "never", 30 | "trailingWhitespace": "never", 31 | "universal": "never", 32 | "valid": true, 33 | "zeroUnits": "never", 34 | "zIndexNormalize": false 35 | } 36 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 mstaack 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Quasar Cloud Demo Application 2 | 3 | This is an app that you can use to learn more about the "Quasar Method". 4 | There may be other ways to do things, but this stuff "Works for us"®. 5 | 6 | This is basically a Dropbox-Like FileManager & News Application. 7 | 8 | ## How to use 9 | ``` 10 | $ npm install -g quasar-cli 11 | $ git clone https://github.com/mstaack/quasar-cloud-demo.git 12 | $ cd quasar-cloud-demo 13 | $ npm install 14 | $ quasar dev 15 | ``` 16 | 17 | ## Features 18 | - dev & prod api endpoints 19 | - Vuex stores 20 | - Axios 21 | - Vuelidate 22 | 23 | ## Screenshots 24 | 25 | ![image](https://user-images.githubusercontent.com/10169509/39871894-90c90524-5466-11e8-9e4b-36cdc7a3f39a.png) 26 | ![image](https://user-images.githubusercontent.com/10169509/39871925-a62c75a4-5466-11e8-9628-f55c8667ef7f.png) 27 | ![image](https://user-images.githubusercontent.com/10169509/39871948-ba4964fc-5466-11e8-890e-6d3e50852a7a.png) 28 | ![image](https://user-images.githubusercontent.com/10169509/39871966-ca72d2b4-5466-11e8-9691-3deef83b38e4.png) 29 | ![image](https://user-images.githubusercontent.com/10169509/39871989-ddaf55fa-5466-11e8-887c-ffe81afa73f9.png) 30 | 31 | ## Help 32 | - Online-Docs: http://quasar-framework.org/ 33 | - Forum: http://forum.quasar-framework.org/ 34 | - Discord Chat: https://discord.gg/5TDhbDg 35 | 36 | ## License 37 | MIT 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "advanced-starter-kit", 3 | "version": "1.0.0", 4 | "description": "A Quasar Framework app", 5 | "productName": "Quasar App", 6 | "cordovaId": "org.cordova.quasar.app", 7 | "author": "mstaack ", 8 | "private": true, 9 | "scripts": { 10 | "lint": "eslint --ext .js,.vue src", 11 | "test": "echo \"No test specified\" && exit 0" 12 | }, 13 | "dependencies": { 14 | "axios": "^0.17.1", 15 | "vue-gallery": "^1.3.1", 16 | "vuelidate": "^0.6.2" 17 | }, 18 | "devDependencies": { 19 | "babel-eslint": "8.2.1", 20 | "eslint": "4.15.0", 21 | "eslint-config-standard": "10.2.1", 22 | "eslint-friendly-formatter": "3.0.0", 23 | "eslint-loader": "1.7.1", 24 | "eslint-plugin-import": "2.7.0", 25 | "eslint-plugin-node": "5.2.0", 26 | "eslint-plugin-promise": "3.4.0", 27 | "eslint-plugin-standard": "3.0.1", 28 | "eslint-plugin-vue": "4.0.0", 29 | "quasar-cli": "^0.15.12" 30 | }, 31 | "engines": { 32 | "node": ">= 8.9.0", 33 | "npm": ">= 5.6.0" 34 | }, 35 | "browserslist": [ 36 | "> 1%", 37 | "last 2 versions", 38 | "not ie <= 10" 39 | ] 40 | } 41 | -------------------------------------------------------------------------------- /quasar.conf.js: -------------------------------------------------------------------------------- 1 | // Configuration for your app 2 | 3 | module.exports = function (ctx) { 4 | return { 5 | plugins: [ 6 | 'axios', 7 | 'vuelidate', 8 | 'title', 9 | 'auth', 10 | ], 11 | css: [ 12 | 'app.styl' 13 | ], 14 | extras: [ 15 | ctx.theme.mat ? 'roboto-font' : null, 16 | 'material-icons', 17 | // 'ionicons', 18 | // 'mdi', 19 | 'fontawesome' 20 | ], 21 | supportIE: false, 22 | vendor: { 23 | add: [], 24 | remove: [] 25 | }, 26 | build: { 27 | env: ctx.prod 28 | ? { 29 | // prod env vars here, for example: 30 | API_HOST: JSON.stringify('https://api.therealhost.com') 31 | 32 | } 33 | : { 34 | // dev env vars here, for example: 35 | API_HOST: JSON.stringify(process.env.API_HOST || 'http://localhost:8000') 36 | }, 37 | scopeHoisting: true, 38 | vueRouterMode: 'history', 39 | // gzip: true, 40 | // analyze: true, 41 | // extractCSS: false, 42 | // useNotifier: false, 43 | extendWebpack (cfg) { 44 | cfg.module.rules.push({ 45 | enforce: 'pre', 46 | test: /\.(js|vue)$/, 47 | loader: 'eslint-loader', 48 | exclude: /(node_modules|quasar)/ 49 | }) 50 | } 51 | }, 52 | devServer: { 53 | // https: true, 54 | // port: 8080, 55 | open: true, // opens browser window automatically 56 | }, 57 | // framework: 'all' --- includes everything; for dev only! 58 | framework: { 59 | components: [ 60 | 'QBtn', 61 | 'QBtnGroup', 62 | 'QCard', 63 | 'QCardActions', 64 | 'QCardMain', 65 | 'QCardMedia', 66 | 'QCardSeparator', 67 | 'QCarousel', 68 | 'QCarouselSlide', 69 | 'QCarouselControl', 70 | 'QCollapsible', 71 | 'QCardTitle', 72 | 'QCheckbox', 73 | 'QContextMenu', 74 | 'QDialog', 75 | 'QFab', 76 | 'QFabAction', 77 | 'QField', 78 | 'QIcon', 79 | 'QInnerLoading', 80 | 'QInput', 81 | 'QItem', 82 | 'QItemMain', 83 | 'QItemSeparator', 84 | 'QItemSide', 85 | 'QItemTile', 86 | 'QLayout', 87 | 'QLayoutDrawer', 88 | 'QLayoutHeader', 89 | 'QBreadcrumbs', 90 | 'QBreadcrumbsEl', 91 | 'QList', 92 | 'QListHeader', 93 | 'QPage', 94 | 'QPageContainer', 95 | 'QPageSticky', 96 | 'QPopover', 97 | 'QParallax', 98 | 'QProgress', 99 | 'QRouteTab', 100 | 'QSpinnerIos', 101 | 'QSearch', 102 | 'QSelect', 103 | 'QTab', 104 | 'QTable', 105 | 'QTableColumns', 106 | 'QUploader', 107 | 'QModal', 108 | 'QModalLayout', 109 | 'QTabs', 110 | 'QTree', 111 | 'QTd', 112 | 'QTh', 113 | 'QToolbar', 114 | 'QToolbarTitle', 115 | 'QTr', 116 | ], 117 | directives: [ 118 | 'Ripple', 119 | 'CloseOverlay' 120 | ], 121 | plugins: [ 122 | 'Loading', 123 | 'LocalStorage', 124 | 'Notify', 125 | 'AppFullscreen', 126 | 'Dialog' 127 | ], 128 | iconSet: 'fontawesome' 129 | }, 130 | // animations: 'all' --- includes all animations 131 | animations: [], 132 | pwa: { 133 | cacheExt: 'js,html,css,ttf,eot,otf,woff,woff2,json,svg,gif,jpg,jpeg,png,wav,ogg,webm,flac,aac,mp4,mp3', 134 | manifest: { 135 | // name: 'Quasar App', 136 | // short_name: 'Quasar-PWA', 137 | // description: 'Best PWA App in town!', 138 | display: 'standalone', 139 | orientation: 'portrait', 140 | background_color: '#ffffff', 141 | theme_color: '#027be3', 142 | icons: [ 143 | { 144 | 'src': 'statics/icons/icon-128x128.png', 145 | 'sizes': '128x128', 146 | 'type': 'image/png' 147 | }, 148 | { 149 | 'src': 'statics/icons/icon-192x192.png', 150 | 'sizes': '192x192', 151 | 'type': 'image/png' 152 | }, 153 | { 154 | 'src': 'statics/icons/icon-256x256.png', 155 | 'sizes': '256x256', 156 | 'type': 'image/png' 157 | }, 158 | { 159 | 'src': 'statics/icons/icon-384x384.png', 160 | 'sizes': '384x384', 161 | 'type': 'image/png' 162 | }, 163 | { 164 | 'src': 'statics/icons/icon-512x512.png', 165 | 'sizes': '512x512', 166 | 'type': 'image/png' 167 | } 168 | ] 169 | } 170 | }, 171 | cordova: { 172 | // id: 'org.cordova.quasar.app' 173 | }, 174 | electron: { 175 | extendWebpack (cfg) { 176 | // do something with cfg 177 | }, 178 | packager: { 179 | // OS X / Mac App Store 180 | // appBundleId: '', 181 | // appCategoryType: '', 182 | // osxSign: '', 183 | // protocol: 'myapp://path', 184 | 185 | // Window only 186 | // win32metadata: { ... } 187 | } 188 | }, 189 | 190 | // leave this here for Quasar CLI 191 | starterKit: '1.0.0-beta.4' 192 | } 193 | } 194 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 15 | -------------------------------------------------------------------------------- /src/assets/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mstaack/quasar-cloud-demo/65b716dd7e57766c8e1866fc08d0dd8613a6f9dd/src/assets/background.jpg -------------------------------------------------------------------------------- /src/assets/quasar-logo-full.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 19 | 21 | 43 | 45 | 46 | 48 | image/svg+xml 49 | 51 | 52 | 53 | 54 | 55 | 60 | 63 | 66 | 69 | 75 | 79 | 83 | 87 | 91 | 95 | 99 | 103 | 104 | 105 | 106 | 107 | 113 | 118 | 126 | 133 | 142 | 151 | 160 | 169 | 178 | 187 | 188 | 189 | 190 | 191 | 192 | -------------------------------------------------------------------------------- /src/assets/sad.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mstaack/quasar-cloud-demo/65b716dd7e57766c8e1866fc08d0dd8613a6f9dd/src/components/.gitkeep -------------------------------------------------------------------------------- /src/components/Cloud/BreadcrumbNavigation.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 52 | 53 | 55 | -------------------------------------------------------------------------------- /src/components/Cloud/Dialogs/CopyDialog.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 84 | 85 | 87 | -------------------------------------------------------------------------------- /src/components/Cloud/Dialogs/CreateFolderDialog.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 90 | 91 | 93 | -------------------------------------------------------------------------------- /src/components/Cloud/Dialogs/DeleteDialog.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 71 | 72 | 73 | 75 | -------------------------------------------------------------------------------- /src/components/Cloud/Dialogs/MoveDialog.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 84 | 85 | 87 | -------------------------------------------------------------------------------- /src/components/Cloud/Dialogs/RenameDialog.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 63 | 64 | 66 | -------------------------------------------------------------------------------- /src/components/Cloud/ImageViewer.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 40 | 41 | 43 | -------------------------------------------------------------------------------- /src/components/Cloud/ItemListRow.vue: -------------------------------------------------------------------------------- 1 | 73 | 74 | 143 | 144 | 148 | -------------------------------------------------------------------------------- /src/components/Cloud/ItemsGrid.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 66 | 67 | 77 | -------------------------------------------------------------------------------- /src/components/Cloud/ItemsList.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 79 | 80 | 82 | -------------------------------------------------------------------------------- /src/components/Cloud/Uploader.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 66 | 67 | 69 | -------------------------------------------------------------------------------- /src/components/InnerLoading.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | 16 | 18 | -------------------------------------------------------------------------------- /src/css/app.styl: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mstaack/quasar-cloud-demo/65b716dd7e57766c8e1866fc08d0dd8613a6f9dd/src/css/app.styl -------------------------------------------------------------------------------- /src/css/themes/common.variables.styl: -------------------------------------------------------------------------------- 1 | // App Shared Variables 2 | // -------------------------------------------------- 3 | // To customize the look and feel of this app, you can override 4 | // the Stylus variables found in Quasar's source Stylus files. Setting 5 | // variables before Quasar's Stylus will use these variables rather than 6 | // Quasar's default Stylus variable values. Stylus variables specific 7 | // to the themes belong in either the variables.ios.styl or variables.mat.styl files. 8 | 9 | // Check documentation for full list of Quasar variables 10 | 11 | 12 | // App Shared Color Variables 13 | // -------------------------------------------------- 14 | // It's highly recommended to change the default colors 15 | // to match your app's branding. 16 | 17 | $primary = #027be3 18 | $secondary = #26A69A 19 | $tertiary = #555 20 | 21 | $neutral = #E0E1E2 22 | $positive = #21BA45 23 | $negative = #DB2828 24 | $info = #31CCEC 25 | $warning = #F2C037 26 | -------------------------------------------------------------------------------- /src/css/themes/variables.ios.styl: -------------------------------------------------------------------------------- 1 | // App Shared Variables 2 | // -------------------------------------------------- 3 | // Shared Stylus variables go in the common.variables.styl file 4 | @import 'common.variables' 5 | 6 | // iOS only Quasar variables overwrites 7 | // ----------------------------------------- 8 | -------------------------------------------------------------------------------- /src/css/themes/variables.mat.styl: -------------------------------------------------------------------------------- 1 | // App Shared Variables 2 | // -------------------------------------------------- 3 | // Shared Stylus variables go in the common.variables.styl file 4 | @import 'common.variables' 5 | 6 | // Material only Quasar variables overwrites 7 | // ----------------------------------------- 8 | -------------------------------------------------------------------------------- /src/index.template.html: -------------------------------------------------------------------------------- 1 | 2 | dir="rtl" <% } %>lang="en"> 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.productName %> 9 | 10 | 11 | 12 | 13 | 14 | <% if (htmlWebpackPlugin.options.ctx.mode.pwa) { %> 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | <% } %> 27 | 28 | <%= htmlWebpackPlugin.options.headScripts %> 29 | 30 | 34 | <% if (!['cordova', 'electron'].includes(htmlWebpackPlugin.options.ctx.modeName) && htmlWebpackPlugin.options.ctx.prod) { 35 | for (var chunk of webpack.chunks) { 36 | for (var file of chunk.files) { 37 | if (file.match(/\.(js|css)$/)) { %> 38 | 39 | <% }}}} %> 40 | 41 | 42 | <% if (!htmlWebpackPlugin.options.ctx.mode.electron) { %> 43 | 46 | <% } %> 47 | 48 | 49 |
50 | 51 | 52 | <%= htmlWebpackPlugin.options.bodyScripts %> 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /src/layouts/auth.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 18 | 19 | 24 | -------------------------------------------------------------------------------- /src/layouts/main.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 56 | 57 | 59 | -------------------------------------------------------------------------------- /src/pages/404.vue: -------------------------------------------------------------------------------- 1 | 17 | -------------------------------------------------------------------------------- /src/pages/auth/login.vue: -------------------------------------------------------------------------------- 1 | 52 | 53 | 107 | 108 | 112 | -------------------------------------------------------------------------------- /src/pages/auth/register.vue: -------------------------------------------------------------------------------- 1 | 65 | 66 | 119 | 120 | 124 | -------------------------------------------------------------------------------- /src/pages/cloud.vue: -------------------------------------------------------------------------------- 1 | 126 | 127 | 129 | 130 | 181 | -------------------------------------------------------------------------------- /src/pages/home.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 15 | -------------------------------------------------------------------------------- /src/pages/news.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 65 | 66 | 68 | -------------------------------------------------------------------------------- /src/pages/profile.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 15 | -------------------------------------------------------------------------------- /src/plugins/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mstaack/quasar-cloud-demo/65b716dd7e57766c8e1866fc08d0dd8613a6f9dd/src/plugins/.gitkeep -------------------------------------------------------------------------------- /src/plugins/auth.js: -------------------------------------------------------------------------------- 1 | export default ({app, router, Vue}) => { 2 | 3 | // Check for protected and guest routes and perform checks 4 | router.beforeEach((to, from, next) => { 5 | 6 | const protectedRoute = to.matched.some(route => route.meta.auth) 7 | 8 | // Allow guest routes 9 | if (!protectedRoute) return next() 10 | 11 | // If auth is required and the user is logged in, verify the token... 12 | if (app.store.getters['session/isAuthenticated']) { 13 | return app.store.dispatch('session/validate').then(user => { 14 | user ? next() : next({name: 'login'}) 15 | }) 16 | } 17 | 18 | next({name: 'login'}) 19 | }) 20 | } 21 | -------------------------------------------------------------------------------- /src/plugins/axios.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | export default ({app, router, Vue}) => { 4 | axios.defaults.baseURL = process.env.API_HOST 5 | Vue.prototype.$axios = axios 6 | } 7 | -------------------------------------------------------------------------------- /src/plugins/title.js: -------------------------------------------------------------------------------- 1 | export default ({app, router, Vue}) => { 2 | router.beforeEach((to, from, next) => { 3 | document.title = `${to.meta.title} | Quasar Demo Application` 4 | next() 5 | }) 6 | } 7 | -------------------------------------------------------------------------------- /src/plugins/vuelidate.js: -------------------------------------------------------------------------------- 1 | import Vuelidate from 'vuelidate' 2 | 3 | export default ({ Vue }) => { 4 | Vue.use(Vuelidate) 5 | } 6 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import VueRouter from 'vue-router' 3 | 4 | import routes from './routes' 5 | 6 | Vue.use(VueRouter) 7 | 8 | const Router = new VueRouter({ 9 | /* 10 | * NOTE! Change Vue Router mode from quasar.conf.js -> build -> vueRouterMode 11 | * 12 | * If you decide to go with "history" mode, please also set "build.publicPath" 13 | * to something other than an empty string. 14 | * Example: '/' instead of '' 15 | */ 16 | 17 | // Leave as is and change from quasar.conf.js instead! 18 | mode: process.env.VUE_ROUTER_MODE, 19 | base: process.env.VUE_ROUTER_BASE, 20 | scrollBehavior: () => ({ y: 0 }), 21 | routes 22 | }) 23 | 24 | export default Router 25 | -------------------------------------------------------------------------------- /src/router/routes.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | { 3 | path: '/', 4 | redirect: '/news', 5 | component: () => import('layouts/main'), 6 | meta: {auth: true}, 7 | children: [ 8 | { 9 | path: 'news', 10 | name: 'news', 11 | component: () => import('pages/news'), 12 | meta: {title: 'News'} 13 | }, 14 | { 15 | path: 'cloud', 16 | name: 'cloud', 17 | component: () => import('pages/cloud'), 18 | meta: {title: 'Cloud'} 19 | }, 20 | { 21 | path: 'profile', 22 | name: 'profile', 23 | component: () => import('pages/profile'), 24 | meta: {title: 'Profile'} 25 | } 26 | ] 27 | }, 28 | { 29 | path: '/auth', 30 | redirect: '/auth/login', 31 | meta: {guest: true}, 32 | component: () => import('layouts/auth'), 33 | children: [ 34 | { 35 | path: 'login', 36 | name: 'login', 37 | component: () => import('pages/auth/login'), 38 | meta: {title: 'Login'} 39 | }, 40 | { 41 | path: 'register', 42 | name: 'register', 43 | component: () => import('pages/auth/register'), 44 | meta: {title: 'Register'} 45 | } 46 | ] 47 | }, 48 | 49 | { // Always leave this as last one 50 | path: '*', 51 | component: () => import('pages/404') 52 | } 53 | ] 54 | -------------------------------------------------------------------------------- /src/statics/icons/apple-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mstaack/quasar-cloud-demo/65b716dd7e57766c8e1866fc08d0dd8613a6f9dd/src/statics/icons/apple-icon-152x152.png -------------------------------------------------------------------------------- /src/statics/icons/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mstaack/quasar-cloud-demo/65b716dd7e57766c8e1866fc08d0dd8613a6f9dd/src/statics/icons/favicon-16x16.png -------------------------------------------------------------------------------- /src/statics/icons/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mstaack/quasar-cloud-demo/65b716dd7e57766c8e1866fc08d0dd8613a6f9dd/src/statics/icons/favicon-32x32.png -------------------------------------------------------------------------------- /src/statics/icons/icon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mstaack/quasar-cloud-demo/65b716dd7e57766c8e1866fc08d0dd8613a6f9dd/src/statics/icons/icon-128x128.png -------------------------------------------------------------------------------- /src/statics/icons/icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mstaack/quasar-cloud-demo/65b716dd7e57766c8e1866fc08d0dd8613a6f9dd/src/statics/icons/icon-192x192.png -------------------------------------------------------------------------------- /src/statics/icons/icon-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mstaack/quasar-cloud-demo/65b716dd7e57766c8e1866fc08d0dd8613a6f9dd/src/statics/icons/icon-256x256.png -------------------------------------------------------------------------------- /src/statics/icons/icon-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mstaack/quasar-cloud-demo/65b716dd7e57766c8e1866fc08d0dd8613a6f9dd/src/statics/icons/icon-384x384.png -------------------------------------------------------------------------------- /src/statics/icons/icon-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mstaack/quasar-cloud-demo/65b716dd7e57766c8e1866fc08d0dd8613a6f9dd/src/statics/icons/icon-512x512.png -------------------------------------------------------------------------------- /src/statics/icons/ms-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mstaack/quasar-cloud-demo/65b716dd7e57766c8e1866fc08d0dd8613a6f9dd/src/statics/icons/ms-icon-144x144.png -------------------------------------------------------------------------------- /src/statics/quasar-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mstaack/quasar-cloud-demo/65b716dd7e57766c8e1866fc08d0dd8613a6f9dd/src/statics/quasar-logo.png -------------------------------------------------------------------------------- /src/store/cloud/actions.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | export function setPath ({commit, dispatch}, path) { 4 | commit('SET_PATH', path) 5 | dispatch('refresh') 6 | } 7 | 8 | export function refresh ({commit, state}) { 9 | state.loading = true 10 | axios.all([ 11 | axios.get('cloud/list', {params: {path: state.path}}), 12 | axios.get('cloud/folders') 13 | ]).then(axios.spread((listResponse, allFoldersResponse) => { 14 | state.loading = false 15 | commit('SET_ITEMS', listResponse.data.data) 16 | commit('SET_ALL_FOLDERS', allFoldersResponse.data.data) 17 | commit('RESET_ITEM_SELECTION') 18 | })).catch(() => { 19 | state.loading = false 20 | }) 21 | } 22 | 23 | export function deleteItems ({dispatch, commit}, items) { 24 | return axios.post('/cloud/delete', {items: items}) 25 | .then(() => { 26 | dispatch('refresh') 27 | dispatch('toggleSelectMode') 28 | }) 29 | } 30 | 31 | export function copyItems ({dispatch}, {items, target}) { 32 | return axios.post('/cloud/copy', {items: items, target: target}) 33 | .then(() => { 34 | dispatch('refresh') 35 | }) 36 | } 37 | 38 | export function moveItems ({dispatch}, {items, target}) { 39 | return axios.post('/cloud/move', {items: items, target: target}) 40 | .then(() => { 41 | dispatch('refresh') 42 | }) 43 | } 44 | 45 | export function renameItem ({dispatch}, {item, name}) { 46 | return axios.post('/cloud/rename', {item: item, name: name}) 47 | .then(() => { 48 | dispatch('refresh') 49 | }) 50 | } 51 | 52 | export function createFolder ({dispatch, state}, name) { 53 | return axios.post('/cloud/create-directory', {name: name, target: state.path}) 54 | .then(() => { 55 | dispatch('refresh') 56 | }) 57 | } 58 | 59 | export function toggleSelectMode ({commit}) { 60 | commit('TOGGLE_SELECT_MODE') 61 | commit('RESET_ITEM_SELECTION') 62 | } 63 | 64 | export function selectAll ({commit}) { 65 | commit('SELECT_ALL') 66 | } 67 | 68 | export function selectNone ({commit}) { 69 | commit('RESET_ITEM_SELECTION') 70 | } 71 | 72 | export function changeViewMode ({commit}, view) { 73 | commit('CHANGE_VIEW_MODE', view) 74 | } 75 | 76 | export function toggleItemSelection ({commit}, item) { 77 | commit('TOGGLE_ITEM_SELECTION', item) 78 | } 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /src/store/cloud/getters.js: -------------------------------------------------------------------------------- 1 | export const items = (state) => { 2 | return state.items 3 | } 4 | 5 | export const files = (state) => { 6 | return state.items.filter((item) => { 7 | return item.is_file 8 | }) 9 | } 10 | 11 | export const folders = (state) => { 12 | return state.items.filter((item) => { 13 | return item.is_dir 14 | }) 15 | } 16 | 17 | export const allFolders = (state) => { 18 | return state.allFolders 19 | .filter((folder) => state.path !== folder) 20 | .map((folder) => { 21 | return { 22 | value: folder, 23 | label: folder 24 | } 25 | }) 26 | } 27 | 28 | export const path = (state) => { 29 | return state.path 30 | } 31 | 32 | export const loading = (state) => { 33 | return state.loading 34 | } 35 | 36 | export const selectMode = (state) => { 37 | return state.selectMode 38 | } 39 | 40 | export const viewMode = (state) => { 41 | return state.viewMode 42 | } 43 | 44 | export const selectedItems = (state) => { 45 | return state.selectedItems 46 | } 47 | 48 | -------------------------------------------------------------------------------- /src/store/cloud/index.js: -------------------------------------------------------------------------------- 1 | import state from './state' 2 | import * as getters from './getters' 3 | import * as mutations from './mutations' 4 | import * as actions from './actions' 5 | 6 | export default { 7 | namespaced: true, 8 | state, 9 | getters, 10 | mutations, 11 | actions 12 | } 13 | -------------------------------------------------------------------------------- /src/store/cloud/mutations.js: -------------------------------------------------------------------------------- 1 | export const SET_ITEMS = (state, items) => { 2 | state.items = items 3 | } 4 | 5 | export const SET_ALL_FOLDERS = (state, folders) => { 6 | state.allFolders = folders 7 | } 8 | 9 | export const SET_PATH = (state, path) => { 10 | state.path = path 11 | } 12 | 13 | export const CHANGE_VIEW_MODE = (state, view) => { 14 | state.viewMode = view 15 | } 16 | 17 | export const TOGGLE_SELECT_MODE = (state) => { 18 | state.selectMode = !state.selectMode 19 | } 20 | export const RESET_ITEM_SELECTION = (state) => { 21 | state.selectedItems = [] 22 | } 23 | 24 | export const TOGGLE_ITEM_SELECTION = (state, item) => { 25 | const selectedItemIndex = state.selectedItems.findIndex((selectedItem) => selectedItem.path === item.path) 26 | selectedItemIndex === -1 ? 27 | state.selectedItems.push(item) : 28 | state.selectedItems.splice(selectedItemIndex, 1) 29 | } 30 | 31 | export const SELECT_ALL = (state) => { 32 | state.selectedItems = state.items 33 | } 34 | -------------------------------------------------------------------------------- /src/store/cloud/state.js: -------------------------------------------------------------------------------- 1 | export default { 2 | items: [], 3 | allFolders: [], 4 | path: '/', 5 | selectedItems: [], 6 | loading: false, 7 | viewMode: 'list', 8 | selectMode: false 9 | } 10 | -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | import session from './session' 5 | import cloud from './cloud' 6 | 7 | Vue.use(Vuex) 8 | 9 | const modules = { 10 | session, 11 | cloud 12 | } 13 | 14 | const store = new Vuex.Store({modules}) 15 | 16 | // Automatically run the `init` action if available for every module. 17 | for (const moduleName of Object.keys(modules)) { 18 | if (modules[moduleName].actions.init) { 19 | store.dispatch(`${moduleName}/init`) 20 | } 21 | } 22 | 23 | export default store 24 | -------------------------------------------------------------------------------- /src/store/session/actions.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios' 2 | 3 | import {LocalStorage} from 'quasar' 4 | import setAxiosHeaders from './helpers' 5 | 6 | export function init ({state}) { 7 | setAxiosHeaders(state) 8 | } 9 | 10 | export function register ({commit, state}, form) { 11 | return axios.post('auth/register', form) 12 | .then(response => { 13 | commit('LOGIN', response.data.user) 14 | setAxiosHeaders(state) 15 | }) 16 | } 17 | 18 | export function login ({commit, dispatch, getters}, form) { 19 | 20 | if (getters.isAuthenticated) return dispatch('validate') 21 | 22 | return axios.post('auth/login', form) 23 | .then(response => { 24 | const user = response.data.user 25 | commit('LOGIN', user) 26 | return user 27 | }) 28 | } 29 | 30 | export function validate ({commit, state}) { 31 | if (!state.user) return Promise.resolve(null) 32 | 33 | return axios.get('auth/user') 34 | .then(response => { 35 | const user = response.data.user 36 | commit('LOGIN', user) 37 | return user 38 | }).catch(error => { 39 | if (error.response.status === 401) { 40 | commit('LOGOUT') 41 | } 42 | return null 43 | }) 44 | } 45 | 46 | export function logout ({commit}) { 47 | commit('LOGOUT') 48 | } 49 | -------------------------------------------------------------------------------- /src/store/session/getters.js: -------------------------------------------------------------------------------- 1 | export const isAuthenticated = (state) => { 2 | return !!state.user 3 | } 4 | export const token = (state) => { 5 | return state.user.token 6 | } 7 | -------------------------------------------------------------------------------- /src/store/session/helpers.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios/index' 2 | 3 | export default function setAxiosHeaders (state) { 4 | axios.defaults.headers.common.Authorization = state.user 5 | ? 'Bearer ' + state.user.token 6 | : '' 7 | } 8 | -------------------------------------------------------------------------------- /src/store/session/index.js: -------------------------------------------------------------------------------- 1 | import state from './state' 2 | import * as getters from './getters' 3 | import * as mutations from './mutations' 4 | import * as actions from './actions' 5 | 6 | export default { 7 | namespaced: true, 8 | state, 9 | getters, 10 | mutations, 11 | actions 12 | } 13 | -------------------------------------------------------------------------------- /src/store/session/mutations.js: -------------------------------------------------------------------------------- 1 | import {LocalStorage} from 'quasar' 2 | import setAxiosHeaders from './helpers' 3 | 4 | export const LOGIN = (state, user) => { 5 | state.user = user 6 | LocalStorage.set('user', user) 7 | setAxiosHeaders(state) 8 | } 9 | 10 | export const LOGOUT = (state, user) => { 11 | state.user = null 12 | LocalStorage.clear(); 13 | setAxiosHeaders(state) 14 | } 15 | -------------------------------------------------------------------------------- /src/store/session/state.js: -------------------------------------------------------------------------------- 1 | import {LocalStorage} from 'quasar' 2 | 3 | export default { 4 | user: LocalStorage.get.item('user') 5 | } 6 | --------------------------------------------------------------------------------