Adapt react-client to use the real backend API (#1545)

Co-authored-by: Philip Molares <philip.molares@udo.edu>
Co-authored-by: Tilman Vatteroth <git@tilmanvatteroth.de>

src/components/login-page/auth/via-one-click.tsx

@@ -4,113 +4,22 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React from 'react'
-import { useApplicationState } from '../../../hooks/common/use-application-state'
-import type { IconName } from '../../common/fork-awesome/types'
+import React, { useMemo } from 'react'
 import { SocialLinkButton } from './social-link-button/social-link-button'
-import styles from './via-one-click.module.scss'
-
-export enum OneClickType {
-  'DROPBOX' = 'dropbox',
-  'FACEBOOK' = 'facebook',
-  'GITHUB' = 'github',
-  'GITLAB' = 'gitlab',
-  'GOOGLE' = 'google',
-  'OAUTH2' = 'oauth2',
-  'SAML' = 'saml',
-  'TWITTER' = 'twitter'
-}
-
-interface OneClickMetadata {
-  name: string
-  icon: IconName
-  className: string
-  url: string
-}
-
-const buildBackendAuthUrl = (backendUrl: string, backendName: string): string => {
-  return `${backendUrl}/auth/${backendName}`
-}
-
-const getMetadata = (backendUrl: string, oneClickType: OneClickType): OneClickMetadata => {
-  const buildBackendAuthUrlWithFirstParameterSet = (backendName: string): string =>
-    buildBackendAuthUrl(backendUrl, backendName)
-  switch (oneClickType) {
-    case OneClickType.DROPBOX:
-      return {
-        name: 'Dropbox',
-        icon: 'dropbox',
-        className: styles['btn-social-dropbox'],
-        url: buildBackendAuthUrlWithFirstParameterSet('dropbox')
-      }
-    case OneClickType.FACEBOOK:
-      return {
-        name: 'Facebook',
-        icon: 'facebook',
-        className: styles['btn-social-facebook'],
-        url: buildBackendAuthUrlWithFirstParameterSet('facebook')
-      }
-    case OneClickType.GITHUB:
-      return {
-        name: 'GitHub',
-        icon: 'github',
-        className: styles['btn-social-github'],
-        url: buildBackendAuthUrlWithFirstParameterSet('github')
-      }
-    case OneClickType.GITLAB:
-      return {
-        name: 'GitLab',
-        icon: 'gitlab',
-        className: styles['btn-social-gitlab'],
-        url: buildBackendAuthUrlWithFirstParameterSet('gitlab')
-      }
-    case OneClickType.GOOGLE:
-      return {
-        name: 'Google',
-        icon: 'google',
-        className: styles['btn-social-google'],
-        url: buildBackendAuthUrlWithFirstParameterSet('google')
-      }
-    case OneClickType.OAUTH2:
-      return {
-        name: 'OAuth2',
-        icon: 'address-card',
-        className: 'btn-primary',
-        url: buildBackendAuthUrlWithFirstParameterSet('oauth2')
-      }
-    case OneClickType.SAML:
-      return {
-        name: 'SAML',
-        icon: 'users',
-        className: 'btn-success',
-        url: buildBackendAuthUrlWithFirstParameterSet('saml')
-      }
-    case OneClickType.TWITTER:
-      return {
-        name: 'Twitter',
-        icon: 'twitter',
-        className: styles['btn-social-twitter'],
-        url: buildBackendAuthUrlWithFirstParameterSet('twitter')
-      }
-    default:
-      return {
-        name: '',
-        icon: 'exclamation',
-        className: '',
-        url: '#'
-      }
-  }
-}
+import type { AuthProvider, AuthProviderWithCustomName } from '../../../api/config/types'
+import { getOneClickProviderMetadata } from './utils/get-one-click-provider-metadata'
 
 export interface ViaOneClickProps {
-  oneClickType: OneClickType
-  optionalName?: string
+  provider: AuthProvider
 }
 
-export const ViaOneClick: React.FC<ViaOneClickProps> = ({ oneClickType, optionalName }) => {
-  const backendUrl = useApplicationState((state) => state.apiUrl.apiUrl)
-  const { name, icon, className, url } = getMetadata(backendUrl, oneClickType)
-  const text = optionalName || name
+/**
+ * Renders a login button for the given one-click login provider.
+ * @param provider The one-click login provider. In case of ones that can be defined multiple times, an identifier and a label is required.
+ */
+export const ViaOneClick: React.FC<ViaOneClickProps> = ({ provider }) => {
+  const { className, icon, url, name } = useMemo(() => getOneClickProviderMetadata(provider), [provider])
+  const text = (provider as AuthProviderWithCustomName).providerName || name
 
   return (
     <SocialLinkButton backgroundClass={className} icon={icon} href={url} title={text}>