Skip to content

Commit

Permalink
Add roles when creating identities (hyperledger-archives#2112)
Browse files Browse the repository at this point in the history
Added the ability to add roles when creating an identity card
Added styles for checkbox

contributes to hyperledger/composer#2032
  • Loading branch information
cazfletch authored Sep 13, 2017
1 parent 590ea77 commit 516ddbc
Show file tree
Hide file tree
Showing 16 changed files with 479 additions and 140 deletions.
6 changes: 3 additions & 3 deletions packages/composer-playground/.istanbul.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ instrumentation:
- "docker/*"
check:
global:
statements: 98
branches: 94
functions: 96
statements: 99
branches: 95
functions: 98
lines: 99
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ describe('IdentityIssuedComponent', () => {
mockCard.getConnectionProfile.should.have.been.called;
mockCard.getBusinessNetworkName.should.have.been.called;

mockIdentityCard.createIdentityCard.should.have.been.calledWith('myId', 'myNetwork', 'myId', 'mySecret', {name: 'myProfile'});
mockIdentityCard.createIdentityCard.should.have.been.calledWith('myId', 'myNetwork', 'myId', 'mySecret', {name: 'myProfile'}, sinon.match.any, []);

mockActiveModal.close.should.have.been.called;
}));
Expand All @@ -79,7 +79,7 @@ describe('IdentityIssuedComponent', () => {
mockCard.getConnectionProfile.should.have.been.called;
mockCard.getBusinessNetworkName.should.have.been.called;

mockIdentityCard.createIdentityCard.should.have.been.calledWith('myId', 'myNetwork', 'myId', 'mySecret', {name: 'myProfile'});
mockIdentityCard.createIdentityCard.should.have.been.calledWith('myId', 'myNetwork', 'myId', 'mySecret', {name: 'myProfile'}, sinon.match.any, []);
mockActiveModal.dismiss.should.have.been.called;
}));
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export class IdentityIssuedComponent {
let businessNetworkName = this.identityCardService.getCurrentIdentityCard().getBusinessNetworkName();
let credentials = this.identityCardService.getCurrentIdentityCard();

return this.identityCardService.createIdentityCard(this.userID, businessNetworkName, this.userID, this.userSecret, connectionProfile, credentials)
return this.identityCardService.createIdentityCard(this.userID, businessNetworkName, this.userID, this.userSecret, connectionProfile, credentials, [])
.then(() => {
this.activeModal.close();
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,12 @@
.profiles {
display: flex;
flex-direction: row;
margin-left: $space-medium;
padding-left: $space-medium;

&.section {
border-bottom: 1px solid $fourth-highlight;
margin-bottom: $space-medium;
}

.description {
margin-right: $space-xlarge;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,87 +1,133 @@
<section class="edit-card-credentials">
<h1>Create ID Card</h1>
<section class="profiles">
<div class="description upper"><b>Provide security credentials</b></div>
<div class="holding-div">
<div class="create-route">
<p>You must provide one of two types of information to create an ID card:</p>
<div class="file-types-list">
<div class="file-types-list-item">
<input type="radio" id="useCert" name="file-type" [checked]="true"
(change)="useCertificates(true)">
<label class="radio-label" for="useCert" style="color:grey"><h3>Certificates</h3></label>
<div class="description" style="color:grey"><p>Required here are certificate and private key files.</p></div>
</div>
<div class="file-types-list-item">
<input type="radio" id="noCert" name="file-type"
(change)="useCertificates(false)">
<label class="radio-label" for="noCert"><h3>ID and Secret</h3></label>
<div class="description"><p>These can be created when accessing a business network.</p></div>
<section class="profiles section">
<div class="description upper"><b>Provide security credentials</b></div>
<div class="holding-div">
<div class="create-route">
<p>You must provide one of two types of information to create an ID card:</p>
<div class="file-types-list">
<div class="file-types-list-item">
<input type="radio" id="useCert" name="file-type" [checked]="true"
(change)="useCertificates(true)">
<label class="radio-label" for="useCert"><h3>Certificates</h3></label>
<div class="description"><p>Required here are certificate and private key
files.</p></div>
</div>
<div class="file-types-list-item">
<input type="radio" id="noCert" name="file-type"
(change)="useCertificates(false)">
<label class="radio-label" for="noCert"><h3>ID and Secret</h3></label>
<div class="description"><p>These can be created when accessing a business network.</p></div>
</div>
</div>
</div>
<div *ngIf="useCerts" class="noCerts">
<form #addIdentityForm="ngForm" id="add-identity-form" (ngSubmit)="addIdentityCard()">
<div class="option key-field">
<label for="publicKey"><h3>Certificate</h3></label>
<textarea required name="addedPublicCertificate" id="publicKey" rows="6"
placeholder="Paste your certificate here..."
[(ngModel)]="addedPublicCertificate"></textarea>
</div>
<div class="option key-field">
<label for="privateKey"><h3>Private Key</h3></label>
<textarea required name="addedPrivateCertificate" id="privateKey" rows="6"
placeholder="Paste your private key here..."
[(ngModel)]="addedPrivateCertificate"></textarea>
</div>
<div class="option">
<label for="name"><h3>Name this ID Card</h3></label>
<input required type="text" [(ngModel)]="userId" id="name" name="userId" autocomplete="off">
</div>
</form>
</div>
<div *ngIf="!useCerts" class="noCerts">
<p>An Enrollment ID and Secret must be created by someone who already has access to the Business Network
you are connecting to.</p>
<form #idSecretForm="ngForm" (submit)="submitCard()" (keydown)="submitCard($event)">
<div class="option">
<label for="userId"><h3>Enrollment ID</h3></label>
<input required type="text" [(ngModel)]="userId" id="userId" name="userId" autocomplete="off">
</div>
<div class="option">
<label for="userSecret"><h3>Enrollment Secret</h3></label>
<input required type="password" [(ngModel)]="userSecret" id="userSecret" name="userSecret"
autocomplete="off">
</div>
</form>
</div>
</div>
<div *ngIf="useCerts" class="noCerts">
<form #addIdentityForm="ngForm" id="add-identity-form" (ngSubmit)="addIdentityCard()">
<div class="option key-field">
<label for="publicKey"><h3>Certificate</h3></label>
<textarea required name="addedPublicCertificate" id="publicKey" rows="6" placeholder="Paste your certificate here..." [(ngModel)]="addedPublicCertificate"></textarea>
</div>
<div class="option key-field">
<label for="privateKey"><h3>Private Key</h3></label>
<textarea required name="addedPrivateCertificate" id="privateKey" rows="6" placeholder="Paste your private key here..." [(ngModel)]="addedPrivateCertificate"></textarea>
</div>
<div class="option">
<label for="name"><h3>Name this ID Card</h3></label>
<input required type="text" [(ngModel)]="userId" id="name" name="userId" autocomplete="off">
</div>
</form>
</div>
<div *ngIf="!useCerts" class="noCerts">
<p>An Enrollment ID and Secret must be created by someone who already has access to the Business Network you are connecting to.</p>
<form #idSecretForm="ngForm" (submit)="submitCard()" (keydown)="submitCard($event)">
<div class="option">
<label for="userId"><h3>Enrollment ID</h3></label>
<input required type="text" [(ngModel)]="userId" id="userId" name="userId" autocomplete="off">
</section>
<section class="profiles">
<div class="description upper"><b>Card Type</b></div>
<div class="holding-div">
<div class="create-route">
<p>What type of card do you want to create?</p>
<div class="file-types-list">
<div class="file-types-list-item">
<input type="radio" id="participantCard" name="participant-type" [checked]="true"
(change)="useParticipantCardType(true)">
<label class="radio-label" for="participantCard"><h3>Participant Card</h3></label>
<div class="description"><p>An ID card that is bound to a participant</p></div>
</div>
<div class="file-types-list-item">
<input type="radio" id="adminCard" name="participant-type"
(change)="useParticipantCardType(false)">
<label class="radio-label" for="adminCard"><h3>Admin Card</h3></label>
<div class="description"><p>An ID card that is not bound to a participant.</p></div>
</div>
</div>
<div class="option">
<label for="userSecret"><h3>Enrollment Secret</h3></label>
<input required type="password" [(ngModel)]="userSecret" id="userSecret" name="userSecret" autocomplete="off">
</div>

<div *ngIf="useParticipantCard" class="noCerts">
<p>The name of the Business Network to which you are going to connect.</p>
<form #busNetForm="ngForm" (submit)="submitCard()" (keydown)="submitCard($event)">
<div class="option">
<label for="busNetName"><h3>Name of Business Network</h3></label>
<input type="text" [(ngModel)]="busNetName" id="busNetName" name="busNetName"
autocomplete="off">
</div>
</form>
</div>
<div *ngIf="!useParticipantCard" class="roles">
<p>Roles can be added to an identity for installing and starting a business network.</p>
<div class="role-list">
<div class="option">
<input type="checkbox" [(ngModel)]="peerAdmin" id="peerAdmin" name="peerAdmin"
autocomplete="off">
<label for="peerAdmin" class="checkbox-label"><h3>Peer Admin</h3></label>
<div class="description"><p>A role that has permission to install a business network</p>
</div>
</div>
<div class="option">
<input type="checkbox" [(ngModel)]="channelAdmin" id="channelAdmin" name="channelAdmin"
autocomplete="off">
<label for="channelAdmin" class="checkbox-label"><h3>Channel Admin</h3></label>
<div class="description"><p>A role that has permission to start a business network</p>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
<section class="profiles">
<div class="description upper"><b>business network name</b></div>
<div class="holding-div">
<div class="noCerts">
<p>The name of the Business Network to which you are going to connect should be specified when using supplied credentials.</p>
<form #busNetForm="ngForm" (submit)="submitCard()" (keydown)="submitCard($event)">
<div class="option">
<label for="busNetName"><h3>Name of Business Network</h3></label>
<input required type="text" [(ngModel)]="busNetName" id="busNetName" name="busNetName" autocomplete="off">
</section>
<footer>
<button type="button" class="secondary" (click)="close();">
<span>Cancel</span>
</button>
<button type="button" class="primary" [disabled]="!validContents() || addInProgress"
(click)="addIdentityCard();">
<div *ngIf="!addInProgress">
<span>Create</span>
</div>
<div *ngIf="addInProgress" class="ibm-spinner-indeterminate small loop">
<div class="loader">
<svg class="circular" viewBox="25 25 50 50">
<circle class="circle-path" cx="50" cy="50" r="20"/>
</svg>
</div>
</form>
</div>
</div>
</section>
<footer>
<button type="button" class="secondary" (click)="close();">
<span>Cancel</span>
</button>
<button type="button" class="primary" [disabled]="!validContents() || addInProgress" (click)="addIdentityCard();">
<div *ngIf="!addInProgress">
<span>Create</span>
</div>
<div *ngIf="addInProgress" class="ibm-spinner-indeterminate small loop">
<div class="loader">
<svg class="circular" viewBox="25 25 50 50">
<circle class="circle-path" cx="50" cy="50" r="20"/>
</svg>
</div>
</div>
</button>
</footer>
</div>
</button>
</footer>
</section>


Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@

.edit-card-credentials {

// Take main styling from create
@extend .create-card;
// Take main styling from create
@extend .create-card;

.profiles {
.create-route {
.create-route {
margin-right: $space-xlarge;
margin-bottom: $space-mlarge;
border-bottom: $border-width-small solid $fourth-highlight;
}
}
}

.noCerts {
Expand All @@ -29,19 +29,19 @@
}

p {
color:$primary-text;
line-height:19px;
margin-top: 0;
margin-bottom: 0;
font-weight: 300;
}
color: $primary-text;
line-height: 19px;
margin-top: 0;
margin-bottom: 0;
font-weight: 300;
}
}

.key-field {
label {
align-self: auto;
display: flex;
flex-direction: column;
align-self: auto;
display: flex;
flex-direction: column;
}
}

Expand All @@ -54,15 +54,41 @@
input[type='text'], input[type='password'] {
display: flex;
align-self: center;
color:$primary-text;
color: $primary-text;
margin-bottom: 0;
}

.roles {
margin-bottom: $space-large;

p {
color: $primary-text;
margin-top: 0;
margin-bottom: 0;
font-weight: 300;
}

.role-list {
display: flex;
flex-wrap: wrap;
margin-top: $space-large;
position: relative;

.description {
margin-left: $space-large;
}

.option {
margin-bottom: $space-large;
}
}
}

footer {
.circle-path {
stroke: $white;
}
.circle-path {
stroke: $white;
}

width: 100%;
width: 100%;
}
}
}
Loading

0 comments on commit 516ddbc

Please sign in to comment.