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

7
app/features/messages/actions/messages.$recipient.tsx
View File

@ -8,10 +8,15 @@ import getTwilioClient, { translateMessageDirection, translateMessageStatus } fr
export type NewMessageActionData = {};
const action: ActionFunction = async ({ params, request }) => {
const { phoneNumber, twilioAccount } = await requireLoggedIn(request);
const { phoneNumber, twilio } = await requireLoggedIn(request);
if (!twilio) {
throw new Error("unreachable");
}
const twilioAccount = await db.twilioAccount.findUnique({ where: { accountSid: twilio.accountSid } });
if (!twilioAccount) {
throw new Error("unreachable");
}
const recipient = decodeURIComponent(params.recipient ?? "");
const formData = Object.fromEntries(await request.formData());
const twilioClient = getTwilioClient(twilioAccount);

3
app/features/messages/components/conversation.tsx
View File

@ -6,7 +6,7 @@ import { Direction } from "@prisma/client";
import NewMessageArea from "./new-message-area";
import { formatDate, formatTime } from "~/features/core/helpers/date-formatter";
import { type ConversationLoaderData } from "~/routes/__app/messages.$recipient";
import { type ConversationLoaderData } from "~/features/messages/loaders/messages.$recipient";
import useSession from "~/features/core/hooks/use-session";
export default function Conversation() {
@ -24,6 +24,7 @@ export default function Conversation() {
phoneNumberId: phoneNumber!.id,
from: phoneNumber!.number,
to: recipient,
recipient,
sentAt: new Date(),
direction: Direction.Outbound,

11
app/features/phone-calls/loaders/twilio-token.ts
View File

@ -10,7 +10,12 @@ import getTwilioClient from "~/utils/twilio.server";
export type TwilioTokenLoaderData = string;
const loader: LoaderFunction = async ({ request }) => {
const { user, organization, twilioAccount } = await requireLoggedIn(request);
const { user, organization, twilio } = await requireLoggedIn(request);
if (!twilio) {
throw new Error("unreachable");
}
const twilioAccount = await db.twilioAccount.findUnique({ where: { accountSid: twilio.accountSid } });
if (!twilioAccount || !twilioAccount.twimlAppSid) {
throw new Error("unreachable");
}
@ -36,12 +41,12 @@ const loader: LoaderFunction = async ({ request }) => {
apiKeySid = apiKey.sid;
apiKeySecret = apiKey.secret;
await db.twilioAccount.update({
where: { subAccountSid: twilioAccount.subAccountSid },
where: { accountSid: twilioAccount.accountSid },
data: { apiKeySid: apiKey.sid, apiKeySecret: encrypt(apiKey.secret) },
});
}
const accessToken = new Twilio.jwt.AccessToken(twilioAccount.subAccountSid, apiKeySid, apiKeySecret, {
const accessToken = new Twilio.jwt.AccessToken(twilioAccount.accountSid, apiKeySid, apiKeySecret, {
identity: `${organization.id}__${user.id}`,
ttl: 3600,
});

4
app/features/settings/actions/account.ts
View File

@ -13,7 +13,7 @@ import deleteUserQueue from "~/queues/delete-user-data.server";
const action: ActionFunction = async ({ request }) => {
const formData = Object.fromEntries(await request.formData());
if (!formData._action) {
const errorMessage = "POST /settings without any _action";
const errorMessage = "POST /settings/phone without any _action";
logger.error(errorMessage);
return badRequest({ errorMessage });
}
@ -26,7 +26,7 @@ const action: ActionFunction = async ({ request }) => {
case "updateUser":
return updateUser(request, formData);
default:
const errorMessage = `POST /settings with an invalid _action=${formData._action}`;
const errorMessage = `POST /settings/phone with an invalid _action=${formData._action}`;
logger.error(errorMessage);
return badRequest({ errorMessage });
}

221
app/features/settings/actions/phone.ts
View File

@ -1,23 +1,50 @@
import { type ActionFunction, json } from "@remix-run/node";
import { type ActionFunction, type Session, json } from "@remix-run/node";
import { badRequest } from "remix-utils";
import { z } from "zod";
import type { Prisma } from "@prisma/client";
import db from "~/utils/db.server";
import { type FormError, validate } from "~/utils/validation.server";
import { type FormActionData, validate } from "~/utils/validation.server";
import { refreshSessionData, requireLoggedIn } from "~/utils/auth.server";
import { commitSession } from "~/utils/session.server";
import setTwilioWebhooksQueue from "~/queues/set-twilio-webhooks.server";
type SetPhoneNumberFailureActionData = { errors: FormError<typeof bodySchema>; submitted?: never };
type SetPhoneNumberSuccessfulActionData = { errors?: never; submitted: true };
export type SetPhoneNumberActionData = SetPhoneNumberFailureActionData | SetPhoneNumberSuccessfulActionData;
import logger from "~/utils/logger.server";
import { encrypt } from "~/utils/encryption";
import getTwilioClient from "~/utils/twilio.server";
import fetchPhoneCallsQueue from "~/queues/fetch-phone-calls.server";
import fetchMessagesQueue from "~/queues/fetch-messages.server";
import setTwilioApiKeyQueue from "~/queues/set-twilio-api-key.server";
const action: ActionFunction = async ({ request }) => {
const { organization } = await requireLoggedIn(request);
const formData = Object.fromEntries(await request.formData());
const validation = validate(bodySchema, formData);
if (!formData._action) {
const errorMessage = "POST /settings/phone without any _action";
logger.error(errorMessage);
return badRequest({ errorMessage });
}
console.log("formData._action", formData._action);
switch (formData._action as Action) {
case "setPhoneNumber":
return setPhoneNumber(request, formData);
case "setTwilioCredentials":
return setTwilioCredentials(request, formData);
case "refreshPhoneNumbers":
return refreshPhoneNumbers(request);
default:
const errorMessage = `POST /settings/phone with an invalid _action=${formData._action}`;
logger.error(errorMessage);
return badRequest({ errorMessage });
}
};
export type SetPhoneNumberActionData = FormActionData<typeof validations, "setPhoneNumber">;
async function setPhoneNumber(request: Request, formData: unknown) {
const { organization } = await requireLoggedIn(request);
const validation = validate(validations.setPhoneNumber, formData);
if (validation.errors) {
return badRequest<SetPhoneNumberActionData>({ errors: validation.errors });
return badRequest<SetPhoneNumberActionData>({ setPhoneNumber: { errors: validation.errors } });
}
try {
@ -43,19 +70,181 @@ const action: ActionFunction = async ({ request }) => {
const { session } = await refreshSessionData(request);
return json<SetPhoneNumberActionData>(
{ submitted: true },
{ setPhoneNumber: { submitted: true } },
{
headers: {
"Set-Cookie": await commitSession(session),
},
},
);
};
}
export type SetTwilioCredentialsActionData = FormActionData<typeof validations, "setTwilioCredentials">;
async function setTwilioCredentials(request: Request, formData: unknown) {
const { organization, twilio } = await requireLoggedIn(request);
const validation = validate(validations.setTwilioCredentials, formData);
if (validation.errors) {
return badRequest<SetTwilioCredentialsActionData>({ setTwilioCredentials: { errors: validation.errors } });
}
const { twilioAccountSid, twilioAuthToken } = validation.data;
const authToken = encrypt(twilioAuthToken);
const twilioClient = getTwilioClient({ accountSid: twilioAccountSid, authToken });
try {
await twilioClient.api.accounts(twilioAccountSid).fetch();
} catch (error: any) {
logger.error(error);
if (error.status !== 401) {
throw error;
}
let session: Session | undefined;
if (twilio) {
await db.twilioAccount.delete({ where: { accountSid: twilio?.accountSid } });
session = (await refreshSessionData(request)).session;
}
return json<SetTwilioCredentialsActionData>(
{
setTwilioCredentials: {
errors: { general: "Invalid Account SID or Auth Token" },
},
},
{
headers: session
? {
"Set-Cookie": await commitSession(session),
}
: {},
},
);
}
const data: Pick<Prisma.TwilioAccountUpsertArgs["create"], "accountSid" | "authToken"> = {
accountSid: twilioAccountSid,
authToken,
};
const [phoneNumbers] = await Promise.all([
twilioClient.incomingPhoneNumbers.list(),
setTwilioApiKeyQueue.add(`set twilio api key for accountSid=${twilioAccountSid}`, {
accountSid: twilioAccountSid,
}),
db.twilioAccount.upsert({
where: { organizationId: organization.id },
create: {
organization: {
connect: { id: organization.id },
},
...data,
},
update: data,
}),
]);
await Promise.all(
phoneNumbers.map(async (phoneNumber) => {
const phoneNumberId = phoneNumber.sid;
try {
await db.phoneNumber.create({
data: {
id: phoneNumberId,
organizationId: organization.id,
number: phoneNumber.phoneNumber,
isCurrent: false,
isFetchingCalls: true,
isFetchingMessages: true,
},
});
await Promise.all([
fetchPhoneCallsQueue.add(`fetch calls of id=${phoneNumberId}`, {
phoneNumberId,
}),
fetchMessagesQueue.add(`fetch messages of id=${phoneNumberId}`, {
phoneNumberId,
}),
]);
} catch (error: any) {
if (error.code !== "P2002") {
// if it's not a duplicate, it's a real error we need to handle
throw error;
}
}
}),
);
const { session } = await refreshSessionData(request);
return json<SetTwilioCredentialsActionData>(
{ setTwilioCredentials: { submitted: true } },
{
headers: {
"Set-Cookie": await commitSession(session),
},
},
);
}
async function refreshPhoneNumbers(request: Request) {
const { organization, twilio } = await requireLoggedIn(request);
if (!twilio) {
throw new Error("unreachable");
}
const twilioAccount = await db.twilioAccount.findUnique({ where: { accountSid: twilio.accountSid } });
if (!twilioAccount) {
throw new Error("unreachable");
}
const twilioClient = getTwilioClient(twilioAccount);
const phoneNumbers = await twilioClient.incomingPhoneNumbers.list();
await Promise.all(
phoneNumbers.map(async (phoneNumber) => {
const phoneNumberId = phoneNumber.sid;
try {
await db.phoneNumber.create({
data: {
id: phoneNumberId,
organizationId: organization.id,
number: phoneNumber.phoneNumber,
isCurrent: false,
isFetchingCalls: true,
isFetchingMessages: true,
},
});
await Promise.all([
fetchPhoneCallsQueue.add(`fetch calls of id=${phoneNumberId}`, {
phoneNumberId,
}),
fetchMessagesQueue.add(`fetch messages of id=${phoneNumberId}`, {
phoneNumberId,
}),
]);
} catch (error: any) {
if (error.code !== "P2002") {
// if it's not a duplicate, it's a real error we need to handle
throw error;
}
}
}),
);
return null;
}
export default action;
const bodySchema = z.object({
phoneNumberSid: z
.string()
.refine((phoneNumberSid) => phoneNumberSid.startsWith("PN"), "Select a valid phone number"),
});
type Action = "setPhoneNumber" | "setTwilioCredentials" | "refreshPhoneNumbers";
const validations = {
setPhoneNumber: z.object({
phoneNumberSid: z
.string()
.refine((phoneNumberSid) => phoneNumberSid.startsWith("PN"), "Select a valid phone number"),
}),
setTwilioCredentials: z.object({
twilioAccountSid: z.string(),
twilioAuthToken: z.string(),
}),
} as const;

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

13
app/features/settings/loaders/phone.ts
View File

@ -4,14 +4,17 @@ import { type PhoneNumber, Prisma } from "@prisma/client";
import db from "~/utils/db.server";
import { requireLoggedIn } from "~/utils/auth.server";
import logger from "~/utils/logger.server";
import { decrypt } from "~/utils/encryption";
export type PhoneSettingsLoaderData = {
accountSid?: string;
authToken?: string;
phoneNumbers: Pick<PhoneNumber, "id" | "number" | "isCurrent">[];
};
const loader: LoaderFunction = async ({ request }) => {
const { organization, twilioAccount } = await requireLoggedIn(request);
if (!twilioAccount) {
const { organization, twilio } = await requireLoggedIn(request);
if (!twilio) {
logger.warn("Twilio account is not connected");
return json<PhoneSettingsLoaderData>({ phoneNumbers: [] });
}
@ -22,6 +25,10 @@ const loader: LoaderFunction = async ({ request }) => {
orderBy: { id: Prisma.SortOrder.desc },
});
return json<PhoneSettingsLoaderData>({ phoneNumbers });
return json<PhoneSettingsLoaderData>({
accountSid: twilio.accountSid,
authToken: decrypt(twilio.authToken),
phoneNumbers,
});
};
export default loader;