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>
<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-spacer />
<v-btn :disabled="!valid" color="success" @click="userLogin">
Login
</v-btn>
</v-card-actions>
@ -39,30 +30,27 @@
</template>
<script>
export default {
name: "LoginForm",
methods: {
async userLogin() {
try {
const response = await this.$auth.loginWith('local', {data: this.form})
} catch (err) {
console.log(err)
}
export default {
name: 'LoginForm',
data: () => ({
valid: false,
form: {
username: '',
password: '',
},
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>

71
frontend/components/Note.vue
View File

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

79
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-divider />
<v-card-actions>
<v-spacer/>
<v-btn
:disabled="!valid"
color="success"
@click="registerUser"
>
<v-spacer />
<v-btn :disabled="!valid" color="success" @click="registerUser">
Register
</v-btn>
</v-card-actions>
@ -57,37 +48,35 @@
</template>
<script>
export default {
name: "RegisterForm",
methods: {
async registerUser() {
const data = await this.$axios.post('/user', this.form)
console.log(data)
}
export default {
name: 'RegisterForm',
data: () => ({
valid: false,
form: {
username: '',
email: '',
password: '',
},
data: () => ({
valid: false,
form: {
username: '',
email: '',
password: ''
},
usernameRules: [
v => !!v || 'Name is required',
],
emailRules: [
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',
],
confirm: '',
confirmRules: [
v => !!v || 'Password is required'
//v => confirmEquals() || 'Both passwords must be equals',
]
}),
}
usernameRules: [(v) => !!v || 'Name is required'],
emailRules: [
(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',
],
confirm: '',
confirmRules: [
(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>

8
frontend/layouts/centered.vue
View File

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

23
frontend/layouts/default.vue
View File

@ -1,31 +1,28 @@
<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-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>
<v-container>
<nuxt/>
<nuxt />
</v-container>
</v-content>
</v-app>
</template>
<script>
export default {}
export default {}
</script>
<style>
html {
overflow-y: auto
}
html {
overflow-y: auto;
}
</style>

10
frontend/layouts/empty.vue
View File

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

46
frontend/layouts/error.vue
View File

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

105
frontend/nuxt.config.js
View File

@ -3,53 +3,59 @@ import colors from 'vuetify/es5/util/colors'
export default {
mode: 'universal',
/*
** Headers of the page
*/
** Headers of the page
*/
head: {
titleTemplate: '%s - ' + process.env.npm_package_name,
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 || ''}
{ charset: 'utf-8' },
{
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
*/
loading: {color: '#fff'},
** Customize the progress-bar color
*/
loading: { color: '#fff' },
/*
** Global CSS
*/
** Global CSS
*/
css: [],
/*
** Plugins to load before mounting the App
*/
** Plugins to load before mounting the App
*/
plugins: ['~/plugins/axios'],
/*
** Nuxt.js dev-modules
*/
** Nuxt.js dev-modules
*/
buildModules: [
// Doc: https://github.com/nuxt-community/eslint-module
'@nuxtjs/vuetify'
'@nuxtjs/vuetify',
'@nuxtjs/eslint-module',
],
/*
** Nuxt.js modules
*/
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
// Doc: https://github.com/nuxt-community/dotenv-module
'@nuxtjs/dotenv',
'@nuxtjs/auth'
'@nuxtjs/auth',
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {},
auth: {
@ -59,26 +65,34 @@ export default {
home: '/',
},
watchLoggedIn: true,
//cookie: true,
// cookie: true,
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'],
},
/*
** vuetify module configuration
** https://github.com/nuxt-community/vuetify-module
*/
** vuetify module configuration
** https://github.com/nuxt-community/vuetify-module
*/
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
@ -91,24 +105,23 @@ 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
*/
** Build configuration
*/
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {
}
}
** You can extend webpack config here
*/
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"
}
}

57
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",
options: {
auth: 'guest',
},
data: () => ({
tab: 0,
tabs: ["Login", "Register"]
}),
head: () => ({
title: "Account"
}),
components: {
LoginForm,
RegisterForm
}
}
export default {
name: 'Centered',
layout: 'centered',
options: {
auth: 'guest',
},
components: {
LoginForm,
RegisterForm,
},
data: () => ({
tab: 0,
tabs: ['Login', 'Register'],
}),
head: () => ({
title: 'Account',
}),
}
</script>

96
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>
@ -48,45 +40,45 @@
</template>
<script>
export default {
name: "create",
data: () => ({
delimiters: [" ", ","],
form: {
title: '',
tags: []
},
possibleTags: [],
conflict: false
}),
methods: {
createNote() {
this.conflict = false
this.$axios.post(`/notes/${this.form.title}`, {
tags: this.form.tags
}).then(_ => {
this.$router.push("/notes")
}
).catch(e => {
export default {
name: 'Create',
data: () => ({
delimiters: [' ', ','],
form: {
title: '',
tags: [],
},
possibleTags: [],
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) => {
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>

25
frontend/pages/index.vue
View File

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

47
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>
@ -61,17 +48,15 @@
</template>
<script>
export default {
name: "new",
layout: "empty",
data: () => ({
delimiters: [" ", ","],
tags: [],
possibleTags: ["Dev", "Ephec", "Java"]
})
}
export default {
name: 'New',
layout: 'empty',
data: () => ({
delimiters: [' ', ','],
tags: [],
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)
})

18
frontend/webpack.config.js
View File

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