feat(signin): Support passing any argument to credentials input (#2876)

zakaryan2004 · web-flow · commit c5bd99d92a47 · 2021-10-01T23:25:35.000+02:00
Spreading the object into the input tag allows developers to specify any attribute for the input tag used in the builtin sign-in page, such as 'autocomplete', 'autofocus', etc.

Removed the hardcoded attributes which just set the defaults of the 'input' tag and won't cause any behavior change in case they are absence from the object.

Signed-off-by: Gegham Zakaryan &lt;zakaryan.2004@outlook.com&gt;
diff --git a/src/server/pages/signin.tsx b/src/server/pages/signin.tsx
@@ -106,11 +106,10 @@ export default function Signin({
                       <input
                         name={credential}
                         id={`input-${credential}-for-${provider.id}-provider`}
-                        type={provider.credentials[credential].type || "text"}
-                        value={provider.credentials[credential].value || ""}
                         placeholder={
                           provider.credentials[credential].placeholder || "Password"
                         }
+                        {...provider.credentials[credential]}
                       />
                     </div>
                   )

Original file line number	Diff line number	Diff line change
`@@ -106,11 +106,10 @@ export default function Signin({`
`106`	`106`	`<input`
`107`	`107`	`name={credential}`
`108`	`108`	id={`input-${credential}-for-${provider.id}-provider`}
`109`		`- type={provider.credentials[credential].type \|\| "text"}`
`110`		`- value={provider.credentials[credential].value \|\| ""}`
`111`	`109`	`placeholder={`
`112`	`110`	`provider.credentials[credential].placeholder \|\| "Password"`
`113`	`111`	`}`
	`112`	`+ {...provider.credentials[credential]}`
`114`	`113`	`/>`
`115`	`114`	`</div>`
`116`	`115`	`)`