@ -7,25 +7,22 @@ import { AzureCredentialsType, AzureAuthType } from '../types';
export interface Props {
managedIdentityEnabled : boolean ;
azureEntraPasswordCredentialsEnabled : boolean ;
credentials : AzureCredentialsType ;
azureCloudOptions? : SelectableValue [ ] ;
onCredentialsChange : ( updatedCredentials : AzureCredentialsType ) = > void ;
disabled? : boolean ;
}
const authTypeOptions : Array < SelectableValue < AzureAuthType > > = [
{
value : AzureAuthType.MSI ,
label : 'Managed Identity' ,
} ,
{
value : AzureAuthType.CLIENT_SECRET ,
label : 'App Registration' ,
} ,
] ;
export const AzureCredentialsForm = ( props : Props ) = > {
const { managedIdentityEnabled , credentials , azureCloudOptions , onCredentialsChange , disabled } = props ;
const {
managedIdentityEnabled ,
azureEntraPasswordCredentialsEnabled ,
credentials ,
azureCloudOptions ,
onCredentialsChange ,
disabled ,
} = props ;
const onAuthTypeChange = ( selected : SelectableValue < AzureAuthType > ) = > {
if ( onCredentialsChange ) {
@ -37,8 +34,27 @@ export const AzureCredentialsForm = (props: Props) => {
}
} ;
const authTypeOptions : Array < SelectableValue < AzureAuthType > > = [
{
value : AzureAuthType.CLIENT_SECRET ,
label : 'App Registration' ,
} ,
] ;
if ( managedIdentityEnabled ) {
authTypeOptions . push ( {
value : AzureAuthType.MSI ,
label : 'Managed Identity' ,
} ) ;
}
if ( azureEntraPasswordCredentialsEnabled ) {
authTypeOptions . push ( {
value : AzureAuthType.AD_PASSWORD ,
label : 'Azure Entra Password' ,
} ) ;
}
const onInputChange = ( { property , value } : { property : keyof AzureCredentialsType ; value : string } ) = > {
if ( onCredentialsChange && credentials . authType === 'clientsecret' ) {
if ( onCredentialsChange ) {
const updated : AzureCredentialsType = {
. . . credentials ,
[ property ] : value ,
@ -49,7 +65,6 @@ export const AzureCredentialsForm = (props: Props) => {
return (
< div >
{ managedIdentityEnabled && (
< Field
label = "Authentication"
description = "Choose the type of authentication to Azure services"
@ -63,8 +78,7 @@ export const AzureCredentialsForm = (props: Props) => {
disabled = { disabled }
/ >
< / Field >
) }
{ credentials . authType === 'clientsecret' && (
{ credentials . authType === AzureAuthType . CLIENT_SECRET && (
< >
{ azureCloudOptions && (
< Field label = "Azure Cloud" htmlFor = "azure-cloud-type" disabled = { disabled } >
@ -167,6 +181,84 @@ export const AzureCredentialsForm = (props: Props) => {
) ) }
< / >
) }
{ credentials . authType === AzureAuthType . AD_PASSWORD && azureEntraPasswordCredentialsEnabled && (
< >
< Field label = "User Id" required htmlFor = "user-id" invalid = { ! credentials . userId } error = { 'User ID is required' } >
< Input
width = { 45 }
value = { credentials . userId || '' }
onChange = { ( event : ChangeEvent < HTMLInputElement > ) = > {
const value = event . target . value ;
onInputChange ( { property : 'userId' , value } ) ;
} }
disabled = { disabled }
aria - label = "User ID"
/ >
< / Field >
< Field
label = "Application Client ID"
required
htmlFor = "application-client-id"
invalid = { ! credentials . clientId }
error = { 'Application Client ID is required' }
>
< Input
width = { 45 }
value = { credentials . clientId || '' }
onChange = { ( event : ChangeEvent < HTMLInputElement > ) = > {
const value = event . target . value ;
onInputChange ( { property : 'clientId' , value } ) ;
} }
disabled = { disabled }
aria - label = "Application Client ID"
/ >
< / Field >
{ ! disabled &&
( typeof credentials . password === 'symbol' ? (
< Field label = "Password" htmlFor = "password" required >
< div className = "width-30" style = { { display : 'flex' , gap : '4px' } } >
< Input
aria - label = "Password"
placeholder = "configured"
disabled = { true }
data - testid = { 'password' }
width = { 45 }
/ >
< Button
variant = "secondary"
type = "button"
onClick = { ( ) = > {
onInputChange ( { property : 'password' , value : '' } ) ;
} }
disabled = { disabled }
>
Reset
< / Button >
< / div >
< / Field >
) : (
< Field
label = "Password"
required
htmlFor = "password"
invalid = { ! credentials . password }
error = { 'Password is required' }
>
< Input
width = { 45 }
aria - label = "Password"
value = { credentials . password || '' }
onChange = { ( event : ChangeEvent < HTMLInputElement > ) = > {
const value = event . target . value ;
onInputChange ( { property : 'password' , value } ) ;
} }
id = "password"
disabled = { disabled }
/ >
< / Field >
) ) }
< / >
) }
< / div >
) ;
} ;
Andrew Hackmann
12 months ago
committed by