[Utopian Dev] Add Invisible ReCAPTCHA to Sign-up Page

Repository

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

Bug Fixes

• Improve Username Input Validation

Details

• Github Issue: https://github.com/utopian-io/signup.utopian.io/issues/21
• src/components/steps/account/pick_account.vue
  
  • 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)
    
  • 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;
    
  • use _.debounce() to add a 1 second delay to check for account's existence

New Features

• Add Recaptcha to Signup Page

Implementation Details

• package.json
  

  • Added lodash and vue-recaptcha dependencies. The former for debounce() when user type's the account name.

• index.html
  

  • Import reCAPTCHA's api.js
  • Added font-awesome.css for user account's feedback icons

• src/components/signup.vue

  • Main file updated
    
  • Encapsulated Github signup button inside a vue-recaptcha component
    
  • 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