Supbase login + waiting list page

package.json

@@ -12,12 +12,17 @@
     "@rollup/plugin-json": "^4.1.0",
     "@supabase/supabase-js": "^1.20.0",
     "@tailwindcss/forms": "^0.3.2",
+    "body-parser": "^1.19.0",
     "compression": "^1.7.1",
+    "cookie-parser": "^1.4.5",
+    "express": "^4.17.1",
     "hotkeys-js": "^3.8.5",
     "js-yaml": "^4.1.0",
+    "lodash": "^4.17.21",
     "marked": "^1.2.7",
     "node-sass": "^6.0.0",
     "polka": "next",
+    "sapper-environment": "^1.0.1",
     "sirv": "^1.0.0"
   },
   "devDependencies": {
@@ -45,6 +50,7 @@
     "svelte": "^3.17.3",
     "svelte-awesome": "^2.3.1",
     "svelte-dnd-action": "^0.9.9",
+    "svelte-loading-spinners": "^0.1.7",
     "svelte-preprocess": "^4.7.3",
     "tailwindcss": "^2.1.2",
     "typescript": "^4.1.3"

rollup.config.js

@@ -5,9 +5,9 @@ import svelte from 'rollup-plugin-svelte';
 import babel from '@rollup/plugin-babel';
 import { terser } from 'rollup-plugin-terser';
 import config from 'sapper/config/rollup.js';
-import dotenv from 'dotenv';
 import sveltePreprocess from 'svelte-preprocess';
 import json from '@rollup/plugin-json';
+import sapperEnv from 'sapper-environment';
 
 import pkg from './package.json';
 
@@ -34,15 +34,10 @@ export default {
     output: config.client.output(),
     plugins: [
       replace({
+        ...sapperEnv(),
         'process.browser': true,
         'process.env.NODE_ENV': JSON.stringify(mode),
         preventAssignment: true,
-        __api: JSON.stringify({
-          env: {
-            isProd: !dev,
-            ...dotenv.config().parsed, // attached the .env config
-          },
-        }),
       }),
       json(),
       svelte({

src/components/Course/components/Navigation/index.svelte

@@ -82,11 +82,11 @@
     });
   });
 
-  $: {
-    if (process.browser && show !== null) {
-      localStorage.setItem('hideCourseNav', `${!show}`);
-    }
-  }
+  // $: {
+  //   if (process.browser && show !== null) {
+  //     localStorage.setItem('hideCourseNav', `${!show}`);
+  //   }
+  // }
 </script>
 
 <div class="root z-10 {!show && 'hide'}">

src/components/CourseContainer/index.svelte

@@ -41,9 +41,7 @@
 <style>
   .root {
     display: flex;
-    border-right: 1px solid var(--border-color);
     width: 100%;
-    max-width: calc(100% - 100px);
   }
 
   .rightBar {

src/components/Form/TextField.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { afterUpdate } from 'svelte';
+  import { onMount } from 'svelte';
   export let label;
   export let placeholder;
   export let value;
@@ -9,7 +9,8 @@
   export let type = 'text';
   export let autoFocus = false;
   export let isRequired = false;
-
+  export let isDisabled = false;
+  export let errorMessage;
   let ref;
 
   function typeAction(node) {
@@ -20,7 +21,7 @@
     }
   }
 
-  afterUpdate(() => {
+  onMount(() => {
     if (autoFocus) {
       ref.focus();
     }
@@ -28,15 +29,25 @@
 </script>
 
 <label class="block {className}">
-  {#if label}<label for="text-field" class="m-0">{label}</label>{/if}
+  {#if label}
+    <label for="text-field" class="m-0">
+      {label} <span class="text-red-700">*</span>
+    </label>
+  {/if}
   <input
     id="text-field"
     use:typeAction
-    class="form-input {inputClassName} p-2 mt-1 block w-full bg-white border border-gray-300"
+    class="form-input p-2 mt-1 block w-full bg-white border {inputClassName} {errorMessage
+      ? 'border-red-500'
+      : 'border-gray-300'}"
     on:keydown={onKeyDown}
     {placeholder}
     bind:value
     bind:this={ref}
-    required={true}
+    required={isRequired}
+    disabled={isDisabled}
   />
+  {#if errorMessage}
+    <p class="text-sm text-red-500">{errorMessage}</p>
+  {/if}
 </label>

src/components/Navigation/index.svelte

@@ -29,8 +29,10 @@
     <li>
       <a
         class="block"
-        aria-current={segment === undefined ? 'page' : undefined}
-        href="."
+        aria-current={segment === undefined || segment === 'dashbboard'
+          ? 'page'
+          : undefined}
+        href="dashbboard"
       >
         Dashboard
       </a>
@@ -64,7 +66,15 @@
       </a>
     </li>
     <span class="flex-grow" />
-    <Avatar src={user.avatar} name={user.label} className="mr-2" />
+    <li>
+      <a
+        class="block"
+        aria-current={segment === 'profile' ? 'page' : undefined}
+        href="profile"
+      >
+        <Avatar src={user.avatar} name={user.label} className="mr-2" />
+      </a>
+    </li>
     <!-- <li class="hidden">
       <a
         class="flex items-center"

src/config.js

@@ -1,7 +1,5 @@
 export default {
-  port: process.env.PORT,
-  nodeEnv: process.env.NODE_ENV,
-  isProd: process.env.NODE_ENV === 'development',
+  // isProd: process.env.NODE_ENV === 'development',
   supabaseConfig: {
     url: process.env.SVELTE_APP_SUPABASE_URL,
     anonKey: process.env.SVELTE_APP_SUPABASE_ANON_KEY,

src/routes/_error.svelte

@@ -1,34 +1,12 @@
 <script>
-	export let status;
-	export let error;
+  export let status;
+  export let error;
 
-	const dev = process.env.NODE_ENV === 'development';
+  const dev = process.env.NODE_ENV === 'development';
 </script>
 
-<style>
-	h1, p {
-		margin: 0 auto;
-	}
-
-	h1 {
-		font-size: 2.8em;
-		font-weight: 700;
-		margin: 0 0 0.5em 0;
-	}
-
-	p {
-		margin: 1em auto;
-	}
-
-	@media (min-width: 480px) {
-		h1 {
-			font-size: 4em;
-		}
-	}
-</style>
-
 <svelte:head>
-	<title>{status}</title>
+  <title>{status}</title>
 </svelte:head>
 
 <h1>{status}</h1>
@@ -36,5 +14,28 @@
 <p>{error.message}</p>
 
 {#if dev && error.stack}
-	<pre>{error.stack}</pre>
+  <pre>{error.stack}</pre>
 {/if}
+
+<style>
+  h1,
+  p {
+    margin: 0 auto;
+  }
+
+  h1 {
+    font-size: 2.8em;
+    font-weight: 700;
+    margin: 0 0 0.5em 0;
+  }
+
+  p {
+    margin: 1em auto;
+  }
+
+  @media (min-width: 480px) {
+    h1 {
+      font-size: 4em;
+    }
+  }
+</style>

src/routes/_layout.svelte

@@ -1,14 +1,83 @@
+<script context="module">
+  export function preload(page, { config }) {
+    return { config };
+  }
+</script>
+
 <script>
-  import { stores } from '@sapper/app';
+  import { onMount } from 'svelte';
+  import { stores, goto } from '@sapper/app';
   import Tailwindcss from '../components/Tailwindcss.svelte';
   import Navigation from '../components/Navigation/index.svelte';
   // import SideBar from "../components/SideBar/index.svelte";
   import Footer from '../components/Footer/index.svelte';
   import Apps from '../components/Apps/index.svelte';
+  import { handleAuthChange } from '../utils/functions/api';
+  import { user, profile } from '../utils/store/user';
+  import { getSupabase } from '../utils/functions/supabase';
 
   export let segment;
+  export let config;
 
+  let supabase = getSupabase(config);
   let { page } = stores();
+  let path = $page.path.replace('/', '');
+
+  async function getProfile() {
+    // Get user profile
+    const authUser = supabase.auth.user();
+
+    // Check if user has profile
+    let {
+      data: profileData,
+      error,
+      status,
+    } = await supabase
+      .from('profile')
+      .select(`*`)
+      .eq('user_id', authUser.id)
+      .single();
+
+    if (error && !profileData && status === 406) {
+      // User wasn't found, create profile
+
+      const { data, error } = await supabase
+        .from('profile')
+        .insert([{ user_id: authUser.id }]);
+
+      // Profile created, go to profile page
+      if (!error && data) {
+        user.set(authUser);
+        profile.set(data);
+        return goto('/');
+      }
+    } else if (profileData) {
+      // Profile exists, go to profile page
+      user.set(authUser);
+      profile.set(profileData);
+      return goto('/');
+    }
+  }
+
+  onMount(() => {
+    const { data: authListener } = supabase.auth.onAuthStateChange(
+      (event, session) => {
+        handleAuthChange(event, session);
+
+        if (event === 'SIGNED_IN') {
+          getProfile();
+        } else {
+          return goto('/');
+        }
+      }
+    );
+
+    return () => {
+      authListener.unsubscribe();
+    };
+  });
+
+  $: path = $page.path.replace('/', '');
 </script>
 
 <Tailwindcss />
@@ -16,26 +85,27 @@
 <!-- <Nav {segment} /> -->
 
 <main>
-  {#if !['login', 'signup'].includes($page.path.replace('/', ''))}
+  {#if !['login', 'signup', ''].includes(path)}
     <Navigation {segment} />
   {/if}
+
   <div class="flex justify-between">
     <slot />
-    {#if $page.path.includes('courses')}
+
+    {#if path.includes('courses')}
       <Apps />
     {/if}
   </div>
 </main>
 
-<Footer />
+{#if !['about', ''].includes(path)}
+  <Footer {segment} />
+{/if}
 
 <style>
   main {
     background-color: white;
-    /* padding: 15px 2em; */
-    /* margin: 0 auto; */
     box-sizing: border-box;
-    /* max-width: 900px; */
   }
 
   :global(a:hover) {

src/routes/api/auth.js

@@ -0,0 +1,7 @@
+import { getSupabase } from '../../utils/functions/supabase';
+
+export function post(req, res) {
+  const supabase = getSupabase();
+
+  supabase.auth.api.setAuthCookie(req, res);
+}

src/routes/api/waitinglist.js

@@ -0,0 +1,15 @@
+function writeJsonHead(res, statusCode) {
+  res.writeHead(statusCode, {
+    'Content-Type': 'application/json',
+  });
+}
+
+export function post(req, res) {
+  const { email } = req.body;
+
+  console.log(`req.session`, req.session);
+
+  writeJsonHead(res, 200);
+
+  return res.end(JSON.stringify({ success: true }));
+}

src/routes/dashboard.svelte

@@ -0,0 +1,147 @@
+<!-- <script context="module">
+  export async function preload(page, { user, config }) {
+    return { user, config };
+  }
+</script> -->
+<script>
+  import GroupPresentation32 from 'carbon-icons-svelte/lib/GroupPresentation32';
+  import UserSpeaker32 from 'carbon-icons-svelte/lib/UserSpeaker32';
+  import Book32 from 'carbon-icons-svelte/lib/Book32';
+
+  let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
+  let animate = 'transition delay-75 duration-300 ease-in-out';
+  let boxes = [
+    {
+      label: 'Students',
+      value: 50,
+      icon: 'students',
+    },
+    {
+      label: 'Tutors',
+      value: 10,
+      icon: 'tutor',
+    },
+    {
+      label: 'Courses',
+      value: 20,
+      icon: 'courses',
+    },
+  ];
+
+  let topStudents = [
+    {
+      id: 1,
+      name: 'Brad Traversy',
+      score: 97.8,
+    },
+    {
+      id: 2,
+      name: 'Ebuka Jacobs',
+      score: 96,
+    },
+    {
+      id: 3,
+      name: 'Ngozi Okonjo Iwuala',
+      score: 95,
+    },
+    {
+      id: 4,
+      name: 'Nathaniel Bassey',
+      score: 80,
+    },
+    {
+      id: 5,
+      name: 'Barack Obama',
+      score: 79,
+    },
+  ];
+
+  let topCourses = [
+    {
+      title: 'CityBIM Basic Module',
+      rating: 5,
+    },
+    {
+      title: 'CityBIM Advanced Module',
+      rating: 4.5,
+    },
+    {
+      title: 'Introduction to ClasroomIO',
+      rating: 4.2,
+    },
+    {
+      title: 'Advanced Builders Module',
+      rating: 4.1,
+    },
+    {
+      title: 'Artificial Intelligence - Basics',
+      rating: 4,
+    },
+  ];
+</script>
+
+<div class="root w-full py-10 bg-gray-100">
+  <div class="flex items-center justify-evenly max-w-6xl m-auto">
+    {#each boxes as box}
+      <div
+        class="bg-white rounded-md py-4 px-16 active shadow-md hover:shadow-2xl border-2 hover:border-blue-700 cursor-pointer {animate}"
+      >
+        {#if box.icon === 'students'}
+          <UserSpeaker32 class="carbon-icon" />
+        {:else if box.icon === 'tutor'}
+          <GroupPresentation32 class="carbon-icon" />
+        {:else if box.icon === 'courses'}
+          <Book32 class="carbon-icon" />
+        {/if}
+        <p class="text-xl">{box.label}</p>
+        <h3 class="text-3xl m-0 my-2">{box.value}</h3>
+      </div>
+    {/each}
+  </div>
+
+  <div class="flex items-center justify-evenly mt-16">
+    <div class="table rounded-md bg-white shadow-md">
+      <div class="flex border-t-0 {borderBottomGrey} p-3">
+        <h3 class="m-0 py-2 pl-2 text-lg">Outstanding students</h3>
+      </div>
+
+      {#each topStudents as topStudent, index}
+        <div
+          class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
+        >
+          <span class="mr-2">{index + 1}</span>
+          <p class="text-lg">{topStudent.name}</p>
+          <span class="flex-grow" />
+          <p class="text-lg">{topStudent.score}</p>
+        </div>
+      {/each}
+    </div>
+
+    <div class="table rounded-md bg-white shadow-md">
+      <div class="flex border-t-0 {borderBottomGrey} p-3">
+        <h3 class="m-0 py-2 pl-2 text-lg">Top rated courses</h3>
+      </div>
+
+      {#each topCourses as topCourse, index}
+        <div
+          class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
+        >
+          <span class="mr-2">{index + 1}</span>
+          <p class="text-lg">{topCourse.title}</p>
+          <span class="flex-grow" />
+          <p class="text-lg">{topCourse.rating}</p>
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>
+
+<style>
+  .root {
+    min-height: 90vh;
+  }
+
+  .table {
+    width: 564px;
+  }
+</style>

src/routes/discussions/[id].json.js

@@ -1,29 +1,29 @@
 import _discussions from './_discussions.js';
 
 const lookup = new Map();
-_discussions.forEach(discussion => {
-	lookup.set(`${discussion.id}`, JSON.stringify(discussion));
+_discussions.forEach((discussion) => {
+  lookup.set(`${discussion.id}`, JSON.stringify(discussion));
 });
 
 export function get(req, res, next) {
-	// the `id` parameter is available because
-	// this file is called [id].json.js
-	const { id } = req.params;
+  // the `id` parameter is available because
+  // this file is called [id].json.js
+  const { id } = req.params;
 
   if (lookup.has(id)) {
     res.writeHead(200, {
-      "Content-Type": "application/json"
+      'Content-Type': 'application/json',
     });
 
     res.end(lookup.get(id));
   } else {
     res.writeHead(404, {
-      "Content-Type": "application/json"
+      'Content-Type': 'application/json',
     });
 
     res.end(
       JSON.stringify({
-        message: `Not found`
+        message: `Not found`,
       })
     );
   }

src/routes/discussions/[id].svelte

@@ -2,7 +2,7 @@
   export async function preload({ params }) {
     // the `id` parameter is available because
     // this file is called [id].svelte
-    const res = await this.fetch(`discussion/${params.id}.json`);
+    const res = await this.fetch(`discussions/${params.id}.json`);
     const data = await res.json();
 
     if (res.status === 200) {

src/routes/index.svelte

@@ -1,142 +1,115 @@
 <script>
-  import GroupPresentation32 from 'carbon-icons-svelte/lib/GroupPresentation32';
-  import UserSpeaker32 from 'carbon-icons-svelte/lib/UserSpeaker32';
-  import Book32 from 'carbon-icons-svelte/lib/Book32';
+  import { BarLoader } from 'svelte-loading-spinners';
+  import TextField from '../components/Form/TextField.svelte';
+  import PrimaryButton from '../components/PrimaryButton/index.svelte';
+  import { VARIANTS } from '../components/PrimaryButton/constants';
+  import { getSupabase } from '../utils/functions/supabase';
 
-  let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
-  let animate = 'transition delay-75 duration-300 ease-in-out';
-  let boxes = [
+  let email;
+  let isAdding = false;
+  let success = false;
+
+  const supabase = getSupabase();
+  const animate = 'transition delay-75 duration-300 ease-in-out';
+  const areas = [
     {
-      label: 'Students',
-      value: 50,
-      icon: 'students',
+      title: 'Access',
+      description:
+        'Quickly find any material you need to get your job done. ClassroomIO offers the All-in-on-platform',
     },
     {
-      label: 'Tutors',
-      value: 10,
-      icon: 'tutor',
+      title: 'Analytics',
+      description:
+        'Avoid assumptions, better understand the needs of your classrooms and give students a personlized experience',
     },
     {
-      label: 'Courses',
-      value: 20,
-      icon: 'courses',
+      title: 'Automation',
+      description:
+        'Lesson reminders, deadline reminders and many other automated alerts to help everyone in the learning process be proactive',
     },
   ];
 
-  let topStudents = [
-    {
-      id: 1,
-      name: 'Brad Traversy',
-      score: 97.8,
-    },
-    {
-      id: 2,
-      name: 'Ebuka Jacobs',
-      score: 96,
-    },
-    {
-      id: 3,
-      name: 'Ngozi Okonjo Iwuala',
-      score: 95,
-    },
-    {
-      id: 4,
-      name: 'Nathaniel Bassey',
-      score: 80,
-    },
-    {
-      id: 5,
-      name: 'Barack Obama',
-      score: 79,
-    },
-  ];
+  async function handleSubmit() {
+    isAdding = true;
 
-  let topCourses = [
-    {
-      title: 'CityBIM Basic Module',
-      rating: 5,
-    },
-    {
-      title: 'CityBIM Advanced Module',
-      rating: 4.5,
-    },
-    {
-      title: 'Introduction to ClasroomIO',
-      rating: 4.2,
-    },
-    {
-      title: 'Advanced Builders Module',
-      rating: 4.1,
-    },
-    {
-      title: 'Artificial Intelligence - Basics',
-      rating: 4,
-    },
-  ];
+    await supabase
+      .from('waitinglist')
+      .insert([{ email }], { returning: 'minimal' });
+
+    success = true;
+
+    setTimeout(() => {
+      isAdding = false;
+      success = false;
+      email = null;
+    }, 5000);
+  }
 </script>
 
-<div class="root w-full py-10 bg-gray-100">
-  <div class="flex items-center justify-evenly max-w-6xl m-auto">
-    {#each boxes as box}
-      <div
-        class="bg-white rounded-md py-4 px-16 active shadow-md hover:shadow-2xl border-2 hover:border-blue-700 cursor-pointer {animate}"
-      >
-        {#if box.icon === 'students'}
-          <UserSpeaker32 class="carbon-icon" />
-        {:else if box.icon === 'tutor'}
-          <GroupPresentation32 class="carbon-icon" />
-        {:else if box.icon === 'courses'}
-          <Book32 class="carbon-icon" />
-        {/if}
-        <p class="text-xl">{box.label}</p>
-        <h3 class="text-3xl m-0 my-2">{box.value}</h3>
-      </div>
-    {/each}
+<div
+  class="w-screen flex items-center justify-center flex-col m-2 sm:h-screen sm:m-0"
+>
+  <img
+    src="/logo-192.png"
+    alt="ClassroomIO logo"
+    class="rounded inline-block mx-auto w-20 h-20 sm:w-auto sm:h-auto"
+    data-atf="1"
+  />
+
+  <div>
+    <h3 class="text-4xl text-center">
+      Classroom<span class="text-blue-700">IO</span>
+    </h3>
+    <p class="text-lg text-center">
+      The operating system for classroooms of the future.
+    </p>
   </div>
 
-  <div class="flex items-center justify-evenly mt-16">
-    <div class="table rounded-md bg-white shadow-md">
-      <div class="flex border-t-0 {borderBottomGrey} p-3">
-        <h3 class="m-0 py-2 pl-2 text-lg">Outstanding students</h3>
-      </div>
-
-      {#each topStudents as topStudent, index}
-        <div
-          class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
+  <form on:submit|preventDefault={handleSubmit} class="my-4">
+    <div class="flex items-center flex-col sm:flex-row">
+      {#if success}
+        <p>You have been added successfully. Thanks for joining.</p>
+      {:else}
+        <TextField
+          bind:value={email}
+          type="email"
+          placeholder="Enter your email.."
+          className="mr-3 my-2"
+          inputClassName="rounded-md"
+          isRequired={true}
+          isDisabled={isAdding}
+        />
+        <PrimaryButton
+          type="submit"
+          variant={isAdding ? VARIANTS.OUTLINED : VARIANTS.CONTAINED}
+          className="py-2 w-full justify-center sm:w-auto {isAdding &&
+            'py-4 border-blue-700'}"
+          isDisabled={isAdding}
         >
-          <span class="mr-2">{index + 1}</span>
-          <p class="text-lg">{topStudent.name}</p>
-          <span class="flex-grow" />
-          <p class="text-lg">{topStudent.score}</p>
-        </div>
-      {/each}
+          {#if isAdding}
+            <BarLoader size="30" color="#1d4ed8" unit="px" duration="1s" />
+          {:else}
+            Join waiting list
+          {/if}
+        </PrimaryButton>
+      {/if}
     </div>
+  </form>
 
-    <div class="table rounded-md bg-white shadow-md">
-      <div class="flex border-t-0 {borderBottomGrey} p-3">
-        <h3 class="m-0 py-2 pl-2 text-lg">Top rated courses</h3>
+  <div class="flex flex-col md:flex-row">
+    {#each areas as area}
+      <div
+        class="box m-3 bg-white rounded-md py-4 px-12 active shadow-xl border-2 hover:border-blue-700 {animate}"
+      >
+        <h3 class="text-3xl">{area.title}</h3>
+        <p>{area.description}</p>
       </div>
-
-      {#each topCourses as topCourse, index}
-        <div
-          class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
-        >
-          <span class="mr-2">{index + 1}</span>
-          <p class="text-lg">{topCourse.title}</p>
-          <span class="flex-grow" />
-          <p class="text-lg">{topCourse.rating}</p>
-        </div>
-      {/each}
-    </div>
+    {/each}
   </div>
 </div>
 
 <style>
-  .root {
-    min-height: 90vh;
-  }
-
-  .table {
-    width: 564px;
+  .box {
+    max-width: 350px;
   }
 </style>

src/routes/login.svelte

@@ -1,11 +1,50 @@
+<script context="module">
+  export function preload(page, { config }) {
+    return { config };
+  }
+</script>
+
 <script>
   import TextField from '../components/Form/TextField.svelte';
   import PrimaryButton from '../components/PrimaryButton/index.svelte';
+  import { getSupabase } from '../utils/functions/supabase';
 
+  export let config;
+
+  let supabase = getSupabase(config);
   let email;
+  let loading = false;
+  let success = false;
+  let errors = {};
 
-  function handleSubmit() {
-    console.log(`email`, email);
+  async function handleSubmit() {
+    if (!email) {
+      errors = {
+        email: 'Email is required',
+      };
+      return;
+    }
+
+    try {
+      loading = true;
+      const { data, error } = await supabase.auth.signIn(
+        { email },
+        {
+          redirectTo: window.location.origin + '/login',
+        }
+      );
+      if (error) throw error;
+
+      success = true;
+      email = {};
+      alert('Check your email for the login link!');
+    } catch (error) {
+      errors = {
+        email: error.error_description || error.message,
+      };
+    } finally {
+      loading = false;
+    }
   }
 </script>
 
@@ -30,22 +69,32 @@
       <p class="text-sm">into ClassroomIO</p>
 
       <div class="my-4 w-full">
-        <TextField
-          bind:value={email}
-          type="email"
-          autoFocus={true}
-          placeholder="Enter your email"
-          onKeyDown={handleSubmit}
-          inputClassName="rounded-md w-full px-2 py-4"
-        />
-        <p class="py-3 text-sm">
-          A magic link will be sent to your email, please open the link
-        </p>
+        {#if success}
+          <p class="text-xl text-center">Please check your email to signin</p>
+        {:else}
+          <TextField
+            bind:value={email}
+            type="email"
+            autoFocus={true}
+            placeholder="Enter your email"
+            inputClassName="rounded-md w-full px-2 py-4"
+            isDisabled={loading}
+            errorMessage={errors.email}
+          />
+          <p class="py-3 text-sm">
+            A magic link will be sent to your email, please open the link
+          </p>
+        {/if}
       </div>
 
       <div class="my-4 w-full flex justify-between items-center">
         <a href="/signup" class="text-blue-700 text-sm">Create an account</a>
-        <PrimaryButton label="Next" type="submit" className="py-2 px-4" />
+        <PrimaryButton
+          label={loading ? 'Creating...' : 'Next'}
+          type="submit"
+          className="py-2 px-4"
+          isDisabled={loading}
+        />
       </div>
     </form>
   </div>

src/routes/profile.svelte

@@ -1,48 +1,67 @@
-<script>
-  let photos = [];
+<script context="module">
+  export function preload(page, { config }) {
+    return { config };
+  }
 </script>
 
-<svelte:head>
-  <title>Profile</title>
-</svelte:head>
+<script>
+  import { getSupabase } from '../utils/functions/supabase';
+  import { user, profile } from '../utils/store/user';
 
-<div class="root">
-  <figure>
-    <img
-      src="https://pbs.twimg.com/media/EzHwj4wVgAEVbUY?format=jpg&name=4096x4096"
-      alt="Elon musk"
+  export let config;
+
+  let supabase = getSupabase(config);
+  let loading = true;
+  let username = null;
+  let website = null;
+  let avatar_url = null;
+
+  async function updateProfile() {
+    try {
+      loading = true;
+      const user = supabase.auth.user();
+
+      const updates = {
+        id: user.id,
+        username,
+        website,
+        avatar_url,
+        updated_at: new Date(),
+      };
+
+      let { error } = await supabase.from('profiles').upsert(updates, {
+        returning: 'minimal', // Don't return the value after inserting
+      });
+
+      if (error) throw error;
+    } catch (error) {
+      alert(error.message);
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<form class="form-widget" on:submit|preventDefault={updateProfile}>
+  <div>
+    <label for="email">Email</label>
+    <input id="email" type="text" value={$user.email} disabled />
+  </div>
+  <div>
+    <label for="username">Name</label>
+    <input id="username" type="text" bind:value={username} />
+  </div>
+  <div>
+    <label for="website">Website</label>
+    <input id="website" type="website" bind:value={website} />
+  </div>
+
+  <div>
+    <input
+      type="submit"
+      class="button block primary"
+      value={loading ? 'Loading ...' : 'Update'}
+      disabled={loading}
     />
-    <figcaption>Elon musk</figcaption>
-  </figure>
-  <p>
-    NASA has selected Starship to land the first astronauts on the lunar surface
-    since the Apollo program! We are humbled to help @NASAArtemis usher in a new
-    era of human space exploration → http://go.nasa.gov/3tur510
-  </p>
-  <button
-    class="bg-blue-700 hover:bg-blue-900 text-white font-bold py-1 px-3 rounded"
-  >
-    Connect
-  </button>
-</div>
-
-<style>
-  .root {
-    max-width: 600px;
-    margin: 20px auto;
-    border-left: 1px solid var(--border-color);
-    border-right: 1px solid var(--border-color);
-    text-align: center;
-    padding: 5px;
-  }
-
-  figure {
-    margin-bottom: 10px;
-  }
-  img {
-    width: 100px;
-    height: 100px;
-    margin: 0 auto;
-    border-radius: 50%;
-  }
-</style>
+  </div>
+</form>

src/routes/signup.svelte

@@ -1,8 +1,17 @@
+<script context="module">
+  export function preload(page, { config }) {
+    return { config };
+  }
+</script>
+
 <script>
   import TextField from '../components/Form/TextField.svelte';
   import Select from '../components/Form/Select.svelte';
   import PrimaryButton from '../components/PrimaryButton/index.svelte';
-  import { supabase } from '../utils/functions/supabase';
+  import { getSupabase } from '../utils/functions/supabase';
+  export let config;
+
+  let supabase = getSupabase(config);
 
   let email;
   let userType = 0;
@@ -55,7 +64,7 @@
       <h4 class="text-lg m-0 mt-3">Signup</h4>
       <p class="text-sm">for ClassroomIO</p>
 
-      <div class="my-4 w-full">
+      <!-- <div class="my-4 w-full">
         <Select
           label="Who are you?"
           bind:value={userType}
@@ -63,7 +72,7 @@
           valueKey="value"
           isRequired={true}
         />
-      </div>
+      </div> -->
 
       <div class="my-4 w-full">
         <TextField
@@ -72,7 +81,6 @@
           label="Email"
           type="email"
           placeholder="Enter your email"
-          onKeyDown={handleSubmit}
           inputClassName="rounded-md w-full px-2 py-4"
           isRequired={true}
         />

src/server.js

@@ -1,18 +1,42 @@
 import dotenv from 'dotenv';
 
+import { json } from 'body-parser';
 import sirv from 'sirv';
-import polka from 'polka';
+import express from 'express';
 import compression from 'compression';
 import * as sapper from '@sapper/server';
+import cookieParser from 'cookie-parser';
+import { getSupabase } from './utils/functions/supabase';
 
-import config from './config';
+dotenv.config();
 
-polka() // You can also use Express
+const config = {
+  telegramToken: process.env.SVELTE_APP_TELEGRAM_API_TOKEN,
+  supabaseConfig: {
+    url: process.env.SVELTE_APP_SUPABASE_URL,
+    anonKey: process.env.SVELTE_APP_SUPABASE_ANON_KEY,
+  },
+};
+
+const supabase = getSupabase(config);
+
+express() // You can also use Express
+  .use(cookieParser())
+  .use(json())
   .use(
     compression({ threshold: 0 }),
     sirv('static', { dev: true }),
-    sapper.middleware()
+    sapper.middleware({
+      session: async (req) => {
+        const { user } = await supabase.auth.api.getUserByCookie(req);
+
+        return {
+          user: JSON.stringify(user),
+          config,
+        };
+      },
+    })
   )
-  .listen(config.port, (err) => {
+  .listen(process.env.PORT, (err) => {
     if (err) console.log('error', err);
   });

src/utils/functions/api.js

@@ -0,0 +1,8 @@
+export async function handleAuthChange(event, session) {
+  await fetch('/api/auth', {
+    method: 'POST',
+    headers: new Headers({ 'Content-Type': 'application/json' }),
+    credentials: 'same-origin',
+    body: JSON.stringify({ event, session }),
+  });
+}

src/utils/functions/supabase.js

@@ -1,8 +1,24 @@
 import { createClient } from '@supabase/supabase-js';
 
-import config from '../../config';
+let _supabase;
 
-export const supabase = createClient(
-  config.supabaseConfig.url,
-  config.supabaseConfig.anonKey
-);
+export const getSupabase = (config) => {
+  if (_supabase) return _supabase;
+
+  if (!config && process && process.env) {
+    config = {
+      isProd: process.env.NODE_ENV === 'development',
+      supabaseConfig: {
+        url: process.env.SVELTE_APP_SUPABASE_URL,
+        anonKey: process.env.SVELTE_APP_SUPABASE_ANON_KEY,
+      },
+    };
+  }
+
+  _supabase = createClient(
+    config.supabaseConfig.url,
+    config.supabaseConfig.anonKey
+  );
+
+  return _supabase;
+};

src/utils/store/user.js

@@ -0,0 +1,4 @@
+import { writable } from 'svelte/store';
+
+export const user = writable(false);
+export const profile = writable(false);