ben.carrasco/chrome-extension-dialer
1
0
Fork 0
mirror of https://github.com/jambonz/chrome-extension-dialer.git synced 2025-12-19 04:47:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/jambonz/chrome-extension-dialer

Browse Source
This commit is contained in:
aramide ramadan
2024-09-16 09:46:16 +01:00
parent 1cb6a46b0a 841ecaf1fa
commit 4097882097
2 changed files with 69 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/animate/index.tsx
View File

@@ -5,7 +5,7 @@ function AnimateOnShow({
children,
initial = -20,
exit = -20,
duration = 0.3,
duration = 0.5,
}: {
children: ReactNode;
initial?: number;
@@ -14,10 +14,11 @@ function AnimateOnShow({
}) {
return (
<motion.div
initial={{ opacity: 0, y: initial }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: exit }}
initial={{ opacity: 0, y: initial, height: 0 }}
animate={{ opacity: 1, y: 0, height: "auto" }}
exit={{ opacity: 0, y: exit, height: 0 }}
transition={{ duration: duration }}
style={{ width: "100%" }}
>
{children}
</motion.div>

125
src/window/settings/accountForm.tsx
View File

@@ -23,6 +23,7 @@ import { getAdvancedValidation } from "src/api";
import Switch from "src/imgs/icons/Switch.svg";
import Trash from "src/imgs/icons/Trash.svg";
import invalid from "src/imgs/icons/invalid.svg";
import AnimateOnShow from "src/components/animate";
function AccountForm({
closeForm,
@@ -217,70 +218,72 @@ function AccountForm({
/>
</FormControl>
{showAdvanced && (
<VStack w={"full"} bg={"gray.50"} borderRadius={"2xl"} p={"3.5"}>
<FormControl id={`jambonz_api_server${inputUniqueId}`}>
<FormLabel>Jambonz API Server Base URL</FormLabel>
<Input
type="text"
placeholder="https://jambonz.cloud/api"
isRequired
value={apiServer}
onChange={(e) => setApiServer(e.target.value)}
/>
</FormControl>
<FormControl id={`jambonz_account_sid${inputUniqueId}`}>
<FormLabel>Jambonz Account Sid</FormLabel>
<Input
type="text"
isRequired
value={accountSid}
onChange={(e) => setAccountSid(e.target.value)}
/>
</FormControl>
<FormControl id={`api_key${inputUniqueId}`}>
<FormLabel>API Key</FormLabel>
<PasswordInput
password={[apiKey || "", setApiKey]}
isRequired
/>
</FormControl>
<AnimateOnShow>
<VStack w={"full"} bg={"gray.50"} borderRadius={"2xl"} p={"3.5"}>
<FormControl id={`jambonz_api_server${inputUniqueId}`}>
<FormLabel>Jambonz API Server Base URL</FormLabel>
<Input
type="text"
placeholder="https://jambonz.cloud/api"
isRequired
value={apiServer}
onChange={(e) => setApiServer(e.target.value)}
/>
</FormControl>
<FormControl id={`jambonz_account_sid${inputUniqueId}`}>
<FormLabel>Jambonz Account Sid</FormLabel>
<Input
type="text"
isRequired
value={accountSid}
onChange={(e) => setAccountSid(e.target.value)}
/>
</FormControl>
<FormControl id={`api_key${inputUniqueId}`}>
<FormLabel>API Key</FormLabel>
<PasswordInput
password={[apiKey || "", setApiKey]}
isRequired
/>
</FormControl>
{isAdvancedMode && (
<HStack
w="full"
mt={2}
mb={2}
gap={"1.5"}
alignItems={"center"}
>
<Text
fontSize="12px"
fontWeight={600}
color={isCredentialOk ? "greenish.500" : "jambonz.450"}
{isAdvancedMode && (
<HStack
w="full"
mt={2}
mb={2}
gap={"1.5"}
alignItems={"center"}
>
{isCredentialOk
? "Credentials are valid"
: "We cant verify your credentials"}
</Text>
{isCredentialOk ? (
<Box
as={FontAwesomeIcon}
icon={faCheckCircle}
color={"greenish.500"}
/>
) : (
<Box w={"22px"} h={"22px"} p={0} marginLeft={-1}>
<Image
width={"full"}
height={"full"}
p={0}
src={invalid}
<Text
fontSize="12px"
fontWeight={600}
color={isCredentialOk ? "greenish.500" : "jambonz.450"}
>
{isCredentialOk
? "Credentials are valid"
: "We cant verify your credentials"}
</Text>
{isCredentialOk ? (
<Box
as={FontAwesomeIcon}
icon={faCheckCircle}
color={"greenish.500"}
/>
</Box>
)}
</HStack>
)}
</VStack>
) : (
<Box w={"22px"} h={"22px"} p={0} marginLeft={-1}>
<Image
width={"full"}
height={"full"}
p={0}
src={invalid}
/>
</Box>
)}
</HStack>
)}
</VStack>
</AnimateOnShow>
)}
<Center flexDirection={"column"} gap={"2.5"}>
<Button