🤡 conflitcs

Author: marcobrunodev

.eslintrc

@@ -3,9 +3,9 @@
   "parserOptions": {
     "sourceType": "module"
   },
-  "plugins": ["prettier", "svelte3"],
-  "extends": ["prettier"],
-  "rules": {
-    "prettier/prettier": "error"
-  }
-}
+  "plugins": [
+    "svelte3"
+  ],
+  "extends": [],
+  "rules": {}
+}

.vscode/settings.json

@@ -1,7 +1,8 @@
 {
   "editor.formatOnSave": true,
+  "eslint.autoFixOnSave": true,
   "files.associations": {
     ".huskyrc": "json",
     ".lintstagedrc": "json"
   }
-}
+}

src/client.js

@@ -1,5 +1,6 @@
-import * as sapper from '@sapper/app'
+import { start, goto, prefetch, prefetchRoutes } from '@sapper/app'
 
-sapper.start({
+start({
   target: document.querySelector('#sapper'),
 })
+

src/components/ErrorCollab.svelte

@@ -1,5 +1,5 @@
 <script>
-  export let content = 'No content'
+  export let content = ''
 </script>
 
 <style>

src/components/FieldCollab.svelte

@@ -12,9 +12,9 @@
   export let minlength = ''
   export let maxlength = ''
   export let pattern = '.*'
+  export let messageError = ''
+  export let invalid = false
   export let onInput
-  let invalid = false
-  let messageError = ''
 
   let defaultMessageError = []
   defaultMessageError['required'] = 'Campo obrigatório'

src/config/api.js

@@ -3,3 +3,7 @@ import axios from 'axios'
 export default axios.create({
   baseURL: process.env.BASE_URL,
 })
+
+api.interceptors.response.use(response => response, error => error.response)
+
+export default api

src/containers/FormLogin.svelte

@@ -1,12 +1,28 @@
 <script>
+  import { goto } from '@sapper/app'
+  import UserService from '../services/user.service'
   import FieldCollab from '../components/FieldCollab.svelte'
   import ButtonCollab from '../components/ButtonCollab.svelte'
 
   let user = {}
+  let msgError = { email: '', password: '' }
 
   function updateUser({ target: { name, value } }) {
     user = { ...user, [name]: value }
   }
+
+  async function login() {
+    const {
+      status,
+      data: { field, error },
+    } = await UserService.login(user)
+
+    if (status === 200) {
+      goto('platform/courses')
+    } else {
+      msgError = { [field]: error }
+    }
+  }
 </script>
 
 <style>
@@ -23,13 +39,18 @@
   }
 </style>
 
-<form class="form-login" on:submit|preventDefault>
+<form
+  action="/platform/courses"
+  class="form-login"
+  on:submit|preventDefault={login}>
   <FieldCollab
     content="Email:"
     id="email"
     type="email"
     name="email"
     placeholder="example@gmail.com"
+    messageError={msgError.email}
+    invalid={!!msgError.email}
     required
     onInput={updateUser} />
 
@@ -40,9 +61,10 @@
     name="password"
     placeholder="********"
     required
+    messageError={msgError.password}
+    invalid={!!msgError.password}
     minlength="8"
     onInput={updateUser} />
 
   <ButtonCollab content="Entrar" />
-
 </form>

src/containers/MenuMobile.svelte

@@ -2,8 +2,6 @@
   import IconCollab from '../components/IconCollab.svelte'
   export let segment
   export let menu
-
-  console.log('segment', segment)
 </script>
 
 <style>
@@ -35,7 +33,10 @@
   <ul class="list">
     {#each menu as { href, label, icon }}
       <li class="option">
-        <a {href} class={`action ${segment === icon ? '-selected' : ''}`}>
+        <a
+          {href}
+          rel="prefetch"
+          class={`action ${segment === icon ? '-selected' : ''}`}>
           <IconCollab
             alt={`Página de ${label}`}
             name={icon && icon === segment ? `${icon}-selected` : icon} />

src/routes/platform/_layout.svelte

@@ -1,4 +1,8 @@
 <script>
+  import { goto } from '@sapper/app'
+  import { beforeUpdate } from 'svelte'
+
+  import UserService from '../../services/user.service'
   import HeaderCollab from '../../containers/HeaderCollab.svelte'
   import MenuMobile from '../../containers/MenuMobile.svelte'
 
@@ -10,6 +14,26 @@
     { href: 'platform/profile', label: 'Profile', icon: 'profile' },
     { href: 'platform/alerts', label: 'Alertas', icon: 'alerts' },
   ]
+
+  let showPage = false
+
+  async function authorize() {
+    try {
+      const { status, data } = await UserService.validate()
+
+      if (status !== 200) {
+        goto('login')
+
+        return false
+      }
+
+      showPage = status === 200
+    } catch (error) {
+      goto('login')
+    }
+  }
+
+  beforeUpdate(authorize)
 </script>
 
 <style>
@@ -29,8 +53,10 @@
   <title>CollabCode Training</title>
 </svelte:head>
 
-<main class="layout">
-  <HeaderCollab />
-  <slot />
-  <MenuMobile {segment} {menu} />
-</main>
+{#if showPage}
+  <main class="layout">
+    <HeaderCollab />
+    <slot />
+    <MenuMobile {segment} {menu} />
+  </main>
+{/if}

src/routes/platform/courses.svelte

@@ -1,3 +1,9 @@
+<script context="module">
+  import UserService from '../../services/user.service'
+
+  export async function preload() {}
+</script>
+
 <script>
   import TitleCollab from '../../components/TitleCollab.svelte'
 </script>