twilio connect

app/features/settings/components/phone/twilio-api-form.tsx

@@ -1,66 +0,0 @@
-import { useState } from "react";
-import { useTransition } from "@remix-run/react";
-import { IoHelpCircle } from "react-icons/io5";
-
-import HelpModal from "./help-modal";
-import Button from "../button";
-import SettingsSection from "../settings-section";
-
-export default function TwilioApiForm() {
-	const transition = useTransition();
-	const [isHelpModalOpen, setIsHelpModalOpen] = useState(false);
-	const isSubmitting = transition.state === "submitting";
-
-	const onSubmit = async () => {
-		// await setTwilioApiFieldsMutation({ twilioAccountSid, twilioAuthToken }); // TODO
-	};
-
-	return (
-		<>
-			<form onSubmit={onSubmit} 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}>
-								{isSubmitting ? "Saving..." : "Save"}
-							</Button>
-						</div>
-					}
-				>
-					<button onClick={() => setIsHelpModalOpen(true)} className="absolute top-2 right-2">
-						<IoHelpCircle className="w-6 h-6 text-primary-700" />
-					</button>
-					<article>
-						Shellphone needs some informations about your Twilio account to securely use your phone numbers.
-					</article>
-
-					<div className="w-full">
-						<label htmlFor="twilioAccountSid" className="block text-sm font-medium text-gray-700">
-							Twilio Account SID
-						</label>
-						<input
-							id="twilioAccountSid"
-							name="twilioAccountSid"
-							type="text"
-							className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
-						/>
-					</div>
-					<div className="w-full">
-						<label htmlFor="twilioAuthToken" className="block text-sm font-medium text-gray-700">
-							Twilio Auth Token
-						</label>
-						<input
-							id="twilioAuthToken"
-							name="twilioAuthToken"
-							type="text"
-							className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-primary-500 focus:border-primary-500 sm:text-sm"
-						/>
-					</div>
-				</SettingsSection>
-			</form>
-
-			<HelpModal closeModal={() => setIsHelpModalOpen(false)} isHelpModalOpen={isHelpModalOpen} />
-		</>
-	);
-}

app/features/settings/components/phone/twilio-connect.tsx

@@ -0,0 +1,40 @@
+import { useState } from "react";
+import { IoHelpCircle } from "react-icons/io5";
+
+import HelpModal from "./help-modal";
+import SettingsSection from "../settings-section";
+import useSession from "~/features/core/hooks/use-session";
+
+export default function TwilioConnect() {
+	const { currentOrganization } = useSession();
+	const [isHelpModalOpen, setIsHelpModalOpen] = useState(false);
+
+	return (
+		<>
+			<section className="flex flex-col gap-6">
+				<SettingsSection className="relative">
+					<button onClick={() => setIsHelpModalOpen(true)} className="absolute top-2 right-2">
+						<IoHelpCircle className="w-6 h-6 text-primary-700" />
+					</button>
+					<article>
+						Shellphone needs to connect to your Twilio account to securely use your phone numbers.
+					</article>
+
+					{currentOrganization.twilioAccountSid === 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>
+					) : (
+						<p className="text-green-700">✓ Your Twilio account is connected to Shellphone.</p>
+					)}
+				</SettingsSection>
+			</section>
+
+			<HelpModal closeModal={() => setIsHelpModalOpen(false)} isHelpModalOpen={isHelpModalOpen} />
+		</>
+	);
+}

app/routes/__app.tsx

@@ -1,11 +1,30 @@
-import type { LoaderFunction } from "@remix-run/node";
+import { type LoaderFunction, json } from "@remix-run/node";
 import { Outlet, useCatch, useMatches } from "@remix-run/react";
 
-import { requireLoggedIn } from "~/utils/auth.server";
+import { type SessionData, type SessionOrganization, requireLoggedIn } from "~/utils/auth.server";
 import Footer from "~/features/core/components/footer";
+import db from "~/utils/db.server";
+
+export type AppLoaderData = SessionData
 
 export const loader:LoaderFunction = async ({ request }) => {
-	return requireLoggedIn(request);
+	const user = await requireLoggedIn(request);
+	const organization = await db.organization.findUnique({
+		where: { id: user.organizations[0].id },
+		include: {
+			memberships: {
+				where: { userId: user.id },
+				select: { role: true },
+			},
+		},
+	});
+	const currentOrganization: SessionOrganization = {
+		id: organization!.id,
+		twilioAccountSid: organization!.twilioAccountSid,
+		role: organization!.memberships[0].role,
+	};
+
+	return json<AppLoaderData>({ ...user, currentOrganization });
 }
 
 export default function __App() {

app/routes/__app/settings/phone.tsx

@@ -1,10 +1,10 @@
-import TwilioApiForm from "~/features/settings/components/phone/twilio-api-form";
+import TwilioConnect from "~/features/settings/components/phone/twilio-connect";
 import PhoneNumberForm from "~/features/settings/components/phone/phone-number-form";
 
 function PhoneSettings() {
 	return (
 		<div className="flex flex-col space-y-6">
-			<TwilioApiForm />
+			<TwilioConnect />
 			<PhoneNumberForm />
 		</div>
 	);

app/routes/twilio.authorize.ts

@@ -0,0 +1,25 @@
+import { type LoaderFunction, redirect } from "@remix-run/node";
+import { refreshSessionData, requireLoggedIn } from "~/utils/auth.server";
+import db from "~/utils/db.server";
+import { commitSession } from "~/utils/session.server";
+
+export const loader: LoaderFunction = async ({ request }) => {
+	const user = await requireLoggedIn(request);
+	const url = new URL(request.url);
+	const twilioAccountSid = url.searchParams.get("AccountSid");
+	if (!twilioAccountSid) {
+		throw new Error("unreachable");
+	}
+
+	await db.organization.update({
+		where: { id: user.organizations[0].id },
+		data: { twilioAccountSid },
+	});
+
+	const { session } = await refreshSessionData(request);
+	return redirect("/settings/phone", {
+		headers: {
+			"Set-Cookie": await commitSession(session),
+		},
+	});
+};

app/utils/auth.server.ts

@@ -9,10 +9,11 @@ import authenticator from "./authenticator.server";
 import { AuthenticationError } from "./errors";
 import { commitSession, destroySession, getSession } from "./session.server";
 
-export type SessionOrganization = Pick<Organization, "id"> & { role: MembershipRole };
+export type SessionOrganization = Pick<Organization, "id" | "twilioAccountSid"> & { role: MembershipRole };
 export type SessionUser = Omit<User, "hashedPassword"> & {
 	organizations: SessionOrganization[];
 };
+export type SessionData = SessionUser & { currentOrganization: SessionOrganization };
 
 const SP = new SecurePassword();
 
@@ -38,7 +39,7 @@ export async function login({ form }: FormStrategyVerifyParams): Promise<Session
 			memberships: {
 				select: {
 					organization: {
-						select: { id: true },
+						select: { id: true, twilioAccountSid: true },
 					},
 					role: true,
 				},
@@ -150,7 +151,7 @@ export async function refreshSessionData(request: Request) {
 			memberships: {
 				select: {
 					organization: {
-						select: { id: true },
+						select: { id: true, twilioAccountSid: true },
 					},
 					role: true,
 				},

prisma/schema.prisma

@@ -12,6 +12,8 @@ model Organization {
     createdAt DateTime @default(now()) @db.Timestamptz
     updatedAt DateTime @updatedAt @db.Timestamptz
 
+    twilioAccountSid String?
+
     memberships   Membership[]
     phoneNumbers  PhoneNumber[]
     subscriptions Subscription[] // many subscriptions to keep a history