@jbrowse/plugin-authentication 2.2.0

package/src/DropboxOAuthModel/model.tsx

@@ -0,0 +1,141 @@
+import React from 'react'
+import { ConfigurationReference } from '@jbrowse/core/configuration'
+import { UriLocation } from '@jbrowse/core/util/types'
+import { SvgIconProps, SvgIcon } from '@mui/material'
+import { Instance, types } from 'mobx-state-tree'
+import { DropboxOAuthInternetAccountConfigModel } from './configSchema'
+import baseModel from '../OAuthModel/model'
+import { configSchema as OAuthConfigSchema } from '../OAuthModel'
+
+interface DropboxError {
+  error_summary: string
+  error: {
+    '.tag': string
+  }
+}
+
+/** Error messages from https://www.dropbox.com/developers/documentation/http/documentation#sharing-get_shared_link_file */
+const dropboxErrorMessages: Record<string, string | undefined> = {
+  shared_link_not_found: "The shared link wasn't found.",
+  shared_link_access_denied:
+    'The caller is not allowed to access this shared link.',
+  unsupported_link_type:
+    'This type of link is not supported; use files/export instead.',
+  shared_link_is_directory: 'Directories cannot be retrieved by this endpoint.',
+}
+
+export function DropboxIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M3 6.2L8 9.39L13 6.2L8 3L3 6.2M13 6.2L18 9.39L23 6.2L18 3L13 6.2M3 12.55L8 15.74L13 12.55L8 9.35L3 12.55M18 9.35L13 12.55L18 15.74L23 12.55L18 9.35M8.03 16.8L13.04 20L18.04 16.8L13.04 13.61L8.03 16.8Z" />
+    </SvgIcon>
+  )
+}
+
+async function getDescriptiveErrorMessage(response: Response) {
+  let errorMessage
+  try {
+    errorMessage = await response.text()
+  } catch (error) {
+    errorMessage = ''
+  }
+  if (errorMessage) {
+    let errorMessageParsed: DropboxError | undefined
+    try {
+      errorMessageParsed = JSON.parse(errorMessage)
+    } catch (error) {
+      errorMessageParsed = undefined
+    }
+    if (errorMessageParsed) {
+      const messageTag = errorMessageParsed.error['.tag']
+      errorMessage = dropboxErrorMessages[messageTag] || messageTag
+    }
+  }
+  return `Network response failure — ${response.status} (${
+    response.statusText
+  })${errorMessage ? ` (${errorMessage})` : ''}`
+}
+
+const stateModelFactory = (
+  configSchema: DropboxOAuthInternetAccountConfigModel,
+) => {
+  return baseModel(OAuthConfigSchema)
+    .named('DropboxOAuthInternetAccount')
+    .props({
+      type: types.literal('DropboxOAuthInternetAccount'),
+      configuration: ConfigurationReference(configSchema),
+    })
+    .views(() => ({
+      get toggleContents() {
+        return <DropboxIcon />
+      },
+      get selectorLabel() {
+        return 'Enter Dropbox share link'
+      },
+    }))
+    .actions(self => ({
+      getFetcher(
+        location?: UriLocation,
+      ): (input: RequestInfo, init?: RequestInit) => Promise<Response> {
+        return async (
+          input: RequestInfo,
+          init?: RequestInit,
+        ): Promise<Response> => {
+          const authToken = await self.getToken(location)
+          const newInit = self.addAuthHeaderToInit(
+            { ...init, method: 'POST' },
+            authToken,
+          )
+          newInit.headers.append(
+            'Dropbox-API-Arg',
+            JSON.stringify({ url: input }),
+          )
+          const response = await fetch(
+            'https://content.dropboxapi.com/2/sharing/get_shared_link_file',
+            newInit,
+          )
+          if (!response.ok) {
+            const message = await getDescriptiveErrorMessage(response)
+            throw new Error(message)
+          }
+          return response
+        }
+      },
+      async validateToken(
+        token: string,
+        location: UriLocation,
+      ): Promise<string> {
+        const response = await fetch(
+          'https://api.dropboxapi.com/2/sharing/get_shared_link_metadata',
+          {
+            method: 'POST',
+            headers: {
+              Authorization: `Bearer ${token}`,
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              url: location.uri,
+            }),
+          },
+        )
+        if (!response.ok) {
+          const refreshToken =
+            self.hasRefreshToken && self.retrieveRefreshToken()
+          if (refreshToken) {
+            self.removeRefreshToken()
+            const newToken = await self.exchangeRefreshForAccessToken(
+              refreshToken,
+            )
+            return this.validateToken(newToken, location)
+          }
+          const message = await getDescriptiveErrorMessage(response)
+          throw new Error(`Token could not be validated. ${message}`)
+        }
+        return token
+      },
+    }))
+}
+
+export default stateModelFactory
+export type DropboxOAuthStateModel = ReturnType<typeof stateModelFactory>
+export type DropboxOAuthModel = Instance<DropboxOAuthStateModel>

package/src/ExternalTokenModel/ExternalTokenEntryForm.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
+import DialogActions from '@mui/material/DialogActions'
+import TextField from '@mui/material/TextField'
+
+export const ExternalTokenEntryForm = ({
+  internetAccountId,
+  handleClose,
+}: {
+  internetAccountId: string
+  handleClose: (token?: string) => void
+}) => {
+  const [token, setToken] = useState('')
+
+  return (
+    <>
+      <Dialog open maxWidth="xl" data-testid="externalToken-form">
+        <DialogTitle>Enter Token for {internetAccountId}</DialogTitle>
+        <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
+          <TextField
+            required
+            label="Enter Token"
+            variant="outlined"
+            inputProps={{ 'data-testid': 'entry-externalToken' }}
+            onChange={event => {
+              setToken(event.target.value)
+            }}
+            margin="dense"
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button
+            variant="contained"
+            color="primary"
+            type="submit"
+            disabled={!token}
+            onClick={() => {
+              if (token) {
+                handleClose(token)
+              }
+            }}
+          >
+            Add
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => {
+              handleClose()
+            }}
+          >
+            Cancel
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}

package/src/ExternalTokenModel/configSchema.ts

@@ -0,0 +1,36 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { Instance } from 'mobx-state-tree'
+import { BaseInternetAccountConfig } from '@jbrowse/core/pluggableElementTypes/models'
+
+/**
+ * #config ExternalTokenInternetAccount
+ */
+function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
+
+const ExternalTokenConfigSchema = ConfigurationSchema(
+  'ExternalTokenInternetAccount',
+  {
+    /**
+     * #slot
+     */
+    validateWithHEAD: {
+      description: 'validate the token with a HEAD request before using it',
+      type: 'boolean',
+      defaultValue: true,
+    },
+  },
+  {
+    /**
+     * #baseConfiguration
+     */
+    baseConfiguration: BaseInternetAccountConfig,
+    explicitlyTyped: true,
+  },
+)
+
+export type ExternalTokenInternetAccountConfigModel =
+  typeof ExternalTokenConfigSchema
+
+export type ExternalTokenInternetAccountConfig =
+  Instance<ExternalTokenInternetAccountConfigModel>
+export default ExternalTokenConfigSchema

package/src/ExternalTokenModel/index.ts

@@ -0,0 +1,2 @@
+export { default as configSchema } from './configSchema'
+export { default as modelFactory } from './model'

package/src/ExternalTokenModel/model.tsx

@@ -0,0 +1,70 @@
+import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
+import { InternetAccount } from '@jbrowse/core/pluggableElementTypes/models'
+import { UriLocation } from '@jbrowse/core/util/types'
+import { ExternalTokenInternetAccountConfigModel } from './configSchema'
+import { Instance, types, getRoot } from 'mobx-state-tree'
+
+import { ExternalTokenEntryForm } from './ExternalTokenEntryForm'
+
+const stateModelFactory = (
+  configSchema: ExternalTokenInternetAccountConfigModel,
+) => {
+  return InternetAccount.named('ExternalTokenInternetAccount')
+    .props({
+      type: types.literal('ExternalTokenInternetAccount'),
+      configuration: ConfigurationReference(configSchema),
+    })
+    .views(self => ({
+      get validateWithHEAD(): boolean {
+        return getConf(self, 'validateWithHEAD')
+      },
+    }))
+    .actions(self => ({
+      getTokenFromUser(
+        resolve: (token: string) => void,
+        reject: (error: Error) => void,
+      ) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const { session } = getRoot<any>(self)
+        session.queueDialog((doneCallback: () => void) => [
+          ExternalTokenEntryForm,
+          {
+            internetAccountId: self.internetAccountId,
+            handleClose: (token: string) => {
+              if (token) {
+                resolve(token)
+              } else {
+                reject(new Error('user cancelled entry'))
+              }
+              doneCallback()
+            },
+          },
+        ])
+      },
+      async validateToken(token: string, location: UriLocation) {
+        if (!self.validateWithHEAD) {
+          return token
+        }
+        const newInit = self.addAuthHeaderToInit({ method: 'HEAD' }, token)
+        const response = await fetch(location.uri, newInit)
+        if (!response.ok) {
+          let errorMessage
+          try {
+            errorMessage = await response.text()
+          } catch (error) {
+            errorMessage = ''
+          }
+          throw new Error(
+            `Token could not be validated — ${response.status} (${
+              response.statusText
+            })${errorMessage ? ` (${errorMessage})` : ''}`,
+          )
+        }
+        return token
+      },
+    }))
+}
+
+export default stateModelFactory
+export type ExternalTokenStateModel = ReturnType<typeof stateModelFactory>
+export type ExternalTokenModel = Instance<ExternalTokenStateModel>

package/src/GoogleDriveOAuthModel/configSchema.ts

@@ -0,0 +1,61 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { Instance } from 'mobx-state-tree'
+import OAuthConfigSchema from '../OAuthModel/configSchema'
+
+/**
+ * #config GoogleDriveOAuthInternetAccount
+ */
+function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
+
+const GoogleDriveOAuthConfigSchema = ConfigurationSchema(
+  'GoogleDriveOAuthInternetAccount',
+  {
+    /**
+     * #slot
+     */
+    authEndpoint: {
+      description: 'the authorization code endpoint of the internet account',
+      type: 'string',
+      defaultValue: 'https://accounts.google.com/o/oauth2/v2/auth',
+    },
+    /**
+     * #slot
+     */
+    scopes: {
+      description: 'optional scopes for the authorization call',
+      type: 'string',
+      defaultValue: 'https://www.googleapis.com/auth/drive.readonly',
+    },
+    /**
+     * #slot
+     */
+    domains: {
+      description:
+        'array of valid domains the url can contain to use this account',
+      type: 'stringArray',
+      defaultValue: ['drive.google.com"'],
+    },
+    /**
+     * #slot
+     */
+    responseType: {
+      description: 'the type of response from the authorization endpoint',
+      type: 'string',
+      defaultValue: 'token',
+    },
+  },
+  {
+    /**
+     * #baseConfiguration
+     */
+    baseConfiguration: OAuthConfigSchema,
+    explicitlyTyped: true,
+  },
+)
+
+export type GoogleDriveOAuthInternetAccountConfigModel =
+  typeof GoogleDriveOAuthConfigSchema
+
+export type GoogleDriveOAuthInternetAccountConfig =
+  Instance<GoogleDriveOAuthInternetAccountConfigModel>
+export default GoogleDriveOAuthConfigSchema

package/src/GoogleDriveOAuthModel/index.ts

@@ -0,0 +1,2 @@
+export { default as configSchema } from './configSchema'
+export { default as modelFactory } from './model'

package/src/GoogleDriveOAuthModel/model.tsx

@@ -0,0 +1,174 @@
+import React from 'react'
+import { ConfigurationReference } from '@jbrowse/core/configuration'
+import { Instance, types } from 'mobx-state-tree'
+import { RemoteFileWithRangeCache } from '@jbrowse/core/util/io'
+import { UriLocation } from '@jbrowse/core/util/types'
+import { SvgIconProps, SvgIcon } from '@mui/material'
+import {
+  FilehandleOptions,
+  Stats,
+  PolyfilledResponse,
+} from 'generic-filehandle'
+
+// locals
+import { GoogleDriveOAuthInternetAccountConfigModel } from './configSchema'
+import baseModel from '../OAuthModel/model'
+import { configSchema as OAuthConfigSchema } from '../OAuthModel'
+
+export interface RequestInitWithMetadata extends RequestInit {
+  metadataOnly?: boolean
+}
+
+interface GoogleDriveFilehandleOptions extends FilehandleOptions {
+  fetch(
+    input: RequestInfo,
+    opts?: RequestInitWithMetadata,
+  ): Promise<PolyfilledResponse>
+}
+
+interface GoogleDriveError {
+  error: {
+    errors: {
+      domain: string
+      reason: string
+      message: string
+      locationType?: string
+      location?: string
+    }[]
+    code: number
+    message: string
+  }
+}
+
+export class GoogleDriveFile extends RemoteFileWithRangeCache {
+  private statsPromise: Promise<{ size: number }>
+  constructor(source: string, opts: GoogleDriveFilehandleOptions) {
+    super(source, opts)
+    this.statsPromise = this.fetch(source, {
+      metadataOnly: true,
+    }).then((response: Response) => response.json())
+  }
+
+  async fetch(
+    input: RequestInfo,
+    opts?: RequestInitWithMetadata,
+  ): Promise<PolyfilledResponse> {
+    return super.fetch(input, opts)
+  }
+
+  async stat(): Promise<Stats> {
+    return this.statsPromise
+  }
+}
+
+function GoogleDriveIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M7.71,3.5L1.15,15L4.58,21L11.13,9.5M9.73,15L6.3,21H19.42L22.85,15M22.28,14L15.42,2H8.58L8.57,2L15.43,14H22.28Z" />
+    </SvgIcon>
+  )
+}
+
+async function getDescriptiveErrorMessage(response: Response) {
+  let errorMessage
+  try {
+    errorMessage = await response.text()
+  } catch (error) {
+    errorMessage = ''
+  }
+  if (errorMessage) {
+    let errorMessageParsed: GoogleDriveError | undefined
+    try {
+      errorMessageParsed = JSON.parse(errorMessage)
+    } catch (error) {
+      errorMessageParsed = undefined
+    }
+    if (errorMessageParsed) {
+      errorMessage = errorMessageParsed.error.message
+    }
+  }
+  return `Network response failure — ${response.status} (${
+    response.statusText
+  })${errorMessage ? ` (${errorMessage})` : ''}`
+}
+
+const stateModelFactory = (
+  configSchema: GoogleDriveOAuthInternetAccountConfigModel,
+) => {
+  return baseModel(OAuthConfigSchema)
+    .named('GoogleDriveOAuthInternetAccount')
+    .props({
+      type: types.literal('GoogleDriveOAuthInternetAccount'),
+      configuration: ConfigurationReference(configSchema),
+    })
+    .views(() => ({
+      get toggleContents() {
+        return <GoogleDriveIcon />
+      },
+      get selectorLabel() {
+        return 'Enter Google Drive share link'
+      },
+    }))
+    .actions(self => ({
+      getFetcher(
+        location?: UriLocation,
+      ): (input: RequestInfo, init?: RequestInit) => Promise<Response> {
+        return async (
+          input: RequestInfo,
+          init?: RequestInitWithMetadata,
+        ): Promise<Response> => {
+          const urlId = String(input).match(/[-\w]{25,}/)
+          const driveUrl = new URL(
+            `https://www.googleapis.com/drive/v3/files/${urlId}`,
+          )
+          const searchParams = new URLSearchParams()
+          if (init?.metadataOnly) {
+            searchParams.append('fields', 'size')
+          } else {
+            searchParams.append('alt', 'media')
+          }
+          driveUrl.search = searchParams.toString()
+          const authToken = await self.getToken(location)
+          const newInit = self.addAuthHeaderToInit(
+            { ...init, method: 'GET', credentials: 'same-origin' },
+            authToken,
+          )
+          const response = await fetch(driveUrl.toString(), newInit)
+          if (!response.ok) {
+            const message = await getDescriptiveErrorMessage(response)
+            throw new Error(message)
+          }
+          return response
+        }
+      },
+      openLocation(location: UriLocation) {
+        return new GoogleDriveFile(location.uri, {
+          fetch: this.getFetcher(location),
+        })
+      },
+      async validateToken(
+        token: string,
+        location: UriLocation,
+      ): Promise<string> {
+        const urlId = location.uri.match(/[-\w]{25,}/)
+        const response = await fetch(
+          `https://www.googleapis.com/drive/v3/files/${urlId}`,
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+              'Content-Type': 'application/x-www-form-urlencoded',
+            },
+          },
+        )
+        if (!response.ok) {
+          const message = await getDescriptiveErrorMessage(response)
+          throw new Error(`Token could not be validated. ${message}`)
+        }
+        return token
+      },
+    }))
+}
+
+export default stateModelFactory
+export type GoogleDriveOAuthStateModel = ReturnType<typeof stateModelFactory>
+export type GoogleDriveOAuthModel = Instance<GoogleDriveOAuthStateModel>

package/src/HTTPBasicModel/HTTPBasicLoginForm.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react'
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogActions,
+  TextField,
+} from '@mui/material'
+
+export const HTTPBasicLoginForm = ({
+  internetAccountId,
+  handleClose,
+}: {
+  internetAccountId: string
+  handleClose: (arg?: string) => void
+}) => {
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+
+  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    if (username && password) {
+      handleClose(btoa(`${username}:${password}`))
+    } else {
+      handleClose()
+    }
+    event.preventDefault()
+  }
+
+  return (
+    <>
+      <Dialog open maxWidth="xl" data-testid="login-httpbasic">
+        <DialogTitle>Log In for {internetAccountId}</DialogTitle>
+        <form onSubmit={onSubmit}>
+          <DialogContent style={{ display: 'flex', flexDirection: 'column' }}>
+            <TextField
+              required
+              label="Username"
+              variant="outlined"
+              inputProps={{ 'data-testid': 'login-httpbasic-username' }}
+              onChange={event => setUsername(event.target.value)}
+              margin="dense"
+            />
+            <TextField
+              required
+              label="Password"
+              type="password"
+              autoComplete="current-password"
+              variant="outlined"
+              inputProps={{ 'data-testid': 'login-httpbasic-password' }}
+              onChange={event => setPassword(event.target.value)}
+              margin="dense"
+            />
+          </DialogContent>
+          <DialogActions>
+            <Button variant="contained" color="primary" type="submit">
+              Submit
+            </Button>
+            <Button
+              variant="contained"
+              type="submit"
+              onClick={() => handleClose()}
+            >
+              Cancel
+            </Button>
+          </DialogActions>
+        </form>
+      </Dialog>
+    </>
+  )
+}

package/src/HTTPBasicModel/configSchema.ts

@@ -0,0 +1,43 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+import { Instance } from 'mobx-state-tree'
+import { BaseInternetAccountConfig } from '@jbrowse/core/pluggableElementTypes/models'
+
+/**
+ * #config HTTPBasicInternetAccount
+ */
+function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
+
+const HTTPBasicConfigSchema = ConfigurationSchema(
+  'HTTPBasicInternetAccount',
+  {
+    /**
+     * #slot
+     */
+    tokenType: {
+      description: 'a custom name for a token to include in the header',
+      type: 'string',
+      defaultValue: 'Basic',
+    },
+    /**
+     * #slot
+     */
+    validateWithHEAD: {
+      description: 'validate the token with a HEAD request before using it',
+      type: 'boolean',
+      defaultValue: true,
+    },
+  },
+  {
+    /**
+     * #baseConfiguration
+     */
+    baseConfiguration: BaseInternetAccountConfig,
+    explicitlyTyped: true,
+  },
+)
+
+export type HTTPBasicInternetAccountConfigModel = typeof HTTPBasicConfigSchema
+
+export type HTTPBasicInternetAccountConfig =
+  Instance<HTTPBasicInternetAccountConfigModel>
+export default HTTPBasicConfigSchema

package/src/HTTPBasicModel/index.ts

@@ -0,0 +1,2 @@
+export { default as configSchema } from './configSchema'
+export { default as modelFactory } from './model'