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  disabled,
31}: {
32  title: string;
33  request: null | AuthSession.AuthRequest;
34  result: null | AuthSession.AuthSessionResult;
35  tokenResponse?: null | AuthSession.TokenResponse;
36  promptAsync: (
37    options?: AuthSession.AuthRequestPromptOptions
38  ) => Promise<AuthSession.AuthSessionResult>;
39  disabled?: boolean;
40}) {
41  // @ts-ignore
42  const params = result?.params;
43
44  return (
45    <View style={{ paddingBottom: 8 }}>
46      <AuthCard
47        name={title}
48        disabled={disabled}
49        status={result?.type}
50        url={request?.url}
51        onPress={(color) =>
52          promptAsync({
53            // Tint the controller
54            toolbarColor: color,
55            // iOS -- unused, possibly should remove the types
56            controlsColor: color,
57            secondaryToolbarColor: color,
58          })
59        }
60      />
61      <View style={{ padding: 8 }}>
62        <KVText
63          href={request?.redirectUri}
64          k="Redirect URL"
65          v={request?.redirectUri || 'Loading...'}
66        />
67        <AuthResult result={params} />
68        <AuthResult result={tokenResponse} />
69      </View>
70    </View>
71  );
72}
73
74export function KVText({ k, v, href, ...props }: any) {
75  if (href) {
76    return (
77      <A {...props} style={{ color: '#709CCF' }} numberOfLines={2}>
78        <B style={{ color: '#999' }}>{k}</B> {v}
79      </A>
80    );
81  }
82  return (
83    <Text {...props} style={{ color: '#999' }} numberOfLines={2}>
84      <Text>{k}: </Text>
85      {JSON.stringify(v, null, '\t')}
86    </Text>
87  );
88}
89