@@ -53,6 +53,7 @@ import {
53
53
RegistryIcon ,
54
54
ComponentSizeType ,
55
55
PasswordField ,
56
+ OtherRegistryAuthenticationType ,
56
57
} from '@devtron-labs/devtron-fe-common-lib'
57
58
import Tippy from '@tippyjs/react'
58
59
import { useHistory , useParams , useRouteMatch } from 'react-router-dom'
@@ -100,6 +101,7 @@ import { VALIDATION_STATUS, ValidateForm } from '../common/ValidateForm/Validate
100
101
const RegistryHelmPushCheckbox = importComponentFromFELibrary ( 'RegistryHelmPushCheckbox' )
101
102
const RemoteConnectionRadio = importComponentFromFELibrary ( 'RemoteConnectionRadio' )
102
103
const getRemoteConnectionConfig = importComponentFromFELibrary ( 'getRemoteConnectionConfig' , noop , 'function' )
104
+ const AuthenticationTypeRadio = importComponentFromFELibrary ( 'AuthenticationTypeRadio' , null , 'function' )
103
105
104
106
enum CERTTYPE {
105
107
SECURE = 'secure' ,
@@ -259,6 +261,7 @@ const CollapsedList = ({
259
261
repositoryList = [ ] ,
260
262
disabledFields = [ ] ,
261
263
ociRegistryConfig,
264
+ credentialsType,
262
265
...rest
263
266
} ) => {
264
267
const [ collapsed , toggleCollapse ] = useState ( true )
@@ -338,6 +341,7 @@ const CollapsedList = ({
338
341
isPublic,
339
342
disabledFields,
340
343
ociRegistryConfig,
344
+ credentialsType,
341
345
} }
342
346
/>
343
347
) }
@@ -377,6 +381,7 @@ const DockerForm = ({
377
381
: {
378
382
CONTAINER : OCIRegistryConfigConstants . PULL_PUSH ,
379
383
} ,
384
+ credentialsType : authCredentialsType ,
380
385
...rest
381
386
} ) => {
382
387
const re = PATTERNS . APP_NAME
@@ -539,6 +544,9 @@ const DockerForm = ({
539
544
const [ registryStorageType , setRegistryStorageType ] = useState < string > (
540
545
isPublic ? RegistryStorageType . OCI_PUBLIC : RegistryStorageType . OCI_PRIVATE ,
541
546
)
547
+ const [ authenticationType , setAuthenticationType ] = useState < OtherRegistryAuthenticationType > (
548
+ id && authCredentialsType ? authCredentialsType : OtherRegistryAuthenticationType . USERNAME_PASSWORD ,
549
+ )
542
550
543
551
const InitialValueOfIsContainerStore : boolean =
544
552
ociRegistryConfig ?. CONTAINER === OCIRegistryConfigConstants . PULL_PUSH
@@ -712,6 +720,11 @@ const DockerForm = ({
712
720
}
713
721
}
714
722
723
+ const handleChangeOtherRegistryAuthType = ( e ) => {
724
+ const updatedAuthType = e . target . value as OtherRegistryAuthenticationType
725
+ setAuthenticationType ( updatedAuthType )
726
+ }
727
+
715
728
function fetchAWSRegion ( ) : string {
716
729
const pattern =
717
730
registryStorageType === RegistryStorageType . OCI_PUBLIC
@@ -805,8 +818,12 @@ const DockerForm = ({
805
818
...( registryStorageType !== RegistryStorageType . OCI_PUBLIC &&
806
819
selectedDockerRegistryType . value === RegistryType . OTHER
807
820
? {
808
- username : trimmedUsername ,
809
- password : parsePassword ( customState . password . value ) ,
821
+ ...( authenticationType === OtherRegistryAuthenticationType . USERNAME_PASSWORD
822
+ ? {
823
+ username : trimmedUsername ,
824
+ password : parsePassword ( customState . password . value ) ,
825
+ }
826
+ : { } ) ,
810
827
connection : state . advanceSelect . value ,
811
828
cert : state . advanceSelect . value !== CERTTYPE . SECURE_WITH_CERT ? '' : state . certInput . value ,
812
829
}
@@ -839,6 +856,9 @@ const DockerForm = ({
839
856
customState . remoteConnectionConfig . connectionMethod . value ,
840
857
sshConnectionType ,
841
858
) ,
859
+ ...( AuthenticationTypeRadio && selectedDockerRegistryType . value === RegistryType . OTHER
860
+ ? { credentialsType : authenticationType }
861
+ : { } ) ,
842
862
}
843
863
}
844
864
@@ -1003,6 +1023,7 @@ const DockerForm = ({
1003
1023
let error = false
1004
1024
if (
1005
1025
registryStorageType === RegistryStorageType . OCI_PRIVATE &&
1026
+ authenticationType === OtherRegistryAuthenticationType . USERNAME_PASSWORD &&
1006
1027
( ! customState . username . value || ! ( customState . password . value || id ) )
1007
1028
) {
1008
1029
setCustomState ( ( st ) => ( {
@@ -1605,47 +1626,61 @@ const DockerForm = ({
1605
1626
</ >
1606
1627
)
1607
1628
}
1629
+
1630
+ const isUserNamePasswordRequired =
1631
+ selectedDockerRegistryType . value === RegistryType . OTHER
1632
+ ? authenticationType === OtherRegistryAuthenticationType . USERNAME_PASSWORD
1633
+ : true
1634
+
1608
1635
return (
1609
1636
< >
1610
- < div className = { `${ isGCROrGCP ? '' : 'form__row--two-third' } ` } >
1611
- < div className = "form__row" >
1612
- < CustomInput
1613
- name = "username"
1614
- required
1615
- value = { customState . username . value || selectedDockerRegistryType . id . defaultValue }
1616
- error = { customState . username . error }
1617
- onChange = { customHandleChange }
1618
- label = { selectedDockerRegistryType . id . label }
1619
- disabled = { ! ! selectedDockerRegistryType . id . defaultValue }
1620
- placeholder = {
1621
- selectedDockerRegistryType . id . placeholder
1622
- ? selectedDockerRegistryType . id . placeholder
1623
- : 'Enter username'
1624
- }
1625
- />
1626
- </ div >
1627
- < div className = "form__row" >
1628
- { ( selectedDockerRegistryType . value === RegistryType . DOCKER_HUB ||
1629
- selectedDockerRegistryType . value === RegistryType . ACR ||
1630
- selectedDockerRegistryType . value === RegistryType . QUAY ||
1631
- selectedDockerRegistryType . value === RegistryType . OTHER ) && (
1632
- < PasswordField
1633
- shouldShowDefaultPlaceholderOnBlur = { ! ! id }
1634
- name = "password"
1637
+ { AuthenticationTypeRadio && selectedDockerRegistryType . value === RegistryType . OTHER && (
1638
+ < AuthenticationTypeRadio
1639
+ authenticationType = { authenticationType }
1640
+ handleChangeOtherRegistryAuthType = { handleChangeOtherRegistryAuthType }
1641
+ />
1642
+ ) }
1643
+ { isUserNamePasswordRequired && (
1644
+ < div className = { `${ isGCROrGCP ? '' : 'form__row--two-third' } ` } >
1645
+ < div className = "form__row" >
1646
+ < CustomInput
1647
+ name = "username"
1635
1648
required
1636
- value = { customState . password . value }
1637
- error = { customState . password . error }
1649
+ value = { customState . username . value || selectedDockerRegistryType . id . defaultValue }
1650
+ error = { customState . username . error }
1638
1651
onChange = { customHandleChange }
1639
- label = { selectedDockerRegistryType . password . label }
1652
+ label = { selectedDockerRegistryType . id . label }
1653
+ disabled = { ! ! selectedDockerRegistryType . id . defaultValue }
1640
1654
placeholder = {
1641
- selectedDockerRegistryType . password . placeholder
1642
- ? selectedDockerRegistryType . password . placeholder
1643
- : 'Enter password/token '
1655
+ selectedDockerRegistryType . id . placeholder
1656
+ ? selectedDockerRegistryType . id . placeholder
1657
+ : 'Enter username '
1644
1658
}
1645
1659
/>
1646
- ) }
1660
+ </ div >
1661
+ < div className = "form__row" >
1662
+ { ( selectedDockerRegistryType . value === RegistryType . DOCKER_HUB ||
1663
+ selectedDockerRegistryType . value === RegistryType . ACR ||
1664
+ selectedDockerRegistryType . value === RegistryType . QUAY ||
1665
+ selectedDockerRegistryType . value === RegistryType . OTHER ) && (
1666
+ < PasswordField
1667
+ shouldShowDefaultPlaceholderOnBlur = { ! ! id }
1668
+ name = "password"
1669
+ required
1670
+ value = { customState . password . value }
1671
+ error = { customState . password . error }
1672
+ onChange = { customHandleChange }
1673
+ label = { selectedDockerRegistryType . password . label }
1674
+ placeholder = {
1675
+ selectedDockerRegistryType . password . placeholder
1676
+ ? selectedDockerRegistryType . password . placeholder
1677
+ : 'Enter password/token'
1678
+ }
1679
+ />
1680
+ ) }
1681
+ </ div >
1647
1682
</ div >
1648
- </ div >
1683
+ ) }
1649
1684
{ isGCROrGCP && (
1650
1685
< Textarea
1651
1686
label = { selectedDockerRegistryType . password . label }
0 commit comments