Skip to content

Changes

Page history
Update Documentation authored by Felix Cervin's avatar Felix Cervin
Show whitespace changes
Inline Side-by-side
Documentation.md
View page @ 6e0dd536
# Boilerplate # This documentation is now deprecated.
*I have now updated the entire project structure and code. Below you can find some helpful tips on how to use some of the built-in features of this boilerplate. You can find all plugins that are used in plugins/default.js now.* \ No newline at end of file
#### Authentication
Authentication has not changed much. This boilerplate does however now use session storage to store user data, such as: userId, username, email and accessToken (which is also set in localStorage). Upon logout all this information, including set cookies, are completely cleared. This boilerplate does not use a "remember me" feature, since this comes already built-in with most browsers and are best left to them to handle.
You can still use the update directive, like this:
```javascript
<main v-update-authentication></main>
```
#### Messages
In `methods/messages.js` there are a few default notification messages. These can be called with `Vue.$_Messages`. You can, of course, add your own messages. Here is what the code looks like, in messages.js:
```javascript
Vue.$_Messages = {
error: {
empty: { default: 'You cannot leave a field empty.', specific: ( data ) => 'You cannot leave ' + data + ' empty.' },
email: { empty: 'You cannot leave email empty.', invalid: 'Invalid email. Please retype it, or, provide an actual email.' },
username: { empty: 'You cannot leave username empty.', invalid: 'Invalid username. Please, provide a valid username.' },
password: { empty: 'You cannot leave password empty.', invalid: 'Invalid password. Your password does not match our <a href="#modal">criteria</a> for a valid password.' }
},
success: {
login: { default: 'You are now logged in.', withUsername: ( username ) => 'Welcome, ' + username + '. You are now logged in.' }
}
}
```
**Example usage:**
```javascript
Vue.app.emit(Vue.$_Messages.error.empty.specific( data ))
```
#### Sign up
The sign up function has changed a lot (you can find the file in `directives/register.js`). It is now a Vue directive instead. The `v-register` directive needs to be attached to a form. You also need to provide the data to look for (as in data props), as modifiers.
Here's an example:
```javascript
<form v-register.username.password.email>
<input v-model="username" />
<input v-model="password" />
<input v-model="email" />
</form>
```
...and then in date props make it look something like this:
```javascript
export default {
data: function() {
return {
username: '',
password: '',
email: ''
}
}
}
```
It will then automatically retrieve the information from the data props. **The form will also need to be verified, using this boilerplate's form validation. You can check its [documentation](#form-validation) further down.**
#### Login
The login is built very similar to the register. It is also a directive. It is used something like this:
```javascript
<form v-login.email.password>
<input v-model="email" />
<input v-model="password" />
</form>
```
The validation is used the same way as v-register, which again, you can find documentation about below.
#### Form validation
Forms using `v-register` and/or `v-login` needs its data validated. **This is different from the second validation included in this boilerplate, which can be found in the section under.**
These validations needs to be the same name as the v-model/data prop. *The validate prop has to return true or false (i.e, a boolean).* Example usage:
```javascript
data: function() {
return {
email: '',
password: '',
validate: () => {
return {
email: Vue.$_Test.email( this.email ),
password: Vue.$_Test.password( this.password )
}
}
}
}
```
*Vue.$_Test* will be referenced in a section below.
#### Input validation
This is a directive, and it has a couple of default options to validate. This can, of course, be added upon in `directives/validate.js`. The default ones are:
- username
- email
- password
- target
And here is an example on how to use this:
```javascript
<input type="password" name="password" v-model="password" v-validate:password />
<input type="password" name="confirm" v-model="confirm" v-validate:target.password />
```
The target is retrieved by the vnode context: `const target = vnode.context[ property ]`.
#### Vue.$_Test
The `Vue.$_Test` is a regexp-tester object, populated with functions. The default ones right now are (and you can then add more for yourself):
```javascript
// Test against the regexes'
Vue.$_Test = {
// Simple username regex function that returns "false" or "true"
username: ( username ) => {
return Vue.$_Regex.username.test( username )
},
// Simple email regex function that returns "false" or "true"
email: ( email ) => {
return Vue.$_Regex.email.test( email )
},
// Simple password regex function that returns "false" or "true"
password: ( password ) => {
return Vue.$_Regex.password.test( password )
}
}
```
This code, including the regexs', can be found in `methods/regex.js`. Current regexs' are:
```javascript
Vue.$_Regex = {
username: /^[-\w\.\$@\*\!]{5,30}$/,
email: /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i,
password: /^((?![^ -~])((?=.*\d{1,})(?=.*[A-Z]{1,})(?=.*[a-z]{1,})(?=.*[^\w\d\s:])([^\s]){6,64}))$/m
}
```
#### Vue.$Store
`Vue.$Store` is the Vuex instance. You can find the settings, etc. in `client/store/index.js`. Why store it in the `Vue`-object? Because this way it's available in the plugins too (since this.$store doesn't work in the plugins, but works in .vue files). To see options for Vuex, please click [here](https://vuex.vuejs.org/).
# Feathers
#### Changes in behavior
With the initial setup of Feathers JS, it is possible to create users via the REST service. **This has been disabled for this boilerplate.** If you want to be able to create users via, for example, Postman, please adjust this code (which can be found in *src/services/users/users.service.js*):
```javascript
// A bit of custom validation, before anything is stored/sent to the server.
service.hooks({
before: {
create( context ) {
// If the provider is not from socketio, then throw an error. Disallow creation of accounts from outside the website.
if( context.params.provider !== 'socketio' ) {
throw new Error('Unfortunately, we don\'t offer account creation externally. Please, create the account on our website.')
// Do a simple regex test of the password.
} else if( !passwordRegex.test( context.arguments[0].password ) ) {
throw new Error('Invalid password. Passwords has to contain between 6 - 64 characters, include a upper- and lowercase letter, a number and a symbol. ASCII characters are strictly forbidden.')
}
}
}
})
```
#### Vue.app
**Information:**
*Vue.app is the Feathers instance. As in:*
```javascript
import feathers from '@feathersjs/feathers'
Vue.feathers = feathers
Vue.app = Vue.feathers()
```
*This makes it possible to use Feathers Application services, hooks, etc.*
*To see a list of available Application events, please see:* [Feathers Application API](https://docs.feathersjs.com/api/application.html)
**Examples:**
```javascript
Vue.app.emit('error', 'This is an error message.')
Vue.app.service('users').create({...})
```
**Side note:** `Vue.app.emit('error', 'Message...')` triggers VueNotifications.
You also have access to the Feathers Socket. Here's how it's setup:
```javascript
import io from 'socket.io-client'
Vue.io = io
Vue.socket = Vue.io('http://localhost:3030')
```
*With this you can use Feathers Socket.io methods, functions, etc. For a more detailed list of what you can do with Feathers Socket.io-client, see:* [Feathers Client > Socket.io](https://docs.feathersjs.com/api/client/socketio.html)
**Examples:**
```javascript
Vue.socket.emit('authenticate', { ... })
Vue.socket.emit('find', 'users', ...)
```
### Feathers Logger
*Feathers comes with [winstonjs/winston](https://github.com/winstonjs/winston), a.k.a, Logger. This is also bound to the Vue instance, and triggers the VueNotifications:*
```javascript
Vue.Logger('error', 'This is an error.')
Vue.Logger('warn', 'This is a warning.')
Vue.Logger('info', 'This is some information.')
...
```
### Notification options
> error
> warn
> info
> success
**Examples:**
```javascript
Vue.app.emit('error', 'Here\'s an error notification.')
Vue.app.emit('info', 'Here\'s an information notification.')
```
*If you want to only log to console, just use `console.log`*
You can find the following code in `~/layouts/default.vue`:
```javascript
// Listen to all errors, warnings, info and success events.
created: function() {
Vue.app.on('error', (message) => {
this.error({ title: 'Error', message: message, type: 'error' })
})
Vue.app.on('warn', (message) => {
this.warn({ title: 'Warning', message: message, type: 'warn' })
})
Vue.app.on('info', (message) => {
this.info({ title: 'Info', message: message, type: 'info' })
})
Vue.app.on('success', (message) => {
this.success({ title: 'Success', message: message, type: 'success' })
})
},
```
\ No newline at end of file