hubert/SimpleNotes
1
0
Fork 0
Code Projects Releases Activity

Add prettier + eslint & reformat/fix files

Browse Source
This commit is contained in:
Hubert Van De Walle 2020-04-23 17:32:45 +02:00
parent 932a9f8379
commit ebe8e640af
20 changed files with 1371 additions and 419 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/.eslintrc.js Normal file
View File

@ -0,0 +1,23 @@
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: 'babel-eslint'
},
extends: [
'@nuxtjs',
'prettier',
'prettier/vue',
'plugin:prettier/recommended',
'plugin:nuxt/recommended'
],
plugins: [
'prettier'
],
// add your custom rules here
rules: {
}
}

6
frontend/.prettierrc Normal file
View File

@ -0,0 +1,6 @@
{
"semi": false,
"arrowParens": "always",
"singleQuote": true,
"tabWidth": 4
}

7
frontend/assets/README.md
View File

@ -1,7 +0,0 @@
# ASSETS
**This directory is not required, you can delete it if you don't want to use it.**
This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked).

60
frontend/components/LoginForm.vue
View File

@ -1,11 +1,7 @@
<template> <template>
<v-card flat> <v-card flat>
<v-card-text> <v-card-text>
<v-form <v-form ref="form" v-model="valid" lazy-validation>
ref="form"
v-model="valid"
lazy-validation
>
<v-text-field <v-text-field
v-model="form.username" v-model="form.username"
:rules="usernameRules" :rules="usernameRules"
@ -22,16 +18,11 @@
prepend-icon="mdi-lock" prepend-icon="mdi-lock"
type="password" type="password"
></v-text-field> ></v-text-field>
</v-form> </v-form>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-spacer/> <v-spacer />
<v-btn <v-btn :disabled="!valid" color="success" @click="userLogin">
:disabled="!valid"
color="success"
@click="userLogin"
>
Login Login
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
@ -39,30 +30,27 @@
</template> </template>
<script> <script>
export default { export default {
name: "LoginForm", name: 'LoginForm',
methods: { data: () => ({
async userLogin() { valid: false,
try { form: {
const response = await this.$auth.loginWith('local', {data: this.form}) username: '',
password: '',
} catch (err) { },
console.log(err) usernameRules: [(v) => !!v || 'Name is required'],
} passwordRules: [(v) => !!v || 'Password is required'],
}),
methods: {
userLogin() {
try {
this.$auth.loginWith('local', {
data: this.form,
})
} catch (err) {
console.log(err)
} }
}, },
data: () => ({ },
valid: false, }
form: {
username: '',
password: ''
},
usernameRules: [
v => !!v || 'Name is required',
],
passwordRules: [
v => !!v || 'Password is required',
]
}),
}
</script> </script>

71
frontend/components/Note.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<v-card <v-card
class="d-flex flex-column" class="d-flex flex-column"
:class="{ hover:hover }" :class="{ hover: hover }"
height="100%" height="100%"
:color="hover ? 'blue lighten-3' : 'white'" :color="hover ? 'blue lighten-3' : 'white'"
:elevation="hover ? 12 : 2" :elevation="hover ? 12 : 2"
@ -10,50 +10,57 @@
<v-card-title>{{ title }}</v-card-title> <v-card-title>{{ title }}</v-card-title>
<div class="tags"> <div class="tags">
<v-chip v-for="tag in tags" :key="tag" active color="secondary">{{ tag }}</v-chip> <v-chip
v-for="tag in tags"
:key="tag"
active
color="secondary"
>{{ tag }}</v-chip
>
</div> </div>
</div> </div>
<div class="mt-auto" v-if="updatedAt"> <div v-if="updatedAt" class="mt-auto">
<v-divider/> <v-divider />
<v-card-subtitle>Last updated {{ updatedAt }}</v-card-subtitle> <v-card-subtitle>Last updated {{ updatedAt }}</v-card-subtitle>
</div> </div>
</v-card> </v-card>
</template> </template>
<script> <script>
export default { export default {
name: 'Note', name: 'Note',
props: { props: {
title: { title: {
type: String, type: String,
required: true, required: true,
},
tags: {
type: Array,
},
hover: {
type: Boolean,
default: 'false',
},
updatedAt: {
type: String,
default: null,
},
}, },
} tags: {
type: Array,
default: () => [],
},
hover: {
type: Boolean,
default: false,
},
updatedAt: {
type: String,
default: null,
},
},
}
</script> </script>
<style> <style>
.tags { .tags {
padding: 16px; padding: 16px;
} }
.tags .v-chip { .tags .v-chip {
margin: 4px 8px 4px 0; margin: 4px 8px 4px 0;
} }
.v-card.hover { .v-card.hover {
cursor: pointer; cursor: pointer;
} }
</style> </style>

79
frontend/components/RegisterForm.vue
View File

@ -1,11 +1,7 @@
<template> <template>
<v-card flat> <v-card flat>
<v-card-text> <v-card-text>
<v-form <v-form ref="form" v-model="valid" lazy-validation>
ref="form"
v-model="valid"
lazy-validation
>
<v-text-field <v-text-field
v-model="form.username" v-model="form.username"
:rules="usernameRules" :rules="usernameRules"
@ -39,17 +35,12 @@
prepend-icon="mdi-lock" prepend-icon="mdi-lock"
type="password" type="password"
></v-text-field> ></v-text-field>
</v-form> </v-form>
</v-card-text> </v-card-text>
<v-divider/> <v-divider />
<v-card-actions> <v-card-actions>
<v-spacer/> <v-spacer />
<v-btn <v-btn :disabled="!valid" color="success" @click="registerUser">
:disabled="!valid"
color="success"
@click="registerUser"
>
Register Register
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
@ -57,37 +48,35 @@
</template> </template>
<script> <script>
export default { export default {
name: "RegisterForm", name: 'RegisterForm',
methods: { data: () => ({
async registerUser() { valid: false,
const data = await this.$axios.post('/user', this.form) form: {
console.log(data) username: '',
} email: '',
password: '',
}, },
data: () => ({ usernameRules: [(v) => !!v || 'Name is required'],
valid: false, emailRules: [
form: { (v) => !!v || 'Email is required',
username: '', (v) => /.+@.+/.test(v) || 'E-mail must be valid',
email: '', ],
password: '' passwordRules: [
}, (v) => !!v || 'Password is required',
usernameRules: [ (v) => v.length >= 6 || 'Password must be longer than 6 characters',
v => !!v || 'Name is required', ],
], confirm: '',
emailRules: [ confirmRules: [
v => !!v || 'Email is required', (v) => !!v || 'Password is required',
v => /.+@.+/.test(v) || 'E-mail must be valid', // v => confirmEquals() || 'Both passwords must be equals',
], ],
passwordRules: [ }),
v => !!v || 'Password is required', methods: {
v => v.length >= 6 || 'Password must be longer than 6 characters', async registerUser() {
], const data = await this.$axios.post('/user', this.form)
confirm: '', console.log(data)
confirmRules: [ },
v => !!v || 'Password is required' },
//v => confirmEquals() || 'Both passwords must be equals', }
]
}),
}
</script> </script>

8
frontend/layouts/centered.vue
View File

@ -4,7 +4,7 @@
<v-container class="fill-height" fluid> <v-container class="fill-height" fluid>
<v-row align="center" justify="center"> <v-row align="center" justify="center">
<v-col cols="12" lg="6" md="8"> <v-col cols="12" lg="6" md="8">
<nuxt/> <nuxt />
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
@ -13,7 +13,7 @@
</template> </template>
<script> <script>
export default { export default {
name: "centered" name: 'Centered',
} }
</script> </script>

23
frontend/layouts/default.vue
View File

@ -1,31 +1,28 @@
<template> <template>
<v-app> <v-app>
<v-app-bar <v-app-bar fixed app color="primary" dark>
fixed
app
color="primary"
dark
>
<v-btn to="/" text rounded>Simple Notes</v-btn> <v-btn to="/" text rounded>Simple Notes</v-btn>
<v-spacer/> <v-spacer />
<v-btn to="/notes" class="mr-2" text rounded>My notes</v-btn> <v-btn to="/notes" class="mr-2" text rounded>My notes</v-btn>
<v-btn outlined v-if="this.$store.state.auth.loggedIn">Welcome {{this.$store.state.auth.user.username}}</v-btn> <v-btn v-if="this.$store.state.auth.loggedIn" outline>
Welcome {{ this.$store.state.auth.user.username }}
</v-btn>
<v-btn v-else to="/account" text rounded>Account</v-btn> <v-btn v-else to="/account" text rounded>Account</v-btn>
</v-app-bar> </v-app-bar>
<v-content> <v-content>
<v-container> <v-container>
<nuxt/> <nuxt />
</v-container> </v-container>
</v-content> </v-content>
</v-app> </v-app>
</template> </template>
<script> <script>
export default {} export default {}
</script> </script>
<style> <style>
html { html {
overflow-y: auto overflow-y: auto;
} }
</style> </style>

10
frontend/layouts/empty.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<v-app> <v-app>
<v-content> <v-content>
<nuxt/> <nuxt />
</v-content> </v-content>
</v-app> </v-app>
</template> </template>
<script> <script>
export default {} export default {}
</script> </script>
<style> <style>
html { html {
overflow-y: auto overflow-y: auto;
} }
</style> </style>

46
frontend/layouts/error.vue
View File

@ -13,32 +13,32 @@
</template> </template>
<script> <script>
export default { export default {
layout: 'empty', layout: 'empty',
props: { props: {
error: { error: {
type: Object, type: Object,
default: null default: null,
}
}, },
data() { },
return { data() {
pageNotFound: '404 Not Found', return {
otherError: 'An error occurred' pageNotFound: '404 Not Found',
} otherError: 'An error occurred',
},
head() {
const title =
this.error.statusCode === 404 ? this.pageNotFound : this.otherError
return {
title
}
} }
} },
head() {
const title =
this.error.statusCode === 404 ? this.pageNotFound : this.otherError
return {
title,
}
},
}
</script> </script>
<style scoped> <style scoped>
h1 { h1 {
font-size: 20px; font-size: 20px;
} }
</style> </style>

105
frontend/nuxt.config.js
View File

@ -3,53 +3,59 @@ import colors from 'vuetify/es5/util/colors'
export default { export default {
mode: 'universal', mode: 'universal',
/* /*
** Headers of the page ** Headers of the page
*/ */
head: { head: {
titleTemplate: '%s - ' + process.env.npm_package_name, titleTemplate: '%s - ' + process.env.npm_package_name,
title: process.env.npm_package_name || '', title: process.env.npm_package_name || '',
meta: [ meta: [
{charset: 'utf-8'}, { charset: 'utf-8' },
{name: 'viewport', content: 'width=device-width, initial-scale=1'}, {
{hid: 'description', name: 'description', content: process.env.npm_package_description || ''} name: 'viewport',
content: 'width=device-width, initial-scale=1',
},
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || '',
},
], ],
link: [ link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
{rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
]
}, },
/* /*
** Customize the progress-bar color ** Customize the progress-bar color
*/ */
loading: {color: '#fff'}, loading: { color: '#fff' },
/* /*
** Global CSS ** Global CSS
*/ */
css: [], css: [],
/* /*
** Plugins to load before mounting the App ** Plugins to load before mounting the App
*/ */
plugins: ['~/plugins/axios'], plugins: ['~/plugins/axios'],
/* /*
** Nuxt.js dev-modules ** Nuxt.js dev-modules
*/ */
buildModules: [ buildModules: [
// Doc: https://github.com/nuxt-community/eslint-module // Doc: https://github.com/nuxt-community/eslint-module
'@nuxtjs/vuetify' '@nuxtjs/vuetify',
'@nuxtjs/eslint-module',
], ],
/* /*
** Nuxt.js modules ** Nuxt.js modules
*/ */
modules: [ modules: [
// Doc: https://axios.nuxtjs.org/usage // Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios', '@nuxtjs/axios',
// Doc: https://github.com/nuxt-community/dotenv-module // Doc: https://github.com/nuxt-community/dotenv-module
'@nuxtjs/dotenv', '@nuxtjs/dotenv',
'@nuxtjs/auth' '@nuxtjs/auth',
], ],
/* /*
** Axios module configuration ** Axios module configuration
** See https://axios.nuxtjs.org/options ** See https://axios.nuxtjs.org/options
*/ */
axios: {}, axios: {},
auth: { auth: {
@ -59,26 +65,34 @@ export default {
home: '/', home: '/',
}, },
watchLoggedIn: true, watchLoggedIn: true,
//cookie: true, // cookie: true,
strategies: { strategies: {
local: { local: {
endpoints: { endpoints: {
login: {url: '/user/login', method: 'post', propertyName: 'token'}, login: {
user: {url: '/user/me', method: 'get', propertyName: 'user'}, url: '/user/login',
method: 'post',
propertyName: 'token',
},
user: {
url: '/user/me',
method: 'get',
propertyName: 'user',
},
}, },
autoFetchUser: true autoFetchUser: true,
} },
} },
}, },
router: { router: {
middleware: ['auth'] middleware: ['auth'],
}, },
/* /*
** vuetify module configuration ** vuetify module configuration
** https://github.com/nuxt-community/vuetify-module ** https://github.com/nuxt-community/vuetify-module
*/ */
vuetify: { vuetify: {
customVariables: ['~/assets/variables.scss'], customVariables: ['~/assets/variables.scss'],
theme: { theme: {
@ -91,24 +105,23 @@ export default {
info: colors.teal.lighten1, info: colors.teal.lighten1,
warning: colors.amber.base, warning: colors.amber.base,
error: colors.deepOrange.accent4, error: colors.deepOrange.accent4,
success: colors.green.accent3 success: colors.green.accent3,
}, },
light: { light: {
primary: colors.blue.darken3, primary: colors.blue.darken3,
secondary: colors.teal.lighten1, secondary: colors.teal.lighten1,
accent: colors.deepOrange.accent2 accent: colors.deepOrange.accent2,
} },
} },
} },
}, },
/* /*
** Build configuration ** Build configuration
*/ */
build: { build: {
/* /*
** You can extend webpack config here ** You can extend webpack config here
*/ */
extend(config, ctx) { extend(config, ctx) {},
} },
}
} }

13
frontend/package.json
View File

@ -8,7 +8,8 @@
"dev": "nuxt", "dev": "nuxt",
"build": "nuxt build", "build": "nuxt build",
"start": "nuxt start", "start": "nuxt start",
"generate": "nuxt generate" "generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
}, },
"dependencies": { "dependencies": {
"@nuxtjs/auth": "^4.9.1", "@nuxtjs/auth": "^4.9.1",
@ -18,6 +19,14 @@
"timeago.js": "^4.0.2" "timeago.js": "^4.0.2"
}, },
"devDependencies": { "devDependencies": {
"@nuxtjs/vuetify": "^1.0.0" "@nuxtjs/eslint-config": "^2.0.2",
"@nuxtjs/eslint-module": "^1.1.0",
"@nuxtjs/vuetify": "^1.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-nuxt": "^0.5.2",
"eslint-plugin-prettier": "^3.1.3",
"prettier": "^2.0.5"
} }
} }

57
frontend/pages/account.vue
View File

@ -7,25 +7,14 @@
<h1 class="font-weight-bold display-2">Account</h1> <h1 class="font-weight-bold display-2">Account</h1>
</v-card-title> </v-card-title>
<v-tabs <v-tabs v-model="tab" background-color="transparent" dark grow>
v-model="tab" <v-tab v-for="tab in tabs" :key="tab">
background-color="transparent"
dark
grow
>
<v-tab
v-for="tab in tabs"
:key="tab"
>
{{ tab }} {{ tab }}
</v-tab> </v-tab>
</v-tabs> </v-tabs>
<v-tabs-items v-model="tab"> <v-tabs-items v-model="tab">
<v-tab-item <v-tab-item v-for="tab in tabs" :key="tab">
v-for="tab in tabs"
:key="tab"
>
<v-card flat> <v-card flat>
<v-card-text> <v-card-text>
<LoginForm v-if="tab === 'Login'"></LoginForm> <LoginForm v-if="tab === 'Login'"></LoginForm>
@ -38,25 +27,25 @@
</template> </template>
<script> <script>
import LoginForm from "~/components/LoginForm"; import LoginForm from '~/components/LoginForm'
import RegisterForm from "~/components/RegisterForm"; import RegisterForm from '~/components/RegisterForm'
export default { export default {
name: "centered", name: 'Centered',
layout: "centered", layout: 'centered',
options: { options: {
auth: 'guest', auth: 'guest',
}, },
data: () => ({ components: {
tab: 0, LoginForm,
tabs: ["Login", "Register"] RegisterForm,
}), },
head: () => ({ data: () => ({
title: "Account" tab: 0,
}), tabs: ['Login', 'Register'],
components: { }),
LoginForm, head: () => ({
RegisterForm title: 'Account',
} }),
} }
</script> </script>

96
frontend/pages/create.vue
View File

@ -1,11 +1,6 @@
<template> <template>
<v-card> <v-card>
<v-toolbar <v-toolbar flat color="secondary" class="mt-12" dark>
flat
color="secondary"
class="mt-12"
dark
>
<v-toolbar-title>Create a note</v-toolbar-title> <v-toolbar-title>Create a note</v-toolbar-title>
</v-toolbar> </v-toolbar>
@ -13,16 +8,18 @@
A note with the same title already exists A note with the same title already exists
</v-alert> </v-alert>
<v-form <v-form ref="form" lazy-validation>
ref="form"
lazy-validation
>
<v-card-text> <v-card-text>
<v-text-field label="Title" v-model="form.title" outlined value="My new note"></v-text-field> <v-text-field
v-model="form.title"
label="Title"
outlined
value="My new note"
></v-text-field>
<v-combobox <v-combobox
outlined
v-model="form.tags" v-model="form.tags"
outlined
:items="possibleTags" :items="possibleTags"
:delimiters="delimiters" :delimiters="delimiters"
label="Tags" label="Tags"
@ -30,16 +27,11 @@
chips chips
deletable-chips deletable-chips
></v-combobox> ></v-combobox>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn <v-btn color="success" depressed @click="createNote">
color="success"
depressed
@click="createNote"
>
Create Create
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
@ -48,45 +40,45 @@
</template> </template>
<script> <script>
export default { export default {
name: "create", name: 'Create',
data: () => ({ data: () => ({
delimiters: [" ", ","], delimiters: [' ', ','],
form: { form: {
title: '', title: '',
tags: [] tags: [],
}, },
possibleTags: [], possibleTags: [],
conflict: false conflict: false,
}), }),
methods: { mounted() {
createNote() { this.$axios
this.conflict = false .get('/tags')
this.$axios.post(`/notes/${this.form.title}`, { .then((e) => (this.possibleTags = e.data))
tags: this.form.tags .catch((e) => {
}).then(_ => { console.log(e)
this.$router.push("/notes") })
} },
).catch(e => { methods: {
createNote() {
this.conflict = false
this.$axios
.post(`/notes/${this.form.title}`, {
tags: this.form.tags,
})
.then((_) => {
this.$router.push('/notes')
})
.catch((e) => {
if (e.response && e.response.status === 409) { if (e.response && e.response.status === 409) {
this.conflict = true this.conflict = true
} else { } else {
console.log("??") console.log('??')
} }
}) })
}
}, },
mounted() { },
this.$axios.get("/tags") }
.then(e => this.possibleTags = e.data)
.catch(e => {
console.log(e)
})
}
}
</script> </script>
<style scoped> <style scoped></style>
</style>

25
frontend/pages/index.vue
View File

@ -3,21 +3,20 @@
</template> </template>
<script> <script>
export default {
export default { title: 'Home',
options: {
auth: false,
},
data: () => ({}),
head: () => ({
title: 'Home', title: 'Home',
options: { }),
auth: false }
},
data: () => ({}),
head: () => ({
title: "Home"
})
}
</script> </script>
<style> <style>
body { body {
background-color: #1565c0; background-color: #1565c0;
} }
</style> </style>

47
frontend/pages/new.vue
View File

@ -1,22 +1,15 @@
<template> <template>
<v-card flat> <v-card flat>
<v-toolbar <v-toolbar color="primary" dark extended prominent>
color="primary"
dark
extended
prominent
>
<v-app-bar-nav-icon></v-app-bar-nav-icon> <v-app-bar-nav-icon></v-app-bar-nav-icon>
<v-toolbar-title>Notes</v-toolbar-title> <v-toolbar-title>Notes</v-toolbar-title>
</v-toolbar> </v-toolbar>
<v-card <v-card class="mx-auto" max-width="700" style="margin-top: -64px;">
class="mx-auto"
max-width="700"
style="margin-top: -64px;"
>
<v-toolbar flat> <v-toolbar flat>
<v-toolbar-title class="grey--text">Create a note</v-toolbar-title> <v-toolbar-title class="grey--text"
>Create a note</v-toolbar-title
>
</v-toolbar> </v-toolbar>
<v-divider></v-divider> <v-divider></v-divider>
@ -45,14 +38,8 @@
<v-divider></v-divider> <v-divider></v-divider>
<v-card-actions> <v-card-actions>
<v-btn <v-btn color="success" class="mx-auto" depressed block>
color="success"
class="mx-auto"
depressed
block
>
Create Create
</v-btn> </v-btn>
</v-card-actions> </v-card-actions>
@ -61,17 +48,15 @@
</template> </template>
<script> <script>
export default { export default {
name: "new", name: 'New',
layout: "empty", layout: 'empty',
data: () => ({ data: () => ({
delimiters: [" ", ","], delimiters: [' ', ','],
tags: [], tags: [],
possibleTags: ["Dev", "Ephec", "Java"] possibleTags: ['Dev', 'Ephec', 'Java'],
}) }),
} }
</script> </script>
<style scoped> <style scoped></style>
</style>

12
frontend/pages/notes.vue
View File

@ -30,19 +30,19 @@
</template> </template>
<script> <script>
import Note from '@/components/Note'; import { format } from 'timeago.js'
import { format } from 'timeago.js'; import Note from '@/components/Note'
export default { export default {
name: 'notes', name: 'Notes',
title: 'Notes', title: 'Notes',
components: { Note }, components: { Note },
data: () => ({ data: () => ({
notes: [], notes: [],
}), }),
methods: { format },
mounted() { mounted() {
this.$axios.get('/notes').then(e => (this.notes = e.data)); this.$axios.get('/notes').then((e) => (this.notes = e.data))
}, },
}; methods: { format },
}
</script> </script>

2
frontend/plugins/axios.js
View File

@ -1,5 +1,5 @@
export default function ({ $axios }) { export default function ({ $axios }) {
$axios.onRequest(config => { $axios.onRequest((config) => {
console.log('Making request to ' + config.url) console.log('Making request to ' + config.url)
}) })

18
frontend/webpack.config.js
View File

@ -1,9 +1,11 @@
module.exports = { module.exports = {
resolve: { resolve: {
// for IntelliJ // for IntelliJ
alias: { alias: {
'@': path.resolve(__dirname), // eslint-disable-next-line no-undef
'~': path.resolve(__dirname) '@': path.resolve(__dirname),
} // eslint-disable-next-line no-undef
} '~': path.resolve(__dirname),
}; },
},
}

1082
frontend/yarn.lock
View File

File diff suppressed because it is too large Load Diff