Frontend Assignment

Please implement an Editable Account panel using modern CSS and a Javascript framework.

Account page contains:

• Profile picture
• Full name
• Email
• Change Password
• Each information but the profile picture is editable using an edit icon button
• Picture should be fetched from Gravatar using user the email, and should use a default image
• Editing full name should display a first and last name field.
• Password form should have an option to unmask (no confirm password field) and should display a strength meter.
• Each form should have validation.
• Font-awesome should be used for icons. Open Sans (Google font) should be setup.
• Password strength meter can use an external library, like zxcvbn, and can be word-based, or visual.
• Source should be documented and versioned.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run all tests
npm test

How to test

# install dependencies
npm install

# run 
npm start

# cheking at localhost:8080

Reference

FontAwsome: https://github.com/FortAwesome/vue-fontawesome#installation For a detailed explanation on how things work, check out the guide and docs for vue-loader.