| 
 | 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