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

transloadit · Jul 9, 2023 · 89e458c · 89e458c
1 parent c7a77a9
commit 89e458c
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 22 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
@@ -177,7 +177,18 @@ export default class ProviderView extends View {
     this.plugin.setPluginState({ filterInput: '' })
   }
 
-  async handleAuth () {
+  async handleAuth (event) {
+    event.preventDefault()
+
+    const formData = new FormData(event.target)
+    this.provider.cutomQueryParams = Object.fromEntries(formData.entries())
+    this.opts.authInputs?.forEach(i => {
+      if (!i.serialize) {
+        return
+      }
+      this.provider.cutomQueryParams[i.name] = i.serialize(this.provider.cutomQueryParams[i.name])
+    })
+
     await this.provider.ensurePreAuth()
 
     const authState = btoa(JSON.stringify({ origin: getOrigin() }))
@@ -411,6 +422,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;
 }