Feat custom domain

.env.example

@@ -16,3 +16,7 @@ STRIPE_SECRET_KEY=""
 STRIPE_PREMIUM_PRICING_ID=""
 STRIPE_WEBHOOK_SECRET=""
 NEXT_PUBLIC_PREMIUM_SUPPORT_URL=""
+
+VERCEL_PROJECT_ID=""
+VERCEL_TEAM_ID=""
+VERCEL_AUTH_TOKEN=""

.github/workflows/vercel-preview.yml

@@ -6,7 +6,7 @@ on:
   workflow_dispatch:
   push:
     branches:
-      - feat-middleware
+      - feat-custom-domain
 
 jobs:
   deploy:

components/Button.js

@@ -3,21 +3,22 @@ import Link from "./Link";
 
 export default function Button({
   primary = false,
-  disable,
+  disabled = false,
   className,
   overrideClassNames = false,
   children,
   ...restProps
 }) {
-  let defaultClassName =
-    "w-full inline-flex items-center flex-1 justify-center rounded-md border-2 border-primary-high dark:border-white hover:border-transparent px-5 py-3 text-base font-medium first-letter:bg-white transition duration-400 ease-in-out";
-  !disable
-    ? (defaultClassName += primary
+  let defaultClassName = classNames(
+    "w-full inline-flex items-center flex-1 justify-center rounded-md border-2 border-primary-high dark:border-white hover:border-transparent px-5 py-3 text-base font-medium first-letter:bg-white transition duration-400 ease-in-out",
+    !disabled
+      ? primary
         ? " text-primary-medium bg-secondary-medium hover:bg-tertiary-medium"
-        : " text-secondary-high dark:text-secondary-high-high hover:text-white dark:hover:text-white dark:bg-primary-low hover:bg-secondary-medium dark:hover:bg-secondary-medium")
-    : (defaultClassName += disable
-        ? " border-2 border-red border shadow-sm bg-primary-low text-primary-medium cursor-not-allowed "
-        : " cursor-pointer");
+        : " text-secondary-high dark:text-secondary-high-high hover:text-white dark:hover:text-white dark:bg-primary-low hover:bg-secondary-medium dark:hover:bg-secondary-medium"
+      : disabled
+      ? " border-2 border-red border shadow-sm bg-primary-low text-primary-medium cursor-not-allowed "
+      : " cursor-pointer",
+  );
 
   const link = (
     <Link
@@ -36,7 +37,7 @@ export default function Button({
       className={
         overrideClassNames ? className : classNames(defaultClassName, className)
       }
-      disabled={disable}
+      disabled={disabled}
       {...restProps}
     >
       {children}

components/form/Input.js

@@ -51,6 +51,7 @@ const Input = forwardRef(
           id={name}
           name={name}
           value={value}
+          disabled={disabled}
           onKeyDown={handleKeydown}
           {...restProps}
         />

middleware.js

@@ -3,6 +3,8 @@ import { NextResponse } from "next/server";
 
 export const config = {
   matcher: [
+    "/",
+
     // account management
     "/account/:path*",
     "/api/account/:path*",
@@ -14,10 +16,44 @@ export const config = {
 };
 
 export async function middleware(req) {
+  const hostname = req.headers.get("host");
+  const reqPathName = req.nextUrl.pathname;
   const sessionRequired = ["/account", "/api/account"];
   const adminRequired = ["/admin", "/api/admin"];
   const adminUsers = process.env.ADMIN_USERS.split(",");
-  const reqPathName = req.nextUrl.pathname;
+
+  // check if custom domain
+  if (reqPathName === "/") {
+    let res;
+    let profile;
+    let url = `${
+      process.env.NEXT_PUBLIC_BASE_URL
+    }/api/search/${encodeURIComponent(hostname)}`;
+    try {
+      res = await fetch(url, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      profile = await res.json();
+    } catch (e) {
+      console.error(url, e);
+      return NextResponse.error(e);
+    }
+
+    if (
+      profile.username &&
+      profile.user.type === "premium" &&
+      profile.settings?.domain &&
+      hostname === profile.settings.domain
+    ) {
+      // if match found rewrite to custom domain and display profile page
+      return NextResponse.rewrite(
+        new URL(`/${profile.username}`, `http://${profile.settings.domain}`),
+      );
+    }
+  }
 
   // if not in sessionRequired or adminRequired, skip
   if (

models/Profile.js

@@ -144,10 +144,20 @@ const ProfileSchema = new Schema(
         type: Boolean,
         default: false,
       },
+      domain: {
+        type: String,
+        default: "",
+        get: (v) => v.replaceAll("|", "."),
+        set: (v) => v.replaceAll(".", "|"),
+        validator: function (v) {
+          return /^((?!-)[A-Za-z0-9-]{1, 63}(?<!-)\\.)+[A-Za-z]{2, 6}$/.test(v);
+        },
+        message: (props) => `${props.value} is not a valid domain!`,
+      },
     },
   },
-  { timestamps: true },
+  { timestamps: true, toJSON: { getters: true } },
 );
 
 module.exports =
-  mongoose.models.Profile || mongoose.model("Profile", ProfileSchema);
+  mongoose.models?.Profile || mongoose.model("Profile", ProfileSchema);

pages/account/manage/links.js

@@ -104,7 +104,7 @@ export default function ManageLinks({ BASE_URL, username, links }) {
           {!reorder && (
             <Button
               onClick={() => setReorder(true)}
-              disable={linkList.length < 2}
+              disabled={linkList.length < 2}
             >
               <ArrowPathIcon className="h-5 w-5 mr-2" />
               REORDER

pages/account/manage/premium.js

@@ -13,6 +13,8 @@ import { getSettingsApi } from "pages/api/account/manage/settings";
 import Toggle from "@components/form/Toggle";
 import Notification from "@components/Notification";
 import Link from "@components/Link";
+import Input from "@components/form/Input";
+import Button from "@components/Button";
 
 export async function getServerSideProps(context) {
   const session = await getServerSession(context.req, context.res, authOptions);
@@ -45,28 +47,47 @@ export default function ManageSettings({
 }) {
   const router = useRouter();
   const { success } = router.query;
-  const [showNotification, setShowNotification] = useState(false);
+  const [showNotification, setShowNotification] = useState({
+    show: false,
+    type: "",
+    message: "",
+    additionalMessage: "",
+  });
   const [hideNavbar, setHideNavbar] = useState(settings.hideNavbar || false);
   const [hideFooter, setHideFooter] = useState(settings.hideFooter || false);
+  const [domain, setDomain] = useState(
+    settings.domain?.replaceAll("|", ".") || "",
+  ); // TODO: use getter/setter instead
+  const [enableForm] = useState(accountType === "premium" ? true : false);
 
-  const toggle = async (setting) => {
-    if (accountType !== "premium") {
-      return;
-    }
+  const handleSubmit = async (e) => {
+    e.preventDefault();
     const res = await fetch(`${BASE_URL}/api/account/manage/settings`, {
       method: "PATCH",
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify({
-        hideNavbar: setting === "hideNavbar" ? !hideNavbar : hideNavbar,
-        hideFooter: setting === "hideFooter" ? !hideFooter : hideFooter,
-      }),
+      body: JSON.stringify({ hideNavbar, hideFooter, domain }),
     });
     const updatedSettings = await res.json();
-    setShowNotification(true);
-    setHideNavbar(updatedSettings.hideNavbar);
-    setHideFooter(updatedSettings.hideFooter);
+
+    if (updatedSettings.message) {
+      return setShowNotification({
+        show: true,
+        type: "error",
+        message: "Profile settings update failed",
+        additionalMessage: `Please check the fields: ${Object.keys(
+          updatedSettings.message,
+        ).join(", ")}`,
+      });
+    }
+
+    return setShowNotification({
+      show: true,
+      type: "success",
+      message: "Profile updated",
+      additionalMessage: "Your profile settings has been updated successfully",
+    });
   };
 
   return (
@@ -84,28 +105,49 @@ export default function ManageSettings({
           />
         )}
         <Navigation />
+
         <Notification
-          show={showNotification}
-          type="success"
-          onClose={() => setShowNotification(false)}
-          message="Premium updated"
-          additionalMessage="Your Profile Premium settings have been updated."
+          show={showNotification.show}
+          type={showNotification.type}
+          onClose={() =>
+            setShowNotification({ ...showNotification, show: false })
+          }
+          message={showNotification.message}
+          additionalMessage={showNotification.additionalMessage}
         />
+
         {accountType !== "premium" && (
           <Alert
             type="warning"
             message="These are Premium features. Please upgrade your account for these to take effect on your public Profile."
           />
         )}
-        <form>
+        <form onSubmit={handleSubmit}>
           <fieldset>
             <legend className="sr-only">Premium features</legend>
             <div className="sm:grid sm:grid-cols-3 sm:items-baseline sm:gap-4 sm:py-6">
-              <div
-                className="text-sm font-semibold leading-6 text-primary-medium dark:text-primary-low"
-                aria-hidden="true"
-              >
-                Premium features
+              <div>
+                <p
+                  className="font-semibold leading-6 text-primary-medium dark:text-primary-low"
+                  aria-hidden="true"
+                >
+                  Premium features
+                </p>
+                {accountType === "premium" && (
+                  <p
+                    className="text-sm leading-6 text-primary-medium dark:text-primary-low mt-4"
+                    aria-hidden="true"
+                  >
+                    For help with your Premium account settings:
+                    <br />
+                    <Link
+                      href={`${PREMIUM_SUPPORT_URL} (${username})`}
+                      target="_blank"
+                    >
+                      Contact Support
+                    </Link>
+                  </p>
+                )}
               </div>
               <div className="mt-1 sm:col-span-2 sm:mt-0">
                 <div className="max-w-lg">
@@ -116,31 +158,39 @@ export default function ManageSettings({
                     <div className="flex items-center gap-x-3">
                       <Toggle
                         text1="Hide Navbar on your Profile"
-                        enabled={accountType === "premium" && hideNavbar}
-                        setEnabled={() => toggle("hideNavbar")}
+                        enabled={enableForm && hideNavbar}
+                        setEnabled={setHideNavbar}
                       />
                     </div>
                     <div className="flex items-center gap-x-3">
                       <Toggle
                         text1="Hide Footer on your Profile"
-                        enabled={accountType === "premium" && hideFooter}
-                        setEnabled={() => toggle("hideFooter")}
+                        enabled={enableForm && hideFooter}
+                        setEnabled={setHideFooter}
                       />
                     </div>
+                    <div className="col-span-3 sm:col-span-4">
+                      <div className="mt-1">
+                        <Input
+                          name="domain"
+                          label="Domain"
+                          value={domain}
+                          disabled={!enableForm}
+                          onChange={(e) => setDomain(e.target.value)}
+                        />
+                      </div>
+                    </div>
+                    <div className="mt-10 border-t border-primary-low-medium/30 pt-6 sm:flex sm:items-center sm:justify-between">
+                      <Button primary={true} disabled={!enableForm}>
+                        SAVE
+                      </Button>
+                    </div>
                   </div>
                 </div>
               </div>
             </div>
           </fieldset>
         </form>
-        {accountType === "premium" && (
-          <p>
-            For help with your Premium account settings:{" "}
-            <Link href={`${PREMIUM_SUPPORT_URL} (${username})`} target="_blank">
-              Contact Support
-            </Link>
-          </p>
-        )}
       </Page>
     </>
   );

pages/account/manage/repos.js

@@ -143,7 +143,7 @@ export default function ManageRepos({ BASE_URL, repos }) {
             onChange={(e) => setUrl(e.target.value)}
             value={url}
           />
-          <Button disable={!url.length}>
+          <Button disabled={!url.length}>
             <DocumentPlusIcon className="h-5 w-5 mr-2" />
             Add Repo
           </Button>

pages/account/onboarding/index.js

@@ -171,7 +171,7 @@ export default function Onboarding({ profile, progress }) {
           <Button
             href={`/${profile.username}`}
             className={"gap-4"}
-            disable={!cards[0].isEdit}
+            disabled={!cards[0].isEdit}
           >
             <FaArrowUpRightFromSquare className="w-4 h-4" /> View Profile
           </Button>