Merge pull request #49 from smiclea/CORWEB-79

Remove login separator if there are no login providers CORWEB-79

src/components/LoginPage/LoginPage.js

@@ -130,6 +130,14 @@ export class LoginPage extends Reflux.Component {
       </div>
     ))
 
+    let loginSeparator = loginButtons.length ? (
+      <div className={s.loginSeparator}>
+        <div className={s.line}></div>
+        <span className={s.text}>or sign in with username</span>
+        <div className={s.line}></div>
+      </div>
+    ) : null
+
     return (
       <div className={s.root}>
         <div className={s.container + " " + (loginButtons.length <= 2 ? s.oneColumn : "")}>
@@ -142,15 +150,11 @@ export class LoginPage extends Reflux.Component {
               <div className={"logo coriolis-white"}></div>
             </div>
           </div>
-          <div className={s.loginContainer}>
+          <div className={s.loginContainer + ' ' + (!loginSeparator ? s.noSeparator : '')}>
             <div className={s.loginSocialButtons}>
               {loginButtonsTemplate}
             </div>
-            <div className={s.loginSeparator}>
-              <div className={s.line}></div>
-              <span className={s.text}>or sign in with username</span>
-              <div className={s.line}></div>
-            </div>
+            {loginSeparator}
             <div className={s.loginUsername}>
               <form onSubmit={(e) => this.login(e)}>
                 <div className="form-group">

src/components/LoginPage/LoginPage.scss

@@ -50,15 +50,21 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 }
 .loginContainer {
   margin: 64px auto 0;
-  padding: 32px 32px 16px;
+  padding: 32px;
   background-color: rgba(221, 224, 229, 0.5);
   box-sizing: border-box;
   border-radius: 8px;
+  &.noSeparator {
+    padding-top: 16px;
+  }
   &:after {
     content: "";
     display: table;
     clear: both;
   }
+  button {
+    margin-top: 16px;
+  }
   input, button {
     width: 100%;
   }