@uppy/provider-view: allow apps to render custom forms in AuthView

transloadit · Aug 8, 2023 · 5fb7720 · 5fb7720
1 parent f3ce884
commit 5fb7720
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 21 deletions.
diff --git 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) {
  <br />
  </span>
  )
+
  return (
  <div className="uppy-Provider-auth">
  <div className="uppy-Provider-authIcon">{pluginIcon()}</div>
@@ -56,26 +57,35 @@ function AuthView (props) {
  pluginName: pluginNameComponent,
  })}
  </div>
- {isGoogleDrive ? (
- <button
- type="button"
- className="uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Provider-authBtn uppy-Provider-btn-google"
- onClick={handleAuth}
- data-uppy-super-focusable
- >
- <GoogleIcon />
- {i18nArray('signInWithGoogle')}
- </button>
- ) : (
- <button
- type="button"
- className="uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Provider-authBtn"
- onClick={handleAuth}
- data-uppy-super-focusable
- >
- {i18nArray('authenticateWith', { pluginName })}
- </button>
- )}
+ <form className="uppy-Provider-authForm" onSubmit={handleAuth}>
+ {inputs?.map((i) => (
+ <div className="uppy-Provider-authInput">
+ <label htmlFor={`uppy-Provider-authInput-${i.id}`}>
+ <span>{i.label}</span>
+ <input id={`uppy-Provider-authInput-${i.id}`} name={i.name} type={i.type || 'text'} defaultValue={i.defaultValue} />
+ </label>
+ {i.description && (<span>{i.description}</span>)}
+ </div>
+ ))}
+ {isGoogleDrive ? (
+ <button
+ type="submit"
+ className="uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Provider-authBtn uppy-Provider-btn-google"
+ data-uppy-super-focusable
+ >
+ <GoogleIcon />
+ {i18nArray('signInWithGoogle')}
+ </button>
+ ) : (
+ <button
+ type="submit"
+ className="uppy-u-reset uppy-c-btn uppy-c-btn-primary uppy-Provider-authBtn"
+ data-uppy-super-focusable
+ >
+ {i18nArray('authenticateWith', { pluginName })}
+ </button>
+ )}
+ </form>
  </div>
  )
 }

diff --git 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}
  />
  </CloseWrapper>
  )

diff --git 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;
 }