Login

Saat ini login masih dihardcode di component Navigation, seharusnya halaman login diakses melalui form login. Sebagai contoh, kita akan membuat form login di halaman home. Selain form login kita juga akan membutuhkan toast notification, dan fetch api.

Toast

buat file src/helper/toast.js

import { writable, derived } from "svelte/store"

const TIMEOUT = 2000

function createNotificationStore (timeout) {
    const _notifications = writable([])

    function send (message, type = "default", timeout) {
        _notifications.update(state => {
            return [...state, { id: id(), type, message, timeout }]
        })
    }

    let timers = []

    const notifications = derived(_notifications, ($_notifications, set) => {
        set($_notifications)
        if ($_notifications.length > 0) {
            const timer = setTimeout(() => {
                _notifications.update(state => {
                    state.shift()
                    return state
                })
            }, $_notifications[0].timeout)
            return () => {
                clearTimeout(timer)
            }
        }
    })
    const { subscribe } = notifications

    return {
        subscribe,
        send,
		    default: (msg, timeout = TIMEOUT) => send(msg, "default", timeout),
        danger: (msg, timeout = TIMEOUT) => send(msg, "danger", timeout),
        warning: (msg, timeout = TIMEOUT) => send(msg, "warning", timeout),
        info: (msg, timeout = TIMEOUT) => send(msg, "info", timeout),
        success: (msg, timeout = TIMEOUT) => send(msg, "success", timeout),
    }
}

function id() {
    return '_' + Math.random().toString(36).substr(2, 9);
};

export const notifications = createNotificationStore()

Buat file src/components/Toast.svelte

<script>
  import { flip } from "svelte/animate";
  import { fly } from "svelte/transition";
  import { notifications } from "../helper/toast.js";

  export let themes = {
      danger: "#E26D69",
      success: "#84C991",
      warning: "#f0ad4e",
      info: "#5bc0de",
      default: "#aaaaaa",
  };
</script>

<div class="notifications">
  {#each $notifications as notification (notification.id)}
      <div
          animate:flip
          class="toast"
          style="background: {themes[notification.type]};"
          transition:fly={{ y: 30 }}
      >
          <div class="content">{notification.message}</div>
          {#if notification.icon}<i class={notification.icon} />{/if}
      </div>
  {/each}
</div>

<style>
  .notifications {
    position: fixed;
    top: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    pointer-events: none;
  }

  .toast {
    flex: 0 0 auto;
    margin-bottom: 10px;
    border-radius: 4px;
  }

  .content {
    padding: 16px 40px;
    display: block;
    color: white;
    font-weight: 500;
  }
</style>

Pasang component Toast di file src/App.svelte

<script>
	import { Router, Route } from "svelte-routing"
	import About from "./routes/About.svelte"
	import Home from "./routes/Home.svelte"
	import { PATH_URL } from "./helper/path"
	import UserList from "./routes/UserList.svelte"
	import ProtectedRoute from "./ProtectedRoute.svelte"
	import Toast from "./components/Toast.svelte"
</script>

<Router>
	<Route path={PATH_URL.BASE} component={Home}/>
	<Route path={PATH_URL.ABOUT} component={About}/>
	<ProtectedRoute path={PATH_URL.USER_LIST} component={UserList} />
</Router>
<Toast/>

Form Login

Buat komponen Input pada file src/components/Input.svelte

<script>
  export let label
  export let value
</script>

<div>
  <label for={label}>{label}</label>
  <input bind:value id={label} name={label} {...$$restProps} />
</div>

Buat komponen Button pada file src/components/Button.svelte

<script>
  import Loader from './Loader.svelte';
  export let bgColor = "#00FF00AA"
  export let bgHoverColor = "#00FF0088"
  export let size = "medium";
  export let className = "";
  export let isLoading = false;

  const getPaddingSize = (size) => {
    switch (size) {
      case "small":
        return "py-1 px-4"
      default:
        return "py-2 px-8"
    }
  }

  const getTextSize = (size) => {
    switch (size) {
      case "small":
        return "text-sm"
      default:
        return "text-lg"
    }
  }

  const getLoaderSize = (size) => {
    switch (size) {
      case "small":
        return "20"
      default:
        return "40"
    }
  }
  let padding = getPaddingSize(size);
  let text = getTextSize(size);
  let loaderSize = getLoaderSize(size);
  
</script>

<button
  disabled={isLoading}
  on:click
  class={`flex align-center justify-center text-white ${bgColor} border-0 ${padding} focus:outline-none hover:${bgHoverColor} rounded ${text} ${className}`}>
  {#if isLoading}
    <div class="relative">
      <div class="invisible"><slot /></div>
      <div class="loader-container">
        <Loader size={loaderSize}/>
      </div>
    </div>
  {:else}
    <slot />
  {/if}
</button>

<style>
  .loader-container {
    display: flex;
    justify-content: center;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto;
    height: fit-content;
  }
</style>

Pada button dibuat suatu loader, ide-nya ketika button diklik, maka akan muncul loader selama sekian detik (sekitar 1,5 detik). Untuk buat file src/components/Loader/svelte

<script>
  export const durationUnitRegex = /[a-zA-Z]/;
  export const range = (size, startAt = 0) =>
  [...Array(size).keys()].map(i => i + startAt);
  export let color = "#ffffff";
  export let unit = "px";
  export let duration = "1.5s";
  export let size = "60";
  let durationUnit = duration.match(durationUnitRegex)[0];
  let durationNum = duration.replace(durationUnitRegex, "");
</script>

<style>
  .wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--size);
    height: calc(var(--size) / 2.5);
    margin-top: calc(var(--size) / 5);
  }
  .circle {
    position: absolute;
    top: 0px;
    width: calc(var(--size) / 5);
    height: calc(var(--size) / 5);
    border-radius: 999px;
    background-color: var(--color);
    animation: motion var(--duration) cubic-bezier(0.895, 0.03, 0.685, 0.22)
      infinite;
  }
  @keyframes motion {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
</style>

<div
  class="wrapper"
  style="--size: {size}{unit}; --color: {color}; --duration: {duration}">
  {#each range(3, 0) as version}
    <div
      class="circle"
      style="animation-delay: {version * (+durationNum / 10)}{durationUnit}; left: {version * (+size / 3 + +size / 15) + unit};" />
  {/each}
</div>

Update halaman src/routes/Home.svelte untuk menambahkan form login

<script>
  import { Images } from "../helper/images"
  import Button from "../components/Button.svelte"
  import Input from "../components/Input.svelte"
  import { notifications } from '../helper/toast'
  import { PATH_URL } from "../helper/path"
  import { token } from "../stores/token"
  import { navigate } from "svelte-routing"

  const state = {
    username: "",
    password: ""
  }
  
  let isLoading = false;
  let isToken = false;

  if (localStorage.getItem("token")) {
    isToken = true
  }

  const handleInput = (e) => {
    const { value, name } = e.target
    state[name] = value
  }

  const loginCall = async (username, password) => {
    
    if (username === "[email protected]" && password === "1234") {
      return {
        Token: "sudah-login"
      }
    }

    return {}
  }

  const login = async () => {
    try {
      isLoading = true
      const user = await loginCall(state.username, state.password)
      
      if (!user.Token) {
        throw({message: "please suplay valid username and password"})
      }
      
      localStorage.setItem("token", user.Token)
      token.set(localStorage.getItem('token'));
      isLoading = false;
      isToken = true

      navigate(PATH_URL.USER_LIST, { replace: false })
    } catch(e) {
      isLoading = false;
      notifications.danger(e.message)
    }
  };

  let widthDiv = 50;
  if (isToken) {
    widthDiv = 100;
  }
 
</script>

<div id="container" style="background-image:url({Images.img_erp});">
  <div id="welcome-div" style="flex:{widthDiv}%;">
    <h1>Selamat datang di svelte skeleton</h1>
    <a href="{PATH_URL.ABOUT}">About Us</a>
  </div>
  {#if !isToken}
  <div id="loginDiv" style="flex: {widthDiv}%;">
    <form on:submit|preventDefault={login}>
      <Input label="Username" name="username" on:input={handleInput} bind:value={state.username} placeholder="username" type="text" required/>
      <Input label="Password" name="password" on:input={handleInput} bind:value={state.password} placeholder="password" type="password" required/>
      <Button isLoading={isLoading}>Login</Button>
    </form>
  </div>
  {/if}
 </div>

<style>
  #container {
    width:100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #welcome-div, #loginDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: wrap column;
  }

  a {
    color: wheat;
  }
</style>

Karena fungsi login sdh diambil alih di halaman Home, maka komponen Navigation kita update untuk menghapus kode tentang login.

<script>
  import { Link, navigate } from "svelte-routing"
  import { token } from "../stores/token"
  import { PATH_URL } from "../helper/path"
  
  let isToken = false

  if (localStorage.getItem("token")) {
    isToken = true
  }


  function logout () {
    localStorage.removeItem("token")
    token.set(token, localStorage.getItem("token"))
    isToken = false
    navigate(PATH_URL.BASE, { replace: true })
  }

</script>

<div>
  {#if isToken}
  <ul>
    <li><Link to={PATH_URL.USER_LIST}>List User</Link></li>
  </ul>
  <button on:click="{logout}">Logout</button>
  {:else}
  <ul>
    <li><Link to={PATH_URL.BASE}>Home</Link></li>
    <li><Link to={PATH_URL.ABOUT}>Tentang Kami</Link></li>
  </ul>
  <Link to="{PATH_URL.BASE}">Login</Link>
  {/if}

</div>

Call API

Saat ini, fungsi loginCall() pada halaman Home masih dihardcode. Pada aplikasi sesungguhnya fungsi ini memanggil api dari backend melalui Ajax.

Ubah file src/routes/Home.svelte

<script>
  import { Images } from "../helper/images"
  import Button from "../components/Button.svelte"
  import Input from "../components/Input.svelte"
  import { notifications } from '../helper/toast'
  import { PATH_URL } from "../helper/path"
  import { token } from "../stores/token"
  import { navigate } from "svelte-routing"

  const state = {
    username: "",
    password: ""
  }

  const user = {token: ""}
  
  let isLoading = false;
  let isToken = false;

  if (localStorage.getItem("token")) {
    isToken = true
  }

  const handleInput = (e) => {
    const { value, name } = e.target
    state[name] = value
  }

  function reqListener() {
    user.token = JSON.parse(this.responseText).token;
  }

  const loginCall = async (username, password) => {
    const url = "http://localhost:3000/login";
    const data = {
      email:username, 
      password:password
    }

    var xmlHttp = new XMLHttpRequest();
    xmlHttp.addEventListener("load", reqListener);
    xmlHttp.open("POST", url, false); // false for synchronous request
    xmlHttp.setRequestHeader("Content-type", "application/json");
    xmlHttp.send(JSON.stringify(data));
    
  }

  const login = async () => {
    try {
      isLoading = true
      await loginCall(state.username, state.password)
      
      if (!user.token) {
        throw({message: "please suplay valid username and password"})
      }
      
      localStorage.setItem("token", user.Token)
      token.set(localStorage.getItem('token'));
      isLoading = false;
      isToken = true

      navigate(PATH_URL.USER_LIST, { replace: false })
    } catch(e) {
      isLoading = false;
      notifications.danger(e.message)
    }
  };

  let widthDiv = 50;
  if (isToken) {
    widthDiv = 100;
  }
 
</script>

<div id="container" style="background-image:url({Images.img_erp});">
  <div id="welcome-div" style="flex:{widthDiv}%;">
    <h1>Selamat datang di svelte skeleton</h1>
    <a href="{PATH_URL.ABOUT}">About Us</a>
  </div>
  {#if !isToken}
  <div id="loginDiv" style="flex: {widthDiv}%;">
    <form on:submit|preventDefault={login}>
      <Input label="Username" name="username" on:input={handleInput} bind:value={state.username} placeholder="username" type="text" required/>
      <Input label="Password" name="password" on:input={handleInput} bind:value={state.password} placeholder="password" type="password" required/>
      <Button isLoading={isLoading}>Login</Button>
    </form>
  </div>
  {/if}
 </div>

<style>
  #container {
    width:100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #welcome-div, #loginDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: wrap column;
  }

  a {
    color: wheat;
  }
</style>