From 16d8b61ccf90ad40e72249abd2e35dfdce0b1fbc Mon Sep 17 00:00:00 2001
From: silvestrevivo <silvestrevivomillan@gmail.com>
Date: Mon, 11 May 2020 22:51:06 +0200
Subject: [PATCH 1/2] token available in client

---
 src/components/Nav.svelte        | 186 +++++++++++++-------
 src/node_modules/api.js          |   4 +-
 src/routes/auth/login.js         |   2 +-
 src/routes/login/index.svelte    | 293 +++++++++++++++----------------
 src/routes/projects/index.svelte | 128 +++++++-------
 5 files changed, 330 insertions(+), 283 deletions(-)

diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 5d83e0f..7eedfc2 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -1,80 +1,136 @@
 <script>
-	import { goto, stores } from "@sapper/app";
-	import { post } from "auth.js";
+  import { goto, stores } from "@sapper/app";
+  import { post } from "auth.js";
 
-	export let segment;
+  export let segment;
 
-	const { session } = stores();
+  const { session } = stores();
 
-	async function logout() {
-		await post(`auth/logout`);
-		$session.user = null;
-		goto("/");
-	}
-	  
+  async function logout() {
+    await post(`auth/logout`);
+    $session.user = null;
+    goto("/");
+  }
 </script>
 
 <style>
-	nav, ul {
-		display: flex;
-	}
-	nav {
-		flex-direction: column;
-		align-self: center;
-	}
-	ul {
-		justify-content: center;
-		list-style-type: none;
-		padding: 0;
-	}
-	li {
-		margin: auto 1rem;
-	}
-	.logo {
-		display: none;
-		justify-content: center;
-        width: 120px;
-		margin: 1rem auto 0;
-	}
-	
-	.primary-link {
-    font-family: 'Poppins', sans-serif;
+  nav,
+  ul {
+    display: flex;
+  }
+  nav {
+    flex-direction: column;
+    align-self: center;
+  }
+  ul {
+    justify-content: center;
+    list-style-type: none;
+    padding: 0;
+  }
+  li {
+    margin: auto 1rem;
+  }
+  .logo {
+    display: none;
+    justify-content: center;
+    width: 120px;
+    margin: 1rem auto 0;
+  }
+
+  .primary-link {
+    font-family: "Poppins", sans-serif;
     font-weight: 500;
     font-size: 14px;
-    color: #117BCC;
-	text-decoration: none;
+    color: #117bcc;
+    text-decoration: none;
   }
 
-	.primary-link:hover {
-		color: #0c5e9c;
-		text-decoration: underline;
-	}
-	@media (min-width: 769px) {
-		nav {
-		flex-direction: row;
-		justify-content: space-between;
-		}
-		.logo {
-			margin-top: 0;
-			align-self: center;
-			margin-left: 2rem;
-		}
-	}
+  .primary-link:hover {
+    color: #0c5e9c;
+    text-decoration: underline;
+  }
+  @media (min-width: 769px) {
+    nav {
+      flex-direction: row;
+      justify-content: space-between;
+    }
+    .logo {
+      margin-top: 0;
+      align-self: center;
+      margin-left: 2rem;
+    }
+  }
 </style>
 
 <nav>
-	<img class="logo" src="https://picsum.photos/seed/picsum/100/50" alt="Project Login Logo" loading="lazy" width="120">
-	<ul>
-		<li><a class="primary-link" aria-current='{segment === undefined ? "page" : undefined}' href='.'>home</a></li>
-		{#if !$session.user}
-			<li><a class="primary-link" aria-current='{segment === "register" ? "page" : undefined}' href='register'>Register</a></li>
-			<li><a class="primary-link" aria-current='{segment === "login" ? "page" : undefined}' href='login'>Login</a></li>
-			<li><a class="primary-link" aria-current='{segment === "forgot" ? "page" : undefined}' href='forgot'>Forgot</a></li>
-		{/if}
-		{#if $session.user}
-			<li><a class="primary-link" aria-current='{segment === "dashboard" ? "page" : undefined}' href='dashboard'>Dashboard</a></li>
-			<li><a class="primary-link" aria-current='{segment === "projects" ? "page" : undefined}' href='projects'>Projects</a></li>
-			<li><a class="primary-link" aria-current='{segment === "logout" ? "page" : undefined}' href='.' on:click={logout}>Logout</a></li>
-		{/if}
-	</ul>
+  <img
+    class="logo"
+    src="https://picsum.photos/seed/picsum/100/50"
+    alt="Project Login Logo"
+    loading="lazy"
+    width="120" />
+  <ul>
+    <li>
+      <a
+        class="primary-link"
+        aria-current={segment === undefined ? 'page' : undefined}
+        href=".">
+        home
+      </a>
+    </li>
+    {#if !$session.user}
+      <li>
+        <a
+          class="primary-link"
+          aria-current={segment === 'register' ? 'page' : undefined}
+          href="register">
+          Register
+        </a>
+      </li>
+      <li>
+        <a
+          class="primary-link"
+          aria-current={segment === 'login' ? 'page' : undefined}
+          href="login">
+          Login
+        </a>
+      </li>
+      <li>
+        <a
+          class="primary-link"
+          aria-current={segment === 'forgot' ? 'page' : undefined}
+          href="forgot">
+          Forgot
+        </a>
+      </li>
+    {/if}
+    {#if $session.user}
+      <li>
+        <a
+          class="primary-link"
+          aria-current={segment === 'dashboard' ? 'page' : undefined}
+          href="dashboard">
+          Dashboard
+        </a>
+      </li>
+      <li>
+        <a
+          class="primary-link"
+          aria-current={segment === 'projects' ? 'page' : undefined}
+          href="projects"
+          rel="prefetch">
+          Projects
+        </a>
+      </li>
+      <li>
+        <a
+          class="primary-link"
+          aria-current={segment === 'logout' ? 'page' : undefined}
+          href="."
+          on:click={logout}>
+          Logout
+        </a>
+      </li>
+    {/if}
+  </ul>
 </nav>
diff --git a/src/node_modules/api.js b/src/node_modules/api.js
index 42392ce..1cb3cf8 100644
--- a/src/node_modules/api.js
+++ b/src/node_modules/api.js
@@ -1,4 +1,4 @@
-const base = 'http://localhost:5000/api/v1';
+const base = 'http://localhost:3000/api/v1';
 
 function send({ method, path, data, token }) {
 
@@ -12,7 +12,7 @@ function send({ method, path, data, token }) {
 	}
 
 	if (token) {
-		opts.headers['Authorization'] = `Token ${token}`;
+		opts.headers['Authorization'] = `Bearer ${token}`;
 	}
 
 	return fetch(`${base}/${path}`, opts)
diff --git a/src/routes/auth/login.js b/src/routes/auth/login.js
index 5068614..2320c9d 100644
--- a/src/routes/auth/login.js
+++ b/src/routes/auth/login.js
@@ -4,7 +4,7 @@ export function post(req, res) {
 	const user = req.body;
 
 	api.post('auth/login', user ).then(response => {
-		if (response.user) req.session.user = response.user;
+		if (response.user) req.session.user = response.user; req.session.token = response.token;
 		res.end(JSON.stringify(response));
 	});
 }
diff --git a/src/routes/login/index.svelte b/src/routes/login/index.svelte
index 0eab319..d433f30 100644
--- a/src/routes/login/index.svelte
+++ b/src/routes/login/index.svelte
@@ -1,170 +1,167 @@
 <script>
-    import { onMount, onDestroy } from 'svelte';
-    import { goto, stores } from '@sapper/app';
-    import { post } from "auth.js";
-    import TextInput from '../../components/UI/TextInput.svelte';
-    import Button from '../../components/UI/Button.svelte';
+  import { onMount, onDestroy } from "svelte";
+  import { goto, stores } from "@sapper/app";
+  import { post } from "auth.js";
+  import TextInput from "../../components/UI/TextInput.svelte";
+  import Button from "../../components/UI/Button.svelte";
 
-    const { session } = stores();
+  const { session } = stores();
 
-    onMount(() => {
-        if (window.innerWidth > 768) {
-            document.querySelector("#sapper > main").style.background = '#F6F6F6';
-        } else {
-            document.querySelector("#sapper > main").style.background = '#FFFFFF';
-        }
-    });
-    
-    onDestroy(() => {
-		document.querySelector("#sapper > main").style.background = '#FFFFFF';
-	});
+  onMount(() => {
+    if (window.innerWidth > 768) {
+      document.querySelector("#sapper > main").style.background = "#F6F6F6";
+    } else {
+      document.querySelector("#sapper > main").style.background = "#FFFFFF";
+    }
+  });
 
-    let email = '';
-	let password = '';
-    let errors = null;
+  onDestroy(() => {
+    document.querySelector("#sapper > main").style.background = "#FFFFFF";
+  });
 
-    async function submit() {
-        const response = await post(`auth/login`, { email, password });
-        // TODO handle network errors
-        // errors = response.errors;
-        if(errors) {
-            
-        }
+  let email = "";
+  let password = "";
+  let errors = null;
 
-        if (response.user) {
-            $session.user = response.user;
-            $session.token = response.token;
-            goto("/dashboard");
-        }
+  async function submit() {
+    const response = await post(`auth/login`, { email, password });
+    // TODO handle network errors
+    // errors = response.errors;
+    if (errors) {
     }
 
+    if (response.user) {
+      //! I think this is doing nothing!!!
+      // $session.user = response.user;
+      // $session.token = response.token;
+      goto("/dashboard");
+    }
+  }
 </script>
 
 <style>
-    .top-margin {
-        padding-top: 4rem;
-        background: #F6F6F6;
-    }
-    .card-wrapper {
-        display: flex;
-        width: 100%;
-        margin: 0 auto;
-        background: #FFF;
-    }
-    .card-container {
-        width: 100%;
-        margin: 0 24px;
-        background: #FFF;
-    }
-    .logo-container {
-        text-align: center;
-    }
-    .logo {
-        width: 120px;
-        margin-top: 48px;
-        margin-bottom: 16px;
-        align-self: center;
-    }
-    h2 {
-        font-family: 'Poppins', sans-serif;
-        font-weight: 400;
-        font-size: 16px;
-        color: rgba(0, 0, 0, 0.87);
-        margin: 16px auto 32px;
-        align-self: center;
-    }
+  .top-margin {
+    padding-top: 4rem;
+    background: #f6f6f6;
+  }
+  .card-wrapper {
+    display: flex;
+    width: 100%;
+    margin: 0 auto;
+    background: #fff;
+  }
+  .card-container {
+    width: 100%;
+    margin: 0 24px;
+    background: #fff;
+  }
+  .logo-container {
+    text-align: center;
+  }
+  .logo {
+    width: 120px;
+    margin-top: 48px;
+    margin-bottom: 16px;
+    align-self: center;
+  }
+  h2 {
+    font-family: "Poppins", sans-serif;
+    font-weight: 400;
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.87);
+    margin: 16px auto 32px;
+    align-self: center;
+  }
 
-    .btn-group {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        margin-top: 24px;
+  .btn-group {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin-top: 24px;
+  }
+  .btn-item {
+    align-self: center;
+  }
 
-    }
-    .btn-item {
-        align-self: center;
-    }
+  .link-container {
+    position: absolute;
+    bottom: 32px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
 
-    .link-container {
-        position: absolute;
-        bottom: 32px;
-        left: 50%;
-        transform: translateX(-50%)
+  @media (min-width: 769px) {
+    .card-wrapper {
+      width: 440px;
+      height: 440px;
+      margin: 0 auto;
+      box-shadow: 0px 1px 3px #00000066;
+      border-radius: 8px;
     }
 
-    @media (min-width: 769px) {
-        .card-wrapper {
-            width: 440px;
-            height: 440px;
-            margin: 0 auto;
-            box-shadow: 0px 1px 3px #00000066;
-            border-radius: 8px;
-        }
-
-        .link-container{
-            position: relative;
-            margin: 117px auto 0;
-            text-align: center;
-        }
+    .link-container {
+      position: relative;
+      margin: 117px auto 0;
+      text-align: center;
     }
+  }
 </style>
-<div class="top-margin"></div>
+
+<div class="top-margin" />
 <div class="card-wrapper">
-    <div class="card-container">
-        <div class="logo-container">
-            <img class="logo" src="https://picsum.photos/seed/picsum/200/200" alt="Platform Login Logo" loading="lazy" width="120">
-            <h2>Sign in to continue to Plateform.</h2>
+  <div class="card-container">
+    <div class="logo-container">
+      <img
+        class="logo"
+        src="https://picsum.photos/seed/picsum/200/200"
+        alt="Platform Login Logo"
+        loading="lazy"
+        width="120" />
+      <h2>Sign in to continue to Plateform.</h2>
+    </div>
+    <form on:submit|preventDefault={submit}>
+      <div class="form-item">
+        <TextInput
+          type="email"
+          placeholder="Email"
+          ariaLabel="email"
+          value={email}
+          on:input={event => (email = event.target.value)} />
+      </div>
+      <div class="form-item">
+        <TextInput
+          controlType="password"
+          type="password"
+          placeholder="Password"
+          ariaLabel="password"
+          value={password}
+          on:input={event => (password = event.target.value)} />
+      </div>
+      <div class="btn-group">
+        <div class="btn-item">
+          <Button mode="link" color="primary-link" href="/forgot">
+            FORGOT PASSWORD?
+          </Button>
         </div>
-        <form on:submit|preventDefault={submit}>
-            <div class="form-item">
-                <TextInput
-                        type="email"
-                        placeholder="Email"
-                        ariaLabel="email"
-                        value={email}
-                        on:input={event => (email = event.target.value)}
-                    />
-            </div>
-            <div class="form-item">
-                <TextInput
-                        controlType="password"
-                        type="password"
-                        placeholder="Password"
-                        ariaLabel="password"
-                        value={password}
-                        on:input={event => (password = event.target.value)}
-                    />
-            </div>
-            <div class="btn-group">
-                <div class="btn-item">
-                    <Button 
-                        mode="link"
-                        color="primary-link"
-                        href="/forgot"
-                        >FORGOT PASSWORD?</Button>
-                </div>
-                <div class="btn-item">
-                    <Button 
-                        mode="button"
-                        color="primary"
-                        type="button" 
-                        disabled={!email || !password}
-                        on:click={submit}
-                        >Login</Button>
-                </div>
-            </div>
-        </form>
-        <div class="link-container">
-            <Button 
-                mode="link"
-                color="secondary-link link-item"
-                href="/terms"
-                >Terms</Button>
-            <Button 
-                mode="link"
-                color="secondary-link link-item"
-                href="/privacy"
-                >Privacy</Button>
+        <div class="btn-item">
+          <Button
+            mode="button"
+            color="primary"
+            type="button"
+            disabled={!email || !password}
+            on:click={submit}>
+            Login
+          </Button>
         </div>
+      </div>
+    </form>
+    <div class="link-container">
+      <Button mode="link" color="secondary-link link-item" href="/terms">
+        Terms
+      </Button>
+      <Button mode="link" color="secondary-link link-item" href="/privacy">
+        Privacy
+      </Button>
     </div>
-</div>
\ No newline at end of file
+  </div>
+</div>
diff --git a/src/routes/projects/index.svelte b/src/routes/projects/index.svelte
index b63165c..9698b0d 100644
--- a/src/routes/projects/index.svelte
+++ b/src/routes/projects/index.svelte
@@ -1,82 +1,77 @@
 <script context="module">
-import * as api from 'api.js';
+  import * as api from "api.js";
 
   export async function preload({}, { user, token }) {
-    console.log('Server Side User', user)
-    console.log('Server Side Token', token)
-    const projects = await api.get(`projects`, token)
-        .then((response) => {
-            console.log('PROJECTS:', response)
-            return response.data;
-        })
-        .catch(error => console.log('error', error));
-		
+    console.log("Server Side User", user);
+    console.log("Server Side Token", token);
+    const projects = await api
+      .get(`projects`, token)
+      .then(response => {
+        console.log("PROJECTS:", response);
+        return response.data;
+      })
+      .catch(error => console.log("error", error));
+
+    // you need to retrieve something to the client side
+    return { projects };
   }
 </script>
 
 <script>
-    import { onMount, onDestroy } from 'svelte';
-    import { stores } from '@sapper/app';
-    import { post } from 'auth.js';
-
-    const { session } = stores();
-    console.log('client-side user:', $session.user);
-
-    let projects;
-    let inProgress;
-    let errors;
-
-    onMount(async () => {
-		
-	});
-    
-    onDestroy(() => {
-		
-    });
-    
+  import { onMount, onDestroy } from "svelte";
+  import { stores } from "@sapper/app";
+  import { post } from "auth.js";
 
+  // projects is imported in the client side as props
+  export let projects;
+  // let inProgress;
+  // let errors;
+
+  onMount(async () => {});
+
+  onDestroy(() => {});
 </script>
 
 <style>
-    div.header {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        margin: 0 24px;
-        padding: 32px 0 0;
-    }
+  div.header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 0 24px;
+    padding: 32px 0 0;
+  }
 
-    h1 {
-        font-size: 34px;
-        letter-spacing: 0.24px;
-        align-self: center;
-        margin: 0;
-    }
-    i {
-        color: #757575;
-        margin-top: 8px;
-        cursor: pointer;
-    }
+  h1 {
+    font-size: 34px;
+    letter-spacing: 0.24px;
+    align-self: center;
+    margin: 0;
+  }
+  i {
+    color: #757575;
+    margin-top: 8px;
+    cursor: pointer;
+  }
 
-    hr {
-        margin: 24px;
-        border: 1px solid #E0E0E0;
-    }
+  hr {
+    margin: 24px;
+    border: 1px solid #e0e0e0;
+  }
 
-    .hr-break {
-        margin-top: 48px;
-    }
+  .hr-break {
+    margin-top: 48px;
+  }
 
-    h2 {
-        font-size: 20px;
-        letter-spacing: 0.24px;
-        margin: 0 0 8px 24px;
-    }
+  h2 {
+    font-size: 20px;
+    letter-spacing: 0.24px;
+    margin: 0 0 8px 24px;
+  }
 
-    /* a {
+  /* a {
         text-decoration: none;
-    } 
-    
+    }
+
     .card {
       display: flex;
       flex-direction: column;
@@ -122,21 +117,20 @@ import * as api from 'api.js';
 </style>
 
 <div class="header">
-    <h1>Your Plateform Projects</h1>
-    <i class="material-icons-outlined">settings</i>
+  <h1>Your Plateform Projects</h1>
+  <i class="material-icons-outlined">settings</i>
 </div>
 
 <hr />
 
 <h2>Projects</h2>
 
-<pre>{JSON.stringify($projects, null, 2)}</pre>
+<pre>{JSON.stringify(projects, null, 2)}</pre>
 
 <!-- {#each Object.keys($projects) as key}
     <p key={key}>{$projects[key]}</p>
 {/each} -->
 
-
 <!-- {#each $projects as project}
     <a href=".">
         <div class="card fixedWidth">
@@ -149,4 +143,4 @@ import * as api from 'api.js';
             </div>
         </div>
     </a>
-{/each} -->
\ No newline at end of file
+{/each} -->

From 419961b3c1b389d6701f1c058983353036e62570 Mon Sep 17 00:00:00 2001
From: silvestrevivo <silvestrevivomillan@gmail.com>
Date: Tue, 12 May 2020 09:07:32 +0200
Subject: [PATCH 2/2] links on navigation changing with session

---
 src/components/Nav.svelte     |  2 ++
 src/routes/login/index.svelte | 11 ++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 7eedfc2..2829830 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -119,6 +119,8 @@
           aria-current={segment === 'projects' ? 'page' : undefined}
           href="projects"
           rel="prefetch">
+          <!-- please, look at the rel="prefetch". This is responsible of the preload
+					when you hover on the link -->
           Projects
         </a>
       </li>
diff --git a/src/routes/login/index.svelte b/src/routes/login/index.svelte
index d433f30..b82a584 100644
--- a/src/routes/login/index.svelte
+++ b/src/routes/login/index.svelte
@@ -31,12 +31,17 @@
     }
 
     if (response.user) {
-      //! I think this is doing nothing!!!
-      // $session.user = response.user;
-      // $session.token = response.token;
+      $session.user = response.user;
       goto("/dashboard");
     }
   }
+
+  //   Another suggestion. If the routes don't have a subroute, don't create a folder
+  //   with the name and then create a index.svelte File. That is not a very good
+  //   practive with Svelte
+
+  // other thing, register.svelte is not on route and that refresh the page enterily. Place
+  // that file inside the route folder
 </script>
 
 <style>