Remove login seperator 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

@@ -54,6 +54,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   background-color: rgba(221, 224, 229, 0.5);
   box-sizing: border-box;
   border-radius: 8px;
+  &.noSeparator {
+    padding-top: 16px;
+  }
   &:after {
     content: "";
     display: table;