{"id":409,"date":"2023-10-06T08:35:55","date_gmt":"2023-10-06T06:35:55","guid":{"rendered":"https:\/\/merkulova.thkit.ee\/wp20\/?page_id=409"},"modified":"2023-10-06T08:39:36","modified_gmt":"2023-10-06T06:39:36","slug":"as-a-user-i-can-log-in-and-out","status":"publish","type":"page","link":"https:\/\/merkulova.thkit.ee\/wp20\/as-a-user-i-can-log-in-and-out\/","title":{"rendered":"As a user i can log in and out"},"content":{"rendered":"\n

SVELTEJS\/SAPPER project<\/h1>\n\n\n\n

<\/p>\n\n\n\n

Go to pivotaltracker and schedule a task<\/p>\n\n\n\n

The title is As a user i can log in and out<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

As a user I see an overview page when I log in<\/p>\n\n\n\n

If this is done, let\u2019s go ahead and make the \u201clog in\u201d button in the navigation<\/p>\n\n\n

\n&lt;nav>\n       &lt;ul>\n\t  &lt;li>&lt;a aria-current="{segment === 'login' ? 'page' : undefined}" href="login">log in&lt;\/a>&lt;\/li>\n\t  &lt;li>&lt;a aria-current="{segment === 'register' ? 'page' : undefined}" href="register">register&lt;\/a>&lt;\/li>\n\t{\/if}\n       &lt;\/ul>\n&lt;\/nav>\n\n<\/pre><\/div>\n\n\n
When I log in, I am redirected to that page<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
after that the first task is done<\/p>\n\n\n\n

Let\u2019s move on, after that go to this link index.svelte<\/p>\n\n\n\n

copy this code and create a new file called login.svelte and paste this code there<\/p>\n\n\n\n

delete line 11 as we don\u2019t need it<\/p>\n\n\n\n
\"\"

After that we get an error that \u201cListError\u201d is not defined, it is on line 46 and we delete that as well<\/figcaption><\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

when we go to the site we see error 500<\/p>\n\n\n\n
\"\"
Because we have a token instead of a user<\/figcaption><\/figure>\n\n\n\n
\"\"
<script context=\u201dmodule\u201d> export async function preload({ params }, { token }) { if (token) { this.redirect(302, `\/`); } } <\/script><\/figcaption><\/figure>\n\n\n\n

and this script needs to be commented so that the login could workAfter that the button works now And the second task is done<\/p>\n\n\n\n
\"\"
we need a username instead of an email
it should look like this<\/figcaption><\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

and when it is done, you can write a username there If we write Username and password here, let\u2019s go, then Network will write us login in red color<\/p>\n\n\n\n
\"\"
3 tasks are done
After that you go to the login.js link
create a new login.js file and paste everything in there
I will show you everything that needs to be changed<\/figcaption><\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n
\nimport * as api from 'api.js';\n\nexport function post(req, res) {\n    api.post('sessions', req.body ).then(response => {\n        if (response.token) req.session.token = response.token;\n        res.setHeader('Content-Type', 'application\/json');\n\n        res.end(JSON.stringify(response));\n    });\n}\n\n<\/pre><\/div>\n\n\n
4 tasks are done<\/p>\n\n\n\n
anything that needs to be changed in the login.js file, I\u2019ll send the code now<\/p>\n\n\n
\n<script context="module">\n    export async function preload({ params }, { token }) {\n        if (token) {\n            this.redirect(302, `\/`);\n        }\n    }\n<\/script>\n\n<script>\n    import { goto, stores } from '@sapper\/app';\n    import { post } from 'utils.js';\n\n    const { session } = stores();\n\n    let username = '';\n    let password = '';\n    let error = null;\n\n    async function submit(event) {\n        const response = await post(`auth\/login`, { username, password });\n\n        \/\/ TODO handle network errors\n        error = response.error;\n        console.log(response)\n        if (response.token) {\n            $session.token = response.token;\n            goto('\/');\n        }\n    }\n<\/script>\n\n<svelte:head>\n    <title>Sign in \u2022 Conduit<\/title>\n<\/svelte:head>\n\n<div class="auth-page">\n    <div class="container page">\n        <div class="row">\n            <div class="col-md-6 offset-md-3 col-xs-12">\n                <h1 class="text-xs-center">Sign In<\/h1>\n                <p class="text-xs-center">\n                    <a href="\/register">Need an account?<\/a>\n                <\/p>\n                {#if error}\n                    <div class="alert alert-danger" role="alert">{error}<\/div>\n                {\/if}\n\n                <form on:submit|preventDefault={submit}>\n                    <fieldset class="form-group">\n                        <input class="form-control form-control-lg" type="text" required placeholder="Username" bind:value={username}>\n                    <\/fieldset>\n                    <br>\n                    <fieldset class="form-group">\n                        <input class="form-control form-control-lg" type="password" required placeholder="Password" bind:value={password}>\n                    <\/fieldset>\n                    <br>\n                    <button class="btn btn-lg btn-primary pull-xs-right" type="submit">\n                        Sign in\n                    <\/button>\n                <\/form>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n<\/pre><\/div>\n\n\n
everything that needs to be changed in the server.js file, I will immediately send the code and it still needs to be downloaded there<\/p>\n\n\n
\nimport sirv from 'sirv';\nimport polka from 'polka';\nimport compression from 'compression';\nimport * as sapper from '@sapper\/server';\nimport session from "express-session";\nimport sessionFileStore from "session-file-store";\n\nconst FileStore = sessionFileStore(session);\n\nconst { PORT, NODE_ENV } = process.env;\nconst dev = NODE_ENV === 'development';\nconst {json} = require('body-parser');\n\npolka() \/\/ You can also use Express\n\t.use(\n\t\tcompression({ threshold: 0 }),\n\t\tjson(),\n\t\tsirv('static', { dev }),\n\t\tsession({\n\t\t\tsecret: 'conduit',\n\t\t\tresave: false,\n\t\t\tsaveUninitialized: true,\n\t\t\tcookie: {\n\t\t\t\tmaxAge: 31536000\n\t\t\t},\n\t\t\tstore: new FileStore({\n\t\t\t\tpath: `.sessions`\n\t\t\t})\n\t\t}),\n\t\tsapper.middleware({\n\t\t\tsession: req => ({\n\t\t\t\tuser: req.session &amp;&amp; req.session.user,\n\t\t\t\ttoken: req.session &amp;&amp; req.session.token\n\t\t\t})\n\t\t})\n\t)\n\t.listen(PORT, err => {\n\t\tif (err) console.log('error', err);\n\t})\n<\/pre><\/div>\n\n\n
here’s how to download<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
after logging in, you will be redirected to the home screen<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
5 tasks are done to make an error about login, login.js code is from above<\/p>\n\n\n\n
\"\"
the task is done to have an exit button, I\u2019ll show the code right now<\/figcaption><\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n
\nimport * as api from 'api.js';\n\nexport function post(req, res) {\n    api.del('sessions', req.session.token ).then(response => {\n        delete req.session.token;\n        res.end(JSON.stringify(response));\n    });\n}\n<\/pre><\/div>\n\n\n
7 tasks are done<\/p>\n\n\n\n
create logout.js file and paste this code to make logout work<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n
\n&lt;script>\n\texport let segment;\n\timport  {goto,stores} from "@sapper\/app";\n\tconst {page,session} = stores();\n\timport{post} from 'api.js';\n\n\tasync function logout()\n\t{\n\t\tawait post(`auth\/logout`);\n\t\t$session.token=null;\n\t\tgoto('\/');\n\t}\n&lt;\/script>\n<\/pre><\/div>\n\n\n

you still need this script to start working, you need to put Nav.svelte<\/p>\n\n\n\n

after that the exit button works<\/p>\n","protected":false},"excerpt":{"rendered":"
SVELTEJS\/SAPPER project Go to pivotaltracker and schedule a task The title is As a user i can log in and out As a user I see an overview page when I log in If this is done, let\u2019s go ahead and make the \u201clog in\u201d button in the navigation When I log in, I am […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-409","page","type-page","status-publish","hentry"],"yoast_head":"\nAs a user i can log in and out - Irina Merkulova õpimapp | portfoolio<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/merkulova.thkit.ee\/wp20\/as-a-user-i-can-log-in-and-out\/\" \/>\n<meta property=\"og:locale\" content=\"et_EE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"As a user i can log in and out - Irina Merkulova õpimapp | portfoolio\" \/>\n<meta property=\"og:description\" content=\"SVELTEJS\/SAPPER project Go to pivotaltracker and schedule a task The title is As a user i can log in and out As a user I see an overview page when I log in If this is done, let\u2019s go ahead and make the \u201clog in\u201d button in the navigation When I log in, I am […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/merkulova.thkit.ee\/wp20\/as-a-user-i-can-log-in-and-out\/\" \/>\n<meta property=\"og:site_name\" content=\"Irina Merkulova õpimapp | portfoolio\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-06T06:39:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blinov20.thkit.ee\/wp\/wp-content\/uploads\/2022\/10\/image-14.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/as-a-user-i-can-log-in-and-out\/\",\"url\":\"https:\/\/merkulova.thkit.ee\/wp20\/as-a-user-i-can-log-in-and-out\/\",\"name\":\"As a user i can log in and out - Irina Merkulova õpimapp | portfoolio\",\"isPartOf\":{\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/as-a-user-i-can-log-in-and-out\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/as-a-user-i-can-log-in-and-out\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/blinov20.thkit.ee\/wp\/wp-content\/uploads\/2022\/10\/image-14.png\",\"datePublished\":\"2023-10-06T06:35:55+00:00\",\"dateModified\":\"2023-10-06T06:39:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/as-a-user-i-can-log-in-and-out\/#breadcrumb\"},\"inLanguage\":\"et\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/merkulova.thkit.ee\/wp20\/as-a-user-i-can-log-in-and-out\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"et\",\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/as-a-user-i-can-log-in-and-out\/#primaryimage\",\"url\":\"https:\/\/blinov20.thkit.ee\/wp\/wp-content\/uploads\/2022\/10\/image-14.png\",\"contentUrl\":\"https:\/\/blinov20.thkit.ee\/wp\/wp-content\/uploads\/2022\/10\/image-14.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/as-a-user-i-can-log-in-and-out\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\",\"item\":\"https:\/\/merkulova.thkit.ee\/wp20\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"As a user i can log in and out\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/#website\",\"url\":\"https:\/\/merkulova.thkit.ee\/wp20\/\",\"name\":\"Veebirakenduse portfoolio\",\"description\":\"Noorem Tarkvaraarendaja eriala\",\"publisher\":{\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/#\/schema\/person\/3e81f4867c46822cdeca159fa89142ae\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/merkulova.thkit.ee\/wp20\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"et\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/#\/schema\/person\/3e81f4867c46822cdeca159fa89142ae\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"et\",\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/4c53fa504772b2274d9d09d84825a2c569865fca538b5b70247d8f1668b9eb51?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/4c53fa504772b2274d9d09d84825a2c569865fca538b5b70247d8f1668b9eb51?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"logo\":{\"@id\":\"https:\/\/merkulova.thkit.ee\/wp20\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/merkulova.thkit.ee\/wp20\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"As a user i can log in and out - Irina Merkulova õpimapp | portfoolio","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/merkulova.thkit.ee\/wp20\/as-a-user-i-can-log-in-and-out\/","og_locale":"et_EE","og_type":"article","og_title":"As a user i can log in and out - Irina Merkulova õpimapp | portfoolio","og_description":"SVELTEJS\/SAPPER project Go to pivotaltracker and schedule a task The title is As a user i can log in and out As a user I see an overview page when I log in If this is done, let\u2019s go ahead and make the \u201clog in\u201d button in the navigation When I log in, I am […]","og_url":"https:\/\/merkulova.thkit.ee\/wp20\/as-a-user-i-can-log-in-and-out\/","og_site_name":"Irina Merkulova õpimapp | portfoolio","article_modified_time":"2023-10-06T06:39:36+00:00","og_image":[{"url":"https:\/\/blinov20.thkit.ee\/wp\/wp-content\/uploads\/2022\/10\/image-14.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/merkulova.thkit.ee\/wp20\/as-a-user-i-can-log-in-and-out\/","url":"https:\/\/merkulova.thkit.ee\/wp20\/as-a-user-i-can-log-in-and-out\/","name":"As a user i can log in and out - Irina Merkulova õpimapp | portfoolio","isPartOf":{"@id":"https:\/\/merkulova.thkit.ee\/wp20\/#website"},"primaryImageOfPage":{"@id":"https:\/\/merkulova.thkit.ee\/wp20\/as-a-user-i-can-log-in-and-out\/#primaryimage"},"image":{"@id":"https:\/\/merkulova.thkit.ee\/wp20\/as-a-user-i-can-log-in-and-out\/#primaryimage"},"thumbnailUrl":"https:\/\/blinov20.thkit.ee\/wp\/wp-content\/uploads\/2022\/10\/image-14.png","datePublished":"2023-10-06T06:35:55+00:00","dateModified":"2023-10-06T06:39:36+00:00","breadcrumb":{"@id":"https:\/\/merkulova.thkit.ee\/wp20\/as-a-user-i-can-log-in-and-out\/#breadcrumb"},"inLanguage":"et","potentialAction":[{"@type":"ReadAction","target":["https:\/\/merkulova.thkit.ee\/wp20\/as-a-user-i-can-log-in-and-out\/"]}]},{"@type":"ImageObject","inLanguage":"et","@id":"https:\/\/merkulova.thkit.ee\/wp20\/as-a-user-i-can-log-in-and-out\/#primaryimage","url":"https:\/\/blinov20.thkit.ee\/wp\/wp-content\/uploads\/2022\/10\/image-14.png","contentUrl":"https:\/\/blinov20.thkit.ee\/wp\/wp-content\/uploads\/2022\/10\/image-14.png"},{"@type":"BreadcrumbList","@id":"https:\/\/merkulova.thkit.ee\/wp20\/as-a-user-i-can-log-in-and-out\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430","item":"https:\/\/merkulova.thkit.ee\/wp20\/"},{"@type":"ListItem","position":2,"name":"As a user i can log in and out"}]},{"@type":"WebSite","@id":"https:\/\/merkulova.thkit.ee\/wp20\/#website","url":"https:\/\/merkulova.thkit.ee\/wp20\/","name":"Veebirakenduse portfoolio","description":"Noorem Tarkvaraarendaja eriala","publisher":{"@id":"https:\/\/merkulova.thkit.ee\/wp20\/#\/schema\/person\/3e81f4867c46822cdeca159fa89142ae"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/merkulova.thkit.ee\/wp20\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"et"},{"@type":["Person","Organization"],"@id":"https:\/\/merkulova.thkit.ee\/wp20\/#\/schema\/person\/3e81f4867c46822cdeca159fa89142ae","name":"admin","image":{"@type":"ImageObject","inLanguage":"et","@id":"https:\/\/merkulova.thkit.ee\/wp20\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/4c53fa504772b2274d9d09d84825a2c569865fca538b5b70247d8f1668b9eb51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4c53fa504772b2274d9d09d84825a2c569865fca538b5b70247d8f1668b9eb51?s=96&d=mm&r=g","caption":"admin"},"logo":{"@id":"https:\/\/merkulova.thkit.ee\/wp20\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/merkulova.thkit.ee\/wp20"]}]}},"_links":{"self":[{"href":"https:\/\/merkulova.thkit.ee\/wp20\/wp-json\/wp\/v2\/pages\/409","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/merkulova.thkit.ee\/wp20\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/merkulova.thkit.ee\/wp20\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/merkulova.thkit.ee\/wp20\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/merkulova.thkit.ee\/wp20\/wp-json\/wp\/v2\/comments?post=409"}],"version-history":[{"count":4,"href":"https:\/\/merkulova.thkit.ee\/wp20\/wp-json\/wp\/v2\/pages\/409\/revisions"}],"predecessor-version":[{"id":416,"href":"https:\/\/merkulova.thkit.ee\/wp20\/wp-json\/wp\/v2\/pages\/409\/revisions\/416"}],"wp:attachment":[{"href":"https:\/\/merkulova.thkit.ee\/wp20\/wp-json\/wp\/v2\/media?parent=409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}