mirror of
https://github.com/twentyhq/twenty.git
synced 2024-10-04 12:57:10 +03:00
parent
e976a1bdfc
commit
adf64f0a4c
@ -7,6 +7,7 @@
|
|||||||
padding: 0px 8px;
|
padding: 0px 8px;
|
||||||
background: var(--ifm-color-secondary-contrast-background);
|
background: var(--ifm-color-secondary-contrast-background);
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.form {
|
.form {
|
||||||
@ -15,6 +16,7 @@
|
|||||||
gap: 10px;
|
gap: 10px;
|
||||||
width: 50%;
|
width: 50%;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
flex: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
@ -42,6 +44,10 @@
|
|||||||
height: 32px;
|
height: 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input[disabled] {
|
||||||
|
color: rgb(153, 153, 153)
|
||||||
|
}
|
||||||
|
|
||||||
[data-theme='dark'] .input {
|
[data-theme='dark'] .input {
|
||||||
background-color: #16233f;
|
background-color: #16233f;
|
||||||
}
|
}
|
||||||
|
@ -28,6 +28,10 @@ const TokenForm = ({
|
|||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
const [locationSetting, setLocationSetting] = useState(
|
||||||
|
parseJson(localStorage.getItem('baseUrl'))?.locationSetting ??
|
||||||
|
'production',
|
||||||
|
);
|
||||||
const [baseUrl, setBaseUrl] = useState(
|
const [baseUrl, setBaseUrl] = useState(
|
||||||
parseJson(localStorage.getItem('baseUrl'))?.baseUrl ??
|
parseJson(localStorage.getItem('baseUrl'))?.baseUrl ??
|
||||||
'https://api.twenty.com',
|
'https://api.twenty.com',
|
||||||
@ -49,13 +53,24 @@ const TokenForm = ({
|
|||||||
await submitToken(event.target.value);
|
await submitToken(event.target.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
const updateBaseUrl = (baseUrl: string) => {
|
const updateBaseUrl = (baseUrl: string, locationSetting: string) => {
|
||||||
const url = baseUrl?.endsWith('/')
|
let url: string;
|
||||||
|
if (locationSetting === 'production') {
|
||||||
|
url = 'https://api.twenty.com';
|
||||||
|
} else if (locationSetting === 'demo') {
|
||||||
|
url = 'https://api-demo.twenty.com';
|
||||||
|
} else if (locationSetting === 'localhost') {
|
||||||
|
url = 'http://localhost:3000';
|
||||||
|
} else {
|
||||||
|
url = baseUrl?.endsWith('/')
|
||||||
? baseUrl.substring(0, baseUrl.length - 1)
|
? baseUrl.substring(0, baseUrl.length - 1)
|
||||||
: baseUrl;
|
: baseUrl
|
||||||
|
}
|
||||||
|
|
||||||
setBaseUrl(url);
|
setBaseUrl(url);
|
||||||
|
setLocationSetting(locationSetting);
|
||||||
submitBaseUrl?.(url);
|
submitBaseUrl?.(url);
|
||||||
localStorage.setItem('baseUrl', JSON.stringify({ baseUrl: url }));
|
localStorage.setItem('baseUrl', JSON.stringify({ baseUrl: url, locationSetting }));
|
||||||
};
|
};
|
||||||
|
|
||||||
const validateToken = (openApiJson) => {
|
const validateToken = (openApiJson) => {
|
||||||
@ -93,7 +108,7 @@ const TokenForm = ({
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
(async () => {
|
(async () => {
|
||||||
updateBaseUrl(baseUrl);
|
updateBaseUrl(baseUrl, locationSetting);
|
||||||
await submitToken(token);
|
await submitToken(token);
|
||||||
})();
|
})();
|
||||||
}, []);
|
}, []);
|
||||||
@ -114,7 +129,35 @@ const TokenForm = ({
|
|||||||
<TbChevronLeft size={18} />
|
<TbChevronLeft size={18} />
|
||||||
<span>Back</span>
|
<span>Back</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="inputWrapper">
|
||||||
|
<select
|
||||||
|
className="select"
|
||||||
|
onChange={(event) => {
|
||||||
|
updateBaseUrl(baseUrl, event.target.value)
|
||||||
|
}}
|
||||||
|
value={locationSetting}
|
||||||
|
>
|
||||||
|
<option value="production">Production API</option>
|
||||||
|
<option value="demo">Demo API</option>
|
||||||
|
<option value="localhost">Localhost</option>
|
||||||
|
<option value="other">Other</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div className="inputWrapper">
|
||||||
|
<div className="inputIcon" title="Base URL">
|
||||||
|
<TbLink size={20} />
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
className={'input'}
|
||||||
|
type="text"
|
||||||
|
readOnly={isLoading}
|
||||||
|
disabled={locationSetting !== 'other'}
|
||||||
|
placeholder="Base URL"
|
||||||
|
value={baseUrl}
|
||||||
|
onChange={(event) => updateBaseUrl(event.target.value, locationSetting)}
|
||||||
|
onBlur={() => submitToken(token)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<div className="inputWrapper">
|
<div className="inputWrapper">
|
||||||
<div className="inputIcon" title="Api Key">
|
<div className="inputIcon" title="Api Key">
|
||||||
<TbApi size={20} />
|
<TbApi size={20} />
|
||||||
@ -128,20 +171,6 @@ const TokenForm = ({
|
|||||||
onChange={updateToken}
|
onChange={updateToken}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="inputWrapper">
|
|
||||||
<div className="inputIcon" title="Base URL">
|
|
||||||
<TbLink size={20} />
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
className={'input'}
|
|
||||||
type="text"
|
|
||||||
readOnly={isLoading}
|
|
||||||
placeholder="Base URL"
|
|
||||||
defaultValue={baseUrl}
|
|
||||||
onChange={(event) => updateBaseUrl(event.target.value)}
|
|
||||||
onBlur={() => submitToken(token)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="inputWrapper" style={{ maxWidth: '100px' }}>
|
<div className="inputWrapper" style={{ maxWidth: '100px' }}>
|
||||||
<select
|
<select
|
||||||
className="select"
|
className="select"
|
||||||
|
Loading…
Reference in New Issue
Block a user