[$125] Updates to sign up page

[jmgasper]

@atelomycterus - Can you go through this list of feedback on the new sign up page and let me know what you think on each one please? I'm not sure what's doable with regards to this design: https://marvelapp.com/prototype/9hihec1/screen/78808658

1. Is it not possible to move the Sign Up with Google and Github below the SIGN UP button? if not, then at least to make the SIgn Up with Github button white with gray outline and use the github black icon (or use only icons)
2. If we use the same layout for registration and sign up, then the image on the right gets stretch and the message is not working neither - that should be fixed
3. Can we use Roboto font for the form?
4. We talked about dropping the First name and Last name fields and adding How did you hear about us? question. Is that not possible?
5. Can we have the textfields same width as the button?
6. Sign up/ Login button should be smaller per height, as per design
7. "Don't Remember Your Passoword" is now black but that's not intuitive that's a link. Maybe we can use "Forgot password" in blue as link. and have that text left aligned with the other text fields
8. "By Signing Up, you agree...." that should be left aligned as well and the links should be blue
9. Logo at top should be smaller and we should have "Topcoder Sign Up" instead of just "Sign Up"

[jmgasper]

Challenge https://www.topcoder.com/challenges/65788f16-d071-4ace-bfd9-5c06c1114b40 has been created for this ticket.

This is an automated message for ghostar via Topcoder X

[jmgasper]

Challenge https://www.topcoder.com/challenges/65788f16-d071-4ace-bfd9-5c06c1114b40 has been assigned to obog.

This is an automated message for ghostar via Topcoder X

[atelomycterus]

@jmgasper Please ask our designer to import the image. Some requirements cannot be implemented using the Lock template. I will double-check the documentation and API. Keep you updated on.

[atelomycterus]

@jmgasper Please read my comments below. All phrases are used from Marvel App. Let me know your feedback.
Most of the requirements can be met with overriding CSS.

Lock template - index.override-css.html.txt

1. Is it not possible to move the Sign Up with Google and Github below the SIGN UP button? if not, then at least to make the SIgn > Up with Github button white with gray outline and use the github black icon (or use only icons)

Not possible to move the Sign Up with Google and Github below the SIGN UP button.
Overriding CSS is used to meet this requirement.

2. If we use the same layout for registration and sign up, then the image on the right gets stretch and the message is not working neither - that should be fixed

Fixed.

3. Can we use Roboto font for the form?

Fixed.

4. We talked about dropping the First name and Last name fields and adding How did you hear about us? question. Is that not possible?

We can add custom fields. The current MarvelApp design doesn't have Last/FirstName fields. Please let me know if the lock template should match the current Topcoder SignUp form.

https://marvelapp.com/prototype/9hihec1/screen/78808658

The current Topcoder SignUp form:

5. Can we have the textfields same width as the button?

Fixed. Overriding CSS is used to meet this requirement.

6. Sign up/ Login button should be smaller per height, as per design

Fixed. Overriding CSS is used to meet this requirement.

7. "Don't Remember Your Passoword" is now black but that's not intuitive that's a link. Maybe we can use "Forgot password" in blue as link. and have that text left aligned with the other text fields.

Fixed. Overriding CSS is used to meet this requirement.

8. "By Signing Up, you agree...." that should be left aligned as well and the links should be blue

Fixed. Overriding CSS is used to meet this requirement.

9. Logo at top should be smaller and we should have "Topcoder Sign Up" instead of just "Sign Up"

Fixed. Overriding CSS is used to meet this requirement.

Additional Notes

1. The list of custom messages/errors is used in a lock widget: https://github.com/auth0/lock/blob/master/src/i18n/en.js
   You can change them if you want

Example:

  // Available Lock configuration options: https://auth0.com/docs/libraries/lock/v11/configuration
    var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
        container: 'hiw-login-container',
        languageDictionary: {
            title: 'Topcoder Login',
            emailInputPlaceholder: 'Email',
            passwordInputPlaceholder: 'Password',
            signUpTerms: 'By clicking "Sign up", you agree to the <a href="https://www.topcoder.com/policy/terms-and-conditions"  target="_new">Terms</a> and <a href="https://www.topcoder.com/policy/privacy-policy" target="_new"">Privacy Policy</a> of Topcoder.',
            signUpTitle: 'Join Topcoder',

}

2. Please upload icons and update icon/image urls before testing/deploying a lock template on QA/DEV/PROD. All current assets are loaded from my google drive.

authButtons: {
                "github": {
                    icon: 'https://drive.google.com/uc?id=1VP4ADWOWPj6w4usfFdGDlRTsme2apede'
                },
                "google-oauth2": {
                    icon: 'https://drive.google.com/uc?id=1tQaf_7E4s-e4hR3ukrvtc-1SwxM_a78i'
                }
}

    .marketing-column {
        background-image: url(https://drive.google.com/uc?id=1Sw9AY2XypIANYK2TQKo25vWsqvqedHav) ;
    }

Updating

Please test it before updating Lock version in the future. The current version is 11.30.

The login form page can no longer be automatically updated by Auth0, so we become responsible for updates and maintenance of the page. This is an example that the API changes and needs to be tested

For example, the current Topcoder Auth0 uses lock 11.15. You can see small social buttons:

This feature was removed in v11.16.0 (https://github.com/auth0/lock/blob/master/CHANGELOG.md).

## [v11.16.0](https://github.com/auth0/lock/tree/v11.16.0) (2019-05-06)
[Full Changelog](https://github.com/auth0/lock/compare/v11.15.0...v11.16.0)

**Changed**
- Remove socialButtonStyle option to use small icons [\#1637](https://github.com/auth0/lock/pull/1637) ([luisrudge](https://github.com/luisrudge)) 

[jmgasper]

Payment task has been updated: https://www.topcoder.com/challenges/65788f16-d071-4ace-bfd9-5c06c1114b40
Payments Complete
Winner: obog
Copilot: ghostar
Challenge 65788f16-d071-4ace-bfd9-5c06c1114b40 has been paid and closed.

This is an automated message for ghostar via Topcoder X