feat(ui): improved social login buttons UI (#1471)

modules/users/client/css/users.css

@@ -7,46 +7,27 @@
   display: inline-block;
   position: relative;
 }
-.btn-remove-account {
+.btn-add-remove-account {
   top: 10px;
   right: 10px;
   position: absolute;
-}
-.btn-file {
-  position: relative;
-  overflow: hidden;
-}
-.btn-file input[type=file] {
-  position: absolute;
-  top: 0;
-  right: 0;
-  min-width: 100%;
-  min-height: 100%;
-  font-size: 100px;
-  text-align: right;
-  filter: alpha(opacity=0);
-  opacity: 0;
-  background: white;
-  cursor: inherit;
-  display: block;
+  pointer-events: none;
 }
 .user-profile-picture {
   min-height: 150px;
   max-height: 150px;
 }
 .cropArea {
-    background: #E4E4E4;
-    width: 300px;
-    height: 300px;
+  background: #E4E4E4;
+  width: 300px;
+  height: 300px;
 }
-
-.social {
-   -webkit-transition-duration: 0.4s;
-   -moz-transition-duration: 0.4s;
-   -o-transition-duration: 0.4s;
-   transition-duration: 0.4s;
+.social-button {
+  -webkit-transition-duration: 0.4s;
+  -moz-transition-duration: 0.4s;
+  -o-transition-duration: 0.4s;
+  transition-duration: 0.4s;
+}
+.social-button:hover {
+  opacity: 0.65;
 }
-
-.social:hover {
-    opacity: 0.65;
-}

modules/users/client/views/authentication/authentication.client.view.html

@@ -1,14 +1,12 @@
 <section class="row">
-  <h3 class="col-xs-12 text-center">Sign in using your social accounts</h3>
-  <div class="row col-xs-12 col-md-6 text-center">
-    <div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/facebook')" ng-src="/modules/users/client/img/buttons/facebook.png"></a></div>
-    <div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/twitter')" ng-src="/modules/users/client/img/buttons/twitter.png"></a></div>
-    <div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/google')" ng-src="/modules/users/client/img/buttons/google.png"></a></div>
-  </div>
-  <div class="row col-xs-12 col-md-6 text-center">
-    <div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/linkedin')" ng-src="/modules/users/client/img/buttons/linkedin.png"></a></div>
-    <div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/github')" ng-src="/modules/users/client/img/buttons/github.png"></a></div>
-    <div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/paypal')"  ng-src="/modules/users/client/img/buttons/paypal.png"></a></div>
+  <h3 class="col-md-12 text-center">Sign in using your social accounts</h3>
+  <div class="col-md-12 text-center">
+    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/facebook')" ng-src="/modules/users/client/img/buttons/facebook.png"></a></div>
+    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/twitter')" ng-src="/modules/users/client/img/buttons/twitter.png"></a></div>
+    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/google')" ng-src="/modules/users/client/img/buttons/google.png"></a></div>
+    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/linkedin')" ng-src="/modules/users/client/img/buttons/linkedin.png"></a></div>
+    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/github')" ng-src="/modules/users/client/img/buttons/github.png"></a></div>
+    <div class="social-account-container social-button"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/paypal')"  ng-src="/modules/users/client/img/buttons/paypal.png"></a></div>
   </div>
   <div ui-view></div>
 </section>

modules/users/client/views/authentication/signin.client.view.html

@@ -25,6 +25,9 @@
         <div class="text-center forgot-password">
           <a ui-sref="password.forgot">Forgot your password?</a>
         </div>
+        <p> 
+          &nbsp;
+        </p>
         <uib-alert type="danger" ng-show="vm.error" class="text-center text-danger">
           <span ng-bind="vm.error"></span>
         </uib-alert>

modules/users/client/views/settings/manage-social-accounts.client.view.html

@@ -8,47 +8,59 @@
     </div>
     <div ng-repeat="(providerName, providerData) in vm.user.additionalProvidersData" class="social-account-container">
       <img ng-src="/modules/users/client/img/buttons/{{providerName}}.png">
-      <a class="btn btn-danger btn-remove-account" ng-click="vm.removeUserSocialAccount(providerName)">
+      <a class="btn btn-danger btn-add-remove-account" ng-click="vm.removeUserSocialAccount(providerName)">
         <i class="glyphicon glyphicon-trash"></i>
       </a>
     </div>
   </div>
-  <h3 class="col-md-12 text-center" ng-show="vm.hasConnectedAdditionalSocialAccounts()">Unconnected social accounts:</h3>
+  <h3 class="col-md-12 text-center" ng-show="!vm.hasConnectedAdditionalSocialAccounts()">Unconnected social accounts:</h3>
   <div class="col-md-12 text-center">
     <div class="social-account-container" ng-hide="vm.isConnectedSocialAccount('facebook')">
-      <img ng-src="/modules/users/client/img/buttons/facebook.png">
-      <a class="btn btn-success btn-remove-account" href="/api/auth/facebook" target="_self">
-        <i class="glyphicon glyphicon-plus"></i>
+      <a href="/api/auth/facebook" target="_self">
+        <img class="social-button" ng-src="/modules/users/client/img/buttons/facebook.png">
+        <span class="btn btn-success btn-add-remove-account">
+          <i class="glyphicon glyphicon-plus"></i>
+        </span>
       </a>
     </div>
     <div class="social-account-container" ng-hide="vm.isConnectedSocialAccount('twitter')">
-      <img ng-src="/modules/users/client/img/buttons/twitter.png">
-      <a class="btn btn-success btn-remove-account" href="/api/auth/twitter" target="_self">
-        <i class="glyphicon glyphicon-plus"></i>
+      <a href="/api/auth/twitter" target="_self">
+        <img class="social-button" ng-src="/modules/users/client/img/buttons/twitter.png">
+        <span class="btn btn-success btn-add-remove-account">
+          <i class="glyphicon glyphicon-plus"></i>
+        </span>
       </a>
     </div>
     <div class="social-account-container" ng-hide="vm.isConnectedSocialAccount('google')">
-      <img ng-src="/modules/users/client/img/buttons/google.png">
-      <a class="btn btn-success btn-remove-account" href="/api/auth/google" target="_self">
-        <i class="glyphicon glyphicon-plus"></i>
+      <a href="/api/auth/google" target="_self">
+        <img class="social-button" ng-src="/modules/users/client/img/buttons/google.png">
+        <span class="btn btn-success btn-add-remove-account">
+          <i class="glyphicon glyphicon-plus"></i>
+        </span>
       </a>
     </div>
     <div class="social-account-container" ng-hide="vm.isConnectedSocialAccount('linkedin')">
-      <img ng-src="/modules/users/client/img/buttons/linkedin.png">
-      <a class="btn btn-success btn-remove-account" href="/api/auth/linkedin" target="_self">
-        <i class="glyphicon glyphicon-plus"></i>
+      <a href="/api/auth/linkedin" target="_self">
+        <img class="social-button" ng-src="/modules/users/client/img/buttons/linkedin.png">
+        <span class="btn btn-success btn-add-remove-account">
+          <i class="glyphicon glyphicon-plus"></i>
+        </span>
       </a>
     </div>
     <div class="social-account-container" ng-hide="vm.isConnectedSocialAccount('github')">
-      <img ng-src="/modules/users/client/img/buttons/github.png">
-      <a class="btn btn-success btn-remove-account" href="/api/auth/github" target="_self">
-        <i class="glyphicon glyphicon-plus"></i>
+      <a href="/api/auth/github" target="_self">
+        <img class="social-button" ng-src="/modules/users/client/img/buttons/github.png">
+        <span class="btn btn-success btn-add-remove-account">
+          <i class="glyphicon glyphicon-plus"></i>
+        </span>
       </a>
     </div>
     <div class="social-account-container" ng-hide="vm.isConnectedSocialAccount('paypal')">
-      <img ng-src="/modules/users/client/img/buttons/paypal.png">
-      <a class="btn btn-success btn-remove-account" href="/api/auth/paypal" target="_self">
-        <i class="glyphicon glyphicon-plus"></i>
+      <a href="/api/auth/paypal" target="_self">
+        <img class="social-button" ng-src="/modules/users/client/img/buttons/paypal.png">
+        <span class="btn btn-success btn-add-remove-account">
+          <i class="glyphicon glyphicon-plus"></i>
+        </span>
       </a>
     </div>
   </div>