Skip to content
This repository has been archived by the owner on Aug 30, 2021. It is now read-only.

feat(users) Improved social login buttons UI #1471

Merged
merged 1 commit into from
Sep 3, 2016
Merged

feat(users) Improved social login buttons UI #1471

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 13 additions & 32 deletions modules/users/client/css/users.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-button {
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
}

.social {
-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;
}
18 changes: 8 additions & 10 deletions modules/users/client/views/authentication/authentication.client.view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 3 additions & 0 deletions modules/users/client/views/authentication/signin.client.view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ <h3 class="col-xs-12 text-center">Or with your account</h3>
<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>
Expand Down
52 changes: 32 additions & 20 deletions modules/users/client/views/settings/manage-social-accounts.client.view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,47 +8,59 @@ <h3 class="col-md-12 text-center" ng-show="vm.hasConnectedAdditionalSocialAccoun
</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>
Expand Down