#### Repository
https://github.com/utopian-io/signup.utopian.io

### Bug Fixes
* #### Improve Username Input Validation
![](https://user-images.githubusercontent.com/29425738/40268872-783d7dd6-5bb0-11e8-8e71-440b5977449a.gif)

#### Details
* Github Issue: https://github.com/utopian-io/signup.utopian.io/issues/21
* [`src/components/steps/account/pick_account.vue`](https://github.com/utopian-io/signup.utopian.io/pull/22/files#diff-ab9c4cb4f24346d44a4449b1aa924769)
![](https://cdn.steemitimages.com/DQmYLHK4JYWg88UkbuQrKJz3XqXkk1BMHZeUh8d5FX249UT/image.png)
    * Added three feedback `span` elements to hold the `fa-spinner` (checking account feedback), `fa-check` (valid or available account), and `fa-times` (invalid or unavailable account name)
![](https://cdn.steemitimages.com/DQmdvkWG4eq5jhH5msCDZDDXc4XacKuqRE59g7GRkkyjjyx/image.png)
    * Added the `input_error` and `success_msg` div holders to display the error message and success message, respectively. Used vue's `v-html`  property to render the html content of the error and success messages;
![](https://cdn.steemitimages.com/DQmQv5ZekYEvh6MyxSDTaFJk6EgX77LZJvB99RvwtSvU5Fp/image.png)
    * use `_.debounce()` to add a `1 second` delay to check for account's existence

### New Features

* #### Add Recaptcha to Signup Page
![](https://user-images.githubusercontent.com/29425738/40278171-0166c160-5c67-11e8-87da-89bef2f06ddb.gif)

### Implementation Details

* [`package.json`](https://github.com/utopian-io/signup.utopian.io/pull/22/files#diff-b9cfc7f2cdf78a7f4b91a753d10865a2)
![](https://cdn.steemitimages.com/DQmVuTBXGvrsFsHwgvXFWETBpWMoEAT3WxvqdjQLsun143a/image.png)
    * Added `lodash` and `vue-recaptcha` dependencies. The former for `debounce()` when user type's the account name. 

* [`index.html`](https://github.com/utopian-io/signup.utopian.io/pull/22/files#diff-eacf331f0ffc35d4b482f1d15a887d3b)
![](https://cdn.steemitimages.com/DQmTbsGbPmbMKu1ko2ypK1U7cLHB1UUfp2oJagey5Wvtqcb/image.png)
    * Import reCAPTCHA's api.js 
    * Added `font-awesome.css` for user account's feedback icons

* [`src/components/signup.vue`](https://github.com/utopian-io/signup.utopian.io/pull/22/files#diff-e1bb0b900bcd8457d082d38c54d85651)
    * Main file updated
![](https://cdn.steemitimages.com/DQmRuMrFDpFpWg73PzYv5SXB4kyXr634x6h41WLCx9Xh4no/image.png)
    * Encapsulated Github signup button inside a `vue-recaptcha` component
![](https://cdn.steemitimages.com/DQmVJGQDPkLK26WHjkJwAdX7sAMR8a9KjeYrfXihzFpqeqe/image.png)
    * Added `onGithubCaptchaVerified` and `onGithubCaptchaExpired` event handlers; in `onGithubCaptchaVerified`, re-use existing `authenticate(<provider>)` 

#### Link to Merged Pull Request
https://github.com/utopian-io/signup.utopian.io/pull/22

#### GitHub Account
https://github.com/eastmaels