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            projectNameForProxy: '@community/native-component-list',
57            // Tint the controller
58            toolbarColor: color,
59            // iOS -- unused, possibly should remove the types
60            controlsColor: color,
61            secondaryToolbarColor: color,
62          })
63        }
64      />
65      <View style={{ padding: 8 }}>
66        <KVText
67          href={request?.redirectUri}
68          k="Redirect URL"
69          v={request?.redirectUri || 'Loading...'}
70        />
71        <AuthResult result={params} />
72        <AuthResult result={tokenResponse} />
73      </View>
74    </View>
75  );
76}
77
78export function KVText({ k, v, href, ...props }: any) {
79  if (href) {
80    return (
81      <A {...props} style={{ color: '#709CCF' }} numberOfLines={2}>
82        <B style={{ color: '#999' }}>{k}</B> {v}
83      </A>
84    );
85  }
86  return (
87    <Text {...props} style={{ color: '#999' }} numberOfLines={2}>
88      <Text>{k}: </Text>
89      {JSON.stringify(v, null, '\t')}
90    </Text>
91  );
92}
93