diff --git a/packages/@uppy/provider-views/src/ProviderView/AuthView.jsx b/packages/@uppy/provider-views/src/ProviderView/AuthView.jsx index 5cf51f82f6..ecf09015d1 100644 --- a/packages/@uppy/provider-views/src/ProviderView/AuthView.jsx +++ b/packages/@uppy/provider-views/src/ProviderView/AuthView.jsx @@ -37,7 +37,7 @@ function GoogleIcon () { } function AuthView (props) { - const { pluginName, pluginIcon, i18nArray, handleAuth } = props + const { pluginName, pluginIcon, i18nArray, handleAuth, inputs } = props // In order to comply with Google's brand we need to create a different button // for the Google Drive plugin const isGoogleDrive = pluginName === 'Google Drive' @@ -48,6 +48,7 @@ function AuthView (props) {
) + return (
{pluginIcon()}
@@ -56,26 +57,35 @@ function AuthView (props) { pluginName: pluginNameComponent, })}
- {isGoogleDrive ? ( - - ) : ( - - )} +
+ {inputs?.map((i) => ( +
+ + {i.description && ({i.description})} +
+ ))} + {isGoogleDrive ? ( + + ) : ( + + )} +
) } diff --git a/packages/@uppy/provider-views/src/ProviderView/ProviderView.jsx b/packages/@uppy/provider-views/src/ProviderView/ProviderView.jsx index e0991350e2..3db05ecf74 100644 --- a/packages/@uppy/provider-views/src/ProviderView/ProviderView.jsx +++ b/packages/@uppy/provider-views/src/ProviderView/ProviderView.jsx @@ -478,6 +478,7 @@ export default class ProviderView extends View { handleAuth={this.handleAuth} i18n={this.plugin.uppy.i18n} i18nArray={this.plugin.uppy.i18nArray} + inputs={this.opts.authInputs} /> ) diff --git a/packages/@uppy/provider-views/src/style.scss b/packages/@uppy/provider-views/src/style.scss index 4ec4a06cd3..3d8d16ac3e 100644 --- a/packages/@uppy/provider-views/src/style.scss +++ b/packages/@uppy/provider-views/src/style.scss @@ -28,6 +28,28 @@ color: $gray-500; } +.uppy-Provider-authForm { + display: flex; + justify-content: center; + flex-wrap: wrap; +} + +.uppy-Provider-authForm input { + display: block; + width: 100%; + margin-bottom: 5px; +} + +.uppy-Provider-authForm label span { + display: inline-block; + margin-bottom: 5px; +} + +.uppy-Provider-authInput { + width: 100%; + margin-bottom: 15px; +} + .uppy-Provider-empty { color: $gray-500; }