libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 Packages Activity Actions

Fixes KEYCLOAK-7384 - Linked Accounts HTML Update

Browse source 
This PR is to provide HTML and CSS code
JIRA task: https://issues.jboss.org/browse/KEYCLOAK-7384
This commit is contained in:
zhutaoredhat 2018-06-20 17:19:12 +08:00 committed by Stan Silvert
parent 63a6ba53df
commit 1277f8bb3b
3 changed files with 159 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
themes/src/main/resources/theme/base/account/messages/messages_en.properties
View file

@ -5,7 +5,7 @@ doRemove=Remove
doAdd=Add
doSignOut=Sign Out
doLogIn=Log In
doLink=Link
editAccountHtmlTitle=Edit Account
@ -254,3 +254,13 @@ allApps=All applications
internalApps=Internal applications
thirdpartyApps=Third-Party applications
appResults=Results
# Linked account
authorizedProvider=Authorized Provider
authorizedProviderMessage=Authorized Providers linked with your account
identityProvider=Identity Provider
identityProviderMessage=To link your account with identity providers you have configured
socialLogin=Socail Login
userDefined=User Defined
removeAccess=Remove Access
removeAccessMessage=You will need to grant access again, if you want to use this app account.

125
themes/src/main/resources/theme/keycloak-preview/account/resources/app/content/linked-accounts-page/linked-accounts-page.component.html
View file

@ -1 +1,124 @@
<h1>Placeholder for Linked Accounts Page (formerly known as Federated Identity)</h1>
<div class="page-header">
<h1>{{'linkedAccountsHtmlTitle' | translate}}</h1>
</div>
<div class="col-sm-12 card-pf card-linked-account">
<div class="card-pf-body row">
<div class="col-md-3">
<div class="card-pf-subtitle">
{{'authorizedProvider' | translate}}
</div>
<div class="introMessage">
<p>{{'authorizedProviderMessage' | translate}}</p>
</div>
</div>
<div class="col-md-9">
<div class="list-group list-view-pf list-view-pf-view">
<div class="list-group-item">
<div class="list-view-pf-actions">
<a href="#" data-toggle="modal" data-target="#myModal">{{'doRemove' | translate}}</a>
</div>
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="fa fa-google list-view-pf-icon-sm"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-heading">
Google
</div>
<div class="list-group-item-text">
<span class="label label-primary">{{'socialLogin' | translate}}</span>
</div>
</div>
<div class="list-view-pf-additional-info">
<span class="fa fa-user"> </span> zhutaoredhat
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12 card-pf card-linked-account">
<div class="card-pf-body row">
<div class="col-md-3">
<div class="card-pf-subtitle">
{{'identityProvider' | translate}}
</div>
<div class="introMessage">
<p>{{'identityProviderMessage' | translate}}</p>
</div>
</div>
<div class="col-md-9">
<div class="list-group list-view-pf list-view-pf-view ">
<div class="list-group-item">
<div class="list-view-pf-actions">
<a href="#">{{'doLink' | translate}}</a>
</div>
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="fa fa-facebook list-view-pf-icon-sm"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-heading">
Facebook
</div>
<div class="list-group-item-text">
<span class="label label-primary">{{'socialLogin' | translate}}</span>
</div>
</div>
<div class="list-view-pf-additional-info">
</div>
</div>
</div>
</div>
<div class="list-group-item">
<div class="list-view-pf-actions">
<a href="#">{{'doLink' | translate}}</a>
</div>
<div class="list-view-pf-main-info">
<div class="list-view-pf-left">
<span class="fa fa-github list-view-pf-icon-sm"></span>
</div>
<div class="list-view-pf-body">
<div class="list-view-pf-description">
<div class="list-group-item-heading">
Github
</div>
<div class="list-group-item-text">
<span class="label label-primary">{{'socialLogin' | translate}}</span>
</div>
</div>
<div class="list-view-pf-additional-info">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">{{'removeAccess' | translate}}</h4>
</div>
<div class="modal-body">
{{'removeAccessMessage' | translate}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{{'doCancel' | translate}}</button>
<button type="button" class="btn btn-primary">{{'doRemove' | translate}}</button>
</div>
</div>
</div>
</div>
<!-- End Modal -->

24
themes/src/main/resources/theme/keycloak-preview/account/resources/styles.css
View file

@ -307,11 +307,35 @@ p.description {
position: absolute;
right: 10px;
}
/* Linked Style */
.list-view-pf-additional-info .fa-user {
margin-right: 5px;
}
.card-linked-account .list-view-pf .list-group-item-heading {
flex: 1 0 calc(40% - 20px);
}
.card-linked-account .list-view-pf-additional-info {
width: 10%；
}
.card-linked-account .list-view-pf .list-group-item-text {
width: calc(45% - 40px);
}
@media (max-width: 767px) {
.card-pf-application h2 {
margin-top: -10px;
}
.card-linked-account .card-pf-body {
padding-left: 0;
padding-right: 0;
}
.card-linked-account .list-group-item {
padding: 10px 0;
}
.card-linked-account .list-view-pf-additional-info {
width: 100%;
margin-top: 20px;
}
.card-pf-application h2 a {
text-decoration: none;
}