feat: add discord login provider

src/components/common/issuer-icon.tsx

@@ -1,4 +1,4 @@
-import { faGithub, faGoogle } from '@fortawesome/free-brands-svg-icons';
+import { faDiscord, faGithub, faGoogle } from '@fortawesome/free-brands-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { Issuer } from '../../lib/api/api.model';
@@ -9,5 +9,6 @@ export function IssuerIcon({ issuer }: { issuer: Issuer }) {
     [Issuer.GITHUB]: (<FontAwesomeIcon icon={faGithub} />),
     [Issuer.GOOGLE]: (<FontAwesomeIcon icon={faGoogle} />),
     [Issuer.COGNITO]: (<Gw2AuthLogo />),
+    [Issuer.DISCORD]: (<FontAwesomeIcon icon={faDiscord} />),
   }[issuer];
 }

src/components/login/login.tsx

@@ -12,9 +12,10 @@ export default function Login() {
   const [previousIssuer] = usePreviousIssuer();
   const [alert, loginSelection] = useMemo(() => {
     const buttonByIssuer = {
-      [Issuer.GITHUB]: (<Button iconSvg={<IssuerIcon issuer={Issuer.GITHUB} /> } variant={'primary'} fullWidth={true} href={'/auth/oauth2/authorization/github'}>{i18n.components.login.loginWith(Issuer.GITHUB)}</Button>),
+      [Issuer.GITHUB]: (<Button iconSvg={<IssuerIcon issuer={Issuer.GITHUB} />} variant={'primary'} fullWidth={true} href={'/auth/oauth2/authorization/github'}>{i18n.components.login.loginWith(Issuer.GITHUB)}</Button>),
       [Issuer.GOOGLE]: (<Button iconSvg={<IssuerIcon issuer={Issuer.GOOGLE} />} variant={'primary'} fullWidth={true} href={'/auth/oauth2/authorization/google'}>{i18n.components.login.loginWith(Issuer.GOOGLE)}</Button>),
       [Issuer.COGNITO]: (<Button iconSvg={<IssuerIcon issuer={Issuer.COGNITO} />} variant={'primary'} fullWidth={true} href={'/auth/oauth2/authorization/cognito'}>{i18n.components.login.loginWith(Issuer.COGNITO)}</Button>),
+      [Issuer.DISCORD]: (<Button iconSvg={<IssuerIcon issuer={Issuer.DISCORD} />} variant={'primary'} fullWidth={true} href={'/auth/oauth2/authorization/discord'}>{i18n.components.login.loginWith(Issuer.DISCORD)}</Button>),
     };
 
     if (previousIssuer === null) {
@@ -31,6 +32,7 @@ export default function Login() {
             {buttonByIssuer[Issuer.GITHUB]}
             {buttonByIssuer[Issuer.GOOGLE]}
             {buttonByIssuer[Issuer.COGNITO]}
+            {buttonByIssuer[Issuer.DISCORD]}
           </ColumnLayout>
         ),
       ];
@@ -52,6 +54,7 @@ export default function Login() {
               {previousIssuer !== Issuer.GITHUB && buttonByIssuer[Issuer.GITHUB]}
               {previousIssuer !== Issuer.GOOGLE && buttonByIssuer[Issuer.GOOGLE]}
               {previousIssuer !== Issuer.COGNITO && buttonByIssuer[Issuer.COGNITO]}
+              {previousIssuer !== Issuer.DISCORD && buttonByIssuer[Issuer.DISCORD]}
             </ColumnLayout>
           </ExpandableSection>
         </ColumnLayout>

src/lib/api/api.model.ts

@@ -24,6 +24,7 @@ export enum Issuer {
   GITHUB = 'github',
   GOOGLE = 'google',
   COGNITO = 'cognito',
+  DISCORD = 'discord',
 }
 
 export interface AuthInfo {

src/lib/i18n/i18n_de.tsx

@@ -13,6 +13,7 @@ const COMMON = {
     [Issuer.GITHUB]: 'GitHub',
     [Issuer.GOOGLE]: 'Google',
     [Issuer.COGNITO]: 'E-Mail & Passwort',
+    [Issuer.DISCORD]: 'Discord',
   })[issuer] ?? 'unbekannt',
   copyrightGw2: [
     'Diese Seite steht in keiner Verbindung zu ArenaNet, Guild Wars 2 oder einem ihrer Partner. Alle Urheberrechte sind den jeweiligen Eigentümern vorbehalten.',

src/lib/i18n/i18n_en.tsx

@@ -13,6 +13,7 @@ const COMMON = {
     [Issuer.GITHUB]: 'GitHub',
     [Issuer.GOOGLE]: 'Google',
     [Issuer.COGNITO]: 'E-Mail & Password',
+    [Issuer.DISCORD]: 'Discord',
   })[issuer] ?? 'unknown',
   copyrightGw2: [
     'This site is not affiliated with ArenaNet, Guild Wars 2, or any of their partners. All copyrights reserved to their respective owners.',

src/pages/account/settings.tsx

@@ -11,13 +11,14 @@ import {
   SpaceBetween,
   StatusIndicator,
 } from '@cloudscape-design/components';
-import { faGithub, faGoogle } from '@fortawesome/free-brands-svg-icons';
+import { faDiscord, faGithub, faGoogle } from '@fortawesome/free-brands-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useEffect, useState } from 'react';
 import { CustomTable } from '../../components/common/custom-table';
 import { DeleteModal, DeleteModalProps } from '../../components/common/delete-modal';
 import { Gw2AuthLogo } from '../../components/common/gw2auth-logo';
 import { Hidden } from '../../components/common/hidden';
+import { IssuerIcon } from '../../components/common/issuer-icon';
 import { catchNotify, useAppControls } from '../../components/util/context/app-controls';
 import { useAuthInfo, useMustAuthInfo } from '../../components/util/context/auth-info';
 import { useHttpClient } from '../../components/util/context/http-client';
@@ -343,6 +344,7 @@ function IssuerLabel({ issuer }: { issuer: Issuer }) {
     [Issuer.GITHUB]: <FontAwesomeIcon icon={faGithub} />,
     [Issuer.GOOGLE]: <FontAwesomeIcon icon={faGoogle} />,
     [Issuer.COGNITO]: <Icon svg={<Gw2AuthLogo inverse={true} />} />,
+    [Issuer.DISCORD]: <FontAwesomeIcon icon={faDiscord} />,
   })[issuer] ?? <Icon name={'status-warning'} />;
 
   return (
@@ -355,9 +357,10 @@ function AddLoginProviderModalContent() {
 
   return (
     <ColumnLayout columns={1}>
-      <Button iconSvg={<FontAwesomeIcon icon={faGithub} />} variant={'primary'} fullWidth={true} href={'/api/account/federation/github'}>{i18n.pages.settings.loginProviderName(Issuer.GITHUB)}</Button>
-      <Button iconSvg={<FontAwesomeIcon icon={faGoogle} />} variant={'primary'} fullWidth={true} href={'/api/account/federation/google'}>{i18n.pages.settings.loginProviderName(Issuer.GOOGLE)}</Button>
-      <Button iconSvg={<Gw2AuthLogo />} variant={'primary'} fullWidth={true} href={'/api/account/federation/cognito'}>{i18n.pages.settings.loginProviderName(Issuer.COGNITO)}</Button>
+      <Button iconSvg={<IssuerIcon issuer={Issuer.GITHUB} />} variant={'primary'} fullWidth={true} href={'/api/account/federation/github'}>{i18n.pages.settings.loginProviderName(Issuer.GITHUB)}</Button>
+      <Button iconSvg={<IssuerIcon issuer={Issuer.GOOGLE} />} variant={'primary'} fullWidth={true} href={'/api/account/federation/google'}>{i18n.pages.settings.loginProviderName(Issuer.GOOGLE)}</Button>
+      <Button iconSvg={<IssuerIcon issuer={Issuer.COGNITO} />} variant={'primary'} fullWidth={true} href={'/api/account/federation/cognito'}>{i18n.pages.settings.loginProviderName(Issuer.COGNITO)}</Button>
+      <Button iconSvg={<IssuerIcon issuer={Issuer.DISCORD} />} variant={'primary'} fullWidth={true} href={'/api/account/federation/discord'}>{i18n.pages.settings.loginProviderName(Issuer.DISCORD)}</Button>
     </ColumnLayout>
   );
 }

src/pages/privacy-policy.tsx

@@ -158,7 +158,7 @@ export function PrivacyPolicy() {
         <Box variant={'p'}>
           We use different login providers to offer our users a variety of options to create and login to their accounts. The privacy policies of our login providers can be viewed at:
         </Box>
-        <KeyValuePairs columns={3}>
+        <KeyValuePairs columns={4}>
           <ValueWithLabel label={'GitHub'}>
             <Link href={'https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement'} external={true}>https://docs.github.com/en/site-policy/privacy-policies/github-privacy-statement</Link>
           </ValueWithLabel>
@@ -170,6 +170,10 @@ export function PrivacyPolicy() {
           <ValueWithLabel label={'E-Mail & Password'}>
             This login provider is managed by AWS (Amazon Web Services) solely for us. The privacy policy of AWS can be viewed at <Link href={'https://aws.amazon.com/privacy'} external={true}>https://aws.amazon.com/privacy</Link>
           </ValueWithLabel>
+
+          <ValueWithLabel label={'Discord'}>
+            <Link href={'https://discord.com/privacy'} external={true}>https://discord.com/privacy</Link>
+          </ValueWithLabel>
         </KeyValuePairs>
       </Container>