CLASSROOMIO-T-42: Limit subdomain names available to organizations

Co-authored-by: Rotimi Best <rotimiibitoyeemma@gmail.com>

Merge-request: CLASSROOMIO-MR-9
Merged-by: Digdippa Team <digdippa@gmail.com>

src/components/CourseLandingPage/components/Editor/DescriptionForm.svelte

@@ -1,5 +1,7 @@
 <script>
-  import { set, get, cloneDeep } from 'lodash';
+  import cloneDeep from 'lodash/cloneDeep';
+  import set from 'lodash/set';
+  import get from 'lodash/get';
   import TextEditor from '../../../TextEditor/index.svelte';
 
   export let course;

src/components/CourseLandingPage/components/Editor/GoalsForm.svelte

@@ -1,5 +1,7 @@
 <script>
-  import { set, get, cloneDeep } from 'lodash';
+  import cloneDeep from 'lodash/cloneDeep';
+  import set from 'lodash/set';
+  import get from 'lodash/get';
   import TextEditor from '../../../TextEditor/index.svelte';
 
   export let course;

src/components/CourseLandingPage/components/Editor/InstructorForm.svelte

@@ -1,5 +1,8 @@
 <script>
-  import { set, cloneDeep, isEmpty, get } from 'lodash';
+  import cloneDeep from 'lodash/cloneDeep';
+  import set from 'lodash/set';
+  import get from 'lodash/get';
+  import isEmpty from 'lodash/isEmpty';
   import TextArea from '../../../Form/TextArea.svelte';
   import TextField from '../../../Form/TextField.svelte';
   import UploadImage from '../../../UploadImage/index.svelte';

src/components/CourseLandingPage/components/Editor/PricingForm.svelte

@@ -1,5 +1,8 @@
 <script>
-  import { set, isEmpty, get, cloneDeep } from 'lodash';
+  import cloneDeep from 'lodash/cloneDeep';
+  import set from 'lodash/set';
+  import get from 'lodash/get';
+  import isEmpty from 'lodash/isEmpty';
   import { Toggle } from 'carbon-components-svelte';
   import TextEditor from '../../../TextEditor/index.svelte';
   import TextField from '../../../Form/TextField.svelte';

src/components/CourseLandingPage/components/Editor/RequirementForm.svelte

@@ -1,5 +1,7 @@
 <script>
-  import { set, get, cloneDeep } from 'lodash';
+  import cloneDeep from 'lodash/cloneDeep';
+  import set from 'lodash/set';
+  import get from 'lodash/get';
   import TextEditor from '../../../TextEditor/index.svelte';
 
   export let course;

src/components/CourseLandingPage/components/PricingSection.svelte

@@ -3,7 +3,7 @@
   import { VARIANTS } from '../../PrimaryButton/constants';
   import type { Course } from '../../../utils/types';
   import getCurrencyFormatter from '../../../utils/functions/getCurrencyFormatter';
-  import { get } from 'lodash';
+  import get from 'lodash/get';
 
   export let className = '';
   export let courseData: Course = {
@@ -46,9 +46,7 @@
         {formatter?.format(calculatedCost) || calculatedCost}
       </p>
       {#if courseData?.metadata?.showDiscount}
-        <p
-          class="dark:text-white font-light text-sm text-gray-500 dark:text-gray-200"
-        >
+        <p class="dark:text-white font-light text-sm text-gray-500">
           {discount}% Discount.
           <span class="line-through"
             >{formatter?.format(courseData?.cost || 0) || courseData.cost}</span
@@ -70,9 +68,7 @@
         variant={VARIANTS.OUTLINED}
         onClick={addToCart}
       />
-      <p
-        class="dark:text-white font-light text-sm text-gray-500 dark:text-gray-200"
-      >
+      <p class="dark:text-white font-light text-sm text-gray-500">
         Early bird offer. Buy ASAP
       </p>
     </div>

src/components/Courses/components/Card/Loader.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <div
-  class="root w-72 border bg-white dark:bg-gray-800 mr-4 mb-4 rounded-md transition ease-in-out relative"
+  class="root w-72 border bg-gray-100 dark:bg-gray-700 mr-4 mb-4 rounded-md transition ease-in-out relative"
 >
   <SkeletonPlaceholder style="width: 100%; height: 10rem;" />
   <div class="p-3 pb-0">

src/components/Courses/components/Card/index.svelte

@@ -44,7 +44,7 @@
 
 <a rel="prefetch" href="/courses/{id}" class=" text-black">
   <div
-    class="root w-72 border bg-white dark:bg-gray-800 mr-4 mb-4 rounded-md transition ease-in-out relative"
+    class="root w-72 border bg-gray-100 dark:bg-gray-700 mr-4 mb-4 rounded-md transition ease-in-out relative"
   >
     <Dropdown
       options={getOptions()}

src/components/ErrorMessage/index.svelte

@@ -2,4 +2,4 @@
   export let message;
 </script>
 
-<p class="dark:text-white text-sm text-red-500">{message}</p>
+<p class="text-sm text-red-500">{message}</p>

src/components/Form/TextField.svelte

@@ -65,7 +65,7 @@
   {/if}
   <input
     use:typeAction
-    class="form-input p-3 mt-1 block w-full border-none bg-gray-200 {inputClassName} {errorMessage
+    class="form-input dark:text-black p-3 mt-1 block w-full border-none bg-gray-200 {inputClassName} {errorMessage
       ? 'border-red-500'
       : ''}"
     on:keydown={onKeyDown}
@@ -86,7 +86,7 @@
     </span>
   {/if}
   {#if errorMessage}
-    <p class="dark:text-white text-sm text-red-500">{errorMessage}</p>
+    <p class="text-sm text-red-500">{errorMessage}</p>
   {:else if helperMessage}
     <p class="dark:text-white text-sm">
       {helperMessage}

src/components/Navigation/app.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { stores } from '@sapper/app';
   import NotificationIcon from 'carbon-icons-svelte/lib/Notification20';
   import Moon from 'carbon-icons-svelte/lib/Moon16';
   import Sun from 'carbon-icons-svelte/lib/Sun16';
@@ -8,6 +9,7 @@
   import { toggleBodyByTheme } from '../../utils/functions/app';
 
   export let navClass = '';
+  const { page } = stores();
 
   function toggleTheme() {
     $appStore.isDark = !$appStore.isDark;
@@ -21,7 +23,7 @@
   <ul class="flex w-full items-center">
     <div class="">
       <a
-        href={window.location.pathname}
+        href={$page.path}
         title="Go to ClassroomIO Home"
         id="logo"
         class="text-lg"

src/components/Org/Settings/Domains.svelte

@@ -7,6 +7,7 @@
   import { VARIANTS } from '../../PrimaryButton/constants';
   import { currentOrg } from '../../../utils/store/org';
   import { supabase } from '../../../utils/functions/supabase';
+  import { blockedSubdomain } from '../../../utils/constants/app';
   import { snackbarStore } from '../../Snackbar/store';
   import { SNACKBAR_SEVERITY } from '../../Snackbar/constants';
   import SectionTitle from '../SectionTitle.svelte';
@@ -16,6 +17,10 @@
   let isLoading = false;
 
   async function handleChangeDomain() {
+    if (blockedSubdomain.includes(siteName || '')) {
+      errors = 'Sitename already exists.';
+      return;
+    }
     isLoading = true;
 
     const { data: org, error } = await supabase
@@ -50,12 +55,21 @@
     }
   }
 
+  function resetErrors(_siteName) {
+    if (errors) {
+      errors = '';
+    }
+  }
+
+  $: resetErrors(siteName);
   $: setSiteName($currentOrg.siteName);
 </script>
 
 <Grid class="border rounded border-gray-200 w-full mt-5">
-  <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
-    <Column sm={2} md={2} lg={4} class="text-lg"><strong>Add</strong></Column>
+  <Row class="py-7 border-bottom-c">
+    <Column sm={2} md={2} lg={4} class="text-lg"
+      ><SectionTitle>Add</SectionTitle></Column
+    >
     <Column sm={2} md={6} lg={8}>
       <p class="text-md text-gray-500 dark:text-gray-200 mb-5">
         Add your team mates or collaborators to your organization. Start working
@@ -85,7 +99,7 @@
     </Column>
   </Row>
 
-  <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
+  <Row class="py-7 border-bottom-c">
     <Column sm={2} md={2} lg={4} class="text-lg"
       ><SectionTitle>Custom domain</SectionTitle></Column
     >

src/components/Org/Settings/OrgSettings.svelte

@@ -78,8 +78,8 @@
   }
 </script>
 
-<Grid class="border rounded border-gray-200 w-full mt-5">
-  <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
+<Grid class="border-c rounded border-gray-200 w-full mt-5">
+  <Row class="py-7 border-bottom-c">
     <Column sm={2} md={2} lg={4}
       ><SectionTitle>Organization Profile</SectionTitle></Column
     >
@@ -104,13 +104,13 @@
       />
     </Column>
   </Row>
-  <!-- <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
+  <!-- <Row class="py-7 border-bottom-c">
     <Column sm={2} md={2} lg={4}><SectionTitle>Theme</SectionTitle></Column>
     <Column sm={2} md={6} lg={8}>
       <h4 class="dark:text-white">Set your brand</h4>
     </Column>
   </Row> -->
-  <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
+  <Row class="py-7 border-bottom-c">
     <Column sm={2} md={2} lg={4}
       ><SectionTitle>Custom Domain</SectionTitle></Column
     >
@@ -127,7 +127,7 @@
       />
     </Column>
   </Row>
-  <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
+  <Row class="py-7 border-bottom-c">
     <Column sm={2} md={2} lg={4}><SectionTitle>Team</SectionTitle></Column>
     <Column sm={2} md={6} lg={8}>
       <h4 class="dark:text-white">Set up your website</h4>

src/components/Org/Settings/Profile.svelte

@@ -81,8 +81,8 @@
   }
 </script>
 
-<Grid class="border rounded border-gray-200 w-full mt-5">
-  <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
+<Grid class="border-c rounded border-gray-200 w-full mt-5">
+  <Row class="py-7 border-bottom-c">
     <Column sm={2} md={2} lg={4}>
       <SectionTitle>Profile Picture</SectionTitle>
     </Column>
@@ -94,7 +94,7 @@
       />
     </Column>
   </Row>
-  <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
+  <Row class="py-7 border-bottom-c">
     <Column sm={2} md={2} lg={4}>
       <SectionTitle>Personal Information</SectionTitle>
     </Column>

src/components/Org/Settings/TeamMembers.svelte

@@ -128,7 +128,7 @@
 </script>
 
 <Grid class="border rounded border-gray-200 w-full mt-5">
-  <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
+  <Row class="py-7 border-bottom-c">
     <Column sm={2} md={2} lg={4} class="text-lg"
       ><SectionTitle>Add</SectionTitle></Column
     >
@@ -162,7 +162,7 @@
     </Column>
   </Row>
 
-  <Row class="py-7 border border-t-0 border-l-0 border-r-0 border-gray-300">
+  <Row class="py-7 border-bottom-c">
     <Column sm={2} md={2} lg={4} class="text-lg"
       ><SectionTitle>Members</SectionTitle></Column
     >

src/routes/_layout.svelte

@@ -1,6 +1,6 @@
 <script context="module">
-  export function preload(page, { config }) {
-    return { config };
+  export function preload(page, { config, host }) {
+    return { config, host };
   }
 </script>
 
@@ -8,8 +8,9 @@
   import { onMount } from 'svelte';
   import { derived } from 'svelte/store';
   import { stores, goto } from '@sapper/app';
-  import _ from 'lodash';
+  import isEmpty from 'lodash/isEmpty';
   import * as Sentry from '@sentry/browser';
+  import { Theme } from 'carbon-components-svelte';
   import { Moon } from 'svelte-loading-spinners';
   import Tailwindcss from '../components/Tailwindcss.svelte';
   import LandingNavigation from '../components/Navigation/index.svelte';
@@ -30,13 +31,17 @@
   import { toggleBodyByTheme } from '../utils/functions/app';
   import { appStore } from '../utils/store/app';
 
+  // import 'carbon-components-svelte/css/all.css';
+
   export let segment;
   export let config;
+  export let host;
 
   let { page, preloading } = stores();
 
   let supabase = getSupabase(config);
   let path = $page.path.replace('/', '');
+  let theme = 'white';
 
   const delayedPreloading = derived(preloading, (currentPreloading, set) => {
     setTimeout(() => set(currentPreloading), 250);
@@ -98,7 +103,7 @@
       const orgRes = await getOrganizations($profile.id);
 
       // If user coming to login page, then
-      if (_.isEmpty(orgRes.orgs)) {
+      if (isEmpty(orgRes.orgs)) {
         goto(ROUTE.ONBOARDING);
       } else if (
         ['login', 'signup', 'onboarding'].includes(path) ||
@@ -123,7 +128,7 @@
   }
 
   onMount(() => {
-    console.log('Welcome to ClassroomIO, we are grateful you chose us.');
+    console.log('Welcome to ClassroomIO, we are grateful you chose us.', host);
     // Disable GA on localhost
     if (config && !config.isProd) {
       console.log('disable GA');
@@ -179,14 +184,21 @@
   // }
 
   $: path = $page.path.replace('/', '');
+  $: theme = $appStore.isDark ? 'g100' : 'white';
 </script>
 
 <svelte:window on:resize={handleResize} />
 
 <svelte:head>
   <link href="/css/carbon.css" rel="stylesheet" />
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/carbon-components-svelte/css/all.css"
+  />
 </svelte:head>
+
 <Tailwindcss />
+<Theme bind:theme />
 
 <!-- <Nav {segment} /> -->
 <Snackbar />
@@ -262,4 +274,12 @@
   :global(.dark svg.dark path) {
     fill: #fff;
   }
+
+  :global(.border-c) {
+    border: 1px solid var(--border-color);
+  }
+
+  :global(.border-bottom-c) {
+    border-bottom: 1px solid var(--border-color);
+  }
 </style>

src/routes/forgot.svelte

@@ -98,7 +98,7 @@
         errorMessage={errors.email}
       />
       {#if submitError}
-        <p class="dark:text-white text-sm text-red-500">{submitError}</p>
+        <p class="text-sm text-red-500">{submitError}</p>
       {/if}
     </div>
 

src/routes/login.svelte

@@ -81,7 +81,7 @@
       errorMessage={errors.password}
     />
     {#if submitError}
-      <p class="dark:text-white text-sm text-red-500">{submitError}</p>
+      <p class="text-sm text-red-500">{submitError}</p>
     {/if}
     <div class="w-full text-right">
       <a class="text-md text-blue-700" href="/forgot"> Forgot password? </a>

src/routes/onboarding.svelte

@@ -15,6 +15,7 @@
   import { orgs, currentOrg } from '../utils/store/org';
   import { onboardingValidation } from '../utils/functions/validator';
   import { supabase } from '../utils/functions/supabase';
+  import { blockedSubdomain } from '../utils/constants/app';
 
   interface OnboardingField {
     fullname?: string;
@@ -110,6 +111,13 @@
     }
 
     if (step === 1) {
+      // Validate if domain is among our seculeded subdomains
+      if (blockedSubdomain.includes(fields.siteName || '')) {
+        errors.siteName = 'Sitename already exists.';
+        loading = false;
+        return;
+      }
+
       const { data: org, error } = await supabase.from('organization').insert({
         name: fields.orgName,
         siteName: fields.siteName,
@@ -276,7 +284,7 @@
                 {/each}
                 <!-- Goal: Error message -->
                 {#if errors.goal}
-                  <p class="dark:text-white text-sm text-red-500">
+                  <p class="text-sm text-red-500">
                     {errors.goal}
                   </p>
                 {/if}
@@ -308,7 +316,7 @@
                 {/each}
                 <!-- Goal: Error message -->
                 {#if errors.source}
-                  <p class="dark:text-white text-sm text-red-500">
+                  <p class="text-sm text-red-500">
                     {errors.source}
                   </p>
                 {/if}

src/routes/reset.svelte

@@ -97,7 +97,7 @@
       isRequired
     />
     {#if submitError}
-      <p class="dark:text-white text-sm text-red-500">{submitError}</p>
+      <p class="text-sm text-red-500">{submitError}</p>
     {/if}
   </div>
 

src/routes/signup.svelte

@@ -124,7 +124,7 @@
       isRequired
     />
     {#if submitError}
-      <p class="dark:text-white text-sm text-red-500">{submitError}</p>
+      <p class="text-sm text-red-500">{submitError}</p>
     {/if}
   </div>
 

src/server.js

@@ -33,9 +33,11 @@ express() // You can also use Express
       session: async (req) => {
         const { user } = await supabase.auth.api.getUserByCookie(req);
         console.log('cookie calling');
+        // console.log('req', req.headers.host);
         return {
           user: JSON.stringify(user),
           config,
+          host: req.headers.host,
         };
       },
     })

src/utils/constants/app.js

@@ -0,0 +1,24 @@
+export const blockedSubdomain = [
+  'app',
+  'apps',
+  'support',
+  'help',
+  'teachers',
+  'church',
+  'tech',
+  'build',
+  'community',
+  'conference',
+  'campaign',
+  'blog',
+  'forum',
+  'mobile',
+  'dev',
+  'stage',
+  'prod',
+  'group',
+  'groups',
+  'academy',
+  'schools',
+  'training',
+];

src/utils/functions/app.js

@@ -2,6 +2,6 @@ export function toggleBodyByTheme(isDark) {
   if (isDark) {
     document.body.className = document.body.className.concat(' ', 'dark');
   } else {
-    document.body.className = document.body.className.replace('dark', '');
+    document.body.className = document.body.className.replace(' dark', '');
   }
 }