Merge pull request #2 from shivamriky/ui_modifications

Enhance the UI for new tenant request form
diff --git a/custos_portal/custos_portal/apps/auth/migrations/0003_password_reset_request.py b/custos_portal/custos_portal/apps/auth/migrations/0003_password_reset_request.py
index b1f0242..7f0278c 100644
--- a/custos_portal/custos_portal/apps/auth/migrations/0003_password_reset_request.py
+++ b/custos_portal/custos_portal/apps/auth/migrations/0003_password_reset_request.py
@@ -46,15 +46,6 @@
     ]
 
     operations = [
-        migrations.CreateModel(
-            name='PasswordResetRequest',
-            fields=[
-                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
-                ('username', models.CharField(max_length=64)),
-                ('reset_code', models.CharField(default=uuid.uuid4, max_length=36, unique=True)),
-                ('created_date', models.DateTimeField(auto_now_add=True)),
-            ],
-        ),
         migrations.AlterField(
             model_name='emailtemplate',
             name='template_type',
diff --git a/custos_portal/custos_portal/static/common/dist/webpack-stats.json b/custos_portal/custos_portal/static/common/dist/webpack-stats.json
index ecbf6b2..dfe6951 100644
--- a/custos_portal/custos_portal/static/common/dist/webpack-stats.json
+++ b/custos_portal/custos_portal/static/common/dist/webpack-stats.json
@@ -1 +1 @@
-{"status":"done","publicPath":"http://localhost:9000/static/common/dist/","chunks":{"admin-edit-request":[{"name":"admin-edit-request.js","publicPath":"http://localhost:9000/static/common/dist/admin-edit-request.js","path":"/home/shivam/Programming/custos_UI/custos_portal/custos_portal/static/common/dist/admin-edit-request.js"},{"name":"admin-edit-request.js.map","publicPath":"http://localhost:9000/static/common/dist/admin-edit-request.js.map","path":"/home/shivam/Programming/custos_UI/custos_portal/custos_portal/static/common/dist/admin-edit-request.js.map"}],"admin-list-requests":[{"name":"admin-list-requests.js","publicPath":"http://localhost:9000/static/common/dist/admin-list-requests.js","path":"/home/shivam/Programming/custos_UI/custos_portal/custos_portal/static/common/dist/admin-list-requests.js"},{"name":"admin-list-requests.js.map","publicPath":"http://localhost:9000/static/common/dist/admin-list-requests.js.map","path":"/home/shivam/Programming/custos_UI/custos_portal/custos_portal/static/common/dist/admin-list-requests.js.map"}],"admin-view-request":[{"name":"admin-view-request.js","publicPath":"http://localhost:9000/static/common/dist/admin-view-request.js","path":"/home/shivam/Programming/custos_UI/custos_portal/custos_portal/static/common/dist/admin-view-request.js"},{"name":"admin-view-request.js.map","publicPath":"http://localhost:9000/static/common/dist/admin-view-request.js.map","path":"/home/shivam/Programming/custos_UI/custos_portal/custos_portal/static/common/dist/admin-view-request.js.map"}],"app":[{"name":"app.js","publicPath":"http://localhost:9000/static/common/dist/app.js","path":"/home/shivam/Programming/custos_UI/custos_portal/custos_portal/static/common/dist/app.js"},{"name":"app.js.map","publicPath":"http://localhost:9000/static/common/dist/app.js.map","path":"/home/shivam/Programming/custos_UI/custos_portal/custos_portal/static/common/dist/app.js.map"}],"chunk-vendors":[{"name":"chunk-vendors.js","publicPath":"http://localhost:9000/static/common/dist/chunk-vendors.js","path":"/home/shivam/Programming/custos_UI/custos_portal/custos_portal/static/common/dist/chunk-vendors.js"},{"name":"chunk-vendors.js.map","publicPath":"http://localhost:9000/static/common/dist/chunk-vendors.js.map","path":"/home/shivam/Programming/custos_UI/custos_portal/custos_portal/static/common/dist/chunk-vendors.js.map"}],"cms":[{"name":"cms.js","publicPath":"http://localhost:9000/static/common/dist/cms.js","path":"/home/shivam/Programming/custos_UI/custos_portal/custos_portal/static/common/dist/cms.js"},{"name":"cms.js.map","publicPath":"http://localhost:9000/static/common/dist/cms.js.map","path":"/home/shivam/Programming/custos_UI/custos_portal/custos_portal/static/common/dist/cms.js.map"}],"list-requests":[{"name":"list-requests.js","publicPath":"http://localhost:9000/static/common/dist/list-requests.js","path":"/home/shivam/Programming/custos_UI/custos_portal/custos_portal/static/common/dist/list-requests.js"},{"name":"list-requests.js.map","publicPath":"http://localhost:9000/static/common/dist/list-requests.js.map","path":"/home/shivam/Programming/custos_UI/custos_portal/custos_portal/static/common/dist/list-requests.js.map"}],"request-new-tenant":[{"name":"request-new-tenant.js","publicPath":"http://localhost:9000/static/common/dist/request-new-tenant.js","path":"/home/shivam/Programming/custos_UI/custos_portal/custos_portal/static/common/dist/request-new-tenant.js"},{"name":"request-new-tenant.js.map","publicPath":"http://localhost:9000/static/common/dist/request-new-tenant.js.map","path":"/home/shivam/Programming/custos_UI/custos_portal/custos_portal/static/common/dist/request-new-tenant.js.map"}],"view-request":[{"name":"view-request.js","publicPath":"http://localhost:9000/static/common/dist/view-request.js","path":"/home/shivam/Programming/custos_UI/custos_portal/custos_portal/static/common/dist/view-request.js"},{"name":"view-request.js.map","publicPath":"http://localhost:9000/static/common/dist/view-request.js.map","path":"/home/shivam/Programming/custos_UI/custos_portal/custos_portal/static/common/dist/view-request.js.map"}]}}
\ No newline at end of file
+{"status":"done","publicPath":"http://localhost:9000/static/common/dist/","chunks":{"admin-edit-request":[{"name":"admin-edit-request.js","publicPath":"http://localhost:9000/static/common/dist/admin-edit-request.js","path":"/home/shivam/Programming/airavata-custos-portal/custos_portal/custos_portal/static/common/dist/admin-edit-request.js"},{"name":"admin-edit-request.js.map","publicPath":"http://localhost:9000/static/common/dist/admin-edit-request.js.map","path":"/home/shivam/Programming/airavata-custos-portal/custos_portal/custos_portal/static/common/dist/admin-edit-request.js.map"}],"admin-list-requests":[{"name":"admin-list-requests.js","publicPath":"http://localhost:9000/static/common/dist/admin-list-requests.js","path":"/home/shivam/Programming/airavata-custos-portal/custos_portal/custos_portal/static/common/dist/admin-list-requests.js"},{"name":"admin-list-requests.js.map","publicPath":"http://localhost:9000/static/common/dist/admin-list-requests.js.map","path":"/home/shivam/Programming/airavata-custos-portal/custos_portal/custos_portal/static/common/dist/admin-list-requests.js.map"}],"admin-view-request":[{"name":"admin-view-request.js","publicPath":"http://localhost:9000/static/common/dist/admin-view-request.js","path":"/home/shivam/Programming/airavata-custos-portal/custos_portal/custos_portal/static/common/dist/admin-view-request.js"},{"name":"admin-view-request.js.map","publicPath":"http://localhost:9000/static/common/dist/admin-view-request.js.map","path":"/home/shivam/Programming/airavata-custos-portal/custos_portal/custos_portal/static/common/dist/admin-view-request.js.map"}],"app":[{"name":"app.js","publicPath":"http://localhost:9000/static/common/dist/app.js","path":"/home/shivam/Programming/airavata-custos-portal/custos_portal/custos_portal/static/common/dist/app.js"},{"name":"app.js.map","publicPath":"http://localhost:9000/static/common/dist/app.js.map","path":"/home/shivam/Programming/airavata-custos-portal/custos_portal/custos_portal/static/common/dist/app.js.map"}],"chunk-vendors":[{"name":"chunk-vendors.js","publicPath":"http://localhost:9000/static/common/dist/chunk-vendors.js","path":"/home/shivam/Programming/airavata-custos-portal/custos_portal/custos_portal/static/common/dist/chunk-vendors.js"},{"name":"chunk-vendors.js.map","publicPath":"http://localhost:9000/static/common/dist/chunk-vendors.js.map","path":"/home/shivam/Programming/airavata-custos-portal/custos_portal/custos_portal/static/common/dist/chunk-vendors.js.map"}],"cms":[{"name":"cms.js","publicPath":"http://localhost:9000/static/common/dist/cms.js","path":"/home/shivam/Programming/airavata-custos-portal/custos_portal/custos_portal/static/common/dist/cms.js"},{"name":"cms.js.map","publicPath":"http://localhost:9000/static/common/dist/cms.js.map","path":"/home/shivam/Programming/airavata-custos-portal/custos_portal/custos_portal/static/common/dist/cms.js.map"}],"list-requests":[{"name":"list-requests.js","publicPath":"http://localhost:9000/static/common/dist/list-requests.js","path":"/home/shivam/Programming/airavata-custos-portal/custos_portal/custos_portal/static/common/dist/list-requests.js"},{"name":"list-requests.js.map","publicPath":"http://localhost:9000/static/common/dist/list-requests.js.map","path":"/home/shivam/Programming/airavata-custos-portal/custos_portal/custos_portal/static/common/dist/list-requests.js.map"}],"request-new-tenant":[{"name":"request-new-tenant.js","publicPath":"http://localhost:9000/static/common/dist/request-new-tenant.js","path":"/home/shivam/Programming/airavata-custos-portal/custos_portal/custos_portal/static/common/dist/request-new-tenant.js"},{"name":"request-new-tenant.js.map","publicPath":"http://localhost:9000/static/common/dist/request-new-tenant.js.map","path":"/home/shivam/Programming/airavata-custos-portal/custos_portal/custos_portal/static/common/dist/request-new-tenant.js.map"}],"view-request":[{"name":"view-request.js","publicPath":"http://localhost:9000/static/common/dist/view-request.js","path":"/home/shivam/Programming/airavata-custos-portal/custos_portal/custos_portal/static/common/dist/view-request.js"},{"name":"view-request.js.map","publicPath":"http://localhost:9000/static/common/dist/view-request.js.map","path":"/home/shivam/Programming/airavata-custos-portal/custos_portal/custos_portal/static/common/dist/view-request.js.map"}]}}
\ No newline at end of file
diff --git a/custos_portal/custos_portal/static/common/js/apps/workspace/RequestNewTenantContainer.vue b/custos_portal/custos_portal/static/common/js/apps/workspace/RequestNewTenantContainer.vue
index 07ecd03..795ca4a 100755
--- a/custos_portal/custos_portal/static/common/js/apps/workspace/RequestNewTenantContainer.vue
+++ b/custos_portal/custos_portal/static/common/js/apps/workspace/RequestNewTenantContainer.vue
@@ -7,288 +7,310 @@
         </div>
         <div>
             <b-form @submit="onSubmit" method="post">
-                <b-form-group
-                        id="fieldset-1"
-                        description=""
-                        label="Client Name"
-                        label-for="client-name"
-                        :invalid-feedback="invalidFeedback"
-                        :valid-feedback="validFeedback"
-                >
-                    <b-form-input
-                            id="client-name"
-                            name="client-name"
-                            v-model="form.client_name"
-                            :state="!$v.form.client_name.$invalid"
-                            trim>
-                    </b-form-input>
-                </b-form-group>
-                <b-form-group
-                        id="fieldset-1"
-                        description=""
-                        label="Requester Email"
-                        label-for="requester-email"
-                        :invalid-feedback="invalidFeedback"
-                        :valid-feedback="validFeedback"
-                >
-                    <b-form-input
-                            id="requester-email"
-                            name="requester-email"
-                            v-model="form.requester_email"
-                            :state="!$v.form.requester_email.$invalid"
-                            type="email"
-                            trim>
-                    </b-form-input>
-                </b-form-group>
-
-                <b-form-group
-                        id="fieldset-1"
-                        description=""
-                        label="Admin Username"
-                        label-for="admin-username"
-                        :invalid-feedback="invalidFeedback"
-                        :valid-feedback="validFeedback"
-                >
-                    <b-form-input
-                            id="admin-username"
-                            name="admin-username"
-                            v-model="form.admin_username"
-                            :state="!$v.form.admin_username.$invalid"
-                            trim>
-                    </b-form-input>
-                </b-form-group>
-                <b-form-row>
-                    <b-col>
-                        <b-form-group
-                                id="fieldset-1"
-                                description=""
-                                label="Admin First Name"
-                                label-for="admin-first-name"
-                                :invalid-feedback="invalidFeedback"
-                                :valid-feedback="validFeedback"
-                        >
-                            <b-form-input
-                                    id="admin-first-name"
-                                    name="admin-first-name"
-                                    v-model="form.admin_first_name"
-                                    :state="!$v.form.admin_first_name.$invalid"
-                                    trim>
-                            </b-form-input>
-                        </b-form-group>
-                    </b-col>
-                    <b-col>
-                        <b-form-group
-                                id="fieldset-1"
-                                description=""
-                                label="Admin Last Name"
-                                label-for="admin-last-name"
-                                :invalid-feedback="invalidFeedback"
-                                :valid-feedback="validFeedback"
-                        >
-                            <b-form-input
-                                    id="admin-last-name"
-                                    name="admin-last-name"
-                                    v-model="form.admin_last_name"
-                                    :state="!$v.form.admin_last_name.$invalid"
-                                    trim>
-                            </b-form-input>
-                        </b-form-group>
-                    </b-col>
-                </b-form-row>
-
-                <b-form-group
-                        id="fieldset-1"
-                        description=""
-                        label="Admin Email"
-                        label-for="admin-email"
-                        :invalid-feedback="invalidFeedback"
-                        :valid-feedback="validFeedback"
-                >
-                    <b-form-input
-                            id="admin-email"
-                            name="admin-email"
-                            v-model="form.admin_email"
-                            type="email"
-                            :state="!$v.form.admin_email.$invalid"
-                            trim>
-                    </b-form-input>
-                </b-form-group>
-
-                <b-form-group
-                        id="fieldset-1"
-                        description=""
-                        label="Admin Password"
-                        label-for="admin-password"
-                        :invalid-feedback="invalidFeedback"
-                        :valid-feedback="validFeedback"
-                >
-                    <b-input type="password"
-                             id="admin-password"
-                             name="admin-password"
-                             aria-describedby="password-help-block"
-                             v-model="form.admin_password"
-                             :state="!$v.form.admin_password.$invalid"
-                             trim></b-input>
-                    <b-form-text id="password-help-block">
-                        Your password must be at least 8 characters long, and must contain letters and numbers, and must
-                        at least one special character.
-                    </b-form-text>
-                </b-form-group>
-
-
-                <b-form-row>
-                    <b-col>
-                        <b-form-group
-                                id="fieldset-1"
-                                description=""
-                                label="Primary contact"
-                                label-for="primary-contact"
-                                :invalid-feedback="invalidFeedback"
-                                :valid-feedback="validFeedback"
-                        >
-                            <b-form-input
-                                    id="primary-contact"
-                                    name="primary-contact"
-                                    v-model="form.primary_contact"
-                                    :state="!$v.form.primary_contact.$invalid"
-                                    type="tel"
-                                    trim>
-                            </b-form-input>
-                        </b-form-group>
-                    </b-col>
-                    <b-col>
-                        <b-form-group
-                                id="fieldset-1"
-                                description=""
-                                label="Secondary Contact"
-                                label-for="secondary-contact"
-                                :invalid-feedback="invalidFeedback"
-                                :valid-feedback="validFeedback"
-                        >
-                            <b-form-input
-                                    id="secondary-contact"
-                                    name="secondary-contact"
-                                    v-model="form.secondary_contact"
-                                    :state="!$v.form.secondary_contact.$invalid"
-                                    trim>
-                            </b-form-input>
-                        </b-form-group>
-                    </b-col>
-                </b-form-row>
-                <div v-for="(redirect_uri, index) in form.redirect_uris">
-                    <b-form-row class="align-items-center">
-                        <b-col>
+                <b-card no-body>
+                    <b-tabs card  v-model="tabIndex">
+                        <b-tab :title-link-class="linkClass(0)" class="w-75" title="User Info">
                             <b-form-group
-                                    id="fieldset-1"
-                                    description=""
-                                    label="Redirect URI"
-                                    label-for="redirect-uri"
                                     :invalid-feedback="invalidFeedback"
                                     :valid-feedback="validFeedback"
+                                    description=""
+                                    id="fieldset-1"
+                                    label="Requester Email"
+                                    label-for="requester-email"
                             >
-                                <b-input-group>
-                                    <b-form-input
-                                            id="redirect-uri"
-                                            name='redirect-uri'
-                                            v-model="form.redirect_uris[index]"
-                                            :state="!$v.form.redirect_uris.$each[index].$invalid"
-                                            type="url"
-                                            trim>
-                                    </b-form-input>
-                                    <b-input-group-append>
-                                        <b-button @click="deleteRedirectUri(index)">Delete URI</b-button>
-                                        <b-button @click="addRedirectUri(index)">Add another URI</b-button>
-
-                                    </b-input-group-append>
-                                </b-input-group>
+                                <b-form-input
+                                        :state="!$v.form.requester_email.$invalid"
+                                        id="requester-email"
+                                        name="requester-email"
+                                        trim
+                                        type="email"
+                                        v-model="form.requester_email">
+                                </b-form-input>
                             </b-form-group>
-                        </b-col>
-                    </b-form-row>
-                </div>
-                <b-form-group label="Scope:">
-                    <b-form-checkbox-group
-                            id="scope"
-                            v-model="form.scope"
-                            :options="scopeOptions"
-                            name="scope"
-                    ></b-form-checkbox-group>
-                </b-form-group>
-                <b-form-group
-                        id="fieldset-1"
-                        description=""
-                        label="Domain"
-                        label-for="domain"
-                        :invalid-feedback="invalidFeedback"
-                        :valid-feedback="validFeedback"
-                >
-                    <b-form-input
-                            id="domain"
-                            v-model="form.domain"
-                            :state="!$v.form.domain.$invalid"
-                            placeholder="idp.htrc.indiana.edu"
-                            trim>
-                    </b-form-input>
-                </b-form-group>
-                <b-form-group
-                        id="fieldset-1"
-                        description=""
-                        label="Client URI"
-                        label-for="client-uri"
-                        :invalid-feedback="invalidFeedback"
-                        :valid-feedback="validFeedback"
-                >
-                    <b-form-input
-                            id="client-uri"
-                            v-model="form.client_uri"
-                            :state="!$v.form.client_uri.$invalid"
-                            trim>
-                    </b-form-input>
-                </b-form-group>
-                <b-form-group
-                        id="fieldset-1"
-                        description=""
-                        label="Logo URI"
-                        label-for="logo-uri"
-                        :invalid-feedback="invalidFeedback"
-                        :valid-feedback="validFeedback"
-                >
-                    <b-form-input
-                            id="logo-uri"
-                            v-model="form.logo_uri"
-                            :state="!$v.form.logo_uri.$invalid"
-                            type="url"
-                            trim>
-                    </b-form-input>
-                </b-form-group>
+                            <b-form-row>
+                                <b-col>
+                                    <b-form-group
+                                            :invalid-feedback="invalidFeedback"
+                                            :valid-feedback="validFeedback"
+                                            description=""
+                                            id="fieldset-1"
+                                            label="Primary contact"
+                                            label-for="primary-contact"
+                                            description="Contact of either the requester or the admin of the gateway"
+                                    >
+                                        <b-form-input
+                                                :state="!$v.form.primary_contact.$invalid"
+                                                id="primary-contact"
+                                                name="primary-contact"
+                                                trim
+                                                type="tel"
+                                                v-model="form.primary_contact">
+                                        </b-form-input>
+                                    </b-form-group>
+                                </b-col>
+                                <b-col>
+                                    <b-form-group
+                                            :invalid-feedback="invalidFeedback"
+                                            :valid-feedback="validFeedback"
+                                            description=""
+                                            id="fieldset-1"
+                                            label="Secondary Contact"
+                                            label-for="secondary-contact"
+                                    >
+                                        <b-form-input
+                                                :state="!$v.form.secondary_contact.$invalid"
+                                                id="secondary-contact"
+                                                name="secondary-contact"
+                                                trim
+                                                v-model="form.secondary_contact">
+                                        </b-form-input>
+                                    </b-form-group>
+                                </b-col>
+                            </b-form-row>
+                        </b-tab>
 
-                <b-form-group
-                        id="fieldset-1"
-                        description="(At least 15 characters long) Provide description of the new tenant and any other comments here."
-                        label="Comment"
-                        label-for="comment"
-                        :invalid-feedback="invalidFeedback"
-                        :valid-feedback="validFeedback"
-                >
-                    <b-form-textarea
-                            id="comment"
-                            rows="3"
-                            textarea
-                            v-model="form.comment"
-                            :state="!$v.form.comment.$invalid"
-                            trim>
-                    </b-form-textarea>
-                </b-form-group>
-                <b-form-group label="Application Type">
-                    <b-form-radio-group
-                            id="application-type"
-                            v-model="form.application_type"
-                            :options="application_typeOptions"
-                            name="application-type"
-                    ></b-form-radio-group>
-                </b-form-group>
-                <b-button  v-b-modal.modal-1 :disabled="isSubmitDisabled" type="submit" variant="primary">Submit</b-button>
+                        <b-tab :title-link-class="linkClass(1)" class="w-75" title="Gateway Admin Details">
+                            <b-form-group
+                                    :invalid-feedback="invalidFeedback"
+                                    :valid-feedback="validFeedback"
+                                    description=""
+                                    id="fieldset-1"
+                                    label="Admin Username"
+                                    label-for="admin-username"
+                            >
+                                <b-form-input
+                                        :state="!$v.form.admin_username.$invalid"
+                                        id="admin-username"
+                                        name="admin-username"
+                                        trim
+                                        v-model="form.admin_username">
+                                </b-form-input>
+                            </b-form-group>
+                            <b-form-row>
+                                <b-col>
+                                    <b-form-group
+                                            :invalid-feedback="invalidFeedback"
+                                            :valid-feedback="validFeedback"
+                                            description=""
+                                            id="fieldset-1"
+                                            label="Admin First Name"
+                                            label-for="admin-first-name"
+                                    >
+                                        <b-form-input
+                                                :state="!$v.form.admin_first_name.$invalid"
+                                                id="admin-first-name"
+                                                name="admin-first-name"
+                                                trim
+                                                v-model="form.admin_first_name">
+                                        </b-form-input>
+                                    </b-form-group>
+                                </b-col>
+                                <b-col>
+                                    <b-form-group
+                                            :invalid-feedback="invalidFeedback"
+                                            :valid-feedback="validFeedback"
+                                            description=""
+                                            id="fieldset-1"
+                                            label="Admin Last Name"
+                                            label-for="admin-last-name"
+                                    >
+                                        <b-form-input
+                                                :state="!$v.form.admin_last_name.$invalid"
+                                                id="admin-last-name"
+                                                name="admin-last-name"
+                                                trim
+                                                v-model="form.admin_last_name">
+                                        </b-form-input>
+                                    </b-form-group>
+                                </b-col>
+                            </b-form-row>
 
+                            <b-form-group
+                                    :invalid-feedback="invalidFeedback"
+                                    :valid-feedback="validFeedback"
+                                    description=""
+                                    id="fieldset-1"
+                                    label="Admin Email"
+                                    label-for="admin-email"
+                            >
+                                <b-form-input
+                                        :state="!$v.form.admin_email.$invalid"
+                                        id="admin-email"
+                                        name="admin-email"
+                                        trim
+                                        type="email"
+                                        v-model="form.admin_email">
+                                </b-form-input>
+                            </b-form-group>
+
+                            <b-form-group
+                                    :invalid-feedback="invalidFeedback"
+                                    :valid-feedback="validFeedback"
+                                    description=""
+                                    id="fieldset-1"
+                                    label="Admin Password"
+                                    label-for="admin-password"
+                            >
+                                <b-input :state="!$v.form.admin_password.$invalid"
+                                         aria-describedby="password-help-block"
+                                         id="admin-password"
+                                         name="admin-password"
+                                         trim
+                                         type="password"
+                                         v-model="form.admin_password"></b-input>
+                                <b-form-text id="password-help-block">
+                                    Your password must be at least 8 characters long, and must contain letters and
+                                    numbers, and must at least one special character.
+                                </b-form-text>
+                            </b-form-group>
+                        </b-tab>
+
+                        <b-tab :title-link-class="linkClass(2)" class="w-75" title="Gateway details">
+                            <b-form-group
+                                    :invalid-feedback="invalidFeedback"
+                                    :valid-feedback="validFeedback"
+                                    id="fieldset-1"
+                                    description="The Client Name is displayed to end-users on the Identity Provider selection page."
+                                    label="Client Name"
+                                    label-for="client-name"
+                            >
+                                <b-form-input
+                                        :state="!$v.form.client_name.$invalid"
+                                        id="client-name"
+                                        name="client-name"
+                                        trim
+                                        placeholder = "Name of your OAuth 2.0 client"
+                                        v-model="form.client_name">
+                                </b-form-input>
+                            </b-form-group>
+
+
+                            <div v-for="(redirect_uri, index) in form.redirect_uris">
+                                <b-form-row class="align-items-center">
+                                    <b-col>
+                                        <b-form-group
+                                                :invalid-feedback="invalidFeedback"
+                                                :valid-feedback="validFeedback"
+                                                id="fieldset-1"
+                                                description="Enter your callback URL. The redirect_uri parameter must exactly match a URL in this list"
+                                                label="Redirect URI"
+                                                label-for="redirect-uri"
+                                        >
+                                            <b-input-group>
+                                                <b-form-input
+                                                        :state="!$v.form.redirect_uris.$each[index].$invalid"
+                                                        id="redirect-uri"
+                                                        name='redirect-uri'
+                                                        trim
+                                                        type="url"
+                                                        v-model="form.redirect_uris[index]">
+                                                </b-form-input>
+                                                <b-input-group-append>
+                                                    <b-button v-if="index > 0" @click="deleteRedirectUri(index)">Delete URI</b-button>
+                                                    <b-button @click="addRedirectUri(index)">Add another URI</b-button>
+
+                                                </b-input-group-append>
+                                            </b-input-group>
+                                        </b-form-group>
+                                    </b-col>
+                                </b-form-row>
+                            </div>
+                            <b-form-group label="Scope:">
+                                <b-form-checkbox-group
+                                        :options="scopeOptions"
+                                        id="scope"
+                                        name="scope"
+                                        v-model="form.scope"
+                                >
+                                <b-link href="https://www.cilogon.org/oidc#h.p_PEQXL8QUjsQm">Information on scopes</b-link>
+                                </b-form-checkbox-group>
+                            </b-form-group>
+                            <b-form-group
+                                    :invalid-feedback="invalidFeedback"
+                                    :valid-feedback="validFeedback"
+                                    description=""
+                                    id="fieldset-1"
+                                    label="Domain"
+                                    label-for="domain"
+                            >
+                                <b-form-input
+                                        :state="!$v.form.domain.$invalid"
+                                        id="domain"
+                                        placeholder="idp.htrc.indiana.edu"
+                                        trim
+                                        v-model="form.domain">
+                                </b-form-input>
+                            </b-form-group>
+                            <b-form-group
+                                    :invalid-feedback="invalidFeedback"
+                                    :valid-feedback="validFeedback"
+                                    description=""
+                                    id="fieldset-1"
+                                    label="Client URI"
+                                    label-for="client-uri"
+                            >
+                                <b-form-input
+                                        :state="!$v.form.client_uri.$invalid"
+                                        id="client-uri"
+                                        trim
+                                        v-model="form.client_uri">
+                                </b-form-input>
+                            </b-form-group>
+                            <b-form-group
+                                    :invalid-feedback="invalidFeedback"
+                                    :valid-feedback="validFeedback"
+                                    description=""
+                                    id="fieldset-1"
+                                    label="Logo URI"
+                                    label-for="logo-uri"
+                            >
+                                <b-form-input
+                                        :state="!$v.form.logo_uri.$invalid"
+                                        id="logo-uri"
+                                        trim
+                                        type="url"
+                                        v-model="form.logo_uri">
+                                </b-form-input>
+                            </b-form-group>
+
+                            <b-form-group
+                                    :invalid-feedback="invalidFeedback"
+                                    :valid-feedback="validFeedback"
+                                    id="fieldset-1"
+                                    label="Comment"
+                                    label-for="comment"
+                            >
+                                <b-form-textarea
+                                        :state="!$v.form.comment.$invalid"
+                                        id="comment"
+                                        rows="3" textarea trim
+                                        placeholder="Provide description of the new tenant and any other comments here (at least 15 characters long) "
+                                        v-model="form.comment">
+                                </b-form-textarea>
+                            </b-form-group>
+                            <b-form-group label="Application Type">
+                                <b-form-radio-group
+                                        :options="application_typeOptions"
+                                        id="application-type"
+                                        name="application-type"
+                                        v-model="form.application_type"
+                                ></b-form-radio-group>
+                            </b-form-group>
+                            <b-button :disabled="isSubmitDisabled" type="submit" v-b-modal.modal-1 variant="primary">
+                                Submit
+                            </b-button>
+                        </b-tab>
+                    </b-tabs>
+                </b-card>
             </b-form>
+            <div class="text-center">
+                <b-button-group class="mt-2">
+                    <b-button v-if="tabIndex > 0" @click="tabIndex--">Previous</b-button>
+
+                    <b-button v-if="tabIndex < 2" @click="tabIndex++">Next</b-button>
+                </b-button-group>
+                <div class="text-muted">Current Tab: {{ tabIndex+1 }} of 3</div>
+            </div>
         </div>
     </div>
 </template>
@@ -313,6 +335,7 @@
         },
         data() {
             return {
+                tabIndex: 0,
                 form: {
                     client_name: "",
                     requester_email: "",
@@ -324,7 +347,7 @@
                     primary_contact: "",
                     secondary_contact: "",
                     redirect_uris: [""],
-                    scope: [],
+                    scope: ["openid"],
                     domain: "",
                     client_uri: "",
                     logo_uri: "",
@@ -332,7 +355,7 @@
                     comment: ""
                 },
                 scopeOptions: [
-                    {text: "openId", value: "openid"},
+                    {text: "openId", value: "openid", disabled: "true"},
                     {text: "email", value: "email"},
                     {text: "profile", value: "profile"},
                     {text: "org.cilogon.userinfo", value: "org.cilogon.userinfo"},
@@ -367,10 +390,11 @@
                 domain: {
                     required,
                     validDomain(domain) {
-                    return (
-                        /^((?!-))(xn--)?[a-z0-9][a-z0-9-_]{0,61}[a-z0-9]{0,}\.?((xn--)?([a-z0-9\-.]{1,61}|[a-z0-9-]{1,30})\.?[a-z]{2,})$/.test(domain)
-                    )
-                    }},
+                        return (
+                            /^((?!-))(xn--)?[a-z0-9][a-z0-9-_]{0,61}[a-z0-9]{0,}\.?((xn--)?([a-z0-9\-.]{1,61}|[a-z0-9-]{1,30})\.?[a-z]{2,})$/.test(domain)
+                        )
+                    }
+                },
                 client_uri: {required},
                 logo_uri: {url},
                 application_type: {required},
@@ -383,8 +407,15 @@
             }
         },
         methods: {
+            linkClass(idx) {
+                if (this.tabIndex === idx) {
+                    return ['bg-primary', 'text-light']
+                } else {
+                    return ['bg-light', 'text-info']
+                }
+            },
             onSubmit(event) {
-                if(this.$v.form.invalid){
+                if (this.$v.form.invalid) {
                     console.log("Please fix the errors");
                     event.preventDefault();
                     event.preventDefault();
@@ -395,8 +426,9 @@
             },
             // TODO check whether 1 redirect URI is there
             deleteRedirectUri: function (index) {
-                console.log(index);
-                this.form.redirect_uris.splice(index, 1);
+                if ( index > 0 ) {
+                    this.form.redirect_uris.splice(index, 1);
+                }
             }
         }
     }
diff --git a/custos_portal/custos_portal/static/common/js/apps/workspace/ViewTenantRequestContainer.vue b/custos_portal/custos_portal/static/common/js/apps/workspace/ViewTenantRequestContainer.vue
index b4e89b2..68f30d5 100644
--- a/custos_portal/custos_portal/static/common/js/apps/workspace/ViewTenantRequestContainer.vue
+++ b/custos_portal/custos_portal/static/common/js/apps/workspace/ViewTenantRequestContainer.vue
@@ -11,6 +11,7 @@
                     <div class="card-body">
                         <table class="table">
                             <tbody>
+
                             <tr>
                                 <th scope="row">Request Id</th>
                                 <td>
@@ -63,8 +64,22 @@
                                 <th scope="row">Comment</th>
                                 <td>{{request.comment}}</td>
                             </tr>
-
-
+                            <tr>
+                                <th scope="row">Custos Key</th>
+                                <td>{{custosKey}}</td>
+                                <td>
+                                     <clipboard-copy-button variant="secondary" :text="custosKey">
+                                     </clipboard-copy-button>
+                                </td>
+                            </tr>
+                            <tr>
+                                <th scope="row">Custos Secret</th>
+                                <td>{{custosSecret}}</td>
+                                <td>
+                                     <clipboard-copy-button variant="secondary" :text="custosSecret">
+                                     </clipboard-copy-button>
+                                </td>
+                            </tr>
                             </tbody>
                         </table>
                     </div>
@@ -75,14 +90,21 @@
 </template>
 
 <script>
+    import ClipboardCopyButton from "../../components/ClipboardCopyButton";
+
     export default {
         props: {
             tenantRequestId: {
                 required: true
             }
         },
+        components: {
+            "clipboard-copy-button": ClipboardCopyButton
+        },
         data() {
             return {
+                custosKey: "342342345kjfgoudsfrtg",
+                custosSecret: "837459823jsdnfjhfd8gf",
                 request: {
                     client_name: "Test Client",
                     requester_email: "tmp@gmail.com",
diff --git a/custos_portal/custos_portal/static/common/js/components/ClipboardCopyButton.vue b/custos_portal/custos_portal/static/common/js/components/ClipboardCopyButton.vue
new file mode 100644
index 0000000..2022503
--- /dev/null
+++ b/custos_portal/custos_portal/static/common/js/components/ClipboardCopyButton.vue
@@ -0,0 +1,53 @@
+<template>
+  <b-button ref="copyButton" :variant="variant" :disabled="disabled" :data-clipboard-text="text">
+    <slot></slot>
+    <slot name="icon">
+      <i class="far fa-clipboard"></i>
+    </slot>
+    <b-tooltip :show="show" :disabled="!show" :target="() => $refs.copyButton">
+      <slot name="tooltip">Copied!</slot>
+     </b-tooltip>
+  </b-button>
+</template>
+
+<script>
+import ClipboardJS from "clipboard";
+
+export default {
+  name: "clipboard-copy-button",
+  props: {
+    text: {
+      type: String,
+    },
+    variant: {
+      type: String,
+      default: "secondary"
+    },
+  },
+  data() {
+    return {
+      show: false
+    };
+  },
+  computed: {
+    disabled() {
+      return !this.text;
+    }
+  },
+  mounted() {
+    let clipboard = new ClipboardJS(this.$refs.copyButton);
+    clipboard.on("success", this.onCopySuccess);
+  },
+  beforeDestroy() {
+    let clipboard = new ClipboardJS(this.$refs.copyButton);
+    clipboard.destroy();
+  },
+  methods: {
+    onCopySuccess() {
+      this.show = true;
+      setTimeout(() => (this.show = false), 2000);
+    }
+  }
+};
+</script>
+