|  | 
|  | 1 | +import {CopyToClipboard} from '@remix-ui/clipboard' | 
|  | 2 | +import {CustomTooltip} from '@remix-ui/helper' | 
|  | 3 | +import React, {useEffect, useState} from 'react' | 
|  | 4 | +import {FormattedMessage, useIntl} from 'react-intl' | 
|  | 5 | +import {CorsproxySettingsProps} from '../types' | 
|  | 6 | + | 
|  | 7 | +export function CorsproxySettings(props: CorsproxySettingsProps) { | 
|  | 8 | +  const [url, setUrl] = useState<string>('') | 
|  | 9 | +  const intl = useIntl() | 
|  | 10 | + | 
|  | 11 | +  useEffect(() => { | 
|  | 12 | +    if (props.config) { | 
|  | 13 | +      const url = props.config.get('settings/corsproxy-url') || 'https://corsproxy.remixproject.org/' | 
|  | 14 | + | 
|  | 15 | +      setUrl(url) | 
|  | 16 | +    } | 
|  | 17 | +  }, [props.config]) | 
|  | 18 | + | 
|  | 19 | +  const handleChangeUrlState = (event) => { | 
|  | 20 | +    setUrl(event.target.value) | 
|  | 21 | +  } | 
|  | 22 | + | 
|  | 23 | +  const saveCorsproxy = () => { | 
|  | 24 | +    props.saveCorsproxy(url) | 
|  | 25 | +  } | 
|  | 26 | + | 
|  | 27 | +  const removeToken = () => { | 
|  | 28 | +    setUrl('') | 
|  | 29 | +    props.removeCorsproxy() | 
|  | 30 | +  } | 
|  | 31 | + | 
|  | 32 | +  return ( | 
|  | 33 | +    <div className="border-top"> | 
|  | 34 | +      <div className="card-body pt-3 pb-2"> | 
|  | 35 | +        <h6 className="card-title"> | 
|  | 36 | +          <FormattedMessage id="settings.corsproxyTitle" /> | 
|  | 37 | +        </h6> | 
|  | 38 | +        <FormattedMessage id="settings.corsproxyText" /> | 
|  | 39 | +        <div className="p-1 pl-3"> | 
|  | 40 | +          <b>npm install -g @drafish/cors-proxy</b> | 
|  | 41 | +        </div> | 
|  | 42 | +        <div className="p-1 pl-3"> | 
|  | 43 | +          <b>cors-proxy start</b> | 
|  | 44 | +        </div> | 
|  | 45 | +        <div className="pt-2"> | 
|  | 46 | +          <FormattedMessage | 
|  | 47 | +            id="settings.corsproxyText2" | 
|  | 48 | +          /> | 
|  | 49 | +        </div> | 
|  | 50 | +        <div className="pt-2"> | 
|  | 51 | +          <FormattedMessage | 
|  | 52 | +            id="settings.corsproxyText3" | 
|  | 53 | +            values={{ | 
|  | 54 | +              a: (chunks) => ( | 
|  | 55 | +                <a href="https://github.com/drafish/cors-proxy" target="_blank"> | 
|  | 56 | +                  {chunks} | 
|  | 57 | +                </a> | 
|  | 58 | +              ) | 
|  | 59 | +            }} | 
|  | 60 | +          /> | 
|  | 61 | +        </div> | 
|  | 62 | +         | 
|  | 63 | +        <div> | 
|  | 64 | +          <label className="pt-2 mb-0 pb-0"> | 
|  | 65 | +            <FormattedMessage id="settings.url" />: | 
|  | 66 | +          </label> | 
|  | 67 | +          <div className="text-secondary mb-0 h6"> | 
|  | 68 | +            <input id="corsproxy" data-id="settingsTabCorsproxy" type="text" className="form-control" onChange={(e) => handleChangeUrlState(e)} value={url} /> | 
|  | 69 | +            <div className="d-flex justify-content-end pt-2"> | 
|  | 70 | +              <input className="btn btn-sm btn-primary ml-2" id="savecorsproxy" data-id="settingsTabSaveCorsproxy" onClick={saveCorsproxy} value={intl.formatMessage({id: 'settings.save'})} type="button"></input> | 
|  | 71 | +              <CustomTooltip tooltipText={<FormattedMessage id="settings.deleteCorsproxy" />} tooltipClasses="text-nowrap" tooltipId="removecorsproxyTooltip" placement="top-start"> | 
|  | 72 | +                <button className="btn btn-sm btn-secondary ml-2" id="removecorsproxy" data-id="settingsTabRemoveCorsproxy" onClick={removeToken}> | 
|  | 73 | +                  <FormattedMessage id="settings.remove" /> | 
|  | 74 | +                </button> | 
|  | 75 | +              </CustomTooltip> | 
|  | 76 | +            </div> | 
|  | 77 | +          </div> | 
|  | 78 | +        </div> | 
|  | 79 | +      </div> | 
|  | 80 | +    </div> | 
|  | 81 | +  ) | 
|  | 82 | +} | 
0 commit comments