This is an automated email from the ASF dual-hosted git repository. smarru pushed a commit to branch develop in repository https://gitbox.apache.org/repos/asf/airavata-custos-portal.git
commit 59de745a844885dce3d70e3b7597e6a0c68ccd26
Author: Shivam Rastogi <shivam_r...@yahoo.com>
AuthorDate: Fri Apr 17 22:23:20 2020 -0400
Enhance new tenant request form
---
.../apps/workspace/RequestNewTenantContainer.vue | 586 +++++++++++----------
1 file changed, 309 insertions(+), 277 deletions(-)
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-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
+ :invalid-feedback="invalidFeedback"
+ :valid-feedback="validFeedback"
+ description=""
+ id="fieldset-1"
+ label="Requester Email"
+ label-for="requester-email"
+ >
+ <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-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-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
- 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
+ :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-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-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>
- <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>
+ <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-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-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=""
- label="Redirect URI"
- label-for="redirect-uri"
+ 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-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.logo_uri.$invalid"
+ id="logo-uri"
+ trim
+ type="url"
+ v-model="form.logo_uri">
+ </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-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-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);
+ }
}
}
}
