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