1import * as React from 'react'
2import * as Constants from '../../constants/profile'
3import * as Kb from '../../common-adapters'
4import * as Styles from '../../styles'
5import {subtitle} from '../../util/platforms'
6import openUrl from '../../util/open-url'
7import {ProvablePlatformsType} from '../../constants/types/more'
8import Modal from '../modal'
9
10export type Props = {
11  copyToClipboard: (arg0: string) => void
12  errorMessage: string
13  onCancel: () => void
14  onSubmit: () => void
15  openLinkBeforeSubmit: boolean
16  platform: ProvablePlatformsType
17  platformUserName: string
18  proofText: string
19  url: string
20}
21
22const actionMap: {[K in string]: string | null} = {
23  github: 'Create gist now',
24  hackernews: 'Go to Hacker News',
25  reddit: 'Reddit form',
26  twitter: 'Tweet it now',
27}
28
29const checkMap: {[K in string]: string | null} = {
30  twitter: 'OK tweeted! Check for it!',
31}
32
33const webNote = 'Note: If someone already verified this domain, just append to the existing keybase.txt file.'
34
35const noteMap: {[K in string]: string | null} = {
36  http: webNote,
37  https: webNote,
38  reddit: "Make sure you're signed in to Reddit, and don't edit the text or title before submitting.",
39  web: webNote,
40}
41
42const WebDescription = ({platformUserName}) => {
43  const root = `${platformUserName}/keybase.txt`
44  const wellKnown = `${platformUserName}/.well-known/keybase.txt`
45  return (
46    <Kb.Box style={Styles.globalStyles.flexBoxColumn}>
47      <Kb.Text center={true} type="BodySemibold">
48        Please serve the text below <Kb.Text type="BodySemiboldItalic">exactly as it appears</Kb.Text> at one
49        of these URL's.
50      </Kb.Text>
51      <Kb.Text
52        type="BodyPrimaryLink"
53        center={true}
54        onClickURL={`https://${root}`}
55        style={{color: Styles.globalColors.blueDark, marginTop: Styles.globalMargins.tiny}}
56      >
57        {root}
58      </Kb.Text>
59      <Kb.Text
60        type="BodyPrimaryLink"
61        center={true}
62        onClickURL={`https://${wellKnown}`}
63        style={{color: Styles.globalColors.blueDark}}
64      >
65        {wellKnown}
66      </Kb.Text>
67    </Kb.Box>
68  )
69}
70
71const descriptionMap: {[K in string]: React.ComponentType<any>} = {
72  dns: () => (
73    <Kb.Text center={true} type="BodySemibold">
74      Enter the following as a TXT entry in your DNS zone,{' '}
75      <Kb.Text type="BodySemibold">exactly as it appears</Kb.Text>. If you need a "name" for your entry, give
76      it "@".
77    </Kb.Text>
78  ),
79  github: () => (
80    <Kb.Text center={true} type="BodySemibold">
81      Login to GitHub and paste the text below into a <Kb.Text type="BodySemiboldItalic">public</Kb.Text> gist
82      called <Kb.Text type="BodySemiboldItalic">keybase.md.</Kb.Text>
83    </Kb.Text>
84  ),
85  hackernews: () => (
86    <Kb.Text center={true} type="BodySemibold">
87      Please add the below text{' '}
88      <Kb.Text type="BodySemibold" style={{...Styles.globalStyles.italic}}>
89        exactly as it appears
90      </Kb.Text>{' '}
91      to your profile.
92    </Kb.Text>
93  ),
94  http: WebDescription,
95  https: WebDescription,
96  reddit: () => (
97    <Kb.Text center={true} type="BodySemibold">
98      Click the button below and post the form in the subreddit{' '}
99      <Kb.Text type="BodySemiboldItalic">KeybaseProofs</Kb.Text>.
100    </Kb.Text>
101  ),
102  twitter: () => (
103    <Kb.Text center={true} type="BodySemibold">
104      Please tweet the text below{' '}
105      <Kb.Text type="BodySemiboldItalic" style={{...Styles.globalStyles.italic}}>
106        exactly as it appears.
107      </Kb.Text>
108    </Kb.Text>
109  ),
110  web: WebDescription,
111}
112
113type State = {
114  showSubmit: boolean
115}
116
117class PostProof extends React.Component<Props, State> {
118  state = {
119    showSubmit: !this.props.openLinkBeforeSubmit,
120  }
121  render() {
122    const props = this.props
123    const platformSubtitle = subtitle(props.platform)
124    const proofActionText = actionMap[props.platform] || ''
125    const onCompleteText = checkMap[props.platform] || 'OK posted! Check for it!'
126    const noteText = noteMap[props.platform] || ''
127    const DescriptionView = descriptionMap[props.platform]
128    const {proofText} = props
129
130    return (
131      <Modal onCancel={props.onCancel} skipButton={true}>
132        <Kb.ScrollView
133          style={styles.scroll}
134          contentContainerStyle={styles.scrollContent}
135          key={
136            props.errorMessage || 'scroll' /* if we get an error redraw entirely so we're not scrolled down */
137          }
138        >
139          <Kb.Box2
140            direction="vertical"
141            gap="small"
142            onCopyCapture={e => {
143              // disallow copying the whole screen by accident
144              e.preventDefault()
145              proofText && props.copyToClipboard(proofText)
146            }}
147          >
148            {!!props.errorMessage && (
149              <Kb.Box2 direction="vertical" fullWidth={true} style={styles.error}>
150                <Kb.Text center={true} negative={true} type="BodySemibold">
151                  {props.errorMessage}
152                </Kb.Text>
153              </Kb.Box2>
154            )}
155            <Kb.PlatformIcon
156              platform={props.platform}
157              style={styles.center}
158              overlay="icon-proof-unfinished"
159              overlayColor={Styles.globalColors.greyDark}
160            />
161            <>
162              <Kb.Text center={true} style={styles.blue} type="Header">
163                {props.platformUserName}
164              </Kb.Text>
165              {!!platformSubtitle && (
166                <Kb.Text center={true} style={styles.grey} type="Body">
167                  {platformSubtitle}
168                </Kb.Text>
169              )}
170            </>
171            <DescriptionView platformUserName={props.platformUserName} />
172            {!!proofText && <Kb.CopyableText style={styles.proof} value={proofText} />}
173            {!!noteText && (
174              <Kb.Text center={true} type="Body">
175                {noteText}
176              </Kb.Text>
177            )}
178            <Kb.Box2 direction={Styles.isMobile ? 'verticalReverse' : 'horizontal'} gap="small">
179              <Kb.Button type="Dim" onClick={props.onCancel} label="Cancel" />
180              {this.state.showSubmit ? (
181                <Kb.WaitingButton
182                  onClick={props.onSubmit}
183                  label={onCompleteText || ''}
184                  waitingKey={Constants.waitingKey}
185                />
186              ) : (
187                <Kb.Button
188                  onClick={() => {
189                    this.setState({showSubmit: true})
190                    props.url && openUrl(props.url)
191                  }}
192                  label={proofActionText || ''}
193                />
194              )}
195            </Kb.Box2>
196          </Kb.Box2>
197        </Kb.ScrollView>
198      </Modal>
199    )
200  }
201}
202
203const styles = Styles.styleSheetCreate(() => ({
204  blue: {color: Styles.globalColors.blueDark},
205  center: {alignSelf: 'center'},
206  error: {
207    alignSelf: 'center',
208    backgroundColor: Styles.globalColors.red,
209    borderRadius: Styles.borderRadius,
210    padding: Styles.globalMargins.medium,
211  },
212  grey: {color: Styles.globalColors.black_20},
213  proof: {
214    flexGrow: 1,
215    minHeight: 116,
216  },
217  scroll: {width: '100%'},
218  scrollContent: {width: '100%'},
219}))
220
221export default PostProof
222