fix(auth): allow password managers to pre-fill input fields (#9390)

HTML disallows having multiple IDs with the same value.

In reality this is for 1Password's feature where you can create
custom fields named like input IDs and 1Password fill pre-fill that.
This commit is contained in:
Artur
2023-11-22 09:48:09 +01:00
committed by GitHub
parent fc8e00c9d8
commit 9a7c4c0593
5 changed files with 14 additions and 14 deletions

View File

@@ -196,11 +196,11 @@ export default class Oauth2 extends React.Component {
{ {
( flow === AUTH_FLOW_APPLICATION || flow === AUTH_FLOW_IMPLICIT || flow === AUTH_FLOW_ACCESS_CODE || flow === AUTH_FLOW_PASSWORD ) && ( flow === AUTH_FLOW_APPLICATION || flow === AUTH_FLOW_IMPLICIT || flow === AUTH_FLOW_ACCESS_CODE || flow === AUTH_FLOW_PASSWORD ) &&
( !isAuthorized || isAuthorized && this.state.clientId) && <Row> ( !isAuthorized || isAuthorized && this.state.clientId) && <Row>
<label htmlFor="client_id">client_id:</label> <label htmlFor={ `client_id_${flow}` }>client_id:</label>
{ {
isAuthorized ? <code> ****** </code> isAuthorized ? <code> ****** </code>
: <Col tablet={10} desktop={10}> : <Col tablet={10} desktop={10}>
<InitializedInput id="client_id" <InitializedInput id={`client_id_${flow}`}
type="text" type="text"
required={ flow === AUTH_FLOW_PASSWORD } required={ flow === AUTH_FLOW_PASSWORD }
initialValue={ this.state.clientId } initialValue={ this.state.clientId }
@@ -213,11 +213,11 @@ export default class Oauth2 extends React.Component {
{ {
( (flow === AUTH_FLOW_APPLICATION || flow === AUTH_FLOW_ACCESS_CODE || flow === AUTH_FLOW_PASSWORD) && <Row> ( (flow === AUTH_FLOW_APPLICATION || flow === AUTH_FLOW_ACCESS_CODE || flow === AUTH_FLOW_PASSWORD) && <Row>
<label htmlFor="client_secret">client_secret:</label> <label htmlFor={ `client_secret_${flow}` }>client_secret:</label>
{ {
isAuthorized ? <code> ****** </code> isAuthorized ? <code> ****** </code>
: <Col tablet={10} desktop={10}> : <Col tablet={10} desktop={10}>
<InitializedInput id="client_secret" <InitializedInput id={ `client_secret_${flow}` }
initialValue={ this.state.clientSecret } initialValue={ this.state.clientSecret }
type="password" type="password"
data-name="clientSecret" data-name="clientSecret"

View File

@@ -18,7 +18,7 @@ describe("Check client_secret for OAuth2 Authorization Code flow with and withou
.contains("authorizationCode with PKCE") .contains("authorizationCode with PKCE")
.get(".flow") .get(".flow")
.contains("authorizationCode with PKCE") .contains("authorizationCode with PKCE")
.get("#client_secret") .get("#client_secret_authorizationCode")
.should("exist") .should("exist")
}) })
@@ -41,7 +41,7 @@ describe("Check client_secret for OAuth2 Authorization Code flow with and withou
.contains("authorizationCode") .contains("authorizationCode")
.get(".flow") .get(".flow")
.contains("authorizationCode") .contains("authorizationCode")
.get("#client_secret") .get("#client_secret_authorizationCode")
.should("exist") .should("exist")
}) })
}) })

View File

@@ -30,11 +30,11 @@ describe("OAuth2 Application flow", function() {
.click() .click()
.get("div.modal-ux-content > div:nth-child(2)").within(() => { .get("div.modal-ux-content > div:nth-child(2)").within(() => {
cy.get("#client_id") cy.get("#client_id_application")
.clear() .clear()
.type("confidentialApplication") .type("confidentialApplication")
.get("#client_secret") .get("#client_secret_application")
.clear() .clear()
.type("topSecret") .type("topSecret")

View File

@@ -18,11 +18,11 @@ describe("OAuth2 Password flow", function() {
.get("#password_type") .get("#password_type")
.select("basic") .select("basic")
.get("#client_id") .get("#client_id_password")
.clear() .clear()
.type("application") .type("application")
.get("#client_secret") .get("#client_secret_password")
.clear() .clear()
.type("secret") .type("secret")
@@ -75,11 +75,11 @@ describe("OAuth2 Password flow", function() {
.get("#password_type") .get("#password_type")
.select("request-body") .select("request-body")
.get("#client_id") .get("#client_id_password")
.clear() .clear()
.type("application") .type("application")
.get("#client_secret") .get("#client_secret_password")
.clear() .clear()
.type("secret") .type("secret")

View File

@@ -20,7 +20,7 @@ describe("Security: CSS Sequential Import Chaining", () => {
cy.visit("/?url=/documents/petstore-expanded.openapi.yaml") cy.visit("/?url=/documents/petstore-expanded.openapi.yaml")
.get(".scheme-container > .schemes > .auth-wrapper > .btn > span") .get(".scheme-container > .schemes > .auth-wrapper > .btn > span")
.click() .click()
.get("div > div > .wrapper > .block-tablet > #client_id") .get("div > div > .wrapper > .block-tablet > #client_id_implicit")
.clear() .clear()
.type("abc") .type("abc")
.should("not.have.attr", "value", "abc") .should("not.have.attr", "value", "abc")
@@ -48,7 +48,7 @@ describe("Security: CSS Sequential Import Chaining", () => {
cy.visit("/?url=/documents/petstore.swagger.yaml") cy.visit("/?url=/documents/petstore.swagger.yaml")
.get(".scheme-container > .schemes > .auth-wrapper > .btn > span") .get(".scheme-container > .schemes > .auth-wrapper > .btn > span")
.click() .click()
.get("div > div > .wrapper > .block-tablet > #client_id") .get("div > div > .wrapper > .block-tablet > #client_id_implicit")
.clear() .clear()
.type("abc") .type("abc")
.should("not.have.attr", "value", "abc") .should("not.have.attr", "value", "abc")