Sebastián Ramírez
1 year ago
committed by
GitHub
GitHub
76 changed files with 7 additions and 2448 deletions
@ -1 +0,0 @@ |
|||||
node_modules |
|
||||
@ -1,9 +0,0 @@ |
|||||
VUE_APP_DOMAIN_DEV=localhost |
|
||||
# VUE_APP_DOMAIN_DEV=local.dockertoolbox.tiangolo.com |
|
||||
# VUE_APP_DOMAIN_DEV=localhost.tiangolo.com |
|
||||
VUE_APP_DOMAIN_STAG= |
|
||||
VUE_APP_DOMAIN_PROD= |
|
||||
VUE_APP_NAME= |
|
||||
VUE_APP_ENV=development |
|
||||
# VUE_APP_ENV=staging |
|
||||
# VUE_APP_ENV=production |
|
||||
@ -1,21 +0,0 @@ |
|||||
.DS_Store |
|
||||
node_modules |
|
||||
/dist |
|
||||
|
|
||||
# local env files |
|
||||
.env.local |
|
||||
.env.*.local |
|
||||
|
|
||||
# Log files |
|
||||
npm-debug.log* |
|
||||
yarn-debug.log* |
|
||||
yarn-error.log* |
|
||||
|
|
||||
# Editor directories and files |
|
||||
.idea |
|
||||
.vscode |
|
||||
*.suo |
|
||||
*.ntvs* |
|
||||
*.njsproj |
|
||||
*.sln |
|
||||
*.sw* |
|
||||
@ -1 +0,0 @@ |
|||||
18.12.1 |
|
||||
@ -1,30 +0,0 @@ |
|||||
# Stage 0, "build-stage", based on Node.js, to build and compile the frontend |
|
||||
FROM node:18.12.1 as build-stage |
|
||||
|
|
||||
WORKDIR /app |
|
||||
|
|
||||
COPY package*.json /app/ |
|
||||
|
|
||||
RUN npm install |
|
||||
|
|
||||
COPY ./ /app/ |
|
||||
|
|
||||
ARG FRONTEND_ENV=production |
|
||||
|
|
||||
ENV VUE_APP_ENV=${FRONTEND_ENV} |
|
||||
|
|
||||
ENV NODE_OPTIONS="--openssl-legacy-provider" |
|
||||
|
|
||||
# Comment out the next line to disable tests |
|
||||
RUN npm run test:unit |
|
||||
|
|
||||
RUN npm run build |
|
||||
|
|
||||
|
|
||||
# Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx |
|
||||
FROM nginx:1.15 |
|
||||
|
|
||||
COPY --from=build-stage /app/dist/ /usr/share/nginx/html |
|
||||
|
|
||||
COPY ./nginx.conf /etc/nginx/conf.d/default.conf |
|
||||
COPY ./nginx-backend-not-found.conf /etc/nginx/extra-conf.d/backend-not-found.conf |
|
||||
@ -1,46 +0,0 @@ |
|||||
# frontend |
|
||||
|
|
||||
## Node Requirements |
|
||||
You can use either [fnm](https://github.com/Schniz/fnm) or [nvm](https://github.com/nvm-sh/nvm) to manage your Node.js versions. |
|
||||
|
|
||||
### Using nvm |
|
||||
If you prefer nvm, run the following command to install the recommended Node.js version: |
|
||||
``` |
|
||||
nvm install |
|
||||
``` |
|
||||
|
|
||||
### Using fnm |
|
||||
If you prefer fnm, run the following command to install the recommended Node.js version: |
|
||||
``` |
|
||||
fnm install |
|
||||
``` |
|
||||
|
|
||||
## Project setup |
|
||||
``` |
|
||||
npm install |
|
||||
``` |
|
||||
|
|
||||
### Compiles and hot-reloads for development |
|
||||
``` |
|
||||
npm run serve |
|
||||
``` |
|
||||
|
|
||||
### Compiles and minifies for production |
|
||||
``` |
|
||||
npm run build |
|
||||
``` |
|
||||
|
|
||||
### Run your tests |
|
||||
``` |
|
||||
npm run test |
|
||||
``` |
|
||||
|
|
||||
### Lints and fixes files |
|
||||
``` |
|
||||
npm run lint |
|
||||
``` |
|
||||
|
|
||||
### Run your unit tests |
|
||||
``` |
|
||||
npm run test:unit |
|
||||
``` |
|
||||
@ -1,10 +0,0 @@ |
|||||
module.exports = { |
|
||||
"presets": [ |
|
||||
[ |
|
||||
"@vue/cli-plugin-babel/preset", |
|
||||
{ |
|
||||
"useBuiltIns": "entry" |
|
||||
} |
|
||||
] |
|
||||
] |
|
||||
} |
|
||||
@ -1,9 +0,0 @@ |
|||||
location /api { |
|
||||
return 404; |
|
||||
} |
|
||||
location /docs { |
|
||||
return 404; |
|
||||
} |
|
||||
location /redoc { |
|
||||
return 404; |
|
||||
} |
|
||||
@ -1,11 +0,0 @@ |
|||||
server { |
|
||||
listen 80; |
|
||||
|
|
||||
location / { |
|
||||
root /usr/share/nginx/html; |
|
||||
index index.html index.htm; |
|
||||
try_files $uri $uri/ /index.html =404; |
|
||||
} |
|
||||
|
|
||||
include /etc/nginx/extra-conf.d/*.conf; |
|
||||
} |
|
||||
@ -1,74 +0,0 @@ |
|||||
{ |
|
||||
"name": "frontend", |
|
||||
"version": "0.1.0", |
|
||||
"private": true, |
|
||||
"scripts": { |
|
||||
"serve": "vue-cli-service serve", |
|
||||
"build": "vue-cli-service build", |
|
||||
"test:unit": "vue-cli-service test:unit", |
|
||||
"lint": "vue-cli-service lint" |
|
||||
}, |
|
||||
"dependencies": { |
|
||||
"@babel/polyfill": "^7.2.5", |
|
||||
"axios": "^0.18.0", |
|
||||
"core-js": "^3.4.3", |
|
||||
"register-service-worker": "^1.0.0", |
|
||||
"typesafe-vuex": "^3.1.1", |
|
||||
"vee-validate": "^2.1.7", |
|
||||
"vue": "^2.5.22", |
|
||||
"vue-class-component": "^6.0.0", |
|
||||
"vue-property-decorator": "^7.3.0", |
|
||||
"vue-router": "^3.0.2", |
|
||||
"vuetify": "^1.4.4", |
|
||||
"vuex": "^3.1.0" |
|
||||
}, |
|
||||
"devDependencies": { |
|
||||
"@types/jest": "^23.3.13", |
|
||||
"@vue/cli-plugin-babel": "^4.1.1", |
|
||||
"@vue/cli-plugin-pwa": "^4.1.1", |
|
||||
"@vue/cli-plugin-typescript": "^4.1.1", |
|
||||
"@vue/cli-plugin-unit-jest": "^4.1.1", |
|
||||
"@vue/cli-service": "^4.1.1", |
|
||||
"@vue/test-utils": "^1.0.0-beta.28", |
|
||||
"babel-core": "7.0.0-bridge.0", |
|
||||
"ts-jest": "^23.10.5", |
|
||||
"typescript": "^3.2.4", |
|
||||
"vue-cli-plugin-vuetify": "^2.0.2", |
|
||||
"vue-template-compiler": "^2.5.22" |
|
||||
}, |
|
||||
"postcss": { |
|
||||
"plugins": { |
|
||||
"autoprefixer": {} |
|
||||
} |
|
||||
}, |
|
||||
"browserslist": [ |
|
||||
"> 1%", |
|
||||
"last 2 versions", |
|
||||
"not ie <= 10" |
|
||||
], |
|
||||
"jest": { |
|
||||
"moduleFileExtensions": [ |
|
||||
"js", |
|
||||
"jsx", |
|
||||
"json", |
|
||||
"vue", |
|
||||
"ts", |
|
||||
"tsx" |
|
||||
], |
|
||||
"transform": { |
|
||||
"^.+\\.vue$": "vue-jest", |
|
||||
".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub", |
|
||||
"^.+\\.tsx?$": "ts-jest" |
|
||||
}, |
|
||||
"moduleNameMapper": { |
|
||||
"^@/(.*)$": "<rootDir>/src/$1" |
|
||||
}, |
|
||||
"snapshotSerializers": [ |
|
||||
"jest-serializer-vue" |
|
||||
], |
|
||||
"testMatch": [ |
|
||||
"**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)" |
|
||||
], |
|
||||
"testURL": "http://localhost/" |
|
||||
} |
|
||||
} |
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 9.2 KiB |
|
Before Width: | Height: | Size: 29 KiB |
|
Before Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 4.6 KiB |
|
Before Width: | Height: | Size: 799 B |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 10 KiB |
@ -1,21 +0,0 @@ |
|||||
<!DOCTYPE html> |
|
||||
<html lang="en"> |
|
||||
<head> |
|
||||
<meta charset="utf-8"> |
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
|
||||
<title><%= VUE_APP_NAME %></title> |
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"> |
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons"> |
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"> |
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons"> |
|
||||
</head> |
|
||||
<body> |
|
||||
<noscript> |
|
||||
<strong>We're sorry but <%= VUE_APP_NAME %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
|
||||
</noscript> |
|
||||
<div id="app"></div> |
|
||||
<!-- built files will be auto injected --> |
|
||||
</body> |
|
||||
</html> |
|
||||
@ -1,20 +0,0 @@ |
|||||
{ |
|
||||
"name": "frontend", |
|
||||
"short_name": "frontend", |
|
||||
"icons": [ |
|
||||
{ |
|
||||
"src": "/img/icons/android-chrome-192x192.png", |
|
||||
"sizes": "192x192", |
|
||||
"type": "image/png" |
|
||||
}, |
|
||||
{ |
|
||||
"src": "/img/icons/android-chrome-512x512.png", |
|
||||
"sizes": "512x512", |
|
||||
"type": "image/png" |
|
||||
} |
|
||||
], |
|
||||
"start_url": "/", |
|
||||
"display": "standalone", |
|
||||
"background_color": "#000000", |
|
||||
"theme_color": "#4DBA87" |
|
||||
} |
|
||||
@ -1,2 +0,0 @@ |
|||||
User-agent: * |
|
||||
Disallow: |
|
||||
@ -1,43 +0,0 @@ |
|||||
<template> |
|
||||
<div id="app"> |
|
||||
<v-app> |
|
||||
<v-content v-if="loggedIn===null"> |
|
||||
<v-container fill-height> |
|
||||
<v-layout align-center justify-center> |
|
||||
<v-flex> |
|
||||
<div class="text-xs-center"> |
|
||||
<div class="headline my-5">Loading...</div> |
|
||||
<v-progress-circular size="100" indeterminate color="primary"></v-progress-circular> |
|
||||
</div> |
|
||||
</v-flex> |
|
||||
</v-layout> |
|
||||
</v-container> |
|
||||
</v-content> |
|
||||
<router-view v-else /> |
|
||||
<NotificationsManager></NotificationsManager> |
|
||||
</v-app> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import { Component, Vue } from 'vue-property-decorator'; |
|
||||
import NotificationsManager from '@/components/NotificationsManager.vue'; |
|
||||
import { readIsLoggedIn } from '@/store/main/getters'; |
|
||||
import { dispatchCheckLoggedIn } from '@/store/main/actions'; |
|
||||
|
|
||||
@Component({ |
|
||||
components: { |
|
||||
NotificationsManager, |
|
||||
}, |
|
||||
}) |
|
||||
export default class App extends Vue { |
|
||||
|
|
||||
get loggedIn() { |
|
||||
return readIsLoggedIn(this.$store); |
|
||||
} |
|
||||
|
|
||||
public async created() { |
|
||||
await dispatchCheckLoggedIn(this.$store); |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,45 +0,0 @@ |
|||||
import axios from 'axios'; |
|
||||
import { apiUrl } from '@/env'; |
|
||||
import { IUserProfile, IUserProfileUpdate, IUserProfileCreate } from './interfaces'; |
|
||||
|
|
||||
function authHeaders(token: string) { |
|
||||
return { |
|
||||
headers: { |
|
||||
Authorization: `Bearer ${token}`, |
|
||||
}, |
|
||||
}; |
|
||||
} |
|
||||
|
|
||||
export const api = { |
|
||||
async logInGetToken(username: string, password: string) { |
|
||||
const params = new URLSearchParams(); |
|
||||
params.append('username', username); |
|
||||
params.append('password', password); |
|
||||
|
|
||||
return axios.post(`${apiUrl}/api/v1/login/access-token`, params); |
|
||||
}, |
|
||||
async getMe(token: string) { |
|
||||
return axios.get<IUserProfile>(`${apiUrl}/api/v1/users/me`, authHeaders(token)); |
|
||||
}, |
|
||||
async updateMe(token: string, data: IUserProfileUpdate) { |
|
||||
return axios.put<IUserProfile>(`${apiUrl}/api/v1/users/me`, data, authHeaders(token)); |
|
||||
}, |
|
||||
async getUsers(token: string) { |
|
||||
return axios.get<IUserProfile[]>(`${apiUrl}/api/v1/users/`, authHeaders(token)); |
|
||||
}, |
|
||||
async updateUser(token: string, userId: number, data: IUserProfileUpdate) { |
|
||||
return axios.put(`${apiUrl}/api/v1/users/${userId}`, data, authHeaders(token)); |
|
||||
}, |
|
||||
async createUser(token: string, data: IUserProfileCreate) { |
|
||||
return axios.post(`${apiUrl}/api/v1/users/`, data, authHeaders(token)); |
|
||||
}, |
|
||||
async passwordRecovery(email: string) { |
|
||||
return axios.post(`${apiUrl}/api/v1/password-recovery/${email}`); |
|
||||
}, |
|
||||
async resetPassword(password: string, token: string) { |
|
||||
return axios.post(`${apiUrl}/api/v1/reset-password/`, { |
|
||||
new_password: password, |
|
||||
token, |
|
||||
}); |
|
||||
}, |
|
||||
}; |
|
||||
|
Before Width: | Height: | Size: 6.7 KiB |
@ -1,8 +0,0 @@ |
|||||
import Component from 'vue-class-component'; |
|
||||
|
|
||||
// Register the router hooks with their names
|
|
||||
Component.registerHooks([ |
|
||||
'beforeRouteEnter', |
|
||||
'beforeRouteLeave', |
|
||||
'beforeRouteUpdate', // for vue-router 2.2+
|
|
||||
]); |
|
||||
@ -1,77 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<v-snackbar auto-height :color="currentNotificationColor" v-model="show"> |
|
||||
<v-progress-circular class="ma-2" indeterminate v-show="showProgress"></v-progress-circular>{{ currentNotificationContent }} |
|
||||
<v-btn flat @click.native="close">Close</v-btn> |
|
||||
</v-snackbar> |
|
||||
</div> |
|
||||
</template> |
|
||||
<script lang="ts"> |
|
||||
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'; |
|
||||
import { AppNotification } from '@/store/main/state'; |
|
||||
import { commitRemoveNotification } from '@/store/main/mutations'; |
|
||||
import { readFirstNotification } from '@/store/main/getters'; |
|
||||
import { dispatchRemoveNotification } from '@/store/main/actions'; |
|
||||
|
|
||||
@Component |
|
||||
export default class NotificationsManager extends Vue { |
|
||||
public show: boolean = false; |
|
||||
public text: string = ''; |
|
||||
public showProgress: boolean = false; |
|
||||
public currentNotification: AppNotification | false = false; |
|
||||
|
|
||||
public async hide() { |
|
||||
this.show = false; |
|
||||
await new Promise((resolve, reject) => setTimeout(() => resolve(), 500)); |
|
||||
} |
|
||||
|
|
||||
public async close() { |
|
||||
await this.hide(); |
|
||||
await this.removeCurrentNotification(); |
|
||||
} |
|
||||
|
|
||||
public async removeCurrentNotification() { |
|
||||
if (this.currentNotification) { |
|
||||
commitRemoveNotification(this.$store, this.currentNotification); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
public get firstNotification() { |
|
||||
return readFirstNotification(this.$store); |
|
||||
} |
|
||||
|
|
||||
public async setNotification(notification: AppNotification | false) { |
|
||||
if (this.show) { |
|
||||
await this.hide(); |
|
||||
} |
|
||||
if (notification) { |
|
||||
this.currentNotification = notification; |
|
||||
this.showProgress = notification.showProgress || false; |
|
||||
this.show = true; |
|
||||
} else { |
|
||||
this.currentNotification = false; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@Watch('firstNotification') |
|
||||
public async onNotificationChange( |
|
||||
newNotification: AppNotification | false, |
|
||||
oldNotification: AppNotification | false, |
|
||||
) { |
|
||||
if (newNotification !== this.currentNotification) { |
|
||||
await this.setNotification(newNotification); |
|
||||
if (newNotification) { |
|
||||
dispatchRemoveNotification(this.$store, { notification: newNotification, timeout: 6500 }); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
public get currentNotificationContent() { |
|
||||
return this.currentNotification && this.currentNotification.content || ''; |
|
||||
} |
|
||||
|
|
||||
public get currentNotificationColor() { |
|
||||
return this.currentNotification && this.currentNotification.color || 'info'; |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,11 +0,0 @@ |
|||||
<template> |
|
||||
<router-view></router-view> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import { Component, Vue } from 'vue-property-decorator'; |
|
||||
|
|
||||
@Component |
|
||||
export default class RouterComponent extends Vue { |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,34 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<v-btn :color="color" @click="trigger"><slot>Choose File</slot></v-btn> |
|
||||
<input :multiple="multiple" class="visually-hidden" type="file" v-on:change="files" ref="fileInput"> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import { Component, Vue, Prop, Emit } from 'vue-property-decorator'; |
|
||||
|
|
||||
@Component |
|
||||
export default class UploadButton extends Vue { |
|
||||
@Prop(String) public color: string | undefined; |
|
||||
@Prop({default: false}) public multiple!: boolean; |
|
||||
@Emit() |
|
||||
public files(e): FileList { |
|
||||
return e.target.files; |
|
||||
} |
|
||||
|
|
||||
public trigger() { |
|
||||
(this.$refs.fileInput as HTMLElement).click(); |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.visually-hidden { |
|
||||
position: absolute !important; |
|
||||
height: 1px; |
|
||||
width: 1px; |
|
||||
overflow: hidden; |
|
||||
clip: rect(1px, 1px, 1px, 1px); |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,14 +0,0 @@ |
|||||
const env = process.env.VUE_APP_ENV; |
|
||||
|
|
||||
let envApiUrl = ''; |
|
||||
|
|
||||
if (env === 'production') { |
|
||||
envApiUrl = `https://${process.env.VUE_APP_DOMAIN_PROD}`; |
|
||||
} else if (env === 'staging') { |
|
||||
envApiUrl = `https://${process.env.VUE_APP_DOMAIN_STAG}`; |
|
||||
} else { |
|
||||
envApiUrl = `http://${process.env.VUE_APP_DOMAIN_DEV}`; |
|
||||
} |
|
||||
|
|
||||
export const apiUrl = envApiUrl; |
|
||||
export const appName = process.env.VUE_APP_NAME; |
|
||||
@ -1,23 +0,0 @@ |
|||||
export interface IUserProfile { |
|
||||
email: string; |
|
||||
is_active: boolean; |
|
||||
is_superuser: boolean; |
|
||||
full_name: string; |
|
||||
id: number; |
|
||||
} |
|
||||
|
|
||||
export interface IUserProfileUpdate { |
|
||||
email?: string; |
|
||||
full_name?: string; |
|
||||
password?: string; |
|
||||
is_active?: boolean; |
|
||||
is_superuser?: boolean; |
|
||||
} |
|
||||
|
|
||||
export interface IUserProfileCreate { |
|
||||
email: string; |
|
||||
full_name?: string; |
|
||||
password?: string; |
|
||||
is_active?: boolean; |
|
||||
is_superuser?: boolean; |
|
||||
} |
|
||||
@ -1,19 +0,0 @@ |
|||||
import '@babel/polyfill'; |
|
||||
// Import Component hooks before component definitions
|
|
||||
import './component-hooks'; |
|
||||
import Vue from 'vue'; |
|
||||
import './plugins/vuetify'; |
|
||||
import './plugins/vee-validate'; |
|
||||
import App from './App.vue'; |
|
||||
import router from './router'; |
|
||||
import store from '@/store'; |
|
||||
import './registerServiceWorker'; |
|
||||
import 'vuetify/dist/vuetify.min.css'; |
|
||||
|
|
||||
Vue.config.productionTip = false; |
|
||||
|
|
||||
new Vue({ |
|
||||
router, |
|
||||
store, |
|
||||
render: (h) => h(App), |
|
||||
}).$mount('#app'); |
|
||||
@ -1,4 +0,0 @@ |
|||||
import Vue from 'vue'; |
|
||||
import VeeValidate from 'vee-validate'; |
|
||||
|
|
||||
Vue.use(VeeValidate); |
|
||||
@ -1,6 +0,0 @@ |
|||||
import Vue from 'vue'; |
|
||||
import Vuetify from 'vuetify'; |
|
||||
|
|
||||
Vue.use(Vuetify, { |
|
||||
iconfont: 'md', |
|
||||
}); |
|
||||
@ -1,26 +0,0 @@ |
|||||
/* tslint:disable:no-console */ |
|
||||
|
|
||||
import { register } from 'register-service-worker'; |
|
||||
|
|
||||
if (process.env.NODE_ENV === 'production') { |
|
||||
register(`${process.env.BASE_URL}service-worker.js`, { |
|
||||
ready() { |
|
||||
console.log( |
|
||||
'App is being served from cache by a service worker.\n' + |
|
||||
'For more details, visit https://goo.gl/AFskqB', |
|
||||
); |
|
||||
}, |
|
||||
cached() { |
|
||||
console.log('Content has been cached for offline use.'); |
|
||||
}, |
|
||||
updated() { |
|
||||
console.log('New content is available; please refresh.'); |
|
||||
}, |
|
||||
offline() { |
|
||||
console.log('No internet connection found. App is running in offline mode.'); |
|
||||
}, |
|
||||
error(error) { |
|
||||
console.error('Error during service worker registration:', error); |
|
||||
}, |
|
||||
}); |
|
||||
} |
|
||||
@ -1,97 +0,0 @@ |
|||||
import Vue from 'vue'; |
|
||||
import Router from 'vue-router'; |
|
||||
|
|
||||
import RouterComponent from './components/RouterComponent.vue'; |
|
||||
|
|
||||
Vue.use(Router); |
|
||||
|
|
||||
export default new Router({ |
|
||||
mode: 'history', |
|
||||
base: process.env.BASE_URL, |
|
||||
routes: [ |
|
||||
{ |
|
||||
path: '/', |
|
||||
component: () => import(/* webpackChunkName: "start" */ './views/main/Start.vue'), |
|
||||
children: [ |
|
||||
{ |
|
||||
path: 'login', |
|
||||
// route level code-splitting
|
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
|
||||
// which is lazy-loaded when the route is visited.
|
|
||||
component: () => import(/* webpackChunkName: "login" */ './views/Login.vue'), |
|
||||
}, |
|
||||
{ |
|
||||
path: 'recover-password', |
|
||||
component: () => import(/* webpackChunkName: "recover-password" */ './views/PasswordRecovery.vue'), |
|
||||
}, |
|
||||
{ |
|
||||
path: 'reset-password', |
|
||||
component: () => import(/* webpackChunkName: "reset-password" */ './views/ResetPassword.vue'), |
|
||||
}, |
|
||||
{ |
|
||||
path: 'main', |
|
||||
component: () => import(/* webpackChunkName: "main" */ './views/main/Main.vue'), |
|
||||
children: [ |
|
||||
{ |
|
||||
path: 'dashboard', |
|
||||
component: () => import(/* webpackChunkName: "main-dashboard" */ './views/main/Dashboard.vue'), |
|
||||
}, |
|
||||
{ |
|
||||
path: 'profile', |
|
||||
component: RouterComponent, |
|
||||
redirect: 'profile/view', |
|
||||
children: [ |
|
||||
{ |
|
||||
path: 'view', |
|
||||
component: () => import( |
|
||||
/* webpackChunkName: "main-profile" */ './views/main/profile/UserProfile.vue'), |
|
||||
}, |
|
||||
{ |
|
||||
path: 'edit', |
|
||||
component: () => import( |
|
||||
/* webpackChunkName: "main-profile-edit" */ './views/main/profile/UserProfileEdit.vue'), |
|
||||
}, |
|
||||
{ |
|
||||
path: 'password', |
|
||||
component: () => import( |
|
||||
/* webpackChunkName: "main-profile-password" */ './views/main/profile/UserProfileEditPassword.vue'), |
|
||||
}, |
|
||||
], |
|
||||
}, |
|
||||
{ |
|
||||
path: 'admin', |
|
||||
component: () => import(/* webpackChunkName: "main-admin" */ './views/main/admin/Admin.vue'), |
|
||||
redirect: 'admin/users/all', |
|
||||
children: [ |
|
||||
{ |
|
||||
path: 'users', |
|
||||
redirect: 'users/all', |
|
||||
}, |
|
||||
{ |
|
||||
path: 'users/all', |
|
||||
component: () => import( |
|
||||
/* webpackChunkName: "main-admin-users" */ './views/main/admin/AdminUsers.vue'), |
|
||||
}, |
|
||||
{ |
|
||||
path: 'users/edit/:id', |
|
||||
name: 'main-admin-users-edit', |
|
||||
component: () => import( |
|
||||
/* webpackChunkName: "main-admin-users-edit" */ './views/main/admin/EditUser.vue'), |
|
||||
}, |
|
||||
{ |
|
||||
path: 'users/create', |
|
||||
name: 'main-admin-users-create', |
|
||||
component: () => import( |
|
||||
/* webpackChunkName: "main-admin-users-create" */ './views/main/admin/CreateUser.vue'), |
|
||||
}, |
|
||||
], |
|
||||
}, |
|
||||
], |
|
||||
}, |
|
||||
], |
|
||||
}, |
|
||||
{ |
|
||||
path: '/*', redirect: '/', |
|
||||
}, |
|
||||
], |
|
||||
}); |
|
||||
@ -1,13 +0,0 @@ |
|||||
import Vue, { VNode } from 'vue'; |
|
||||
|
|
||||
declare global { |
|
||||
namespace JSX { |
|
||||
// tslint:disable no-empty-interface
|
|
||||
interface Element extends VNode {} |
|
||||
// tslint:disable no-empty-interface
|
|
||||
interface ElementClass extends Vue {} |
|
||||
interface IntrinsicElements { |
|
||||
[elem: string]: any; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,4 +0,0 @@ |
|||||
declare module '*.vue' { |
|
||||
import Vue from 'vue'; |
|
||||
export default Vue; |
|
||||
} |
|
||||
@ -1,60 +0,0 @@ |
|||||
import { api } from '@/api'; |
|
||||
import { ActionContext } from 'vuex'; |
|
||||
import { IUserProfileCreate, IUserProfileUpdate } from '@/interfaces'; |
|
||||
import { State } from '../state'; |
|
||||
import { AdminState } from './state'; |
|
||||
import { getStoreAccessors } from 'typesafe-vuex'; |
|
||||
import { commitSetUsers, commitSetUser } from './mutations'; |
|
||||
import { dispatchCheckApiError } from '../main/actions'; |
|
||||
import { commitAddNotification, commitRemoveNotification } from '../main/mutations'; |
|
||||
|
|
||||
type MainContext = ActionContext<AdminState, State>; |
|
||||
|
|
||||
export const actions = { |
|
||||
async actionGetUsers(context: MainContext) { |
|
||||
try { |
|
||||
const response = await api.getUsers(context.rootState.main.token); |
|
||||
if (response) { |
|
||||
commitSetUsers(context, response.data); |
|
||||
} |
|
||||
} catch (error) { |
|
||||
await dispatchCheckApiError(context, error); |
|
||||
} |
|
||||
}, |
|
||||
async actionUpdateUser(context: MainContext, payload: { id: number, user: IUserProfileUpdate }) { |
|
||||
try { |
|
||||
const loadingNotification = { content: 'saving', showProgress: true }; |
|
||||
commitAddNotification(context, loadingNotification); |
|
||||
const response = (await Promise.all([ |
|
||||
api.updateUser(context.rootState.main.token, payload.id, payload.user), |
|
||||
await new Promise((resolve, reject) => setTimeout(() => resolve(), 500)), |
|
||||
]))[0]; |
|
||||
commitSetUser(context, response.data); |
|
||||
commitRemoveNotification(context, loadingNotification); |
|
||||
commitAddNotification(context, { content: 'User successfully updated', color: 'success' }); |
|
||||
} catch (error) { |
|
||||
await dispatchCheckApiError(context, error); |
|
||||
} |
|
||||
}, |
|
||||
async actionCreateUser(context: MainContext, payload: IUserProfileCreate) { |
|
||||
try { |
|
||||
const loadingNotification = { content: 'saving', showProgress: true }; |
|
||||
commitAddNotification(context, loadingNotification); |
|
||||
const response = (await Promise.all([ |
|
||||
api.createUser(context.rootState.main.token, payload), |
|
||||
await new Promise((resolve, reject) => setTimeout(() => resolve(), 500)), |
|
||||
]))[0]; |
|
||||
commitSetUser(context, response.data); |
|
||||
commitRemoveNotification(context, loadingNotification); |
|
||||
commitAddNotification(context, { content: 'User successfully created', color: 'success' }); |
|
||||
} catch (error) { |
|
||||
await dispatchCheckApiError(context, error); |
|
||||
} |
|
||||
}, |
|
||||
}; |
|
||||
|
|
||||
const { dispatch } = getStoreAccessors<AdminState, State>(''); |
|
||||
|
|
||||
export const dispatchCreateUser = dispatch(actions.actionCreateUser); |
|
||||
export const dispatchGetUsers = dispatch(actions.actionGetUsers); |
|
||||
export const dispatchUpdateUser = dispatch(actions.actionUpdateUser); |
|
||||
@ -1,18 +0,0 @@ |
|||||
import { AdminState } from './state'; |
|
||||
import { getStoreAccessors } from 'typesafe-vuex'; |
|
||||
import { State } from '../state'; |
|
||||
|
|
||||
export const getters = { |
|
||||
adminUsers: (state: AdminState) => state.users, |
|
||||
adminOneUser: (state: AdminState) => (userId: number) => { |
|
||||
const filteredUsers = state.users.filter((user) => user.id === userId); |
|
||||
if (filteredUsers.length > 0) { |
|
||||
return { ...filteredUsers[0] }; |
|
||||
} |
|
||||
}, |
|
||||
}; |
|
||||
|
|
||||
const { read } = getStoreAccessors<AdminState, State>(''); |
|
||||
|
|
||||
export const readAdminOneUser = read(getters.adminOneUser); |
|
||||
export const readAdminUsers = read(getters.adminUsers); |
|
||||
@ -1,15 +0,0 @@ |
|||||
import { mutations } from './mutations'; |
|
||||
import { getters } from './getters'; |
|
||||
import { actions } from './actions'; |
|
||||
import { AdminState } from './state'; |
|
||||
|
|
||||
const defaultState: AdminState = { |
|
||||
users: [], |
|
||||
}; |
|
||||
|
|
||||
export const adminModule = { |
|
||||
state: defaultState, |
|
||||
mutations, |
|
||||
actions, |
|
||||
getters, |
|
||||
}; |
|
||||
@ -1,20 +0,0 @@ |
|||||
import { IUserProfile } from '@/interfaces'; |
|
||||
import { AdminState } from './state'; |
|
||||
import { getStoreAccessors } from 'typesafe-vuex'; |
|
||||
import { State } from '../state'; |
|
||||
|
|
||||
export const mutations = { |
|
||||
setUsers(state: AdminState, payload: IUserProfile[]) { |
|
||||
state.users = payload; |
|
||||
}, |
|
||||
setUser(state: AdminState, payload: IUserProfile) { |
|
||||
const users = state.users.filter((user: IUserProfile) => user.id !== payload.id); |
|
||||
users.push(payload); |
|
||||
state.users = users; |
|
||||
}, |
|
||||
}; |
|
||||
|
|
||||
const { commit } = getStoreAccessors<AdminState, State>(''); |
|
||||
|
|
||||
export const commitSetUser = commit(mutations.setUser); |
|
||||
export const commitSetUsers = commit(mutations.setUsers); |
|
||||
@ -1,5 +0,0 @@ |
|||||
import { IUserProfile } from '@/interfaces'; |
|
||||
|
|
||||
export interface AdminState { |
|
||||
users: IUserProfile[]; |
|
||||
} |
|
||||
@ -1,19 +0,0 @@ |
|||||
import Vue from 'vue'; |
|
||||
import Vuex, { StoreOptions } from 'vuex'; |
|
||||
|
|
||||
import { mainModule } from './main'; |
|
||||
import { State } from './state'; |
|
||||
import { adminModule } from './admin'; |
|
||||
|
|
||||
Vue.use(Vuex); |
|
||||
|
|
||||
const storeOptions: StoreOptions<State> = { |
|
||||
modules: { |
|
||||
main: mainModule, |
|
||||
admin: adminModule, |
|
||||
}, |
|
||||
}; |
|
||||
|
|
||||
export const store = new Vuex.Store<State>(storeOptions); |
|
||||
|
|
||||
export default store; |
|
||||
@ -1,173 +0,0 @@ |
|||||
import { api } from '@/api'; |
|
||||
import router from '@/router'; |
|
||||
import { getLocalToken, removeLocalToken, saveLocalToken } from '@/utils'; |
|
||||
import { AxiosError } from 'axios'; |
|
||||
import { getStoreAccessors } from 'typesafe-vuex'; |
|
||||
import { ActionContext } from 'vuex'; |
|
||||
import { State } from '../state'; |
|
||||
import { |
|
||||
commitAddNotification, |
|
||||
commitRemoveNotification, |
|
||||
commitSetLoggedIn, |
|
||||
commitSetLogInError, |
|
||||
commitSetToken, |
|
||||
commitSetUserProfile, |
|
||||
} from './mutations'; |
|
||||
import { AppNotification, MainState } from './state'; |
|
||||
|
|
||||
type MainContext = ActionContext<MainState, State>; |
|
||||
|
|
||||
export const actions = { |
|
||||
async actionLogIn(context: MainContext, payload: { username: string; password: string }) { |
|
||||
try { |
|
||||
const response = await api.logInGetToken(payload.username, payload.password); |
|
||||
const token = response.data.access_token; |
|
||||
if (token) { |
|
||||
saveLocalToken(token); |
|
||||
commitSetToken(context, token); |
|
||||
commitSetLoggedIn(context, true); |
|
||||
commitSetLogInError(context, false); |
|
||||
await dispatchGetUserProfile(context); |
|
||||
await dispatchRouteLoggedIn(context); |
|
||||
commitAddNotification(context, { content: 'Logged in', color: 'success' }); |
|
||||
} else { |
|
||||
await dispatchLogOut(context); |
|
||||
} |
|
||||
} catch (err) { |
|
||||
commitSetLogInError(context, true); |
|
||||
await dispatchLogOut(context); |
|
||||
} |
|
||||
}, |
|
||||
async actionGetUserProfile(context: MainContext) { |
|
||||
try { |
|
||||
const response = await api.getMe(context.state.token); |
|
||||
if (response.data) { |
|
||||
commitSetUserProfile(context, response.data); |
|
||||
} |
|
||||
} catch (error) { |
|
||||
await dispatchCheckApiError(context, error); |
|
||||
} |
|
||||
}, |
|
||||
async actionUpdateUserProfile(context: MainContext, payload) { |
|
||||
try { |
|
||||
const loadingNotification = { content: 'saving', showProgress: true }; |
|
||||
commitAddNotification(context, loadingNotification); |
|
||||
const response = (await Promise.all([ |
|
||||
api.updateMe(context.state.token, payload), |
|
||||
await new Promise((resolve, reject) => setTimeout(() => resolve(), 500)), |
|
||||
]))[0]; |
|
||||
commitSetUserProfile(context, response.data); |
|
||||
commitRemoveNotification(context, loadingNotification); |
|
||||
commitAddNotification(context, { content: 'Profile successfully updated', color: 'success' }); |
|
||||
} catch (error) { |
|
||||
await dispatchCheckApiError(context, error); |
|
||||
} |
|
||||
}, |
|
||||
async actionCheckLoggedIn(context: MainContext) { |
|
||||
if (!context.state.isLoggedIn) { |
|
||||
let token = context.state.token; |
|
||||
if (!token) { |
|
||||
const localToken = getLocalToken(); |
|
||||
if (localToken) { |
|
||||
commitSetToken(context, localToken); |
|
||||
token = localToken; |
|
||||
} |
|
||||
} |
|
||||
if (token) { |
|
||||
try { |
|
||||
const response = await api.getMe(token); |
|
||||
commitSetLoggedIn(context, true); |
|
||||
commitSetUserProfile(context, response.data); |
|
||||
} catch (error) { |
|
||||
await dispatchRemoveLogIn(context); |
|
||||
} |
|
||||
} else { |
|
||||
await dispatchRemoveLogIn(context); |
|
||||
} |
|
||||
} |
|
||||
}, |
|
||||
async actionRemoveLogIn(context: MainContext) { |
|
||||
removeLocalToken(); |
|
||||
commitSetToken(context, ''); |
|
||||
commitSetLoggedIn(context, false); |
|
||||
}, |
|
||||
async actionLogOut(context: MainContext) { |
|
||||
await dispatchRemoveLogIn(context); |
|
||||
await dispatchRouteLogOut(context); |
|
||||
}, |
|
||||
async actionUserLogOut(context: MainContext) { |
|
||||
await dispatchLogOut(context); |
|
||||
commitAddNotification(context, { content: 'Logged out', color: 'success' }); |
|
||||
}, |
|
||||
actionRouteLogOut(context: MainContext) { |
|
||||
if (router.currentRoute.path !== '/login') { |
|
||||
router.push('/login'); |
|
||||
} |
|
||||
}, |
|
||||
async actionCheckApiError(context: MainContext, payload: AxiosError) { |
|
||||
if (payload.response!.status === 401) { |
|
||||
await dispatchLogOut(context); |
|
||||
} |
|
||||
}, |
|
||||
actionRouteLoggedIn(context: MainContext) { |
|
||||
if (router.currentRoute.path === '/login' || router.currentRoute.path === '/') { |
|
||||
router.push('/main'); |
|
||||
} |
|
||||
}, |
|
||||
async removeNotification(context: MainContext, payload: { notification: AppNotification, timeout: number }) { |
|
||||
return new Promise((resolve, reject) => { |
|
||||
setTimeout(() => { |
|
||||
commitRemoveNotification(context, payload.notification); |
|
||||
resolve(true); |
|
||||
}, payload.timeout); |
|
||||
}); |
|
||||
}, |
|
||||
async passwordRecovery(context: MainContext, payload: { username: string }) { |
|
||||
const loadingNotification = { content: 'Sending password recovery email', showProgress: true }; |
|
||||
try { |
|
||||
commitAddNotification(context, loadingNotification); |
|
||||
const response = (await Promise.all([ |
|
||||
api.passwordRecovery(payload.username), |
|
||||
await new Promise((resolve, reject) => setTimeout(() => resolve(), 500)), |
|
||||
]))[0]; |
|
||||
commitRemoveNotification(context, loadingNotification); |
|
||||
commitAddNotification(context, { content: 'Password recovery email sent', color: 'success' }); |
|
||||
await dispatchLogOut(context); |
|
||||
} catch (error) { |
|
||||
commitRemoveNotification(context, loadingNotification); |
|
||||
commitAddNotification(context, { color: 'error', content: 'Incorrect username' }); |
|
||||
} |
|
||||
}, |
|
||||
async resetPassword(context: MainContext, payload: { password: string, token: string }) { |
|
||||
const loadingNotification = { content: 'Resetting password', showProgress: true }; |
|
||||
try { |
|
||||
commitAddNotification(context, loadingNotification); |
|
||||
const response = (await Promise.all([ |
|
||||
api.resetPassword(payload.password, payload.token), |
|
||||
await new Promise((resolve, reject) => setTimeout(() => resolve(), 500)), |
|
||||
]))[0]; |
|
||||
commitRemoveNotification(context, loadingNotification); |
|
||||
commitAddNotification(context, { content: 'Password successfully reset', color: 'success' }); |
|
||||
await dispatchLogOut(context); |
|
||||
} catch (error) { |
|
||||
commitRemoveNotification(context, loadingNotification); |
|
||||
commitAddNotification(context, { color: 'error', content: 'Error resetting password' }); |
|
||||
} |
|
||||
}, |
|
||||
}; |
|
||||
|
|
||||
const { dispatch } = getStoreAccessors<MainState | any, State>(''); |
|
||||
|
|
||||
export const dispatchCheckApiError = dispatch(actions.actionCheckApiError); |
|
||||
export const dispatchCheckLoggedIn = dispatch(actions.actionCheckLoggedIn); |
|
||||
export const dispatchGetUserProfile = dispatch(actions.actionGetUserProfile); |
|
||||
export const dispatchLogIn = dispatch(actions.actionLogIn); |
|
||||
export const dispatchLogOut = dispatch(actions.actionLogOut); |
|
||||
export const dispatchUserLogOut = dispatch(actions.actionUserLogOut); |
|
||||
export const dispatchRemoveLogIn = dispatch(actions.actionRemoveLogIn); |
|
||||
export const dispatchRouteLoggedIn = dispatch(actions.actionRouteLoggedIn); |
|
||||
export const dispatchRouteLogOut = dispatch(actions.actionRouteLogOut); |
|
||||
export const dispatchUpdateUserProfile = dispatch(actions.actionUpdateUserProfile); |
|
||||
export const dispatchRemoveNotification = dispatch(actions.removeNotification); |
|
||||
export const dispatchPasswordRecovery = dispatch(actions.passwordRecovery); |
|
||||
export const dispatchResetPassword = dispatch(actions.resetPassword); |
|
||||
@ -1,29 +0,0 @@ |
|||||
import { MainState } from './state'; |
|
||||
import { getStoreAccessors } from 'typesafe-vuex'; |
|
||||
import { State } from '../state'; |
|
||||
|
|
||||
export const getters = { |
|
||||
hasAdminAccess: (state: MainState) => { |
|
||||
return ( |
|
||||
state.userProfile && |
|
||||
state.userProfile.is_superuser && state.userProfile.is_active); |
|
||||
}, |
|
||||
loginError: (state: MainState) => state.logInError, |
|
||||
dashboardShowDrawer: (state: MainState) => state.dashboardShowDrawer, |
|
||||
dashboardMiniDrawer: (state: MainState) => state.dashboardMiniDrawer, |
|
||||
userProfile: (state: MainState) => state.userProfile, |
|
||||
token: (state: MainState) => state.token, |
|
||||
isLoggedIn: (state: MainState) => state.isLoggedIn, |
|
||||
firstNotification: (state: MainState) => state.notifications.length > 0 && state.notifications[0], |
|
||||
}; |
|
||||
|
|
||||
const {read} = getStoreAccessors<MainState, State>(''); |
|
||||
|
|
||||
export const readDashboardMiniDrawer = read(getters.dashboardMiniDrawer); |
|
||||
export const readDashboardShowDrawer = read(getters.dashboardShowDrawer); |
|
||||
export const readHasAdminAccess = read(getters.hasAdminAccess); |
|
||||
export const readIsLoggedIn = read(getters.isLoggedIn); |
|
||||
export const readLoginError = read(getters.loginError); |
|
||||
export const readToken = read(getters.token); |
|
||||
export const readUserProfile = read(getters.userProfile); |
|
||||
export const readFirstNotification = read(getters.firstNotification); |
|
||||
@ -1,21 +0,0 @@ |
|||||
import { mutations } from './mutations'; |
|
||||
import { getters } from './getters'; |
|
||||
import { actions } from './actions'; |
|
||||
import { MainState } from './state'; |
|
||||
|
|
||||
const defaultState: MainState = { |
|
||||
isLoggedIn: null, |
|
||||
token: '', |
|
||||
logInError: false, |
|
||||
userProfile: null, |
|
||||
dashboardMiniDrawer: false, |
|
||||
dashboardShowDrawer: true, |
|
||||
notifications: [], |
|
||||
}; |
|
||||
|
|
||||
export const mainModule = { |
|
||||
state: defaultState, |
|
||||
mutations, |
|
||||
actions, |
|
||||
getters, |
|
||||
}; |
|
||||
@ -1,43 +0,0 @@ |
|||||
import { IUserProfile } from '@/interfaces'; |
|
||||
import { MainState, AppNotification } from './state'; |
|
||||
import { getStoreAccessors } from 'typesafe-vuex'; |
|
||||
import { State } from '../state'; |
|
||||
|
|
||||
|
|
||||
export const mutations = { |
|
||||
setToken(state: MainState, payload: string) { |
|
||||
state.token = payload; |
|
||||
}, |
|
||||
setLoggedIn(state: MainState, payload: boolean) { |
|
||||
state.isLoggedIn = payload; |
|
||||
}, |
|
||||
setLogInError(state: MainState, payload: boolean) { |
|
||||
state.logInError = payload; |
|
||||
}, |
|
||||
setUserProfile(state: MainState, payload: IUserProfile) { |
|
||||
state.userProfile = payload; |
|
||||
}, |
|
||||
setDashboardMiniDrawer(state: MainState, payload: boolean) { |
|
||||
state.dashboardMiniDrawer = payload; |
|
||||
}, |
|
||||
setDashboardShowDrawer(state: MainState, payload: boolean) { |
|
||||
state.dashboardShowDrawer = payload; |
|
||||
}, |
|
||||
addNotification(state: MainState, payload: AppNotification) { |
|
||||
state.notifications.push(payload); |
|
||||
}, |
|
||||
removeNotification(state: MainState, payload: AppNotification) { |
|
||||
state.notifications = state.notifications.filter((notification) => notification !== payload); |
|
||||
}, |
|
||||
}; |
|
||||
|
|
||||
const {commit} = getStoreAccessors<MainState | any, State>(''); |
|
||||
|
|
||||
export const commitSetDashboardMiniDrawer = commit(mutations.setDashboardMiniDrawer); |
|
||||
export const commitSetDashboardShowDrawer = commit(mutations.setDashboardShowDrawer); |
|
||||
export const commitSetLoggedIn = commit(mutations.setLoggedIn); |
|
||||
export const commitSetLogInError = commit(mutations.setLogInError); |
|
||||
export const commitSetToken = commit(mutations.setToken); |
|
||||
export const commitSetUserProfile = commit(mutations.setUserProfile); |
|
||||
export const commitAddNotification = commit(mutations.addNotification); |
|
||||
export const commitRemoveNotification = commit(mutations.removeNotification); |
|
||||
@ -1,17 +0,0 @@ |
|||||
import { IUserProfile } from '@/interfaces'; |
|
||||
|
|
||||
export interface AppNotification { |
|
||||
content: string; |
|
||||
color?: string; |
|
||||
showProgress?: boolean; |
|
||||
} |
|
||||
|
|
||||
export interface MainState { |
|
||||
token: string; |
|
||||
isLoggedIn: boolean | null; |
|
||||
logInError: boolean; |
|
||||
userProfile: IUserProfile | null; |
|
||||
dashboardMiniDrawer: boolean; |
|
||||
dashboardShowDrawer: boolean; |
|
||||
notifications: AppNotification[]; |
|
||||
} |
|
||||
@ -1,5 +0,0 @@ |
|||||
import { MainState } from './main/state'; |
|
||||
|
|
||||
export interface State { |
|
||||
main: MainState; |
|
||||
} |
|
||||
@ -1,5 +0,0 @@ |
|||||
export const getLocalToken = () => localStorage.getItem('token'); |
|
||||
|
|
||||
export const saveLocalToken = (token: string) => localStorage.setItem('token', token); |
|
||||
|
|
||||
export const removeLocalToken = () => localStorage.removeItem('token'); |
|
||||
@ -1,58 +0,0 @@ |
|||||
<template> |
|
||||
<v-content> |
|
||||
<v-container fluid fill-height> |
|
||||
<v-layout align-center justify-center> |
|
||||
<v-flex xs12 sm8 md4> |
|
||||
<v-card class="elevation-12"> |
|
||||
<v-toolbar dark color="primary"> |
|
||||
<v-toolbar-title>{{appName}}</v-toolbar-title> |
|
||||
<v-spacer></v-spacer> |
|
||||
</v-toolbar> |
|
||||
<v-card-text> |
|
||||
<v-form @keyup.enter="submit"> |
|
||||
<v-text-field @keyup.enter="submit" v-model="email" prepend-icon="person" name="login" label="Login" type="text"></v-text-field> |
|
||||
<v-text-field @keyup.enter="submit" v-model="password" prepend-icon="lock" name="password" label="Password" id="password" type="password"></v-text-field> |
|
||||
</v-form> |
|
||||
<div v-if="loginError"> |
|
||||
<v-alert :value="loginError" transition="fade-transition" type="error"> |
|
||||
Incorrect email or password |
|
||||
</v-alert> |
|
||||
</div> |
|
||||
<v-flex class="caption text-xs-right"><router-link to="/recover-password">Forgot your password?</router-link></v-flex> |
|
||||
</v-card-text> |
|
||||
<v-card-actions> |
|
||||
<v-spacer></v-spacer> |
|
||||
<v-btn @click.prevent="submit">Login</v-btn> |
|
||||
</v-card-actions> |
|
||||
</v-card> |
|
||||
</v-flex> |
|
||||
</v-layout> |
|
||||
</v-container> |
|
||||
</v-content> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import { Component, Vue } from 'vue-property-decorator'; |
|
||||
import { api } from '@/api'; |
|
||||
import { appName } from '@/env'; |
|
||||
import { readLoginError } from '@/store/main/getters'; |
|
||||
import { dispatchLogIn } from '@/store/main/actions'; |
|
||||
|
|
||||
@Component |
|
||||
export default class Login extends Vue { |
|
||||
public email: string = ''; |
|
||||
public password: string = ''; |
|
||||
public appName = appName; |
|
||||
|
|
||||
public get loginError() { |
|
||||
return readLoginError(this.$store); |
|
||||
} |
|
||||
|
|
||||
public submit() { |
|
||||
dispatchLogIn(this.$store, {username: this.email, password: this.password}); |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style> |
|
||||
</style> |
|
||||
@ -1,52 +0,0 @@ |
|||||
<template> |
|
||||
<v-content> |
|
||||
<v-container fluid fill-height> |
|
||||
<v-layout align-center justify-center> |
|
||||
<v-flex xs12 sm8 md4> |
|
||||
<v-card class="elevation-12"> |
|
||||
<v-toolbar dark color="primary"> |
|
||||
<v-toolbar-title>{{appName}} - Password Recovery</v-toolbar-title> |
|
||||
</v-toolbar> |
|
||||
<v-card-text> |
|
||||
<p class="subheading">A password recovery email will be sent to the registered account</p> |
|
||||
<v-form @keyup.enter="submit" v-model="valid" ref="form" @submit.prevent="" lazy-validation> |
|
||||
<v-text-field @keyup.enter="submit" label="Username" type="text" prepend-icon="person" v-model="username" v-validate="'required'" data-vv-name="username" :error-messages="errors.collect('username')" required></v-text-field> |
|
||||
</v-form> |
|
||||
</v-card-text> |
|
||||
<v-card-actions> |
|
||||
<v-spacer></v-spacer> |
|
||||
<v-btn @click="cancel">Cancel</v-btn> |
|
||||
<v-btn @click.prevent="submit" :disabled="!valid"> |
|
||||
Recover Password |
|
||||
</v-btn> |
|
||||
</v-card-actions> |
|
||||
</v-card> |
|
||||
</v-flex> |
|
||||
</v-layout> |
|
||||
</v-container> |
|
||||
</v-content> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import { Component, Vue } from 'vue-property-decorator'; |
|
||||
import { appName } from '@/env'; |
|
||||
import { dispatchPasswordRecovery } from '@/store/main/actions'; |
|
||||
|
|
||||
@Component |
|
||||
export default class Login extends Vue { |
|
||||
public valid = true; |
|
||||
public username: string = ''; |
|
||||
public appName = appName; |
|
||||
|
|
||||
public cancel() { |
|
||||
this.$router.back(); |
|
||||
} |
|
||||
|
|
||||
public submit() { |
|
||||
dispatchPasswordRecovery(this.$store, { username: this.username }); |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style> |
|
||||
</style> |
|
||||
@ -1,84 +0,0 @@ |
|||||
<template> |
|
||||
<v-content> |
|
||||
<v-container fluid fill-height> |
|
||||
<v-layout align-center justify-center> |
|
||||
<v-flex xs12 sm8 md4> |
|
||||
<v-card class="elevation-12"> |
|
||||
<v-toolbar dark color="primary"> |
|
||||
<v-toolbar-title>{{appName}} - Reset Password</v-toolbar-title> |
|
||||
</v-toolbar> |
|
||||
<v-card-text> |
|
||||
<p class="subheading">Enter your new password below</p> |
|
||||
<v-form @keyup.enter="submit" v-model="valid" ref="form" @submit.prevent="" lazy-validation> |
|
||||
<v-text-field type="password" ref="password" label="Password" data-vv-name="password" data-vv-delay="100" data-vv-rules="required" v-validate="'required'" v-model="password1" :error-messages="errors.first('password')"> |
|
||||
</v-text-field> |
|
||||
<v-text-field type="password" label="Confirm Password" data-vv-name="password_confirmation" data-vv-delay="100" data-vv-rules="required|confirmed:$password" data-vv-as="password" v-validate="'required|confirmed:password'" v-model="password2" :error-messages="errors.first('password_confirmation')"> |
|
||||
</v-text-field> |
|
||||
</v-form> |
|
||||
</v-card-text> |
|
||||
<v-card-actions> |
|
||||
<v-spacer></v-spacer> |
|
||||
<v-btn @click="cancel">Cancel</v-btn> |
|
||||
<v-btn @click="reset">Clear</v-btn> |
|
||||
<v-btn @click="submit" :disabled="!valid">Save</v-btn> |
|
||||
</v-card-actions> |
|
||||
</v-card> |
|
||||
</v-flex> |
|
||||
</v-layout> |
|
||||
</v-container> |
|
||||
</v-content> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import { Component, Vue } from 'vue-property-decorator'; |
|
||||
import { Store } from 'vuex'; |
|
||||
import { IUserProfileUpdate } from '@/interfaces'; |
|
||||
import { appName } from '@/env'; |
|
||||
import { commitAddNotification } from '@/store/main/mutations'; |
|
||||
import { dispatchResetPassword } from '@/store/main/actions'; |
|
||||
|
|
||||
@Component |
|
||||
export default class UserProfileEdit extends Vue { |
|
||||
public appName = appName; |
|
||||
public valid = true; |
|
||||
public password1 = ''; |
|
||||
public password2 = ''; |
|
||||
|
|
||||
public mounted() { |
|
||||
this.checkToken(); |
|
||||
} |
|
||||
|
|
||||
public reset() { |
|
||||
this.password1 = ''; |
|
||||
this.password2 = ''; |
|
||||
this.$validator.reset(); |
|
||||
} |
|
||||
|
|
||||
public cancel() { |
|
||||
this.$router.push('/'); |
|
||||
} |
|
||||
|
|
||||
public checkToken() { |
|
||||
const token = (this.$router.currentRoute.query.token as string); |
|
||||
if (!token) { |
|
||||
commitAddNotification(this.$store, { |
|
||||
content: 'No token provided in the URL, start a new password recovery', |
|
||||
color: 'error', |
|
||||
}); |
|
||||
this.$router.push('/recover-password'); |
|
||||
} else { |
|
||||
return token; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
public async submit() { |
|
||||
if (await this.$validator.validateAll()) { |
|
||||
const token = this.checkToken(); |
|
||||
if (token) { |
|
||||
await dispatchResetPassword(this.$store, { token, password: this.password1 }); |
|
||||
this.$router.push('/'); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,37 +0,0 @@ |
|||||
<template> |
|
||||
<v-container fluid> |
|
||||
<v-card class="ma-3 pa-3"> |
|
||||
<v-card-title primary-title> |
|
||||
<div class="headline primary--text">Dashboard</div> |
|
||||
</v-card-title> |
|
||||
<v-card-text> |
|
||||
<div class="headline font-weight-light ma-5">Welcome {{greetedUser}}</div> |
|
||||
</v-card-text> |
|
||||
<v-card-actions> |
|
||||
<v-btn to="/main/profile/view">View Profile</v-btn> |
|
||||
<v-btn to="/main/profile/edit">Edit Profile</v-btn> |
|
||||
<v-btn to="/main/profile/password">Change Password</v-btn> |
|
||||
</v-card-actions> |
|
||||
</v-card> |
|
||||
</v-container> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import { Component, Vue } from 'vue-property-decorator'; |
|
||||
import { Store } from 'vuex'; |
|
||||
import { readUserProfile } from '@/store/main/getters'; |
|
||||
|
|
||||
@Component |
|
||||
export default class Dashboard extends Vue { |
|
||||
get greetedUser() { |
|
||||
const userProfile = readUserProfile(this.$store); |
|
||||
if (userProfile) { |
|
||||
if (userProfile.full_name) { |
|
||||
return userProfile.full_name; |
|
||||
} else { |
|
||||
return userProfile.email; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,182 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<v-navigation-drawer persistent :mini-variant="miniDrawer" v-model="showDrawer" fixed app> |
|
||||
<v-layout column fill-height> |
|
||||
<v-list> |
|
||||
<v-subheader>Main menu</v-subheader> |
|
||||
<v-list-tile to="/main/dashboard"> |
|
||||
<v-list-tile-action> |
|
||||
<v-icon>web</v-icon> |
|
||||
</v-list-tile-action> |
|
||||
<v-list-tile-content> |
|
||||
<v-list-tile-title>Dashboard</v-list-tile-title> |
|
||||
</v-list-tile-content> |
|
||||
</v-list-tile> |
|
||||
<v-list-tile to="/main/profile/view"> |
|
||||
<v-list-tile-action> |
|
||||
<v-icon>person</v-icon> |
|
||||
</v-list-tile-action> |
|
||||
<v-list-tile-content> |
|
||||
<v-list-tile-title>Profile</v-list-tile-title> |
|
||||
</v-list-tile-content> |
|
||||
</v-list-tile> |
|
||||
<v-list-tile to="/main/profile/edit"> |
|
||||
<v-list-tile-action> |
|
||||
<v-icon>edit</v-icon> |
|
||||
</v-list-tile-action> |
|
||||
<v-list-tile-content> |
|
||||
<v-list-tile-title>Edit Profile</v-list-tile-title> |
|
||||
</v-list-tile-content> |
|
||||
</v-list-tile> |
|
||||
<v-list-tile to="/main/profile/password"> |
|
||||
<v-list-tile-action> |
|
||||
<v-icon>vpn_key</v-icon> |
|
||||
</v-list-tile-action> |
|
||||
<v-list-tile-content> |
|
||||
<v-list-tile-title>Change Password</v-list-tile-title> |
|
||||
</v-list-tile-content> |
|
||||
</v-list-tile> |
|
||||
</v-list> |
|
||||
<v-divider></v-divider> |
|
||||
<v-list subheader v-show="hasAdminAccess"> |
|
||||
<v-subheader>Admin</v-subheader> |
|
||||
<v-list-tile to="/main/admin/users/all"> |
|
||||
<v-list-tile-action> |
|
||||
<v-icon>group</v-icon> |
|
||||
</v-list-tile-action> |
|
||||
<v-list-tile-content> |
|
||||
<v-list-tile-title>Manage Users</v-list-tile-title> |
|
||||
</v-list-tile-content> |
|
||||
</v-list-tile> |
|
||||
<v-list-tile to="/main/admin/users/create"> |
|
||||
<v-list-tile-action> |
|
||||
<v-icon>person_add</v-icon> |
|
||||
</v-list-tile-action> |
|
||||
<v-list-tile-content> |
|
||||
<v-list-tile-title>Create User</v-list-tile-title> |
|
||||
</v-list-tile-content> |
|
||||
</v-list-tile> |
|
||||
</v-list> |
|
||||
<v-spacer></v-spacer> |
|
||||
<v-list> |
|
||||
<v-list-tile @click="logout"> |
|
||||
<v-list-tile-action> |
|
||||
<v-icon>close</v-icon> |
|
||||
</v-list-tile-action> |
|
||||
<v-list-tile-content> |
|
||||
<v-list-tile-title>Logout</v-list-tile-title> |
|
||||
</v-list-tile-content> |
|
||||
</v-list-tile> |
|
||||
<v-divider></v-divider> |
|
||||
<v-list-tile @click="switchMiniDrawer"> |
|
||||
<v-list-tile-action> |
|
||||
<v-icon v-html="miniDrawer ? 'chevron_right' : 'chevron_left'"></v-icon> |
|
||||
</v-list-tile-action> |
|
||||
<v-list-tile-content> |
|
||||
<v-list-tile-title>Collapse</v-list-tile-title> |
|
||||
</v-list-tile-content> |
|
||||
</v-list-tile> |
|
||||
</v-list> |
|
||||
</v-layout> |
|
||||
</v-navigation-drawer> |
|
||||
<v-toolbar dark color="primary" app> |
|
||||
<v-toolbar-side-icon @click.stop="switchShowDrawer"></v-toolbar-side-icon> |
|
||||
<v-toolbar-title v-text="appName"></v-toolbar-title> |
|
||||
<v-spacer></v-spacer> |
|
||||
<v-menu bottom left offset-y> |
|
||||
<v-btn slot="activator" icon> |
|
||||
<v-icon>more_vert</v-icon> |
|
||||
</v-btn> |
|
||||
<v-list> |
|
||||
<v-list-tile to="/main/profile"> |
|
||||
<v-list-tile-content> |
|
||||
<v-list-tile-title>Profile</v-list-tile-title> |
|
||||
</v-list-tile-content> |
|
||||
<v-list-tile-action> |
|
||||
<v-icon>person</v-icon> |
|
||||
</v-list-tile-action> |
|
||||
</v-list-tile> |
|
||||
<v-list-tile @click="logout"> |
|
||||
<v-list-tile-content> |
|
||||
<v-list-tile-title>Logout</v-list-tile-title> |
|
||||
</v-list-tile-content> |
|
||||
<v-list-tile-action> |
|
||||
<v-icon>close</v-icon> |
|
||||
</v-list-tile-action> |
|
||||
</v-list-tile> |
|
||||
</v-list> |
|
||||
</v-menu> |
|
||||
</v-toolbar> |
|
||||
<v-content> |
|
||||
<router-view></router-view> |
|
||||
</v-content> |
|
||||
<v-footer class="pa-3" fixed app> |
|
||||
<v-spacer></v-spacer> |
|
||||
<span>© {{appName}}</span> |
|
||||
</v-footer> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import { Vue, Component } from 'vue-property-decorator'; |
|
||||
|
|
||||
import { appName } from '@/env'; |
|
||||
import { readDashboardMiniDrawer, readDashboardShowDrawer, readHasAdminAccess } from '@/store/main/getters'; |
|
||||
import { commitSetDashboardShowDrawer, commitSetDashboardMiniDrawer } from '@/store/main/mutations'; |
|
||||
import { dispatchUserLogOut } from '@/store/main/actions'; |
|
||||
|
|
||||
const routeGuardMain = async (to, from, next) => { |
|
||||
if (to.path === '/main') { |
|
||||
next('/main/dashboard'); |
|
||||
} else { |
|
||||
next(); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
@Component |
|
||||
export default class Main extends Vue { |
|
||||
public appName = appName; |
|
||||
|
|
||||
public beforeRouteEnter(to, from, next) { |
|
||||
routeGuardMain(to, from, next); |
|
||||
} |
|
||||
|
|
||||
public beforeRouteUpdate(to, from, next) { |
|
||||
routeGuardMain(to, from, next); |
|
||||
} |
|
||||
|
|
||||
get miniDrawer() { |
|
||||
return readDashboardMiniDrawer(this.$store); |
|
||||
} |
|
||||
|
|
||||
get showDrawer() { |
|
||||
return readDashboardShowDrawer(this.$store); |
|
||||
} |
|
||||
|
|
||||
set showDrawer(value) { |
|
||||
commitSetDashboardShowDrawer(this.$store, value); |
|
||||
} |
|
||||
|
|
||||
public switchShowDrawer() { |
|
||||
commitSetDashboardShowDrawer( |
|
||||
this.$store, |
|
||||
!readDashboardShowDrawer(this.$store), |
|
||||
); |
|
||||
} |
|
||||
|
|
||||
public switchMiniDrawer() { |
|
||||
commitSetDashboardMiniDrawer( |
|
||||
this.$store, |
|
||||
!readDashboardMiniDrawer(this.$store), |
|
||||
); |
|
||||
} |
|
||||
|
|
||||
public get hasAdminAccess() { |
|
||||
return readHasAdminAccess(this.$store); |
|
||||
} |
|
||||
|
|
||||
public async logout() { |
|
||||
await dispatchUserLogOut(this.$store); |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,38 +0,0 @@ |
|||||
<template> |
|
||||
<router-view></router-view> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import { Component, Vue } from 'vue-property-decorator'; |
|
||||
import { store } from '@/store'; |
|
||||
import { dispatchCheckLoggedIn } from '@/store/main/actions'; |
|
||||
import { readIsLoggedIn } from '@/store/main/getters'; |
|
||||
|
|
||||
const startRouteGuard = async (to, from, next) => { |
|
||||
await dispatchCheckLoggedIn(store); |
|
||||
if (readIsLoggedIn(store)) { |
|
||||
if (to.path === '/login' || to.path === '/') { |
|
||||
next('/main'); |
|
||||
} else { |
|
||||
next(); |
|
||||
} |
|
||||
} else if (readIsLoggedIn(store) === false) { |
|
||||
if (to.path === '/' || (to.path as string).startsWith('/main')) { |
|
||||
next('/login'); |
|
||||
} else { |
|
||||
next(); |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
@Component |
|
||||
export default class Start extends Vue { |
|
||||
public beforeRouteEnter(to, from, next) { |
|
||||
startRouteGuard(to, from, next); |
|
||||
} |
|
||||
|
|
||||
public beforeRouteUpdate(to, from, next) { |
|
||||
startRouteGuard(to, from, next); |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,28 +0,0 @@ |
|||||
<template> |
|
||||
<router-view></router-view> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import { Component, Vue } from 'vue-property-decorator'; |
|
||||
import { store } from '@/store'; |
|
||||
import { readHasAdminAccess } from '@/store/main/getters'; |
|
||||
|
|
||||
const routeGuardAdmin = async (to, from, next) => { |
|
||||
if (!readHasAdminAccess(store)) { |
|
||||
next('/main'); |
|
||||
} else { |
|
||||
next(); |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
@Component |
|
||||
export default class Admin extends Vue { |
|
||||
public beforeRouteEnter(to, from, next) { |
|
||||
routeGuardAdmin(to, from, next); |
|
||||
} |
|
||||
|
|
||||
public beforeRouteUpdate(to, from, next) { |
|
||||
routeGuardAdmin(to, from, next); |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,83 +0,0 @@ |
|||||
<template> |
|
||||
<div> |
|
||||
<v-toolbar light> |
|
||||
<v-toolbar-title> |
|
||||
Manage Users |
|
||||
</v-toolbar-title> |
|
||||
<v-spacer></v-spacer> |
|
||||
<v-btn color="primary" to="/main/admin/users/create">Create User</v-btn> |
|
||||
</v-toolbar> |
|
||||
<v-data-table :headers="headers" :items="users"> |
|
||||
<template slot="items" slot-scope="props"> |
|
||||
<td>{{ props.item.name }}</td> |
|
||||
<td>{{ props.item.email }}</td> |
|
||||
<td>{{ props.item.full_name }}</td> |
|
||||
<td><v-icon v-if="props.item.is_active">checkmark</v-icon></td> |
|
||||
<td><v-icon v-if="props.item.is_superuser">checkmark</v-icon></td> |
|
||||
<td class="justify-center layout px-0"> |
|
||||
<v-tooltip top> |
|
||||
<span>Edit</span> |
|
||||
<v-btn slot="activator" flat :to="{name: 'main-admin-users-edit', params: {id: props.item.id}}"> |
|
||||
<v-icon>edit</v-icon> |
|
||||
</v-btn> |
|
||||
</v-tooltip> |
|
||||
</td> |
|
||||
</template> |
|
||||
</v-data-table> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import { Component, Vue } from 'vue-property-decorator'; |
|
||||
import { Store } from 'vuex'; |
|
||||
import { IUserProfile } from '@/interfaces'; |
|
||||
import { readAdminUsers } from '@/store/admin/getters'; |
|
||||
import { dispatchGetUsers } from '@/store/admin/actions'; |
|
||||
|
|
||||
@Component |
|
||||
export default class AdminUsers extends Vue { |
|
||||
public headers = [ |
|
||||
{ |
|
||||
text: 'Name', |
|
||||
sortable: true, |
|
||||
value: 'name', |
|
||||
align: 'left', |
|
||||
}, |
|
||||
{ |
|
||||
text: 'Email', |
|
||||
sortable: true, |
|
||||
value: 'email', |
|
||||
align: 'left', |
|
||||
}, |
|
||||
{ |
|
||||
text: 'Full Name', |
|
||||
sortable: true, |
|
||||
value: 'full_name', |
|
||||
align: 'left', |
|
||||
}, |
|
||||
{ |
|
||||
text: 'Is Active', |
|
||||
sortable: true, |
|
||||
value: 'isActive', |
|
||||
align: 'left', |
|
||||
}, |
|
||||
{ |
|
||||
text: 'Is Superuser', |
|
||||
sortable: true, |
|
||||
value: 'isSuperuser', |
|
||||
align: 'left', |
|
||||
}, |
|
||||
{ |
|
||||
text: 'Actions', |
|
||||
value: 'id', |
|
||||
}, |
|
||||
]; |
|
||||
get users() { |
|
||||
return readAdminUsers(this.$store); |
|
||||
} |
|
||||
|
|
||||
public async mounted() { |
|
||||
await dispatchGetUsers(this.$store); |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,97 +0,0 @@ |
|||||
<template> |
|
||||
<v-container fluid> |
|
||||
<v-card class="ma-3 pa-3"> |
|
||||
<v-card-title primary-title> |
|
||||
<div class="headline primary--text">Create User</div> |
|
||||
</v-card-title> |
|
||||
<v-card-text> |
|
||||
<template> |
|
||||
<v-form v-model="valid" ref="form" lazy-validation> |
|
||||
<v-text-field label="Full Name" v-model="fullName" required></v-text-field> |
|
||||
<v-text-field label="E-mail" type="email" v-model="email" v-validate="'required|email'" data-vv-name="email" :error-messages="errors.collect('email')" required></v-text-field> |
|
||||
<div class="subheading secondary--text text--lighten-2">User is superuser <span v-if="isSuperuser">(currently is a superuser)</span><span v-else>(currently is not a superuser)</span></div> |
|
||||
<v-checkbox label="Is Superuser" v-model="isSuperuser"></v-checkbox> |
|
||||
<div class="subheading secondary--text text--lighten-2">User is active <span v-if="isActive">(currently active)</span><span v-else>(currently not active)</span></div> |
|
||||
<v-checkbox label="Is Active" v-model="isActive"></v-checkbox> |
|
||||
<v-layout align-center> |
|
||||
<v-flex> |
|
||||
<v-text-field type="password" ref="password" label="Set Password" data-vv-name="password" data-vv-delay="100" v-validate="{required: true}" v-model="password1" :error-messages="errors.first('password')"> |
|
||||
</v-text-field> |
|
||||
<v-text-field type="password" label="Confirm Password" data-vv-name="password_confirmation" data-vv-delay="100" data-vv-as="password" v-validate="{required: true, confirmed: 'password'}" v-model="password2" :error-messages="errors.first('password_confirmation')"> |
|
||||
</v-text-field> |
|
||||
</v-flex> |
|
||||
</v-layout> |
|
||||
</v-form> |
|
||||
</template> |
|
||||
</v-card-text> |
|
||||
<v-card-actions> |
|
||||
<v-spacer></v-spacer> |
|
||||
<v-btn @click="cancel">Cancel</v-btn> |
|
||||
<v-btn @click="reset">Reset</v-btn> |
|
||||
<v-btn @click="submit" :disabled="!valid"> |
|
||||
Save |
|
||||
</v-btn> |
|
||||
</v-card-actions> |
|
||||
</v-card> |
|
||||
</v-container> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import { Component, Vue } from 'vue-property-decorator'; |
|
||||
import { |
|
||||
IUserProfile, |
|
||||
IUserProfileUpdate, |
|
||||
IUserProfileCreate, |
|
||||
} from '@/interfaces'; |
|
||||
import { dispatchGetUsers, dispatchCreateUser } from '@/store/admin/actions'; |
|
||||
|
|
||||
@Component |
|
||||
export default class CreateUser extends Vue { |
|
||||
public valid = false; |
|
||||
public fullName: string = ''; |
|
||||
public email: string = ''; |
|
||||
public isActive: boolean = true; |
|
||||
public isSuperuser: boolean = false; |
|
||||
public setPassword = false; |
|
||||
public password1: string = ''; |
|
||||
public password2: string = ''; |
|
||||
|
|
||||
public async mounted() { |
|
||||
await dispatchGetUsers(this.$store); |
|
||||
this.reset(); |
|
||||
} |
|
||||
|
|
||||
public reset() { |
|
||||
this.password1 = ''; |
|
||||
this.password2 = ''; |
|
||||
this.fullName = ''; |
|
||||
this.email = ''; |
|
||||
this.isActive = true; |
|
||||
this.isSuperuser = false; |
|
||||
this.$validator.reset(); |
|
||||
} |
|
||||
|
|
||||
public cancel() { |
|
||||
this.$router.back(); |
|
||||
} |
|
||||
|
|
||||
public async submit() { |
|
||||
if (await this.$validator.validateAll()) { |
|
||||
const updatedProfile: IUserProfileCreate = { |
|
||||
email: this.email, |
|
||||
}; |
|
||||
if (this.fullName) { |
|
||||
updatedProfile.full_name = this.fullName; |
|
||||
} |
|
||||
if (this.email) { |
|
||||
updatedProfile.email = this.email; |
|
||||
} |
|
||||
updatedProfile.is_active = this.isActive; |
|
||||
updatedProfile.is_superuser = this.isSuperuser; |
|
||||
updatedProfile.password = this.password1; |
|
||||
await dispatchCreateUser(this.$store, updatedProfile); |
|
||||
this.$router.push('/main/admin/users'); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,163 +0,0 @@ |
|||||
<template> |
|
||||
<v-container fluid> |
|
||||
<v-card class="ma-3 pa-3"> |
|
||||
<v-card-title primary-title> |
|
||||
<div class="headline primary--text">Edit User</div> |
|
||||
</v-card-title> |
|
||||
<v-card-text> |
|
||||
<template> |
|
||||
<div class="my-3"> |
|
||||
<div class="subheading secondary--text text--lighten-2">Username</div> |
|
||||
<div |
|
||||
class="title primary--text text--darken-2" |
|
||||
v-if="user" |
|
||||
>{{user.email}}</div> |
|
||||
<div |
|
||||
class="title primary--text text--darken-2" |
|
||||
v-else |
|
||||
>-----</div> |
|
||||
</div> |
|
||||
<v-form |
|
||||
v-model="valid" |
|
||||
ref="form" |
|
||||
lazy-validation |
|
||||
> |
|
||||
<v-text-field |
|
||||
label="Full Name" |
|
||||
v-model="fullName" |
|
||||
required |
|
||||
></v-text-field> |
|
||||
<v-text-field |
|
||||
label="E-mail" |
|
||||
type="email" |
|
||||
v-model="email" |
|
||||
v-validate="'required|email'" |
|
||||
data-vv-name="email" |
|
||||
:error-messages="errors.collect('email')" |
|
||||
required |
|
||||
></v-text-field> |
|
||||
<div class="subheading secondary--text text--lighten-2">User is superuser <span v-if="isSuperuser">(currently is a superuser)</span><span v-else>(currently is not a superuser)</span></div> |
|
||||
<v-checkbox |
|
||||
label="Is Superuser" |
|
||||
v-model="isSuperuser" |
|
||||
></v-checkbox> |
|
||||
<div class="subheading secondary--text text--lighten-2">User is active <span v-if="isActive">(currently active)</span><span v-else>(currently not active)</span></div> |
|
||||
<v-checkbox |
|
||||
label="Is Active" |
|
||||
v-model="isActive" |
|
||||
></v-checkbox> |
|
||||
<v-layout align-center> |
|
||||
<v-flex shrink> |
|
||||
<v-checkbox |
|
||||
v-model="setPassword" |
|
||||
class="mr-2" |
|
||||
></v-checkbox> |
|
||||
</v-flex> |
|
||||
<v-flex> |
|
||||
<v-text-field |
|
||||
:disabled="!setPassword" |
|
||||
type="password" |
|
||||
ref="password" |
|
||||
label="Set Password" |
|
||||
data-vv-name="password" |
|
||||
data-vv-delay="100" |
|
||||
v-validate="{required: setPassword}" |
|
||||
v-model="password1" |
|
||||
:error-messages="errors.first('password')" |
|
||||
> |
|
||||
</v-text-field> |
|
||||
<v-text-field |
|
||||
v-show="setPassword" |
|
||||
type="password" |
|
||||
label="Confirm Password" |
|
||||
data-vv-name="password_confirmation" |
|
||||
data-vv-delay="100" |
|
||||
data-vv-as="password" |
|
||||
v-validate="{required: setPassword, confirmed: 'password'}" |
|
||||
v-model="password2" |
|
||||
:error-messages="errors.first('password_confirmation')" |
|
||||
> |
|
||||
</v-text-field> |
|
||||
</v-flex> |
|
||||
</v-layout> |
|
||||
</v-form> |
|
||||
</template> |
|
||||
</v-card-text> |
|
||||
<v-card-actions> |
|
||||
<v-spacer></v-spacer> |
|
||||
<v-btn @click="cancel">Cancel</v-btn> |
|
||||
<v-btn @click="reset">Reset</v-btn> |
|
||||
<v-btn |
|
||||
@click="submit" |
|
||||
:disabled="!valid" |
|
||||
> |
|
||||
Save |
|
||||
</v-btn> |
|
||||
</v-card-actions> |
|
||||
</v-card> |
|
||||
</v-container> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import { Component, Vue } from 'vue-property-decorator'; |
|
||||
import { IUserProfile, IUserProfileUpdate } from '@/interfaces'; |
|
||||
import { dispatchGetUsers, dispatchUpdateUser } from '@/store/admin/actions'; |
|
||||
import { readAdminOneUser } from '@/store/admin/getters'; |
|
||||
|
|
||||
@Component |
|
||||
export default class EditUser extends Vue { |
|
||||
public valid = true; |
|
||||
public fullName: string = ''; |
|
||||
public email: string = ''; |
|
||||
public isActive: boolean = true; |
|
||||
public isSuperuser: boolean = false; |
|
||||
public setPassword = false; |
|
||||
public password1: string = ''; |
|
||||
public password2: string = ''; |
|
||||
|
|
||||
public async mounted() { |
|
||||
await dispatchGetUsers(this.$store); |
|
||||
this.reset(); |
|
||||
} |
|
||||
|
|
||||
public reset() { |
|
||||
this.setPassword = false; |
|
||||
this.password1 = ''; |
|
||||
this.password2 = ''; |
|
||||
this.$validator.reset(); |
|
||||
if (this.user) { |
|
||||
this.fullName = this.user.full_name; |
|
||||
this.email = this.user.email; |
|
||||
this.isActive = this.user.is_active; |
|
||||
this.isSuperuser = this.user.is_superuser; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
public cancel() { |
|
||||
this.$router.back(); |
|
||||
} |
|
||||
|
|
||||
public async submit() { |
|
||||
if (await this.$validator.validateAll()) { |
|
||||
const updatedProfile: IUserProfileUpdate = {}; |
|
||||
if (this.fullName) { |
|
||||
updatedProfile.full_name = this.fullName; |
|
||||
} |
|
||||
if (this.email) { |
|
||||
updatedProfile.email = this.email; |
|
||||
} |
|
||||
updatedProfile.is_active = this.isActive; |
|
||||
updatedProfile.is_superuser = this.isSuperuser; |
|
||||
if (this.setPassword) { |
|
||||
updatedProfile.password = this.password1; |
|
||||
} |
|
||||
await dispatchUpdateUser(this.$store, { id: this.user!.id, user: updatedProfile }); |
|
||||
this.$router.push('/main/admin/users'); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
get user() { |
|
||||
return readAdminOneUser(this.$store)(+this.$router.currentRoute.params.id); |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,46 +0,0 @@ |
|||||
<template> |
|
||||
<v-container fluid> |
|
||||
<v-card class="ma-3 pa-3"> |
|
||||
<v-card-title primary-title> |
|
||||
<div class="headline primary--text">User Profile</div> |
|
||||
</v-card-title> |
|
||||
<v-card-text> |
|
||||
<div class="my-4"> |
|
||||
<div class="subheading secondary--text text--lighten-3">Full Name</div> |
|
||||
<div class="title primary--text text--darken-2" v-if="userProfile && userProfile.full_name">{{userProfile.full_name}}</div> |
|
||||
<div class="title primary--text text--darken-2" v-else>-----</div> |
|
||||
</div> |
|
||||
<div class="my-3"> |
|
||||
<div class="subheading secondary--text text--lighten-3">Email</div> |
|
||||
<div class="title primary--text text--darken-2" v-if="userProfile && userProfile.email">{{userProfile.email}}</div> |
|
||||
<div class="title primary--text text--darken-2" v-else>-----</div> |
|
||||
</div> |
|
||||
</v-card-text> |
|
||||
<v-card-actions> |
|
||||
<v-btn to="/main/profile/edit">Edit</v-btn> |
|
||||
<v-btn to="/main/profile/password">Change password</v-btn> |
|
||||
</v-card-actions> |
|
||||
</v-card> |
|
||||
</v-container> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import { Component, Vue } from 'vue-property-decorator'; |
|
||||
import { Store } from 'vuex'; |
|
||||
import { readUserProfile } from '@/store/main/getters'; |
|
||||
|
|
||||
@Component |
|
||||
export default class UserProfile extends Vue { |
|
||||
get userProfile() { |
|
||||
return readUserProfile(this.$store); |
|
||||
} |
|
||||
|
|
||||
public goToEdit() { |
|
||||
this.$router.push('/main/profile/edit'); |
|
||||
} |
|
||||
|
|
||||
public goToPassword() { |
|
||||
this.$router.push('/main/profile/password'); |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,97 +0,0 @@ |
|||||
<template> |
|
||||
<v-container fluid> |
|
||||
<v-card class="ma-3 pa-3"> |
|
||||
<v-card-title primary-title> |
|
||||
<div class="headline primary--text">Edit User Profile</div> |
|
||||
</v-card-title> |
|
||||
<v-card-text> |
|
||||
<template> |
|
||||
<v-form |
|
||||
v-model="valid" |
|
||||
ref="form" |
|
||||
lazy-validation |
|
||||
> |
|
||||
<v-text-field |
|
||||
label="Full Name" |
|
||||
v-model="fullName" |
|
||||
required |
|
||||
></v-text-field> |
|
||||
<v-text-field |
|
||||
label="E-mail" |
|
||||
type="email" |
|
||||
v-model="email" |
|
||||
v-validate="'required|email'" |
|
||||
data-vv-name="email" |
|
||||
:error-messages="errors.collect('email')" |
|
||||
required |
|
||||
></v-text-field> |
|
||||
</v-form> |
|
||||
</template> |
|
||||
</v-card-text> |
|
||||
<v-card-actions> |
|
||||
<v-spacer></v-spacer> |
|
||||
<v-btn @click="cancel">Cancel</v-btn> |
|
||||
<v-btn @click="reset">Reset</v-btn> |
|
||||
<v-btn |
|
||||
@click="submit" |
|
||||
:disabled="!valid" |
|
||||
> |
|
||||
Save |
|
||||
</v-btn> |
|
||||
</v-card-actions> |
|
||||
</v-card> |
|
||||
</v-container> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import { Component, Vue } from 'vue-property-decorator'; |
|
||||
import { Store } from 'vuex'; |
|
||||
import { IUserProfileUpdate } from '@/interfaces'; |
|
||||
import { readUserProfile } from '@/store/main/getters'; |
|
||||
import { dispatchUpdateUserProfile } from '@/store/main/actions'; |
|
||||
|
|
||||
@Component |
|
||||
export default class UserProfileEdit extends Vue { |
|
||||
public valid = true; |
|
||||
public fullName: string = ''; |
|
||||
public email: string = ''; |
|
||||
|
|
||||
public created() { |
|
||||
const userProfile = readUserProfile(this.$store); |
|
||||
if (userProfile) { |
|
||||
this.fullName = userProfile.full_name; |
|
||||
this.email = userProfile.email; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
get userProfile() { |
|
||||
return readUserProfile(this.$store); |
|
||||
} |
|
||||
|
|
||||
public reset() { |
|
||||
const userProfile = readUserProfile(this.$store); |
|
||||
if (userProfile) { |
|
||||
this.fullName = userProfile.full_name; |
|
||||
this.email = userProfile.email; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
public cancel() { |
|
||||
this.$router.back(); |
|
||||
} |
|
||||
|
|
||||
public async submit() { |
|
||||
if ((this.$refs.form as any).validate()) { |
|
||||
const updatedProfile: IUserProfileUpdate = {}; |
|
||||
if (this.fullName) { |
|
||||
updatedProfile.full_name = this.fullName; |
|
||||
} |
|
||||
if (this.email) { |
|
||||
updatedProfile.email = this.email; |
|
||||
} |
|
||||
await dispatchUpdateUserProfile(this.$store, updatedProfile); |
|
||||
this.$router.push('/main/profile'); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,86 +0,0 @@ |
|||||
<template> |
|
||||
<v-container fluid> |
|
||||
<v-card class="ma-3 pa-3"> |
|
||||
<v-card-title primary-title> |
|
||||
<div class="headline primary--text">Set Password</div> |
|
||||
</v-card-title> |
|
||||
<v-card-text> |
|
||||
<template> |
|
||||
<div class="my-3"> |
|
||||
<div class="subheading secondary--text text--lighten-2">User</div> |
|
||||
<div class="title primary--text text--darken-2" v-if="userProfile.full_name">{{userProfile.full_name}}</div> |
|
||||
<div class="title primary--text text--darken-2" v-else>{{userProfile.email}}</div> |
|
||||
</div> |
|
||||
<v-form ref="form"> |
|
||||
<v-text-field |
|
||||
type="password" |
|
||||
ref="password" |
|
||||
label="Password" |
|
||||
data-vv-name="password" |
|
||||
data-vv-delay="100" |
|
||||
data-vv-rules="required" |
|
||||
v-validate="'required'" |
|
||||
v-model="password1" |
|
||||
:error-messages="errors.first('password')"> |
|
||||
</v-text-field> |
|
||||
<v-text-field |
|
||||
type="password" |
|
||||
label="Confirm Password" |
|
||||
data-vv-name="password_confirmation" |
|
||||
data-vv-delay="100" |
|
||||
data-vv-rules="required|confirmed:$password" |
|
||||
data-vv-as="password" |
|
||||
v-validate="'required|confirmed:password'" |
|
||||
v-model="password2" |
|
||||
:error-messages="errors.first('password_confirmation')"> |
|
||||
</v-text-field> |
|
||||
</v-form> |
|
||||
</template> |
|
||||
</v-card-text> |
|
||||
<v-card-actions> |
|
||||
<v-spacer></v-spacer> |
|
||||
<v-btn @click="cancel">Cancel</v-btn> |
|
||||
<v-btn @click="reset">Reset</v-btn> |
|
||||
<v-btn @click="submit" :disabled="!valid">Save</v-btn> |
|
||||
</v-card-actions> |
|
||||
</v-card> |
|
||||
</v-container> |
|
||||
</template> |
|
||||
|
|
||||
<script lang="ts"> |
|
||||
import { Component, Vue } from 'vue-property-decorator'; |
|
||||
import { Store } from 'vuex'; |
|
||||
import { IUserProfileUpdate } from '@/interfaces'; |
|
||||
import { readUserProfile } from '@/store/main/getters'; |
|
||||
import { dispatchUpdateUserProfile } from '@/store/main/actions'; |
|
||||
|
|
||||
@Component |
|
||||
export default class UserProfileEdit extends Vue { |
|
||||
public valid = true; |
|
||||
public password1 = ''; |
|
||||
public password2 = ''; |
|
||||
|
|
||||
get userProfile() { |
|
||||
return readUserProfile(this.$store); |
|
||||
} |
|
||||
|
|
||||
public reset() { |
|
||||
this.password1 = ''; |
|
||||
this.password2 = ''; |
|
||||
this.$validator.reset(); |
|
||||
} |
|
||||
|
|
||||
public cancel() { |
|
||||
this.$router.back(); |
|
||||
} |
|
||||
|
|
||||
public async submit() { |
|
||||
if (await this.$validator.validateAll()) { |
|
||||
const updatedProfile: IUserProfileUpdate = {}; |
|
||||
updatedProfile.password = this.password1; |
|
||||
await dispatchUpdateUserProfile(this.$store, updatedProfile); |
|
||||
this.$router.push('/main/profile'); |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
@ -1,15 +0,0 @@ |
|||||
import { shallowMount } from '@vue/test-utils'; |
|
||||
import UploadButton from '@/components/UploadButton.vue'; |
|
||||
import '@/plugins/vuetify'; |
|
||||
|
|
||||
describe('UploadButton.vue', () => { |
|
||||
it('renders props.title when passed', () => { |
|
||||
const title = 'upload a file'; |
|
||||
const wrapper = shallowMount(UploadButton, { |
|
||||
slots: { |
|
||||
default: title, |
|
||||
}, |
|
||||
}); |
|
||||
expect(wrapper.text()).toMatch(title); |
|
||||
}); |
|
||||
}); |
|
||||
@ -1,41 +0,0 @@ |
|||||
{ |
|
||||
"compilerOptions": { |
|
||||
"noImplicitAny": false, |
|
||||
"target": "esnext", |
|
||||
"module": "esnext", |
|
||||
"strict": true, |
|
||||
"jsx": "preserve", |
|
||||
"importHelpers": true, |
|
||||
"moduleResolution": "node", |
|
||||
"experimentalDecorators": true, |
|
||||
"esModuleInterop": true, |
|
||||
"allowSyntheticDefaultImports": true, |
|
||||
"sourceMap": true, |
|
||||
"baseUrl": ".", |
|
||||
"types": [ |
|
||||
"webpack-env", |
|
||||
"jest" |
|
||||
], |
|
||||
"paths": { |
|
||||
"@/*": [ |
|
||||
"src/*" |
|
||||
] |
|
||||
}, |
|
||||
"lib": [ |
|
||||
"esnext", |
|
||||
"dom", |
|
||||
"dom.iterable", |
|
||||
"scripthost" |
|
||||
] |
|
||||
}, |
|
||||
"include": [ |
|
||||
"src/**/*.ts", |
|
||||
"src/**/*.tsx", |
|
||||
"src/**/*.vue", |
|
||||
"tests/**/*.ts", |
|
||||
"tests/**/*.tsx" |
|
||||
], |
|
||||
"exclude": [ |
|
||||
"node_modules" |
|
||||
] |
|
||||
} |
|
||||
@ -1,19 +0,0 @@ |
|||||
{ |
|
||||
"defaultSeverity": "warning", |
|
||||
"extends": [ |
|
||||
"tslint:recommended" |
|
||||
], |
|
||||
"linterOptions": { |
|
||||
"exclude": [ |
|
||||
"node_modules/**" |
|
||||
] |
|
||||
}, |
|
||||
"rules": { |
|
||||
"quotemark": [true, "single"], |
|
||||
"indent": [true, "spaces", 2], |
|
||||
"interface-name": false, |
|
||||
"ordered-imports": false, |
|
||||
"object-literal-sort-keys": false, |
|
||||
"no-consecutive-blank-lines": false |
|
||||
} |
|
||||
} |
|
||||
@ -1,35 +0,0 @@ |
|||||
module.exports = { |
|
||||
// Fix Vuex-typescript in prod: https://github.com/istrib/vuex-typescript/issues/13#issuecomment-409869231
|
|
||||
configureWebpack: (config) => { |
|
||||
if (process.env.NODE_ENV === 'production') { |
|
||||
config.optimization.minimizer[0].options.terserOptions = Object.assign( |
|
||||
{}, |
|
||||
config.optimization.minimizer[0].options.terserOptions, |
|
||||
{ |
|
||||
ecma: 5, |
|
||||
compress: { |
|
||||
keep_fnames: true, |
|
||||
}, |
|
||||
warnings: false, |
|
||||
mangle: { |
|
||||
keep_fnames: true, |
|
||||
}, |
|
||||
}, |
|
||||
); |
|
||||
} |
|
||||
}, |
|
||||
chainWebpack: config => { |
|
||||
config.module |
|
||||
.rule('vue') |
|
||||
.use('vue-loader') |
|
||||
.loader('vue-loader') |
|
||||
.tap(options => Object.assign(options, { |
|
||||
transformAssetUrls: { |
|
||||
'v-img': ['src', 'lazy-src'], |
|
||||
'v-card': 'src', |
|
||||
'v-card-media': 'src', |
|
||||
'v-responsive': 'src', |
|
||||
} |
|
||||
})); |
|
||||
}, |
|
||||
} |
|
||||
Loading…
Reference in new issue