From b6dc79edd77305eefafa93bb1a17e2e8d1683119 Mon Sep 17 00:00:00 2001
From: Adhityaa Chandrasekar <adtac@adtac.in>
Date: Wed, 8 Aug 2018 13:48:08 +0530
Subject: [PATCH] commento.{js,scss}: add login button in textarea

Closes https://gitlab.com/commento/commento-ce/issues/64
---
 frontend/js/commento.js           | 22 +++++++++++++++++-----
 frontend/sass/commento-input.scss | 23 +++++++++++++++++++----
 2 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/frontend/js/commento.js b/frontend/js/commento.js
index 4616792..462f842 100644
--- a/frontend/js/commento.js
+++ b/frontend/js/commento.js
@@ -391,19 +391,31 @@
 
     if (!isAuthenticated && !chosenAnonymous) {
       var buttonsContainer = create("div");
+      var question = create("div");
+      var buttons = create("div");
       var createButton = create("div");
+      var loginButton = create("div");
 
-      classAdd(buttonsContainer, "create-container");
-
+      classAdd(buttonsContainer, "account-buttons-container");
+      classAdd(question, "account-buttons-question");
+      classAdd(buttons, "account-buttons");
       classAdd(createButton, "button");
       classAdd(createButton, "create-button");
+      classAdd(loginButton, "button");
+      classAdd(loginButton, "login-button");
 
       attrSet(createButton, "onclick", "loginBoxShow()");
+      attrSet(loginButton, "onclick", "loginBoxShow(); loginSwitch(true);");
       attrSet(textarea, "disabled", true);
 
       createButton.innerText = "Create an Account";
+      loginButton.innerText = "Login";
+      question.innerText = "Want to add to the discussion?";
 
-      append(buttonsContainer, createButton);
+      append(buttons, createButton);
+      append(buttons, loginButton);
+      append(buttonsContainer, buttons);
+      append(textareaContainer, question);
       append(textareaContainer, buttonsContainer);
     }
     else {
@@ -1077,7 +1089,7 @@
   }
 
 
-  global.loginSwitch = function() {
+  global.loginSwitch = function(leaveOauth) {
     var header = $(ID_LOGIN_BOX_HEADER);
     var subtitle = $(ID_LOGIN_BOX_SUBTITLE);
     var loginLink = $(ID_LOGIN_BOX_LOGIN_LINK);
@@ -1093,7 +1105,7 @@
 
     loginBoxType = "login";
 
-    if (configuredOauths.length > 0) {
+    if (leaveOauth !== true && configuredOauths.length > 0) {
       remove(hr);
       remove(oauthPretext);
       remove(oauthButtonsContainer);
diff --git a/frontend/sass/commento-input.scss b/frontend/sass/commento-input.scss
index 1bd3c99..49eb9c8 100644
--- a/frontend/sass/commento-input.scss
+++ b/frontend/sass/commento-input.scss
@@ -52,7 +52,8 @@ textarea {
 }
 
 .commento-oauth-buttons,
-.commento-create-container {
+.commento-account-buttons,
+.commento-account-buttons-container {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -60,12 +61,21 @@ textarea {
   z-index: 1;
 }
 
+.commento-account-buttons {
+  flex-direction: row;
+}
+
+.commento-account-buttons-container {
+  padding-bottom: 10px;
+}
+
 .commento-oauth-buttons {
   display: contents;
 }
 
-.commento-create-container::before {
-  content: "Want to add to the discussion?";
+.commento-account-buttons-question {
+  position: absolute;
+  top: 25px;
   display: block;
   text-align: center;
   justify-content: center;
@@ -139,10 +149,15 @@ textarea {
 }
 
 .commento-create-button {
-  width: 150px;
+  width: 120px;
   background: $pink-9;
 }
 
+.commento-login-button {
+  width: 50px;
+  background: $cyan-9;
+}
+
 .commento-submit-button {
   float: right;
   background: $indigo-7;