1import { A, B } from '@expo/html-elements';
2import * as AuthSession from 'expo-auth-session';
3import React from 'react';
4import { Text, View } from 'react-native';
5
6import AuthCard from './AuthCard';
7
8export function AuthResult({ result }: any) {
9  if (!result) {
10    return null;
11  }
12  return (
13    <View>
14      {Object.keys(result).map(key => {
15        const value = result[key];
16        if (['_', '#', ''].includes(key)) return null;
17
18        return <KVText key={key} k={key} v={value} />;
19      })}
20    </View>
21  );
22}
23
24export function AuthSection({
25  title,
26  request,
27  result,
28  tokenResponse,
29  promptAsync,
30  useProxy,
31  disabled,
32}: {
33  title: string;
34  request: null | AuthSession.AuthRequest;
35  result: null | AuthSession.AuthSessionResult;
36  tokenResponse?: null | AuthSession.TokenResponse;
37  promptAsync: (
38    options?: AuthSession.AuthRequestPromptOptions
39  ) => Promise<AuthSession.AuthSessionResult>;
40  useProxy?: boolean;
41  disabled?: boolean;
42}) {
43  // @ts-ignore
44  const params = result?.params;
45
46  return (
47    <View style={{ paddingBottom: 8 }}>
48      <AuthCard
49        name={title}
50        disabled={disabled}
51        status={result?.type}
52        url={request?.url}
53        onPress={color =>
54          promptAsync({
55            useProxy,
56            // Tint the controller
57            toolbarColor: color,
58            // iOS -- unused, possibly should remove the types
59            controlsColor: color,
60            secondaryToolbarColor: color,
61          })
62        }
63      />
64      <View style={{ padding: 8 }}>
65        <KVText
66          href={request?.redirectUri}
67          k="Redirect URL"
68          v={request?.redirectUri || 'Loading...'}
69        />
70        <AuthResult result={params} />
71        <AuthResult result={tokenResponse} />
72      </View>
73    </View>
74  );
75}
76
77export function KVText({ k, v, href, ...props }: any) {
78  if (href) {
79    return (
80      <A {...props} style={{ color: '#709CCF' }} numberOfLines={2}>
81        <B style={{ color: '#999' }}>{k}</B> {v}
82      </A>
83    );
84  }
85  return (
86    <Text {...props} style={{ color: '#999' }} numberOfLines={2}>
87      <B>{k}</B> {v}
88    </Text>
89  );
90}
91