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