mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replace twilio connect with account sid/auth token form

Browse Source
This commit is contained in:
m5r
2022-06-09 00:33:19 +02:00
parent c047e169f2
commit e8ba6a63ab
19 changed files with 437 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
app/features/settings/components/phone/phone-number-form.tsx
View File

@ -1,4 +1,5 @@
import { Form, useActionData, useCatch, useLoaderData, useTransition } from "@remix-run/react";
import { Form, useActionData, useCatch, useFetcher, useLoaderData, useTransition } from "@remix-run/react";
import { IoReloadOutline } from "react-icons/io5";
import Button from "../button";
import SettingsSection from "../settings-section";
@ -6,11 +7,13 @@ import Alert from "~/features/core/components/alert";
import useSession from "~/features/core/hooks/use-session";
import type { PhoneSettingsLoaderData } from "~/features/settings/loaders/phone";
import type { SetPhoneNumberActionData } from "~/features/settings/actions/phone";
import clsx from "clsx";
export default function PhoneNumberForm() {
const { twilio } = useSession();
const fetcher = useFetcher();
const transition = useTransition();
const actionData = useActionData<SetPhoneNumberActionData>();
const { twilioAccount } = useSession();
const actionData = useActionData<SetPhoneNumberActionData>()?.setPhoneNumber;
const availablePhoneNumbers = useLoaderData<PhoneSettingsLoaderData>().phoneNumbers;
const isSubmitting = transition.state === "submitting";
@ -19,54 +22,72 @@ export default function PhoneNumberForm() {
const topErrorMessage = errors?.general ?? errors?.phoneNumberSid;
const isError = typeof topErrorMessage !== "undefined";
const currentPhoneNumber = availablePhoneNumbers.find((phoneNumber) => phoneNumber.isCurrent === true);
const hasFilledTwilioCredentials = twilioAccount !== null;
const hasFilledTwilioCredentials = twilio !== null;
if (!hasFilledTwilioCredentials) {
return null;
}
return (
<Form method="post" className="flex flex-col gap-6">
<SettingsSection
className="relative"
footer={
<div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
<Button variant="default" type="submit" isDisabled={isSubmitting}>
Save
</Button>
</div>
}
<section className="relative">
<button
className={clsx("absolute top-2 right-2 z-10", { "animate-spin": fetcher.submission })}
onClick={() => fetcher.submit({ _action: "refreshPhoneNumbers" }, { method: "post" })}
disabled={!!fetcher.submission}
title="Refresh the list of phone numbers from Twilio"
aria-label="Refresh the list of phone numbers from Twilio"
>
{isError ? (
<div className="mb-8">
<Alert title="Oops, there was an issue" message={topErrorMessage} variant="error" />
</div>
) : null}
<IoReloadOutline className="w-5 h-5 text-primary-700" aria-hidden="true" />
</button>
{isSuccess ? (
<div className="mb-8">
<Alert title="Saved successfully" message="Your changes have been saved." variant="success" />
</div>
) : null}
<label htmlFor="phoneNumberSid" className="block text-sm font-medium text-gray-700">
Phone number
</label>
<select
id="phoneNumberSid"
name="phoneNumberSid"
className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md"
defaultValue={currentPhoneNumber?.id}
<Form method="post" className="flex flex-col gap-6">
<SettingsSection
className="relative"
footer={
<div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
<Button variant="default" type="submit" isDisabled={isSubmitting}>
Save
</Button>
</div>
}
>
<option value="none" />
{availablePhoneNumbers.map(({ id, number }) => (
<option value={id} key={id}>
{number}
</option>
))}
</select>
</SettingsSection>
</Form>
{isError ? (
<div className="mb-8">
<Alert title="Oops, there was an issue" message={topErrorMessage} variant="error" />
</div>
) : null}
{isSuccess ? (
<div className="mb-8">
<Alert
title="Saved successfully"
message="Your changes have been saved."
variant="success"
/>
</div>
) : null}
<label htmlFor="phoneNumberSid" className="block text-sm font-medium text-gray-700">
Phone number
</label>
<select
id="phoneNumberSid"
name="phoneNumberSid"
className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm rounded-md"
defaultValue={currentPhoneNumber?.id}
>
<option value="none" />
{availablePhoneNumbers.map(({ id, number }) => (
<option value={id} key={id}>
{number}
</option>
))}
</select>
<input type="hidden" name="_action" value="setPhoneNumber" />
</SettingsSection>
</Form>
</section>
);
}

76
app/features/settings/components/phone/twilio-connect.tsx
View File

@ -1,38 +1,82 @@
import { useState } from "react";
import { Form, useActionData, useLoaderData, useTransition } from "@remix-run/react";
import { IoHelpCircle } from "react-icons/io5";
import type { PhoneSettingsLoaderData } from "~/features/settings/loaders/phone";
import type { SetTwilioCredentialsActionData } from "~/features/settings/actions/phone";
import HelpModal from "./help-modal";
import SettingsSection from "../settings-section";
import useSession from "~/features/core/hooks/use-session";
import Alert from "~/features/core/components/alert";
import LabeledTextField from "~/features/core/components/labeled-text-field";
import Button from "~/features/settings/components/button";
export default function TwilioConnect() {
const { twilioAccount } = useSession();
const { twilio } = useSession();
const [isHelpModalOpen, setIsHelpModalOpen] = useState(false);
const transition = useTransition();
const actionData = useActionData<SetTwilioCredentialsActionData>()?.setTwilioCredentials;
const { accountSid, authToken } = useLoaderData<PhoneSettingsLoaderData>();
const topErrorMessage = actionData?.errors?.general;
const isError = typeof topErrorMessage !== "undefined";
const isCurrentFormTransition = transition.submission?.formData.get("_action") === "changePassword";
const isSubmitting = isCurrentFormTransition && transition.state === "submitting";
return (
<>
<SettingsSection className="flex flex-col relative">
<section>
<Form method="post">
<SettingsSection
className="flex flex-col relative"
footer={
<div className="px-4 py-3 bg-gray-50 text-right text-sm font-medium sm:px-6">
<Button tabIndex={3} variant="default" type="submit" isDisabled={isSubmitting}>
Save
</Button>
</div>
}
>
<button onClick={() => setIsHelpModalOpen(true)} className="absolute top-2 right-2">
<IoHelpCircle className="w-6 h-6 text-primary-700" />
</button>
<article className="mb-6">
Shellphone needs to connect to your Twilio account to securely use your phone numbers.
Shellphone needs some informations about your Twilio account to securely use your phone numbers.
</article>
{twilioAccount === null ? (
<a
href="https://www.twilio.com/authorize/CN01675d385a9ee79e6aa58adf54abe3b3"
rel="noopener noreferrer"
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-white focus:outline-none focus:ring-2 focus:ring-offset-2 bg-primary-600 hover:bg-primary-700 focus:ring-primary-500"
>
Connect Twilio account
</a>
) : (
{twilio !== null ? (
<p className="text-green-700">✓ Your Twilio account is connected to Shellphone.</p>
)}
</section>
</SettingsSection>
) : null}
{isError ? (
<div className="mb-8">
<Alert title="Oops, there was an issue" message={topErrorMessage} variant="error" />
</div>
) : null}
<LabeledTextField
name="twilioAccountSid"
label="Account SID"
type="text"
tabIndex={1}
error={actionData?.errors?.twilioAccountSid}
disabled={isSubmitting}
defaultValue={accountSid}
/>
<LabeledTextField
name="twilioAuthToken"
label="Auth Token"
type="password"
tabIndex={2}
error={actionData?.errors?.twilioAuthToken}
disabled={isSubmitting}
autoComplete="off"
defaultValue={authToken}
/>
<input type="hidden" name="_action" value="setTwilioCredentials" />
</SettingsSection>
</Form>
<HelpModal closeModal={() => setIsHelpModalOpen(false)} isHelpModalOpen={isHelpModalOpen} />
</>