Last active
March 17, 2019 23:16
-
-
Save nicolasdao/083f355f3b9e4dc3f25bac2503806eb6 to your computer and use it in GitHub Desktop.
login.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <link rel="shortcut icon" href="https://neap.co/favicon.ico"> | |
| <title>Login</title> | |
| <link rel="canonical" href="/login.html"> | |
| <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | |
| <script type="application/ld+json"> | |
| { | |
| "@context": "http://schema.org", | |
| "@type": "Login", | |
| "headline": "Login to Your App API", | |
| "datePublished": "2018-01-06T12:02:41Z" | |
| } | |
| </script> | |
| <style> | |
| body { | |
| background-color: #e2e2e2; | |
| font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', arial,sans-serif; | |
| } | |
| /* Change Autocomplete styles in Chrome*/ | |
| input:-webkit-autofill, | |
| input:-webkit-autofill:hover, | |
| input:-webkit-autofill:focus | |
| input:-webkit-autofill, | |
| textarea:-webkit-autofill, | |
| textarea:-webkit-autofill:hover | |
| textarea:-webkit-autofill:focus, | |
| select:-webkit-autofill, | |
| select:-webkit-autofill:hover, | |
| select:-webkit-autofill:focus { | |
| -webkit-box-shadow: 0 0 0px 1000px #f1e7c6 inset; | |
| transition: background-color 5000s ease-in-out 0s; | |
| } | |
| #main { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| } | |
| .form-box { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| background-color: #f9f9f9; | |
| width: 400px; | |
| border-radius: 10px; | |
| box-shadow: 7px 7px 29px #cecece; | |
| margin-bottom: 80px; | |
| } | |
| .form-container { | |
| display: flex; | |
| flex-direction: column; | |
| margin-top: 25px; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .logo { | |
| width: 130px; | |
| } | |
| .welcome-message { | |
| text-align: center; | |
| font-weight: bold; | |
| font-size: 28px; | |
| color: #555; | |
| line-height: 41px; | |
| } | |
| .blurb { | |
| text-align: center; | |
| font-weight: lighter; | |
| font-size: 20px; | |
| color: #989898; | |
| } | |
| .email-form { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| margin-top: 15px; | |
| } | |
| .input-form { | |
| height: 35px; | |
| border-radius: 3px; | |
| border-width: 0px; | |
| background-color: #e4e4e4; | |
| margin-top: 8px; | |
| font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', arial,sans-serif; | |
| font-weight: bold; | |
| font-size: 13px; | |
| color: #313131; | |
| padding-left: 10px; | |
| width: 300px; | |
| } | |
| input[name="password"] { | |
| -webkit-text-security: disc; | |
| } | |
| input:focus, textarea:focus, select:focus { | |
| outline: none; | |
| } | |
| .login-button { | |
| height: 35px; | |
| border-radius: 3px; | |
| border-width: 0px; | |
| background-color: #bd081c; | |
| margin-top: 14px; | |
| font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', arial,sans-serif; | |
| font-weight: bold; | |
| font-size: 13px; | |
| color: #ffffff; | |
| padding-left: 10px; | |
| } | |
| .login-button:hover { | |
| background-color: #D3132A; | |
| cursor: pointer; | |
| } | |
| p.or { | |
| text-align: center; | |
| font-weight: bold; | |
| font-size: 13px; | |
| color: #555; | |
| line-height: 22px; | |
| } | |
| .facebook-form { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| width: 297px; | |
| } | |
| .social-button { | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| } | |
| .social-button:hover { | |
| cursor: pointer; | |
| } | |
| .social-button svg { | |
| flex: 1; | |
| } | |
| .social-button .button-msg { | |
| flex: 5; | |
| } | |
| .social-button div { | |
| flex: 1; | |
| } | |
| .facebook-button { | |
| height: 42px; | |
| border-radius: 3px; | |
| border-width: 0px; | |
| background-color: #4468B0; | |
| font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', arial,sans-serif; | |
| font-weight: bolder; | |
| font-size: 14px; | |
| color: #ffffff; | |
| padding-left: 10px; | |
| } | |
| .social-media-logo-container { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .social-media-logo { | |
| height: 27px; | |
| width: 27px; | |
| } | |
| .google-form { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| margin-top: 10px; | |
| width: 300px; | |
| } | |
| .google-button { | |
| height: 42px; | |
| border-radius: 3px; | |
| border-width: 0px; | |
| background-color: #4688f1; | |
| font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', arial,sans-serif; | |
| font-weight: bolder; | |
| font-size: 14px; | |
| color: #ffffff; | |
| padding-left: 10px; | |
| } | |
| .google-logo-background { | |
| display: flex; | |
| align-items: center; | |
| height: 28px; | |
| width: 28px; | |
| background-color: #ffffff; | |
| border-radius: 2px; | |
| } | |
| .terms { | |
| width: 260px; | |
| font-size: 11px; | |
| color: #bdbdbd; | |
| text-align: center; | |
| margin-top: 4px; | |
| line-height: 14px; | |
| font-weight: 300; | |
| } | |
| .terms a { | |
| font-weight: 500; | |
| color: #7f7f7f; | |
| text-decoration:none; | |
| } | |
| .error-form-message { | |
| width: 300px; | |
| margin-top: 10px; | |
| color: red; | |
| font-size: 12px; | |
| } | |
| .footer { | |
| height: 60px | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="main"> | |
| <div class="form-box"> | |
| <div class="form-container"> | |
| <div class="logo"> | |
| <img src="https://neap.co/img/neap_color_horizontal.png" width="100%"></img> | |
| </div> | |
| <div class="welcome-message">Welcome to this app</div> | |
| <div id="login-form"> | |
| <div class="blurb">The adventure begins now</div> | |
| <form id="usr-pwd-form" class="email-form" target="_top" action="/login/graphiql" method="post"> | |
| <input type="email" name="email" placeholder="Email" class="input-form" required> | |
| <input type="password" name="password" placeholder="Password" class="input-form" required> | |
| <input type="submit" value="Login or Create an Account" class="login-button"> | |
| <div id="usr-pwd-form-err" class="error-form-message" style="display: none"></div> | |
| </form> | |
| </div> | |
| <div id="register-form" style="display: none"> | |
| <div class="blurb">Create a New Account</div> | |
| <form id="usr-pwd-reg-form" class="email-form" target="_top" action="/register/graphiql" method="post"> | |
| <input type="text" name="firstName" placeholder="First name" class="input-form" required> | |
| <input type="text" name="lastName" placeholder="Last name" class="input-form" required> | |
| <input id="reg-email" type="email" name="email" placeholder="Email" class="input-form" required> | |
| <input id="reg-pwd" type="password" name="password" placeholder="Password" class="input-form" required> | |
| <input type="submit" value="Continue" class="login-button"> | |
| <div id="usr-pwd-reg-form-err" class="error-form-message" style="display: none"></div> | |
| </form> | |
| </div> | |
| <p class="or">OR</p> | |
| <form action="/auth/facebook/graphiql/login" class="facebook-form" target="_top"> | |
| <button class="facebook-button social-button"> | |
| <div class="social-media-logo-container"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 216" class="social-media-logo" color="#ffffff"> | |
| <path fill="#ffffff" d="M204.1 0H11.9C5.3 0 0 5.3 0 11.9v192.2c0 6.6 5.3 11.9 11.9 11.9h103.5v-83.6H87.2V99.8h28.1v-24c0-27.9 17-43.1 41.9-43.1 11.9 0 22.2.9 25.2 1.3v29.2h-17.3c-13.5 0-16.2 6.4-16.2 15.9v20.8h32.3l-4.2 32.6h-28V216h55c6.6 0 11.9-5.3 11.9-11.9V11.9C216 5.3 210.7 0 204.1 0z"> | |
| </path> | |
| </svg> | |
| </div> | |
| <span class="button-msg">Continue with Facebook</span> | |
| <div></div> | |
| </button> | |
| <div id="facebook-error" class="error-form-message"></div> | |
| </form> | |
| <form action="/action_page.php" class="google-form" target="_top"> | |
| <button class="google-button social-button"> | |
| <div class="social-media-logo-container"> | |
| <span class="google-logo-background"> | |
| <svg height="20" viewBox="0 0 512 512" width="20" xmlns="http://www.w3.org/2000/svg" data-reactid="48"> | |
| <g fill="none" fill-rule="evenodd" data-reactid="49"> | |
| <path d="M482.56 261.36c0-16.73-1.5-32.83-4.29-48.27H256v91.29h127.01c-5.47 29.5-22.1 54.49-47.09 71.23v59.21h76.27c44.63-41.09 70.37-101.59 70.37-173.46z" fill="#4285f4" data-reactid="50"></path> | |
| <path d="M256 492c63.72 0 117.14-21.13 156.19-57.18l-76.27-59.21c-21.13 14.16-48.17 22.53-79.92 22.53-61.47 0-113.49-41.51-132.05-97.3H45.1v61.15c38.83 77.13 118.64 130.01 210.9 130.01z" fill="#34a853" data-reactid="51"></path> | |
| <path d="M123.95 300.84c-4.72-14.16-7.4-29.29-7.4-44.84s2.68-30.68 7.4-44.84V150.01H45.1C29.12 181.87 20 217.92 20 256c0 38.08 9.12 74.13 25.1 105.99l78.85-61.15z" fill="#fbbc05" data-reactid="52"></path> | |
| <path d="M256 113.86c34.65 0 65.76 11.91 90.22 35.29l67.69-67.69C373.03 43.39 319.61 20 256 20c-92.25 0-172.07 52.89-210.9 130.01l78.85 61.15c18.56-55.78 70.59-97.3 132.05-97.3z" fill="#ea4335" data-reactid="53"></path> | |
| <path d="M20 20h472v472H20V20z" data-reactid="54"></path> | |
| </g> | |
| </svg> | |
| </span> | |
| </div> | |
| <span class="button-msg">Continue with Google</span> | |
| <div></div> | |
| </button> | |
| <div id="facebook-error" class="error-form-message"></div> | |
| </form> | |
| <div class="terms"> | |
| <p>By continuing, you agree to This App's <a href="https://en.wikipedia.org/wiki/Terms_of_service" target="_blank">Terms of Service, Privacy Policy</a></p> | |
| </div> | |
| </div> | |
| <div class="footer"></div> | |
| </div> | |
| </div> | |
| <script> | |
| ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | |
| ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | |
| ////////////////////////// 1. START - DISPLAY ERROR MESSAGE FROM QUERY STRING ///////////////////////// | |
| function getQueryString(field, url) { | |
| var href = url ? url : window.location.href | |
| var reg = new RegExp( '[?&]' + field + '=([^&#]*)', 'i' ) | |
| var string = reg.exec(href) | |
| return string ? string[1] : null | |
| } | |
| function showErrorMsg() { | |
| var errorCode = getQueryString('errorCode') | |
| var errorMsg = getQueryString('message') | |
| if (errorCode && errorMsg) { | |
| var form = document.getElementById('usr-pwd-form') | |
| var errEl = (form.getElementsByTagName('div') || [])[0] | |
| errEl.innerHTML = decodeURIComponent(errorMsg) | |
| errEl.style.display = 'block' | |
| } | |
| } | |
| showErrorMsg() | |
| ////////////////////////// 1. END - DISPLAY ERROR MESSAGE FROM QUERY STRING ///////////////////////// | |
| ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | |
| ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | |
| ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | |
| ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | |
| ////////////////////////// 2. START - OVERRIDE FORM SUBMIT BEHAVIOR ///////////////////////// | |
| function overrideFormBehavior(formElement) { | |
| function processForm(e) { | |
| if (e.preventDefault) e.preventDefault() | |
| var inputs = formElement.getElementsByTagName('input') | |
| var values = {} | |
| var email, pwd | |
| for (var index = 0; index < inputs.length; ++index) { | |
| var el = inputs[index] | |
| if (el.type != 'submit') { | |
| if (el.name == 'email') email = el.value | |
| if (el.name == 'password') pwd = el.value | |
| values[el.name] = el.value | |
| } | |
| } | |
| var xhttp = new XMLHttpRequest() | |
| xhttp.onreadystatechange = function() { | |
| if (xhttp.readyState == XMLHttpRequest.DONE) { | |
| const res = JSON.parse(xhttp.responseText) || {} | |
| // User does not exists. Show register page | |
| if (res.errorCode == 300) { | |
| if (email) document.getElementById('reg-email').value = email | |
| if (pwd) document.getElementById('reg-pwd').value = pwd | |
| document.getElementById('login-form').style.display = 'none' | |
| document.getElementById('register-form').style.display = 'block' | |
| } | |
| else if (res.errorCode) { | |
| var errEl = (formElement.getElementsByTagName('div') || [])[0] | |
| errEl.innerHTML = res.message | |
| errEl.style.display = 'block' | |
| } | |
| else if (res.redirect) | |
| window.location.href = res.redirect | |
| } | |
| } | |
| xhttp.open('POST', formElement.action, true) | |
| xhttp.setRequestHeader('Content-type', 'application/json') | |
| xhttp.send(JSON.stringify(values)) | |
| return false | |
| } | |
| return processForm | |
| } | |
| var forms = [document.getElementById('usr-pwd-form'), document.getElementById('usr-pwd-reg-form')] | |
| for (var i = 0; i < forms.length; i++) { | |
| if (forms[i].attachEvent) { | |
| forms[i].attachEvent("submit", overrideFormBehavior(forms[i])) | |
| } else { | |
| forms[i].addEventListener("submit", overrideFormBehavior(forms[i])) | |
| } | |
| } | |
| ////////////////////////// 2. END - OVERRIDE FORM SUBMIT BEHAVIOR ///////////////////////// | |
| ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | |
| ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment