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).

46
frontend/components/LoginForm.vue
View File

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

13
frontend/components/Note.vue
View File

@ -10,11 +10,17 @@
<v-card-title>{{ title }}</v-card-title>
<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 class="mt-auto" v-if="updatedAt">
<div v-if="updatedAt" class="mt-auto">
<v-divider />
<v-card-subtitle>Last updated {{ updatedAt }}</v-card-subtitle>
</div>
@ -31,10 +37,11 @@
},
tags: {
type: Array,
default: () => [],
},
hover: {
type: Boolean,
default: 'false',
default: false,
},
updatedAt: {
type: String,

45
frontend/components/RegisterForm.vue
View File

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

2
frontend/layouts/centered.vue
View File

@ -14,6 +14,6 @@
<script>
export default {
name: "centered"
name: 'Centered',
}
</script>

13
frontend/layouts/default.vue
View File

@ -1,15 +1,12 @@
<template>
<v-app>
<v-app-bar
fixed
app
color="primary"
dark
>
<v-app-bar fixed app color="primary" dark>
<v-btn to="/" text rounded>Simple Notes</v-btn>
<v-spacer />
<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-app-bar>
<v-content>
@ -26,6 +23,6 @@
<style>
html {
overflow-y: auto
overflow-y: auto;
}
</style>

2
frontend/layouts/empty.vue
View File

@ -12,6 +12,6 @@
<style>
html {
overflow-y: auto
overflow-y: auto;
}
</style>

10
frontend/layouts/error.vue
View File

@ -18,22 +18,22 @@
props: {
error: {
type: Object,
default: null
}
default: null,
},
},
data() {
return {
pageNotFound: '404 Not Found',
otherError: 'An error occurred'
otherError: 'An error occurred',
}
},
head() {
const title =
this.error.statusCode === 404 ? this.pageNotFound : this.otherError
return {
title
}
title,
}
},
}
</script>

55
frontend/nuxt.config.js
View File

@ -10,12 +10,17 @@ export default {
title: process.env.npm_package_name || '',
meta: [
{ 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: [
{rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
]
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
/*
** Customize the progress-bar color
@ -34,7 +39,8 @@ export default {
*/
buildModules: [
// Doc: https://github.com/nuxt-community/eslint-module
'@nuxtjs/vuetify'
'@nuxtjs/vuetify',
'@nuxtjs/eslint-module',
],
/*
** Nuxt.js modules
@ -44,7 +50,7 @@ export default {
'@nuxtjs/axios',
// Doc: https://github.com/nuxt-community/dotenv-module
'@nuxtjs/dotenv',
'@nuxtjs/auth'
'@nuxtjs/auth',
],
/*
** Axios module configuration
@ -63,16 +69,24 @@ export default {
strategies: {
local: {
endpoints: {
login: {url: '/user/login', method: 'post', propertyName: 'token'},
user: {url: '/user/me', method: 'get', propertyName: 'user'},
login: {
url: '/user/login',
method: 'post',
propertyName: 'token',
},
user: {
url: '/user/me',
method: 'get',
propertyName: 'user',
},
},
autoFetchUser: true,
},
},
autoFetchUser: true
}
}
},
router: {
middleware: ['auth']
middleware: ['auth'],
},
/*
@ -91,15 +105,15 @@ export default {
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
success: colors.green.accent3,
},
light: {
primary: colors.blue.darken3,
secondary: colors.teal.lighten1,
accent: colors.deepOrange.accent2
}
}
}
accent: colors.deepOrange.accent2,
},
},
},
},
/*
** Build configuration
@ -108,7 +122,6 @@ export default {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
}
}
extend(config, ctx) {},
},
}

13
frontend/package.json
View File

@ -8,7 +8,8 @@
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
},
"dependencies": {
"@nuxtjs/auth": "^4.9.1",
@ -18,6 +19,14 @@
"timeago.js": "^4.0.2"
},
"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"
}
}

43
frontend/pages/account.vue
View File

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

74
frontend/pages/create.vue
View File

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

7
frontend/pages/index.vue
View File

@ -3,16 +3,15 @@
</template>
<script>
export default {
title: 'Home',
options: {
auth: false
auth: false,
},
data: () => ({}),
head: () => ({
title: "Home"
})
title: 'Home',
}),
}
</script>

39
frontend/pages/new.vue
View File

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

12
frontend/pages/notes.vue
View File

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

2
frontend/plugins/axios.js
View File

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

8
frontend/webpack.config.js
View File

@ -2,8 +2,10 @@ module.exports = {
resolve: {
// for IntelliJ
alias: {
// 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