├── .browserslistrc ├── .env.example ├── .eslintrc.js ├── .firebaserc ├── .github ├── FUNDING.yml └── workflows │ └── deploy.yaml ├── .gitignore ├── .npmrc ├── .nvmrc ├── .prettierrc.js ├── .vercelignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── cypress.json ├── firebase.json ├── index.html ├── jest.config.js ├── package-lock.json ├── package.json ├── public ├── assets │ └── img │ │ ├── default-profile.png │ │ └── logo.png ├── favicon.ico └── version.json ├── src ├── app │ ├── app.html │ ├── app.scss │ ├── app.ts │ └── app.vue ├── components │ ├── input │ │ ├── input.html │ │ ├── input.scss │ │ ├── input.ts │ │ └── input.vue │ ├── menu-item │ │ ├── menu-item.html │ │ ├── menu-item.scss │ │ ├── menu-item.ts │ │ └── menu-item.vue │ └── sidebar-search │ │ ├── sidebar-search.html │ │ ├── sidebar-search.scss │ │ ├── sidebar-search.ts │ │ └── sidebar-search.vue ├── firebase │ └── index.ts ├── index.scss ├── interfaces │ ├── payload.ts │ └── state.ts ├── main.ts ├── modules │ ├── forgot-password │ │ ├── forgot-password.html │ │ ├── forgot-password.scss │ │ ├── forgot-password.ts │ │ └── forgot-password.vue │ ├── login │ │ ├── login.html │ │ ├── login.scss │ │ ├── login.ts │ │ └── login.vue │ ├── main │ │ ├── control-sidebar │ │ │ ├── control-sidebar.html │ │ │ ├── control-sidebar.scss │ │ │ ├── control-sidebar.ts │ │ │ └── control-sidebar.vue │ │ ├── footer │ │ │ ├── footer.html │ │ │ ├── footer.scss │ │ │ ├── footer.ts │ │ │ └── footer.vue │ │ ├── header │ │ │ ├── header.html │ │ │ ├── header.scss │ │ │ ├── header.ts │ │ │ ├── header.vue │ │ │ ├── languages │ │ │ │ ├── languages.html │ │ │ │ ├── languages.scss │ │ │ │ ├── languages.ts │ │ │ │ └── languages.vue │ │ │ ├── messages │ │ │ │ ├── messages.html │ │ │ │ ├── messages.scss │ │ │ │ ├── messages.ts │ │ │ │ └── messages.vue │ │ │ ├── notifications │ │ │ │ ├── notifications.html │ │ │ │ ├── notifications.scss │ │ │ │ ├── notifications.ts │ │ │ │ └── notifications.vue │ │ │ └── user │ │ │ │ ├── user.html │ │ │ │ ├── user.scss │ │ │ │ ├── user.ts │ │ │ │ └── user.vue │ │ ├── main.html │ │ ├── main.scss │ │ ├── main.ts │ │ ├── main.vue │ │ └── menu-sidebar │ │ │ ├── menu-sidebar.html │ │ │ ├── menu-sidebar.scss │ │ │ ├── menu-sidebar.ts │ │ │ └── menu-sidebar.vue │ ├── recover-password │ │ ├── recover-password.html │ │ ├── recover-password.scss │ │ ├── recover-password.ts │ │ └── recover-password.vue │ └── register │ │ ├── register.html │ │ ├── register.scss │ │ ├── register.ts │ │ └── register.vue ├── pages │ ├── blank │ │ ├── blank.html │ │ ├── blank.scss │ │ ├── blank.ts │ │ └── blank.vue │ ├── dashboard │ │ ├── dashboard.html │ │ ├── dashboard.scss │ │ ├── dashboard.ts │ │ └── dashboard.vue │ ├── main-menu │ │ ├── main-menu.html │ │ ├── main-menu.scss │ │ ├── main-menu.ts │ │ ├── main-menu.vue │ │ └── sub-menu │ │ │ ├── sub-menu.html │ │ │ ├── sub-menu.scss │ │ │ ├── sub-menu.ts │ │ │ └── sub-menu.vue │ └── profile │ │ ├── profile.html │ │ ├── profile.scss │ │ ├── profile.ts │ │ └── profile.vue ├── router │ └── index.ts ├── services │ └── auth.ts ├── shims-vue.d.ts ├── shims-vuex.d.ts ├── store │ ├── auth │ │ ├── actions.ts │ │ ├── getters.ts │ │ ├── index.ts │ │ └── mutations.ts │ ├── index.ts │ └── ui │ │ ├── actions.ts │ │ ├── getters.ts │ │ ├── index.ts │ │ └── mutations.ts ├── translation │ ├── en.json │ ├── es.json │ ├── index.ts │ └── tr.json ├── types │ └── user.ts ├── utils │ ├── axios.ts │ ├── helpers.ts │ └── themes.ts └── vite-env.d.ts ├── summernote └── package.json ├── tests ├── e2e │ ├── .eslintrc.js │ ├── plugins │ │ └── index.js │ ├── specs │ │ └── test.js │ └── support │ │ ├── commands.js │ │ └── index.js └── unit │ ├── example.spec.js │ ├── example.spec.js.map │ └── example.spec.ts ├── tsconfig.json ├── vercel.json └── vite.config.ts /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not dead 4 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | VITE_NODE_ENV= 2 | VITE_FIREBASE_CONFIG= 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: [ 7 | 'plugin:vue/vue3-essential', 8 | 'eslint:recommended', 9 | '@vue/typescript/recommended', 10 | '@vue/prettier' 11 | ], 12 | parserOptions: { 13 | ecmaVersion: 2020 14 | }, 15 | rules: { 16 | 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 17 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 18 | 'no-useless-catch': 'off', 19 | '@typescript-eslint/no-explicit-any': 'off', 20 | '@typescript-eslint/explicit-module-boundary-types': 'off', 21 | '@typescript-eslint/no-inferrable-types': 'off', 22 | 'vue/script-setup-uses-vars': 'off', 23 | 'vue/multi-word-component-names': 'off' 24 | }, 25 | overrides: [ 26 | { 27 | files: [ 28 | '**/__tests__/*.{j,t}s?(x)', 29 | '**/tests/unit/**/*.spec.{j,t}s?(x)' 30 | ], 31 | env: { 32 | jest: true 33 | } 34 | } 35 | ] 36 | }; 37 | -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "admin-lte-3" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: [erdkse] 2 | -------------------------------------------------------------------------------- /.github/workflows/deploy.yaml: -------------------------------------------------------------------------------- 1 | name: Production Tag Deployment 2 | env: 3 | VITE_NODE_ENV: ${{ secrets.VITE_NODE_ENV }} 4 | VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} 5 | VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} 6 | VITE_FIREBASE_CONFIG: ${{ secrets.VITE_FIREBASE_CONFIG }} 7 | VITE_GA_ID: ${{ secrets.VITE_GA_ID }} 8 | on: 9 | workflow_dispatch: 10 | push: 11 | tags: 12 | - '*' 13 | jobs: 14 | Deploy-Production: 15 | runs-on: ubuntu-latest 16 | steps: 17 | - uses: actions/checkout@v3 18 | - name: Install Vercel CLI 19 | run: npm install --global vercel@latest 20 | - name: Pull Vercel Environment Information 21 | run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }} 22 | - name: Build Project Artifacts 23 | run: | 24 | export NODE_OPTIONS="--max_old_space_size=4096" 25 | vercel build --prod --token=${{ secrets.VERCEL_TOKEN }} 26 | - name: Deploy Project Artifacts to Vercel 27 | run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }} 28 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | /tests/e2e/videos/ 6 | /tests/e2e/screenshots/ 7 | 8 | # local env files 9 | .env.local 10 | .env.*.local 11 | 12 | # Log files 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | pnpm-debug.log* 17 | 18 | # Editor directories and files 19 | .idea 20 | .vscode 21 | *.suo 22 | *.ntvs* 23 | *.njsproj 24 | *.sln 25 | *.sw? 26 | 27 | .env 28 | 29 | firebase-debug.log 30 | ui-debug.log 31 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | # Supress wall of text on 'npm install' 2 | audit = false 3 | fund = false 4 | update-notifier = true 5 | # Lock versions of node and npm, when looking up engines. 6 | node-version = 18.7.0 7 | npm-version = 8.15.0 8 | # Default options for package-lock - package-lock=true package-lock-only=false 9 | # If set to false, then ignore package-lock.json files when installing. This will also prevent writing package-lock.json if save is true. 10 | # When package package-locks are disabled, automatic pruning of extraneous modules will also be disabled. 11 | package-lock = true 12 | package-lock-only = false 13 | legacy-peer-deps = true 14 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v18.7.0 -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | trailingComma: 'none', 3 | tabWidth: 4, 4 | singleQuote: true, 5 | printWidth: 80, 6 | semi: true, 7 | bracketSpacing: false, 8 | }; 9 | -------------------------------------------------------------------------------- /.vercelignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | 4 | .env -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. 4 | 5 | ### [0.2.18](https://github.com/erdkse/adminlte-3-vue/compare/v0.2.17...v0.2.18) (2024-05-28) 6 | 7 | 8 | ### Bug Fixes 9 | 10 | * change all styles to scoped ([bdb647c](https://github.com/erdkse/adminlte-3-vue/commit/bdb647cca14aa36df9e486104a5e8b23c9eecf7d)) 11 | 12 | ### [0.2.17](https://github.com/erdkse/adminlte-3-vue/compare/v0.2.16...v0.2.17) (2024-05-25) 13 | 14 | ### [0.2.16](https://github.com/erdkse/adminlte-3-vue/compare/v0.2.15...v0.2.16) (2024-05-24) 15 | 16 | ### [0.2.15](https://github.com/erdkse/adminlte-3-vue/compare/v0.2.14...v0.2.15) (2024-05-24) 17 | 18 | 19 | ### Bug Fixes 20 | 21 | * handle social sigin issues ([9443901](https://github.com/erdkse/adminlte-3-vue/commit/9443901f7a5dd9d59e99f5037e4caea6ddaa8ff3)) 22 | * setting user to state ([b5b5aec](https://github.com/erdkse/adminlte-3-vue/commit/b5b5aecc124a17480ac9766a717c1c9bfa732c1c)) 23 | 24 | ### [0.2.14](https://github.com/erdkse/adminlte-3-vue/compare/v0.2.13...v0.2.14) (2024-05-14) 25 | 26 | ### [0.2.13](https://github.com/erdkse/adminlte-3-vue/compare/v0.2.12...v0.2.13) (2024-05-13) 27 | 28 | ### [0.2.12](https://github.com/erdkse/adminlte-3-vue/compare/v0.2.11...v0.2.12) (2024-05-13) 29 | 30 | ### [0.2.11](https://github.com/erdkse/adminlte-3-vue/compare/v0.2.10...v0.2.11) (2024-05-13) 31 | 32 | 33 | ### Features 34 | 35 | * add firebase as backend service ([bf72858](https://github.com/erdkse/adminlte-3-vue/commit/bf728588f9869ee02d9778fc93bcc4dbd7561f2c)) 36 | * update packages ([10929e8](https://github.com/erdkse/adminlte-3-vue/commit/10929e8ad5b9da0e859645e559c79513b379d1b3)) 37 | 38 | ### [0.2.10](https://github.com/erdkse/adminlte-3-vue/compare/v0.2.9...v0.2.10) (2024-05-12) 39 | 40 | 41 | ### Features 42 | 43 | * update vercel rewrite rule ([5029f50](https://github.com/erdkse/adminlte-3-vue/commit/5029f50163e5898c61c9cc68ff4111a832dd4952)) 44 | 45 | ### [0.2.9](https://github.com/erdkse/adminlte-3-vue/compare/v0.2.8...v0.2.9) (2024-02-16) 46 | 47 | ### [0.2.8](https://github.com/erdkse/adminlte-3-vue/compare/v0.2.7...v0.2.8) (2024-02-16) 48 | 49 | ### [0.2.7](https://github.com/erdkse/adminlte-3-vue/compare/v0.2.6...v0.2.7) (2024-02-16) 50 | 51 | ### [0.2.6](https://github.com/erdkse/adminlte-3-vue/compare/v0.2.5...v0.2.6) (2024-02-16) 52 | 53 | ### [0.2.5](https://github.com/erdkse/adminlte-3-vue/compare/v0.2.4...v0.2.5) (2024-02-16) 54 | 55 | ### [0.2.4](https://github.com/erdkse/adminlte-3-vue/compare/v0.2.3...v0.2.4) (2024-02-16) 56 | 57 | ### [0.2.3](https://github.com/erdkse/adminlte-3-vue/compare/v0.2.2...v0.2.3) (2024-02-16) 58 | 59 | ### [0.2.2](https://github.com/erdkse/adminlte-3-vue/compare/v0.2.1...v0.2.2) (2024-02-16) 60 | 61 | ### [0.2.1](https://github.com/erdkse/adminlte-3-vue/compare/v0.2.0...v0.2.1) (2024-02-16) 62 | 63 | 64 | ### Bug Fixes 65 | 66 | * change vite build command ([5ad1857](https://github.com/erdkse/adminlte-3-vue/commit/5ad1857d4f4042668d312c8f30f0c82f9d82d5d5)) 67 | 68 | ## 0.2.0 (2024-01-21) 69 | 70 | 71 | ### Features 72 | 73 | * add ability of changing navbar theme ([62d3dd1](https://github.com/erdkse/adminlte-3-vue/commit/62d3dd1fd2b0f06d705dbda98d2e832be3794063)) 74 | * add ability to change sidebar skin ([b159580](https://github.com/erdkse/adminlte-3-vue/commit/b159580aa9557467f8e946329b168fb32c2fc128)) 75 | * add control sidebar to handle ui related things ([de2a17e](https://github.com/erdkse/adminlte-3-vue/commit/de2a17ed7f328811e556652b7e21c85655b3b4df)) 76 | * Add custom components ([3136b84](https://github.com/erdkse/adminlte-3-vue/commit/3136b8470d024155a95e0d8401d246d571152f54)) 77 | * add dark mode ([c54a7db](https://github.com/erdkse/adminlte-3-vue/commit/c54a7db0202f58751f9ccd8ca2287bd5ef3c87f1)) 78 | * Add dropdowns ([eaf8867](https://github.com/erdkse/adminlte-3-vue/commit/eaf8867e1d605fdbc4d024102202cd8e957f4bfb)) 79 | * Add multilevel menu support ([5c6ee06](https://github.com/erdkse/adminlte-3-vue/commit/5c6ee060d99f11f833e70f47aa0a7b63ab9dc4c1)) 80 | * Add navigation ([6908ecc](https://github.com/erdkse/adminlte-3-vue/commit/6908ecc776c7daf94d52dd5ccb12cfd1d5057408)) 81 | * Add new pages ([8c5b65d](https://github.com/erdkse/adminlte-3-vue/commit/8c5b65db1971d0bbc8bd6184f2e79d822807fd1f)) 82 | * add notifications upon sucessful login and register ([4719578](https://github.com/erdkse/adminlte-3-vue/commit/471957892b2753ff91baa92727f1baafff56d9c3)) 83 | * Add routing ([45d1de6](https://github.com/erdkse/adminlte-3-vue/commit/45d1de62256d95c901c92e54a859f4c150b4cad7)) 84 | * Add screenSize management ([522afac](https://github.com/erdkse/adminlte-3-vue/commit/522afac80cbf129db05937a448b6e15aaf44f71f)) 85 | * add selection component ([56ac97d](https://github.com/erdkse/adminlte-3-vue/commit/56ac97d039e7e319edcd945a7186eb96def1729c)) 86 | * add serve.jsü ([824ec94](https://github.com/erdkse/adminlte-3-vue/commit/824ec941f7ba5f18b66bf49a268de312effae691)) 87 | * add sidebar-search component ([4568eb6](https://github.com/erdkse/adminlte-3-vue/commit/4568eb656cb631ba81277de0564d89d736adb937)) 88 | * Add small screen overlay ([d53d46d](https://github.com/erdkse/adminlte-3-vue/commit/d53d46dab8537dbf830583719717960cda8f6d60)) 89 | * Add store ([e90721d](https://github.com/erdkse/adminlte-3-vue/commit/e90721d63cb3257cb06ad73aa279730eca5e430b)) 90 | * Add Turkish language support ([04b1b7f](https://github.com/erdkse/adminlte-3-vue/commit/04b1b7ff487b77dc350aa20933b96deaead571cc)) 91 | * Add window size listener ([c501352](https://github.com/erdkse/adminlte-3-vue/commit/c501352e7eeff1bbd4120accde2ea17c741303a3)) 92 | * Authentication ([1c8fb92](https://github.com/erdkse/adminlte-3-vue/commit/1c8fb923730ac4f2de746f73f5d449cbdc434fd1)) 93 | * Change facebook App id ([1534a5c](https://github.com/erdkse/adminlte-3-vue/commit/1534a5c23eb0ba7eef8b2e974355121345726dad)) 94 | * enable dark mode toggling ([40e2de6](https://github.com/erdkse/adminlte-3-vue/commit/40e2de6be74e731e6f86228135e60a2805a7dde5)) 95 | * Handle actions ([33ed6cf](https://github.com/erdkse/adminlte-3-vue/commit/33ed6cfe09f7058670dd2b00482e82979d4bd44d)) 96 | * Make language dropdown functional ([757fc53](https://github.com/erdkse/adminlte-3-vue/commit/757fc53817823c2164a27e1d4a2dba042d61229d)) 97 | * Redefine login and register pages ([40e5685](https://github.com/erdkse/adminlte-3-vue/commit/40e568544b92e6d3c995a54f42762e3a3cc19dcc)) 98 | * Split main store ([8b09dd6](https://github.com/erdkse/adminlte-3-vue/commit/8b09dd678d63e306428ead1c3eaf60d39fd2840f)) 99 | * switch dark mode gracefully ([3c2fc30](https://github.com/erdkse/adminlte-3-vue/commit/3c2fc303ceccf9b1d30bda063bc07876a411f7cf)) 100 | * update application dependecies ([f3d86c1](https://github.com/erdkse/adminlte-3-vue/commit/f3d86c14113f8dd45362b41437ecd9fc9eb33177)) 101 | * update checkbox component ([cc2395e](https://github.com/erdkse/adminlte-3-vue/commit/cc2395ec7f003a9d001983275acfc0da0ee6c4de)) 102 | * Update dependecies ([d062330](https://github.com/erdkse/adminlte-3-vue/commit/d06233089586bfb26655eb4ab5f8383154f77fbb)) 103 | * Update login form ([6b30384](https://github.com/erdkse/adminlte-3-vue/commit/6b303840aca35cf46d54ac18c1c9fb01ccab68c9)) 104 | * update packages ([0c6b903](https://github.com/erdkse/adminlte-3-vue/commit/0c6b903dba8b9f891f07cf9fa726673e1e0913ac)) 105 | * update packages ([eff36c0](https://github.com/erdkse/adminlte-3-vue/commit/eff36c0c4dee6f19cc30f1a210ea7c909cce7841)) 106 | * update packages ([9fd7530](https://github.com/erdkse/adminlte-3-vue/commit/9fd753046b43d44d5d88bce50959f1325f4e4ea1)) 107 | * update vue version ([f340b5b](https://github.com/erdkse/adminlte-3-vue/commit/f340b5b887889e8668d7e70c03c0f6d17fe92e61)) 108 | * update Vue version to 3.4.15 ([84db602](https://github.com/erdkse/adminlte-3-vue/commit/84db602ddafb6d4512752e450590e2fe670b7619)) 109 | * Upgrade Vue version to 3.2.18 ([5aab772](https://github.com/erdkse/adminlte-3-vue/commit/5aab7728c5efccf681797e5b34345aeef520e893)) 110 | 111 | 112 | ### Bug Fixes 113 | 114 | * add member since value ([a9eb115](https://github.com/erdkse/adminlte-3-vue/commit/a9eb115dcf9e9695d2f149b5eaa51b0fb93ad274)) 115 | * Change facebook app secret ([37921ac](https://github.com/erdkse/adminlte-3-vue/commit/37921acb508c8912a89b9072285042bd4cec1d8f)) 116 | * checkbox padding issue ([d44bcaf](https://github.com/erdkse/adminlte-3-vue/commit/d44bcaffdcc93e43e1ae93291b1f0daa72fff616)) 117 | * Dependecy errors ([0092ce0](https://github.com/erdkse/adminlte-3-vue/commit/0092ce08ca0bb2bf966a083927861ae65ca3ccf1)) 118 | * Dropdown style issue ([683d5d3](https://github.com/erdkse/adminlte-3-vue/commit/683d5d3267e4ed84be17b9dd1d5e3e12421e9fd0)) 119 | * dropdown styles ([835cc56](https://github.com/erdkse/adminlte-3-vue/commit/835cc568828688179b60f4a73e2669b641dfe987)) 120 | * Fix circleci ([ec6119c](https://github.com/erdkse/adminlte-3-vue/commit/ec6119c244ebd4bb44ee293be4d479723175d9fc)) 121 | * rearrange styles ([8ad76e7](https://github.com/erdkse/adminlte-3-vue/commit/8ad76e706b0353b25c57169c14062ceae9b4bff7)) 122 | * Update eslint file ([ef00d53](https://github.com/erdkse/adminlte-3-vue/commit/ef00d53eaedf470390228a073379cd0d1613a151)) 123 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Erdi Köse 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 |

2 | 3 | AdminLTE logo 4 | 5 |

6 | 7 |

Admin LTE 3.2.0 - Vue 3.4.27

8 | 9 |

10 | This repository is a form of original AdminLTE project. It is aim to use AdminLTE template with Vue. 11 |

12 |
13 | 14 | 15 | 16 | ![Stars](https://img.shields.io/github/stars/erdkse/adminlte-3-vue?style=flat-square) 17 | ![Forks](https://img.shields.io/github/forks/erdkse/adminlte-3-vue?style=flat-square) 18 | ![Issues](https://img.shields.io/github/issues/erdkse/adminlte-3-vue?style=flat-square) 19 | [![All Contributors](https://img.shields.io/badge/all_contributors-4-green.svg?style=flat-square)](#contributors-) 20 | ![GitHub last commit](https://img.shields.io/github/last-commit/erdkse/adminlte-3-vue.svg) 21 | [![License](https://img.shields.io/github/license/erdkse/adminlte-3-vue.svg)](LICENSE) 22 | ![Sponsors](https://img.shields.io/github/sponsors/erdkse.svg) 23 | 24 | 25 | 26 | ## Demo 27 | 28 | Online demo: https://www.erdkse.com/projects/preview/adminlte-vue 29 | 30 | To login website you can `create` a user. All authenication related features are `working` and `live`! 31 | 32 | `Firebase` is added as backend provider to increase better user experince. 33 | 34 | ## Development 35 | 36 | First, install the dependencies with `npm install` command. 37 | 38 | You need to run `npm run firebase:start` on a different terminal and keep it running. 39 | 40 | Then, in the project directory, you can run: `npm run dev` 41 | 42 | Open [http://localhost:5173](http://localhost:5173) to view it in the browser. 43 | 44 | ## License 45 | 46 | [![License](https://img.shields.io/github/license/erdkse/adminlte-3-vue.svg)](/LICENSE) 47 | 48 | Released 2021 by [Erdi Köse](https://erdkse.com) 49 | 50 | ## Support for more 51 | 52 | If you liked my work and would like to support for my expenses like server costs, please; (ie. `Firebase`) 53 | 54 | [!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/erdkse) 55 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "pluginsFile": "tests/e2e/plugins/index.js" 3 | } 4 | -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "emulators": { 3 | "auth": { 4 | "port": 9099 5 | }, 6 | "ui": { 7 | "enabled": false 8 | }, 9 | "singleProjectMode": true 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | AdminLTE 3 10 | 22 | 23 | 24 | 30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: '@vue/cli-plugin-unit-jest/presets/typescript', 3 | transform: { 4 | '^.+\\.vue$': 'vue-jest' 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "adminlte-3-vue", 3 | "version": "0.2.18", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview", 10 | "test:unit": "vue-cli-service test:unit", 11 | "test:e2e": "vue-cli-service test:e2e", 12 | "lint": "vue-cli-service lint", 13 | "firebase:start": "firebase emulators:start", 14 | "release:patch": "standard-version --release-as patch", 15 | "release:minor": "standard-version --release-as minor", 16 | "release:major": "standard-version --release-as major" 17 | }, 18 | "dependencies": { 19 | "@fortawesome/fontawesome-svg-core": "6.5.2", 20 | "@fortawesome/free-brands-svg-icons": "6.5.2", 21 | "@fortawesome/free-solid-svg-icons": "6.5.2", 22 | "@fortawesome/vue-fontawesome": "3.0.8", 23 | "@profabric/vue-components": "0.2.5-beta.5", 24 | "@vueuse/core": "10.9.0", 25 | "axios": "1.7.2", 26 | "firebase": "10.12.1", 27 | "luxon": "3.4.4", 28 | "summernote": "./summernote", 29 | "uuid": "9.0.1", 30 | "vue": "3.4.27", 31 | "vue-facing-decorator": "3.0.4", 32 | "vue-gtag": "2.0.1", 33 | "vue-i18n": "9.13.1", 34 | "vue-router": "4.3.2", 35 | "vue-toastification": "2.0.0-rc.5", 36 | "vue-window-size": "2.0.0", 37 | "vuex": "4.1.0", 38 | "yup": "1.4.0" 39 | }, 40 | "devDependencies": { 41 | "@types/jest": "29.5.12", 42 | "@types/luxon": "3.4.2", 43 | "@types/uuid": "9.0.8", 44 | "@typescript-eslint/eslint-plugin": "7.10.0", 45 | "@typescript-eslint/parser": "7.10.0", 46 | "@vitejs/plugin-vue": "5.0.4", 47 | "@vue/cli-plugin-e2e-cypress": "~5.0.8", 48 | "@vue/cli-plugin-eslint": "~5.0.8", 49 | "@vue/cli-plugin-router": "~5.0.8", 50 | "@vue/cli-plugin-typescript": "~5.0.8", 51 | "@vue/cli-plugin-unit-jest": "~5.0.8", 52 | "@vue/cli-plugin-vuex": "~5.0.8", 53 | "@vue/cli-service": "~5.0.8", 54 | "@vue/compiler-sfc": "3.4.27", 55 | "@vue/eslint-config-prettier": "9.0.0", 56 | "@vue/eslint-config-typescript": "13.0.0", 57 | "@vue/test-utils": "2.4.6", 58 | "admin-lte": "3.2.0", 59 | "dotenv": "16.4.5", 60 | "eslint": "9.3.0", 61 | "eslint-plugin-prettier": "5.1.3", 62 | "eslint-plugin-vue": "9.26.0", 63 | "firebase-tools": "^13.11.2", 64 | "prettier": "3.2.5", 65 | "sass": "1.77.2", 66 | "standard-version": "9.5.0", 67 | "typescript": "~5.4.5", 68 | "vite": "5.2.11", 69 | "vue-jest": "3.0.7" 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /public/assets/img/default-profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erdkse/adminlte-3-vue/056f9e4c2437b9b23eec30cd2f53e65df17fab43/public/assets/img/default-profile.png -------------------------------------------------------------------------------- /public/assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erdkse/adminlte-3-vue/056f9e4c2437b9b23eec30cd2f53e65df17fab43/public/assets/img/logo.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erdkse/adminlte-3-vue/056f9e4c2437b9b23eec30cd2f53e65df17fab43/public/favicon.ico -------------------------------------------------------------------------------- /public/version.json: -------------------------------------------------------------------------------- 1 | {"version" : "0.2.14"} 2 | -------------------------------------------------------------------------------- /src/app/app.html: -------------------------------------------------------------------------------- 1 | 2 |
Loading
3 | -------------------------------------------------------------------------------- /src/app/app.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erdkse/adminlte-3-vue/056f9e4c2437b9b23eec30cd2f53e65df17fab43/src/app/app.scss -------------------------------------------------------------------------------- /src/app/app.ts: -------------------------------------------------------------------------------- 1 | import {calculateWindowSize} from '@/utils/helpers'; 2 | import {Component, Vue, Watch} from 'vue-facing-decorator'; 3 | import {useWindowSize} from '@vueuse/core'; 4 | import {onAuthStateChanged} from 'firebase/auth'; 5 | import {firebaseAuth} from '@/firebase'; 6 | import {IUser} from '@/interfaces/user'; 7 | 8 | @Component({}) 9 | export default class App extends Vue { 10 | isAppLoading: boolean = true; 11 | 12 | async mounted() { 13 | await this.checkSession(); 14 | } 15 | 16 | get authentication(): IUser { 17 | console.log(this.$store.getters); 18 | return this.$store.getters['auth/currentUser']; 19 | } 20 | 21 | async checkSession() { 22 | this.isAppLoading = true; 23 | onAuthStateChanged( 24 | firebaseAuth, 25 | (user) => { 26 | if (user) { 27 | this.$store.dispatch('auth/setCurrentUser', user); 28 | } else { 29 | this.$store.dispatch('auth/setCurrentUser', undefined); 30 | } 31 | this.isAppLoading = false; 32 | }, 33 | (e) => { 34 | console.log(e); 35 | this.$store.dispatch('auth/setCurrentUser', undefined); 36 | this.isAppLoading = false; 37 | } 38 | ); 39 | } 40 | 41 | @Watch('windowSize') 42 | watchWindowSize(newValue: any) { 43 | if (this.$store.getters['ui/screenSize'] !== newValue) { 44 | this.$store.dispatch('ui/setWindowSize', newValue); 45 | } 46 | } 47 | 48 | get windowSize() { 49 | const {width} = useWindowSize(); 50 | return calculateWindowSize(width.value); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/app/app.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/input/input.html: -------------------------------------------------------------------------------- 1 |
2 | 10 |
11 |
12 | 13 |
14 |
15 |
16 | -------------------------------------------------------------------------------- /src/components/input/input.scss: -------------------------------------------------------------------------------- 1 | .input-group-text { 2 | margin: inherit auto; 3 | padding: inherit auto; 4 | width: 48px; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/input/input.ts: -------------------------------------------------------------------------------- 1 | import {Component, Prop, Vue} from 'vue-facing-decorator'; 2 | 3 | @Component({ 4 | name: 'app-input', 5 | emits: ['update:modelValue'] 6 | }) 7 | export default class Input extends Vue { 8 | @Prop() modelValue: string; 9 | @Prop() icon: string; 10 | @Prop() type: string; 11 | @Prop() placeholder: string; 12 | @Prop() autocomplete: string; 13 | 14 | public onValueChange(event: any) { 15 | this.$emit('update:modelValue', event.target.value); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/components/input/input.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/menu-item/menu-item.html: -------------------------------------------------------------------------------- 1 |
  • 2 | 7 | 8 |

    9 | {{ $t(menuItem.name) }} 10 | 11 |

    12 |     13 | 26 |
    • 27 | -------------------------------------------------------------------------------- /src/components/menu-item/menu-item.scss: -------------------------------------------------------------------------------- 1 | .nav-item { 2 | cursor: pointer; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/menu-item/menu-item.ts: -------------------------------------------------------------------------------- 1 | import {Component, Prop, Vue} from 'vue-facing-decorator'; 2 | 3 | @Component({ 4 | name: 'app-menu-item' 5 | }) 6 | export default class MenuItem extends Vue { 7 | @Prop() menuItem: any; 8 | private isMenuExtended: boolean = false; 9 | private isExpandable: boolean = false; 10 | private isMainActive: boolean = false; 11 | private isOneOfChildrenActive: boolean = false; 12 | 13 | public mounted(): void { 14 | this.isExpandable = 15 | this.menuItem && 16 | this.menuItem.children && 17 | this.menuItem.children.length > 0; 18 | if (this.$router.currentRoute && this.$router.currentRoute.value) { 19 | this.calculateIsActive(this.$router.currentRoute.value.path); 20 | } 21 | this.$router.afterEach((to) => { 22 | this.calculateIsActive(to.path); 23 | }); 24 | } 25 | 26 | public handleMainMenuAction() { 27 | if (this.isExpandable) { 28 | this.toggleMenu(); 29 | return; 30 | } 31 | this.$router.replace(this.menuItem.path); 32 | } 33 | 34 | public toggleMenu() { 35 | this.isMenuExtended = !this.isMenuExtended; 36 | } 37 | 38 | public calculateIsActive(url: string) { 39 | this.isMainActive = false; 40 | this.isOneOfChildrenActive = false; 41 | if (this.isExpandable) { 42 | this.menuItem.children.forEach((item: any) => { 43 | if (item.path === url) { 44 | this.isOneOfChildrenActive = true; 45 | this.isMenuExtended = true; 46 | } 47 | }); 48 | } else if (this.menuItem?.path === url) { 49 | this.isMainActive = true; 50 | } 51 | if (!this.isMainActive && !this.isOneOfChildrenActive) { 52 | this.isMenuExtended = false; 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/components/menu-item/menu-item.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/sidebar-search/sidebar-search.html: -------------------------------------------------------------------------------- 1 | 2 |
    3 |
    4 | 12 |
    13 | 23 |
    24 |
    25 |
    26 |
    27 |
    28 | No Element found 29 |
    30 | 31 |
    32 | 38 |
    42 |
    {{ menuItem.name }}
    43 |     44 |
    45 |
    46 |     47 | -------------------------------------------------------------------------------- /src/components/sidebar-search/sidebar-search.scss: -------------------------------------------------------------------------------- 1 | pf-dropdown { 2 | width: calc(100% - 12px); 3 | --pf-dropdown-border: none; 4 | --pf-dropdown-menu-min-width: 100%; 5 | --pf-dropdown-menu-margin-top: 0px; 6 | 7 | .menu { 8 | background-color: #454d55; 9 | } 10 | 11 | .dropdown-item { 12 | padding: 0.5rem 1rem; 13 | } 14 | } 15 | 16 | .nothing-found { 17 | color: #c2c7d0; 18 | padding: 0.25rem 0.5rem; 19 | } 20 | 21 | .list-group { 22 | .list-group-item { 23 | padding: 0.5rem 0.75rem; 24 | cursor: pointer; 25 | } 26 | 27 | .search-path { 28 | font-size: 80%; 29 | color: #adb5bd; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/components/sidebar-search/sidebar-search.ts: -------------------------------------------------------------------------------- 1 | import {Component, Prop, Vue} from 'vue-facing-decorator'; 2 | // import {MENU} from '@/modules/main/menu-sidebar/menu-sidebar'; 3 | import {Dropdown} from '@profabric/vue-components'; 4 | 5 | @Component({ 6 | name: 'app-sidebar-search', 7 | components: { 8 | 'pf-dropdown': Dropdown 9 | } 10 | }) 11 | export default class SidebarSearch extends Vue { 12 | @Prop() menu: any = []; 13 | private searchText: string = ''; 14 | public foundMenuItems: any[] = []; 15 | public isDropdownOpen: boolean = false; 16 | 17 | public handleSearchTextChange(event: any) { 18 | this.foundMenuItems = []; 19 | 20 | if (event && event.target && event.target.value) { 21 | this.searchText = event.target.value; 22 | this.findMenuItems(this.menu); 23 | return; 24 | } else { 25 | this.searchText = ''; 26 | this.isDropdownOpen = false; 27 | } 28 | } 29 | 30 | public handleIconClick() { 31 | this.searchText = ''; 32 | this.isDropdownOpen = false; 33 | } 34 | 35 | public handleMenuItemClick() { 36 | this.searchText = ''; 37 | this.isDropdownOpen = false; 38 | } 39 | 40 | public findMenuItems(menu: any) { 41 | if (!this.searchText) { 42 | return; 43 | } 44 | 45 | menu.forEach((menuItem: any) => { 46 | if ( 47 | menuItem.name 48 | .toLowerCase() 49 | .includes(this.searchText.toLowerCase()) && 50 | menuItem.path 51 | ) { 52 | this.foundMenuItems.push(menuItem); 53 | } 54 | if (menuItem.children) { 55 | return this.findMenuItems(menuItem.children); 56 | } 57 | }); 58 | 59 | if (this.foundMenuItems.length > 0) { 60 | this.isDropdownOpen = true; 61 | } 62 | } 63 | 64 | public boldString(str: string, substr: string) { 65 | return str.replaceAll( 66 | this.capitalizeFirstLetter(substr), 67 | `${this.capitalizeFirstLetter( 68 | substr 69 | )}` 70 | ); 71 | } 72 | 73 | private capitalizeFirstLetter(string: string) { 74 | return string.charAt(0).toUpperCase() + string.slice(1); 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /src/components/sidebar-search/sidebar-search.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/firebase/index.ts: -------------------------------------------------------------------------------- 1 | import {FirebaseOptions, initializeApp} from 'firebase/app'; 2 | import {connectAuthEmulator, getAuth} from 'firebase/auth'; 3 | 4 | let {VITE_FIREBASE_CONFIG, PROD} = import.meta.env; 5 | 6 | const firebaseConfig: FirebaseOptions = VITE_FIREBASE_CONFIG 7 | ? JSON.parse(VITE_FIREBASE_CONFIG) 8 | : {apiKey: 'MOCK_KEY'}; 9 | 10 | const app = initializeApp(firebaseConfig); 11 | 12 | export const firebaseAuth = getAuth(app); 13 | 14 | if (!PROD) { 15 | connectAuthEmulator(firebaseAuth, 'http://localhost:9099'); 16 | } 17 | -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- 1 | @import url('https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'); 2 | @import url('https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.3.0/css/flag-icon.min.css'); 3 | @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700'); 4 | 5 | @import 'admin-lte/plugins/fontawesome-free/css/all.min.css'; 6 | @import 'admin-lte/plugins/icheck-bootstrap/icheck-bootstrap.min.css'; 7 | @import 'admin-lte/dist/css/adminlte.min.css'; 8 | @import 'vue-toastification/dist/index.css'; 9 | 10 | #app { 11 | width: 100vw; 12 | height: 100vh; 13 | } 14 | 15 | .main-header .navbar-nav .nav-item .nav-link { 16 | background: transparent; 17 | border: none; 18 | outline: none; 19 | cursor: pointer; 20 | } 21 | -------------------------------------------------------------------------------- /src/interfaces/payload.ts: -------------------------------------------------------------------------------- 1 | import {IUser} from './user'; 2 | export interface IPayload { 3 | token: string; 4 | user: IUser; 5 | } 6 | -------------------------------------------------------------------------------- /src/interfaces/state.ts: -------------------------------------------------------------------------------- 1 | import {IUser} from '@/types/user'; 2 | 3 | export interface IAuthState { 4 | currentUser?: IUser | null; 5 | } 6 | 7 | export interface IAuthModule { 8 | namespaced: boolean; 9 | state: IAuthState; 10 | mutations: any; 11 | actions: any; 12 | getters: any; 13 | } 14 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import {createApp} from 'vue'; 2 | import App from './app/app.vue'; 3 | import router from './router'; 4 | import store from './store'; 5 | import {i18n} from './translation'; 6 | 7 | import {library} from '@fortawesome/fontawesome-svg-core'; 8 | import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'; 9 | 10 | import Toast, {PluginOptions} from 'vue-toastification'; 11 | import {ProfabricComponents} from '@profabric/vue-components'; 12 | import VueGtag from 'vue-gtag'; 13 | 14 | import './index.scss'; 15 | import {faEnvelope, faLock} from '@fortawesome/free-solid-svg-icons'; 16 | 17 | const {VITE_NODE_ENV, VITE_GA_ID} = import.meta.env; 18 | 19 | library.add(faEnvelope, faLock); 20 | 21 | const options: PluginOptions = { 22 | timeout: 3000, 23 | closeOnClick: true, 24 | pauseOnFocusLoss: true, 25 | pauseOnHover: true, 26 | draggable: true, 27 | draggablePercent: 0.6, 28 | showCloseButtonOnHover: false, 29 | hideProgressBar: false, 30 | closeButton: 'button', 31 | icon: true, 32 | rtl: false 33 | }; 34 | 35 | const app = createApp(App); 36 | app.component('font-awesome-icon', FontAwesomeIcon) 37 | .use(store) 38 | .use(router) 39 | .use(Toast, options) 40 | .use(i18n as any) 41 | .use(ProfabricComponents); 42 | 43 | if (VITE_NODE_ENV === 'production' && VITE_GA_ID) { 44 | app.use( 45 | VueGtag, 46 | { 47 | config: {id: VITE_GA_ID} 48 | }, 49 | router 50 | ); 51 | } 52 | 53 | app.mount('#app'); 54 | -------------------------------------------------------------------------------- /src/modules/forgot-password/forgot-password.html: -------------------------------------------------------------------------------- 1 |
    2 |
    3 |
    4 | {{ $t("labels.admin") }}{{ $t("labels.lte") }} 7 |
    8 |
    9 | 12 |
    13 |
    14 | 19 |
    20 |
    21 | 22 |
    23 |
    24 |
    25 |
    26 |
    27 | 30 |
    31 | 32 |
    33 |
    34 |

    35 | {{ $t("labels.login") }} 36 |

    37 |
    38 | 39 |
    40 |
    41 | 42 | -------------------------------------------------------------------------------- /src/modules/forgot-password/forgot-password.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/erdkse/adminlte-3-vue/056f9e4c2437b9b23eec30cd2f53e65df17fab43/src/modules/forgot-password/forgot-password.scss -------------------------------------------------------------------------------- /src/modules/forgot-password/forgot-password.ts: -------------------------------------------------------------------------------- 1 | import {Component, Vue} from 'vue-facing-decorator'; 2 | 3 | @Component({}) 4 | export default class ForgotPassword extends Vue { 5 | private appElement: HTMLElement | null = null; 6 | 7 | public mounted(): void { 8 | this.appElement = document.getElementById('app') as HTMLElement; 9 | this.appElement.classList.add('login-page'); 10 | } 11 | 12 | public unmounted(): void { 13 | (this.appElement as HTMLElement).classList.remove('login-page'); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/modules/forgot-password/forgot-password.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/modules/login/login.html: -------------------------------------------------------------------------------- 1 |
    2 | 3 |
    4 |
    5 | {{ $t("labels.admin") }}{{ $t("labels.lte") 7 | }} 9 |
    10 |
    11 | 12 | 13 |
    14 | 22 | 30 | 31 |
    32 |
    33 |
    34 | 35 | 40 |
    41 |
    42 | 43 |
    44 | 50 | {{ $t("labels.signIn") }} 51 | 52 |
    53 | 54 |
    55 | 56 | 57 | 78 | 79 | 80 |

    81 | 82 | {{ $t("labels.forgotPassword") }} 83 | 84 |

    85 |

    86 | 87 | {{ $t("labels.registerMembership") }} 88 | 89 |

    90 |
    91 | 92 |
    93 | 94 |
    95 | -------------------------------------------------------------------------------- /src/modules/login/login.scss: -------------------------------------------------------------------------------- 1 | pf-button { 2 | --pf-display: block; 3 | --pf-width: 100%; 4 | } 5 | -------------------------------------------------------------------------------- /src/modules/login/login.ts: -------------------------------------------------------------------------------- 1 | import {Component, Vue} from 'vue-facing-decorator'; 2 | 3 | import Input from '@/components/input/input.vue'; 4 | import {useToast} from 'vue-toastification'; 5 | import {Button, Checkbox} from '@profabric/vue-components'; 6 | import {loginWithEmail, signInByGoogle} from '@/services/auth'; 7 | 8 | @Component({ 9 | components: { 10 | 'app-input': Input, 11 | 'pf-checkbox': Checkbox, 12 | 'pf-button': Button 13 | } 14 | }) 15 | export default class Login extends Vue { 16 | private appElement: HTMLElement | null = null; 17 | public email: string = ''; 18 | public password: string = ''; 19 | public rememberMe: boolean = false; 20 | public isAuthLoading: boolean = false; 21 | public isGoogleLoading: boolean = false; 22 | public isFacebookLoading: boolean = false; 23 | private toast = useToast(); 24 | 25 | public mounted(): void { 26 | this.appElement = document.getElementById('app') as HTMLElement; 27 | this.appElement.classList.add('login-page'); 28 | } 29 | 30 | public unmounted(): void { 31 | (this.appElement as HTMLElement).classList.remove('login-page'); 32 | } 33 | 34 | public async loginByAuth(): Promise { 35 | try { 36 | this.isAuthLoading = true; 37 | const {user} = await loginWithEmail(this.email, this.password); 38 | this.$store.dispatch('auth/setCurrentUser', user); 39 | this.toast.success('Login succeeded'); 40 | this.isAuthLoading = false; 41 | this.$router.replace('/'); 42 | } catch (error: any) { 43 | this.toast.error(error.message); 44 | this.isAuthLoading = false; 45 | } 46 | } 47 | 48 | public async loginByGoogle(): Promise { 49 | try { 50 | this.isGoogleLoading = true; 51 | const {user} = await signInByGoogle(); 52 | this.$store.dispatch('auth/setCurrentUser', user); 53 | this.toast.success('Login succeeded'); 54 | this.isGoogleLoading = false; 55 | this.$router.replace('/'); 56 | } catch (error: any) { 57 | this.toast.error(error.message); 58 | this.isGoogleLoading = false; 59 | } 60 | } 61 | 62 | public async loginByFacebook(): Promise { 63 | try { 64 | this.isFacebookLoading = true; 65 | throw new Error('Not implemented'); 66 | } catch (error: any) { 67 | this.toast.error(error.message); 68 | this.isFacebookLoading = false; 69 | } 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/modules/login/login.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/modules/main/control-sidebar/control-sidebar.html: -------------------------------------------------------------------------------- 1 | 75 | -------------------------------------------------------------------------------- /src/modules/main/control-sidebar/control-sidebar.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | padding: 16px; 3 | padding-top: 73px; 4 | } 5 | 6 | pf-select { 7 | --pf-width: 100%; 8 | --pf-display: block; 9 | } 10 | 11 | pf-checkbox { 12 | --pf-display: block; 13 | } 14 | -------------------------------------------------------------------------------- /src/modules/main/control-sidebar/control-sidebar.ts: -------------------------------------------------------------------------------- 1 | import {Component, Vue} from 'vue-facing-decorator'; 2 | import { 3 | Option, 4 | NAVBAR_DARK_VARIANTS, 5 | NAVBAR_LIGHT_VARIANTS, 6 | SIDEBAR_DARK_SKINS, 7 | SIDEBAR_LIGHT_SKINS 8 | } from '@/utils/themes'; 9 | import {Checkbox, Select} from '@profabric/vue-components'; 10 | 11 | @Component({ 12 | name: 'app-control-sidebar', 13 | components: { 14 | 'pf-checkbox': Checkbox, 15 | 'pf-select': Select 16 | } 17 | }) 18 | export default class ControlSidebar extends Vue { 19 | private navbarLightVariants: Array