Skip to content

Commit

Permalink
Enhance credential management interface
Browse files Browse the repository at this point in the history
  • Loading branch information
@davelopez
davelopez committed Jan 15, 2025
1 parent 692e8a7 commit c3d4854
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 72 deletions.
3 changes: 2 additions & 1 deletion client/src/components/User/Credentials/ManageToolCredentials.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,13 +124,14 @@ function getServiceCredentialsDefinition(reference: string): ServiceCredentialsD
<p>
Here you can manage your credentials for the tool <strong>{{ toolId }}</strong> version
<strong> {{ toolVersion }}</strong
>.
>. After you make any changes, don't forget to use the <i>Save Credentials</i> button to save them.
</p>
<ServiceCredentials
v-for="credential in providedCredentials.credentials"
:key="credential.reference"
:credential-definition="getServiceCredentialsDefinition(credential.reference)"
:credential-payload="credential"
class="mb-2"
@new-credentials-set="onNewCredentialsSet"
@update-current-set="onCurrentSetChange" />
<button class="btn-primary" @click="saveCredentials">Save Credentials</button>
Expand Down
148 changes: 77 additions & 71 deletions client/src/components/User/Credentials/ServiceCredentials.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,85 +96,91 @@ function getVariableDescription(name: string, type: CredentialType): string | un

<template>
<BCard>
<h3>
{{ credentialDefinition.label || credentialDefinition.name }}
<BBadge
v-if="credentialDefinition.optional"
variant="secondary"
class="optional-credentials"
title="These credentials are optional. If you do not provide them, the tool will use default values or
<form autocomplete="off">
<h3>
{{ credentialDefinition.label || credentialDefinition.name }}
<BBadge
v-if="credentialDefinition.optional"
variant="secondary"
class="optional-credentials"
title="These credentials are optional. If you do not provide them, the tool will use default values or
anonymous access.">
Optional
</BBadge>
<BBadge
v-else
variant="danger"
class="required-credentials"
title="These credentials are required. You must provide them to use the tool.">
Required
</BBadge>
<BBadge
v-if="credentialDefinition.multiple"
variant="info"
title="You can provide multiple sets of credentials for this tool. But only one set can be active at a time.">
Multiple
</BBadge>
</h3>
<p>{{ credentialDefinition.description }}</p>
<div v-if="selectedSet">
<div v-if="canShowSetSelector">
<b>Using set:</b>
<Multiselect
v-model="selectedSet"
:options="availableSets"
:allow-empty="false"
:show-labels="false"
track-by="name"
label="name"
@select="onCurrentSetChange" />
</div>

<div v-for="variable in selectedSet.variables" :key="variable.name">
<!-- TODO Use new component here? -->
<FormElement
:id="variable.name"
v-model="variable.value"
type="text"
:title="getVariableTitle(variable.name, 'variable')"
:optional="credentialDefinition.optional"
:help="getVariableDescription(variable.name, 'variable')" />
</div>
<div v-for="secret in selectedSet.secrets" :key="secret.name" class="secret-input">
<!-- TODO Use VaultSecret component here or similar? -->
<FormElement
:id="secret.name"
v-model="secret.value"
type="password"
autocomplete="off"
:title="getVariableTitle(secret.name, 'secret')"
:optional="credentialDefinition.optional"
:help="getVariableDescription(secret.name, 'secret')" />
</div>
Optional
</BBadge>
<BBadge
v-else
variant="danger"
class="required-credentials"
title="These credentials are required. You must provide them to use the tool.">
Required
</BBadge>
<BBadge
v-if="credentialDefinition.multiple"
variant="info"
title="You can provide multiple sets of credentials for this tool. But only one set can be active at a time.">
Multiple
</BBadge>
</h3>
<p>{{ credentialDefinition.description }}</p>
<div v-if="selectedSet">
<div v-if="canShowSetSelector">
<b>Using set:</b>
<Multiselect
v-model="selectedSet"
:options="availableSets"
:allow-empty="false"
:show-labels="false"
:searchable="false"
track-by="name"
label="name"
@select="onCurrentSetChange" />
</div>

<div v-if="credentialDefinition.multiple" class="set-management-bar">
<button v-if="!isAddingNewSet" title="Create new set" @click="onAddingNewSet">Create +</button>
<div v-else class="set-management-bar">
<div v-for="variable in selectedSet.variables" :key="variable.name">
<FormElement
v-if="isAddingNewSet"
v-model="newSetName"
:id="`${selectedSet.name}-${variable.name}-variable`"
v-model="variable.value"
type="text"
placeholder="Enter new set name" />
:title="getVariableTitle(variable.name, 'variable')"
:optional="credentialDefinition.optional"
:help="getVariableDescription(variable.name, 'variable')" />
</div>
<div v-for="secret in selectedSet.secrets" :key="secret.name" class="secret-input">
<FormElement
:id="`${selectedSet.name}-${secret.name}-secret`"
v-model="secret.value"
type="password"
:autocomplete="`${selectedSet.name}-${secret.name}-secret`"
:title="getVariableTitle(secret.name, 'secret')"
:optional="credentialDefinition.optional"
:help="getVariableDescription(secret.name, 'secret')" />
</div>

<div v-if="credentialDefinition.multiple" class="set-management-bar">
<button
v-if="isAddingNewSet"
:disabled="!canCreateNewSet"
class="btn-primary"
@click="onCreateNewSet">
Done
v-if="!isAddingNewSet"
title="Create a new set for these credentials so you can choose between them."
@click="onAddingNewSet">
Create new set
</button>
<button v-if="isAddingNewSet" @click="onCancelAddingNewSet">Cancel</button>
<div v-else class="set-management-bar">
<FormElement
v-if="isAddingNewSet"
v-model="newSetName"
type="text"
placeholder="Enter new set name" />
<button
v-if="isAddingNewSet"
:disabled="!canCreateNewSet"
class="btn-primary"
@click="onCreateNewSet">
Confirm
</button>
<button v-if="isAddingNewSet" @click="onCancelAddingNewSet">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</BCard>
</template>

Expand Down

0 comments on commit c3d4854

Please sign in to comment.