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

Co-authored-by: Rotimi Best <[email protected]>

Merge-request: CLASSROOMIO-MR-9
Merged-by: Digdippa Team <[email protected]>

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>