From b77089388f2a2cd2dd855d1b329d330cc91adea5 Mon Sep 17 00:00:00 2001 From: Adhityaa Chandrasekar Date: Wed, 13 Feb 2019 02:08:00 -0500 Subject: [PATCH] commento.js: show oauth above email login --- frontend/js/commento.js | 62 +++++++++++++------------------ frontend/sass/commento-login.scss | 13 ++----- frontend/sass/commento.scss | 1 - 3 files changed, 30 insertions(+), 46 deletions(-) diff --git a/frontend/js/commento.js b/frontend/js/commento.js index 93876ef..7fdfd08 100644 --- a/frontend/js/commento.js +++ b/frontend/js/commento.js @@ -23,8 +23,7 @@ var ID_MAIN_AREA = "commento-main-area"; var ID_LOGIN_BOX_CONTAINER = "commento-login-box-container"; var ID_LOGIN_BOX = "commento-login-box"; - var ID_LOGIN_BOX_HEADER = "commento-login-box-header"; - var ID_LOGIN_BOX_SUBTITLE = "commento-login-box-subtitle"; + var ID_LOGIN_BOX_EMAIL_SUBTITLE = "commento-login-box-email-subtitle"; var ID_LOGIN_BOX_EMAIL_INPUT = "commento-login-box-email-input"; var ID_LOGIN_BOX_PASSWORD_INPUT = "commento-login-box-password-input"; var ID_LOGIN_BOX_NAME_INPUT = "commento-login-box-name-input"; @@ -1145,52 +1144,48 @@ global.popupRender = function(id) { var loginBoxContainer = $(ID_LOGIN_BOX_CONTAINER); var loginBox = create("div"); - var header = create("div"); - var subtitle = create("div"); + var oauthSubtitle = create("div"); + var oauthButtonsContainer = create("div"); + var oauthButtons = create("div"); + var hr = create("hr"); + var emailSubtitle = create("div"); var emailContainer = create("div"); var email = create("div"); var emailInput = create("input"); var emailButton = create("button"); var loginLinkContainer = create("div"); var loginLink = create("a"); - var hr = create("hr"); - var oauthPretext = create("div"); - var oauthButtonsContainer = create("div"); - var oauthButtons = create("div"); var close = create("div"); loginBox.id = ID_LOGIN_BOX; - header.id = ID_LOGIN_BOX_HEADER; - subtitle.id = ID_LOGIN_BOX_SUBTITLE; + emailSubtitle.id = ID_LOGIN_BOX_EMAIL_SUBTITLE; emailInput.id = ID_LOGIN_BOX_EMAIL_INPUT; emailButton.id = ID_LOGIN_BOX_EMAIL_BUTTON; loginLink.id = ID_LOGIN_BOX_LOGIN_LINK; loginLinkContainer.id = ID_LOGIN_BOX_LOGIN_LINK_CONTAINER; hr.id = ID_LOGIN_BOX_HR; - oauthPretext.id = ID_LOGIN_BOX_OAUTH_PRETEXT; + oauthSubtitle.id = ID_LOGIN_BOX_OAUTH_PRETEXT; oauthButtonsContainer.id = ID_LOGIN_BOX_OAUTH_BUTTONS_CONTAINER; classAdd(loginBoxContainer, "login-box-container"); classAdd(loginBox, "login-box"); - classAdd(header, "login-box-header"); - classAdd(subtitle, "login-box-subtitle"); + classAdd(emailSubtitle, "login-box-subtitle"); classAdd(emailContainer, "email-container"); classAdd(email, "email"); classAdd(emailInput, "input"); classAdd(emailButton, "email-button"); classAdd(loginLinkContainer, "login-link-container"); classAdd(loginLink, "login-link"); - classAdd(oauthPretext, "login-box-subtitle"); + classAdd(oauthSubtitle, "login-box-subtitle"); classAdd(oauthButtonsContainer, "oauth-buttons-container"); classAdd(oauthButtons, "oauth-buttons"); classAdd(close, "login-box-close"); classAdd(root, "root-min-height"); - header.innerText = "Login to continue"; loginLink.innerText = "Don't have an account? Sign up."; - subtitle.innerText = "Enter your email address to start with."; + emailSubtitle.innerText = "Login with your email address"; emailButton.innerText = "Continue"; - oauthPretext.innerText = "Or proceed with social login."; + oauthSubtitle.innerText = "Proceed with social login"; onclick(emailButton, global.passwordAsk, id); onclick(loginLink, global.popupSwitch); @@ -1214,9 +1209,17 @@ append(oauthButtons, button); } - append(loginBox, header); - append(loginBox, subtitle); + if (configuredOauths.length > 0) { + append(loginBox, oauthSubtitle); + append(oauthButtonsContainer, oauthButtons); + append(loginBox, oauthButtonsContainer); + append(loginBox, hr); + oauthButtonsShown = true; + } else { + oauthButtonsShown = false; + } + append(loginBox, emailSubtitle); append(email, emailInput); append(email, emailButton); append(emailContainer, email); @@ -1225,16 +1228,6 @@ append(loginLinkContainer, loginLink); append(loginBox, loginLinkContainer); - if (configuredOauths.length > 0) { - append(loginBox, hr); - append(loginBox, oauthPretext); - append(oauthButtonsContainer, oauthButtons); - append(loginBox, oauthButtonsContainer); - oauthButtonsShown = true; - } else { - oauthButtonsShown = false; - } - append(loginBox, close); popupBoxType = "login"; @@ -1244,19 +1237,16 @@ global.popupSwitch = function() { - var header = $(ID_LOGIN_BOX_HEADER); - var subtitle = $(ID_LOGIN_BOX_SUBTITLE); + var emailSubtitle = $(ID_LOGIN_BOX_EMAIL_SUBTITLE); var loginLink = $(ID_LOGIN_BOX_LOGIN_LINK); if (popupBoxType === "login") { - header.innerText = "Create an account to continue"; loginLink.innerText = "Already have an account? Log in."; - subtitle.innerText = "Sign up with your email to comment and receive email notifications."; + emailSubtitle.innerText = "Create an account"; popupBoxType = "signup"; } else { - header.innerText = "Login to continue"; loginLink.innerText = "Don't have an account? Sign up."; - subtitle.innerText = "Enter your email address to start with."; + emailSubtitle.innerText = "Login with your email address"; popupBoxType = "login"; } } @@ -1325,7 +1315,7 @@ global.passwordAsk = function(id) { var loginBox = $(ID_LOGIN_BOX); - var subtitle = $(ID_LOGIN_BOX_SUBTITLE); + var subtitle = $(ID_LOGIN_BOX_EMAIL_SUBTITLE); var emailButton = $(ID_LOGIN_BOX_EMAIL_BUTTON); var loginLinkContainer = $(ID_LOGIN_BOX_LOGIN_LINK_CONTAINER); var hr = $(ID_LOGIN_BOX_HR); diff --git a/frontend/sass/commento-login.scss b/frontend/sass/commento-login.scss index ba64d40..c66e0fe 100644 --- a/frontend/sass/commento-login.scss +++ b/frontend/sass/commento-login.scss @@ -23,25 +23,20 @@ opacity: 1; transition: opacity 0.2s; + @import "commento-oauth.scss"; + hr { border: none; background: $gray-2; height: 1px; - } - - .commento-login-box-header { - font-size: 20px; - font-weight: 200; - text-align: center; - color: $pink-8; - margin: 16px; + margin: 24px 0px; } .commento-login-box-subtitle { color: $gray-6; text-align: center; - font-size: 15px; margin: 12px 0px; + font-size: 15px; } @import "email-main.scss"; diff --git a/frontend/sass/commento.scss b/frontend/sass/commento.scss index 3afb744..3457f76 100644 --- a/frontend/sass/commento.scss +++ b/frontend/sass/commento.scss @@ -21,7 +21,6 @@ @import "commento-logged.scss"; // Logged in as @import "commento-mod-tools.scss"; // Moderator tools and buttons @import "commento-input.scss"; // Textarea, anonymous checkbox, submit button - @import "commento-oauth.scss"; // OAuth buttons @import "commento-card.scss"; // Each comment card @import "commento-login.scss"; // Popup box when logging in @import "commento-footer.scss"; // Powered by Commento