Stop Hard Coding Admin (hyperledger-archives#2422)

Added section on deploy to choose the network administrator credentials
Won't show new section if using web browser or single line install

contributes to hyperledger/composer#2276

Signed-off-by: Caroline Church <caroline.church@uk.ibm.com>

packages/composer-playground/src/app/common/credentials/credentials.component.html

@@ -0,0 +1,99 @@
+<div class="create-route" fileDragDrop (fileDragDropFileAccepted)="fileAccepted($event)"
+     (fileDragDropFileRejected)="fileRejected($event)"
+     (fileDragDropDragOver)="fileDetected($event)" (fileDragDropDragLeave)="fileLeft($event)"
+     [maxFileSize]="maxFileSize" [supportedFileTypes]="supportedFileTypes">
+    <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>
+<form #credentialsForm="ngForm" id="credentials-form">
+    <div *ngIf="useCerts" class="noCerts">
+        <table class="no-shadow">
+            <colgroup>
+                <col span="1" style="width: 20%;">
+                <col span="1" style="width: 80%;">
+            </colgroup>
+            <tr>
+                <th>
+                    <label for="publicKey"><h3>Certificate</h3></label>
+                    <file-importer (fileAccepted)="fileAccepted($event)"
+                                   (fileRejected)="fileRejected($event)" [expandInput]="expandInput"
+                                   [maxFileSize]="maxFileSize" [supportedFileTypes]="supportedFileTypes"
+                                   [ngClass]="{'expandFile': expandInput}"
+                                   [svgName]="'#icon-CTO_JS_Upload'"></file-importer>
+                </th>
+                <td>
+            <textarea required name="addedPublicCertificate" id="publicKey" rows="6"
+                      placeholder="Paste your certificate here..."
+                      [(ngModel)]="addedPublicCertificate"></textarea>
+                </td>
+            </tr>
+            <tr>
+
+                <th>
+                    <label for="privateKey"><h3>Private Key</h3></label>
+                    <file-importer (fileAccepted)="fileAccepted($event)"
+                                   (fileRejected)="fileRejected($event)" [expandInput]="expandInput"
+                                   [maxFileSize]="maxFileSize" [supportedFileTypes]="supportedFileTypes"
+                                   [ngClass]="{'expandFile': expandInput}"
+                                   [svgName]="'#icon-CTO_JS_Upload'"></file-importer>
+                </th>
+                <td>
+                <textarea required name="addedPrivateCertificate" id="privateKey" rows="6"
+                          placeholder="Paste your private key here..."
+                          [(ngModel)]="addedPrivateCertificate"></textarea>
+                </td>
+            </tr>
+            <tr>
+                <th>
+                    <label for="name"><h3>Name on the business network card</h3></label>
+                </th>
+                <td>
+                    <input required type="text" [(ngModel)]="userId" id="name" name="userId" autocomplete="off">
+                </td>
+            </tr>
+        </table>
+    </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>
+        <table class="no-shadow">
+            <colgroup>
+                <col span="1" style="width: 20%;">
+                <col span="1" style="width: 80%;">
+            </colgroup>
+            <tr>
+                <th>
+                    <label for="userId"><h3>Enrollment ID</h3></label>
+                </th>
+                <td>
+                    <input required type="text" [(ngModel)]="userId" id="userId" name="userId" autocomplete="off">
+                </td>
+            </tr>
+            <tr>
+                <th>
+                    <label for="userSecret"><h3>Enrollment Secret</h3></label>
+                </th>
+                <td>
+                    <input required type="password" [(ngModel)]="userSecret" id="userSecret" name="userSecret"
+                           autocomplete="off">
+                </td>
+            </tr>
+        </table>
+    </div>
+</form>
+
+
+

packages/composer-playground/src/app/common/credentials/credentials.component.scss

@@ -0,0 +1,96 @@
+@import '../../../assets/styles/base/colors';
+@import '../../../assets/styles/base/variables';
+
+credentials {
+    display: flex;
+    flex-direction: column;
+
+    .create-route {
+        display: block !important;
+        margin-right: $space-xlarge;
+        border-bottom: $border-width-small solid $fourth-highlight;
+        margin-bottom: $space-large;
+
+        p {
+            color: $primary-text;
+            margin-top: 0;
+            margin-bottom: 0;
+            font-weight: 300;
+        }
+
+        .file-types-list {
+            display: flex;
+            flex-direction: row;
+            margin-top: 0;
+            margin-bottom: $space-mlarge;
+            flex-wrap: wrap;
+            position: relative;
+
+            .file-types-list-item {
+                background-color: $white;
+                padding: $space-medium;
+                max-width: 25rem;
+                min-width: 22rem;
+
+                .description {
+                    color: $primary-text;
+                    margin-left: $space-large;
+                }
+
+                label.radio-label {
+                    font-weight: 600;
+                }
+            }
+        }
+    }
+
+    .noCerts {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: $space-large;
+
+        .option {
+            display: flex;
+            flex-direction: row;
+            align-content: center;
+            margin-top: $space-medium;
+        }
+
+        p {
+            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;
+        }
+    }
+
+    label {
+        display: flex;
+        align-self: center;
+        min-width: 10rem;
+    }
+
+    input[type='text'], input[type='password'] {
+        display: flex;
+        align-self: center;
+        color: $primary-text;
+        margin-bottom: 0;
+    }
+
+    file-importer {
+        margin-top: $space-medium;
+
+        span {
+            color: $secondary-text;
+        }
+    }
+}