Fix styling of the login form & login with gh button

app/Resources/HWIOAuthBundle/views/Connect/login.html.twig

@@ -4,32 +4,40 @@
     {% if error %}
         <div>{{ error }}</div>
     {% endif %}
-    {% for owner in hwi_oauth_resource_owners() %}
-    <a class="submit" href="{{ hwi_oauth_login_url(owner) }}">Login with {{ owner | trans({}, 'HWIOAuthBundle') }}</a> <br />
-    {% endfor %}
 
     {# HWIOAuthBundle uses the same template for the login and the connect functionality currently
        so we need to check if the user is already authenticated. #}
     {% if not app.user %}
-    <form action="{{ path('login_check') }}" method="post">
-        <div>
-            <label for="username">{{ 'security.login.username'|trans({}, 'FOSUserBundle') }}</label>
-            <input type="text" id="username" name="_username" />
-        </div>
+        <div class="loginForm">
+            <form action="{{ path('login_check') }}" method="post">
+                <div>
+                    <label for="username">{{ 'security.login.username'|trans({}, 'FOSUserBundle') }}</label>
+                    <input type="text" id="username" name="_username" />
+                </div>
 
-        <div>
-            <label for="password">{{ 'security.login.password'|trans({}, 'FOSUserBundle') }}</label>
-            <input type="password" id="password" name="_password" />
-        </div>
+                <div>
+                    <label for="password">{{ 'security.login.password'|trans({}, 'FOSUserBundle') }}</label>
+                    <input type="password" id="password" name="_password" />
+                </div>
 
-        <div>
-            <input type="checkbox" id="remember_me" name="_remember_me" value="on" checked="checked" />
-            <label for="remember_me">{{ 'security.login.remember_me'|trans({}, 'FOSUserBundle') }}</label>
-        </div>
+                <div>
+                    <input type="checkbox" id="remember_me" name="_remember_me" value="on" checked="checked" />
+                    <label for="remember_me">{{ 'security.login.remember_me'|trans({}, 'FOSUserBundle') }}</label>
+                </div>
 
-        <input type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans({}, 'FOSUserBundle') }}" />
-    </form>
+                <input type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans({}, 'FOSUserBundle') }}" />
+            </form>
 
-    <a href="{{ path('fos_user_resetting_request') }}">Forgot password?</a>
+            <p>
+                <a href="{{ path('fos_user_resetting_request') }}">Forgot password?</a>
+                {% for owner in hwi_oauth_resource_owners() %}
+                    <a class="login-{{ owner }}" href="{{ hwi_oauth_login_url(owner) }}">Login with {{ owner | trans({}, 'HWIOAuthBundle') }}</a> <br />
+                {% endfor %}
+            </p>
+        </div>
+    {% else %}
+        {% for owner in hwi_oauth_resource_owners() %}
+            <a class="login-{{ owner }}" href="{{ hwi_oauth_login_url(owner) }}">Login with {{ owner | trans({}, 'HWIOAuthBundle') }}</a> <br />
+        {% endfor %}
     {% endif %}
 {% endblock hwi_oauth_content %}

src/Packagist/WebBundle/Resources/public/css/main.css

@@ -234,6 +234,23 @@ div.box > p:last-child {
 .user a, .user a:visited { color: #fff; }
 .user a:hover { text-decoration: underline; }
 
+.loginForm {
+  width: 406px;
+}
+
+.login-github {
+  border: 1px solid #ccc;
+  color: #000 !important;
+  background: #fff url(../img/github_icon.png) 6px 6px no-repeat;
+  padding: 3px 5px 3px 26px;
+  -webkit-border-radius: 6px;
+  -moz-border-radius: 6px;
+  border-radius: 6px;
+}
+.loginForm .login-github {
+  float: right;
+}
+
 .submit, .submit:active, .submit:visited, input[type="submit"] {
   font-size: 22px;
   float: right;