Github: https://github.com/Georgi213/ClientProjekt
Go to pivotaltracker and schedule a task
The title is As a user i can log in and out
after that put 2 points s
As a user I see an overview page when I log in
If this is done, let’s go ahead and make the “log in” button in the navigation
<nav>
<ul>
<li><a aria-current="{segment === 'login' ? 'page' : undefined}" href="login">log in</a></li>
<li><a aria-current="{segment === 'register' ? 'page' : undefined}" href="register">register</a></li>
{/if}
</ul>
</nav>
When I log in, I am redirected to that page
after that the first task is done
Let’s move on, after that go to this link index.svelte
copy this code and create a new file called login.svelte and paste this code there
delete line 11 as we don’t need it
After that we get an error that “ListError” is not defined, it is on line 46 and we delete that as well
when we go to the site we see error 500
and this script needs to be commented so that the login could work
After that the button works now
And the second task is done
it should look like this
and when it is done, you can write a username there If we write Username and password here, let’s go, then Network will write us login in red color
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
import * as api from 'api.js';
export function post(req, res) {
api.post('sessions', req.body ).then(response => {
if (response.token) req.session.token = response.token;
res.setHeader('Content-Type', 'application/json');
res.end(JSON.stringify(response));
});
}
4 tasks are done
anything that needs to be changed in the login.js file, I’ll send the code now
<script context="module">
export async function preload({ params }, { token }) {
if (token) {
this.redirect(302, `/`);
}
}
</script>
<script>
import { goto, stores } from '@sapper/app';
import { post } from 'utils.js';
const { session } = stores();
let username = '';
let password = '';
let error = null;
async function submit(event) {
const response = await post(`auth/login`, { username, password });
// TODO handle network errors
error = response.error;
console.log(response)
if (response.token) {
$session.token = response.token;
goto('/');
}
}
</script>
<svelte:head>
<title>Sign in • Conduit</title>
</svelte:head>
<div class="auth-page">
<div class="container page">
<div class="row">
<div class="col-md-6 offset-md-3 col-xs-12">
<h1 class="text-xs-center">Sign In</h1>
<p class="text-xs-center">
<a href="/register">Need an account?</a>
</p>
{#if error}
<div class="alert alert-danger" role="alert">{error}</div>
{/if}
<form on:submit|preventDefault={submit}>
<fieldset class="form-group">
<input class="form-control form-control-lg" type="text" required placeholder="Username" bind:value={username}>
</fieldset>
<br>
<fieldset class="form-group">
<input class="form-control form-control-lg" type="password" required placeholder="Password" bind:value={password}>
</fieldset>
<br>
<button class="btn btn-lg btn-primary pull-xs-right" type="submit">
Sign in
</button>
</form>
</div>
</div>
</div>
</div>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
import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';
import session from "express-session";
import sessionFileStore from "session-file-store";
const FileStore = sessionFileStore(session);
const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';
const {json} = require('body-parser');
polka() // You can also use Express
.use(
compression({ threshold: 0 }),
json(),
sirv('static', { dev }),
session({
secret: 'conduit',
resave: false,
saveUninitialized: true,
cookie: {
maxAge: 31536000
},
store: new FileStore({
path: `.sessions`
})
}),
sapper.middleware({
session: req => ({
user: req.session && req.session.user,
token: req.session && req.session.token
})
})
)
.listen(PORT, err => {
if (err) console.log('error', err);
})here's how to download
after logging in, you will be redirected to the home screen
5 tasks are done to make an error about login, login.js code is from above
import * as api from 'api.js';
export function post(req, res) {
api.del('sessions', req.session.token ).then(response => {
delete req.session.token;
res.end(JSON.stringify(response));
});
}7 tasks are done
create logout.js file and paste this code to make logout work
<script>
export let segment;
import {goto,stores} from "@sapper/app";
const {page,session} = stores();
import{post} from 'api.js';
async function logout()
{
await post(`auth/logout`);
$session.token=null;
goto('/');
}
</script>
you still need this script to start working, you need to put Nav.svelte
after that the exit button works