parent
e7d128a482
commit
000f713751
GPG Key ID:
4BB075BC1884BA40
@ -0,0 +1,10 @@ |
||||
{ |
||||
"allowShorthand": true, |
||||
"semi": false, |
||||
"singleQuote": false, |
||||
"svelteBracketNewLine": true, |
||||
"svelteSortOrder": "scripts-markup-styles", |
||||
"svelteStrictMode": false, |
||||
"tabWidth": 4, |
||||
"trailingComma": "es5" |
||||
} |
||||
@ -1,24 +0,0 @@ |
||||
/// <reference types="Cypress" />
|
||||
|
||||
describe("registration should", () => { |
||||
it.only("handle its form", () => { |
||||
cy.visit("/register") |
||||
|
||||
cy.get("form") |
||||
.contains("Login") |
||||
.next("input") |
||||
.type("mylogin") |
||||
|
||||
cy.get("form") |
||||
.contains("Password") |
||||
.next("input") |
||||
.type("mypassword") |
||||
|
||||
cy.get("form") |
||||
.contains("Submit") |
||||
.click() |
||||
|
||||
cy.url().should("not.contain", "?") |
||||
cy.get("#output").should("contain", "mylogin") |
||||
}) |
||||
}) |
||||
@ -0,0 +1,112 @@ |
||||
/// <reference types="Cypress" />
|
||||
|
||||
const email = "mylogin" |
||||
const password = "mypassword" |
||||
|
||||
const homeUrl = Cypress.config().baseUrl + "/" |
||||
|
||||
describe("user login process should", () => { |
||||
it("be able to sign up, in, see profile and out", () => { |
||||
cy.clock() |
||||
|
||||
// guest phase
|
||||
cy.log("guest should be redirected") |
||||
|
||||
cy.visit("/sign-out") |
||||
cy.url().should("eq", homeUrl) |
||||
cy.visit("/my-profile") |
||||
cy.url().should("include", "sign-in") |
||||
|
||||
// signing up phase
|
||||
cy.log("reach sign-up page through sign-in form or nav") |
||||
|
||||
cy.get("form [href=sign-up]").click() |
||||
cy.url().should("include", "/sign-up") |
||||
cy.get("nav [href=sign-up]") |
||||
.as("sign-up") |
||||
.click() |
||||
cy.url().should("include", "/sign-up") |
||||
|
||||
cy.log("fill the sign-up form and be redirected to sign in") |
||||
|
||||
cy.get("[cy=email]") |
||||
.click() |
||||
.type(email) |
||||
cy.get("[cy=password]") |
||||
.click() |
||||
.type(password) |
||||
cy.get("[cy=submit]").click() |
||||
cy.url().should("include", "sign-in") |
||||
|
||||
// signing in phase
|
||||
cy.log("reach sign-in form through nav") |
||||
|
||||
cy.get("nav [href=sign-in]") |
||||
.as("sign-in") |
||||
.click() |
||||
cy.url().should("include", "/sign-in") |
||||
|
||||
cy.log("fill the sign-in form and be redirected to my profile") |
||||
|
||||
cy.get("[cy=email]") |
||||
.click() |
||||
.type(email) |
||||
cy.get("[cy=password]") |
||||
.click() |
||||
.type(password) |
||||
cy.get("[cy=submit]").click() |
||||
cy.url().should("include", "my-profile") |
||||
|
||||
// signed in phase
|
||||
cy.log("signed in user should be redirected") |
||||
|
||||
cy.visit("/sign-in") |
||||
cy.url().should("include", "my-profile") |
||||
cy.visit("/sign-up") |
||||
cy.url().should("include", "my-profile") |
||||
|
||||
cy.log("stay signed in even after 30 miutes and a reload") |
||||
|
||||
cy.tick(30 * 60 * 1000) |
||||
cy.get("main[cy]").should(element => |
||||
expect(element.attr("cy")).to.be.gt(0) |
||||
) |
||||
|
||||
cy.reload() |
||||
cy.get("nav [href=sign-up]").should("not.exist") |
||||
cy.get("nav [href=sign-in]").should("not.exist") |
||||
cy.get("nav [href=my-profile]") |
||||
.as("my-profile") |
||||
.click() |
||||
cy.get("[cy=session]").contains(email) |
||||
|
||||
// my profile phase
|
||||
cy.log("reach my profile via nav and see details") |
||||
|
||||
cy.get("@my-profile").click() |
||||
cy.url().should("include", "my-profile") |
||||
|
||||
cy.get("[cy=session]") |
||||
.as("session") |
||||
.contains(email) |
||||
|
||||
// signing out phase
|
||||
cy.log("sign out the user out and be redirected home") |
||||
|
||||
cy.get("nav [href=sign-out]") |
||||
.as("sign-out") |
||||
.click() |
||||
cy.url().should("eq", homeUrl) |
||||
cy.get("nav") |
||||
.contains("home") |
||||
.as("home") |
||||
.click() |
||||
cy.url().should("eq", homeUrl) |
||||
|
||||
// guest phase
|
||||
cy.log("finish the loop by going to sign in page") |
||||
|
||||
cy.get("@sign-in").click() |
||||
cy.url().should("include", "/sign-in") |
||||
}) |
||||
}) |
||||
@ -1,30 +0,0 @@ |
||||
describe("app should", () => { |
||||
beforeEach(() => { |
||||
cy.visit("/") |
||||
}) |
||||
|
||||
it("has the correct <h1>", () => { |
||||
cy.contains("h1", "Great success!") |
||||
}) |
||||
|
||||
it("navigates to /about", () => { |
||||
cy.get("nav a") |
||||
.contains("about") |
||||
.click() |
||||
cy.url().should("include", "/about") |
||||
}) |
||||
|
||||
it("navigates to /blog", () => { |
||||
cy.get("nav a") |
||||
.contains("blog") |
||||
.click() |
||||
cy.url().should("include", "/blog") |
||||
}) |
||||
|
||||
it("navigate to /register", () => { |
||||
cy.get("nav a") |
||||
.contains("Register") |
||||
.click() |
||||
cy.url().should("include", "/register") |
||||
}) |
||||
}) |
||||
File diff suppressed because it is too large
Load Diff
@ -1,78 +0,0 @@ |
||||
<script> |
||||
export let segment; |
||||
</script> |
||||
|
||||
<style> |
||||
nav { |
||||
border-bottom: 1px solid rgba(255, 62, 0, 0.1); |
||||
font-weight: 300; |
||||
padding: 0 1em; |
||||
} |
||||
|
||||
ul { |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
/* clearfix */ |
||||
ul::after { |
||||
content: ""; |
||||
display: block; |
||||
clear: both; |
||||
} |
||||
|
||||
li { |
||||
display: block; |
||||
float: left; |
||||
} |
||||
|
||||
.selected { |
||||
position: relative; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.selected::after { |
||||
position: absolute; |
||||
content: ""; |
||||
width: calc(100% - 1em); |
||||
height: 2px; |
||||
background-color: rgb(255, 62, 0); |
||||
display: block; |
||||
bottom: -1px; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
padding: 1em 0.5em; |
||||
display: block; |
||||
} |
||||
</style> |
||||
|
||||
<nav> |
||||
<ul> |
||||
<li> |
||||
<a class={segment === undefined ? 'selected' : ''} href=".">home</a> |
||||
</li> |
||||
|
||||
<li> |
||||
<a class={segment === 'about' ? 'selected' : ''} href="about">about</a> |
||||
</li> |
||||
|
||||
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches |
||||
the blog data when we hover over the link or tap it on a touchscreen --> |
||||
<li> |
||||
<a |
||||
rel="prefetch" |
||||
class={segment === 'blog' ? 'selected' : ''} |
||||
href="blog"> |
||||
blog |
||||
</a> |
||||
</li> |
||||
|
||||
<li> |
||||
<a class={segment === 'register' ? 'selected' : ''} href="register"> |
||||
Register |
||||
</a> |
||||
</li> |
||||
</ul> |
||||
</nav> |
||||
@ -0,0 +1,96 @@ |
||||
<script> |
||||
import { token } from "./common" |
||||
import { fade } from "svelte/transition" |
||||
|
||||
export let segment |
||||
</script> |
||||
|
||||
<nav> |
||||
<ul> |
||||
<li> |
||||
<a class="white" href="/">.</a> |
||||
</li> |
||||
|
||||
{#if $token !== undefined} |
||||
<li transition:fade> |
||||
<a class:selected={segment === undefined} href="/">home</a> |
||||
</li> |
||||
{/if} |
||||
|
||||
{#if $token === null} |
||||
<li transition:fade> |
||||
<a class:selected={segment === 'sign-up'} href="sign-up"> |
||||
sign-up |
||||
</a> |
||||
</li> |
||||
<li transition:fade> |
||||
<a class:selected={segment === 'sign-in'} href="sign-in"> |
||||
sign-in |
||||
</a> |
||||
</li> |
||||
{/if} |
||||
|
||||
{#if $token} |
||||
<li transition:fade> |
||||
<a class:selected={segment === 'my-profile'} href="my-profile"> |
||||
my profile |
||||
</a> |
||||
</li> |
||||
<li transition:fade> |
||||
<a class:selected={segment === 'sign-out'} href="sign-out"> |
||||
sign-out |
||||
</a> |
||||
</li> |
||||
{/if} |
||||
</ul> |
||||
</nav> |
||||
|
||||
<style> |
||||
nav { |
||||
border-bottom: 1px solid rgba(255, 62, 0, 0.1); |
||||
font-weight: 300; |
||||
padding: 0 1em; |
||||
} |
||||
|
||||
ul { |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
/* clearfix */ |
||||
ul::after { |
||||
content: ""; |
||||
display: block; |
||||
clear: both; |
||||
} |
||||
|
||||
li { |
||||
display: block; |
||||
float: left; |
||||
} |
||||
|
||||
.selected { |
||||
position: relative; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.selected::after { |
||||
position: absolute; |
||||
content: ""; |
||||
width: calc(100% - 1em); |
||||
height: 2px; |
||||
background-color: rgb(255, 62, 0); |
||||
display: block; |
||||
bottom: -1px; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
padding: 1em 0.5em; |
||||
display: block; |
||||
} |
||||
|
||||
a.white { |
||||
color: white; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,117 @@ |
||||
import { GraphQLClient, request } from "graphql-request" |
||||
import { derived, writable } from "svelte/store" |
||||
import { |
||||
accessTokenMutation, |
||||
createUserMutation, |
||||
meMutation, |
||||
signOutMutation, |
||||
} from "./queries" |
||||
|
||||
export const gqlUri = "http://localhost:4000/graphql" |
||||
export const rtUri = `http://localhost:4000/refresh_token` |
||||
export const fetchParams = { |
||||
method: "POST", |
||||
credentials: "include", |
||||
} |
||||
export const gqlParams = { |
||||
mode: "cors", |
||||
credentials: "include", |
||||
} |
||||
|
||||
export const token = writable(undefined) |
||||
export const user = derived( |
||||
token, |
||||
($token, set) => { |
||||
if ($token != null) { |
||||
meMutationRequest($token).then(response => { |
||||
if (response != null) { |
||||
set(response) |
||||
} |
||||
}) |
||||
} |
||||
}, |
||||
{ id: undefined, email: undefined } |
||||
) |
||||
|
||||
export const accesTokenMutationRequest = async (email, password) => { |
||||
let client = new GraphQLClient(gqlUri, gqlParams) |
||||
|
||||
const response = await client.request(accessTokenMutation, { |
||||
email, |
||||
password, |
||||
}) |
||||
|
||||
if (response.accessToken !== undefined) { |
||||
return response.accessToken |
||||
} |
||||
|
||||
return null |
||||
} |
||||
|
||||
export const signOutMutationRequest = async () => { |
||||
let client = new GraphQLClient(gqlUri, gqlParams) |
||||
const response = await client.request(signOutMutation) |
||||
|
||||
if (response.me !== undefined) { |
||||
return response.me |
||||
} |
||||
|
||||
return null |
||||
} |
||||
|
||||
export const meMutationRequest = async token => { |
||||
const client = new GraphQLClient(gqlUri, { |
||||
headers: { |
||||
Authorization: "Bearer " + token, |
||||
}, |
||||
}) |
||||
|
||||
const response = await client.request(meMutation) |
||||
|
||||
if (response.me !== undefined) { |
||||
return response.me |
||||
} |
||||
|
||||
return null |
||||
} |
||||
|
||||
export const createUserMutationRequest = async (email, password) => { |
||||
const response = await request(gqlUri, createUserMutation, { |
||||
email, |
||||
password, |
||||
}) |
||||
|
||||
if (response.createUser !== undefined) { |
||||
return response.createUser |
||||
} |
||||
|
||||
return null |
||||
} |
||||
|
||||
export const fetchToken = async () => { |
||||
let response = await fetch(rtUri, fetchParams) |
||||
response = await response.json() |
||||
|
||||
return response.data |
||||
} |
||||
|
||||
export const beforeExpiry = token => { |
||||
const tokenPayload = parseJwt(token) |
||||
const tokenExpiry = parseInt(tokenPayload.exp) - parseInt(tokenPayload.iat) |
||||
return tokenExpiry * 0.8 * 1000 + 1000 |
||||
} |
||||
|
||||
const parseJwt = token => { |
||||
var base64Url = token.split(".")[1] |
||||
var base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/") |
||||
var jsonPayload = decodeURIComponent( |
||||
atob(base64) |
||||
.split("") |
||||
.map(function(c) { |
||||
return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2) |
||||
}) |
||||
.join("") |
||||
) |
||||
|
||||
return JSON.parse(jsonPayload) |
||||
} |
||||
@ -0,0 +1,25 @@ |
||||
export const createUserMutation = ` |
||||
mutation ($email: String!, $password: String!) { |
||||
createUser(email: $email, password: $password) { |
||||
email |
||||
id |
||||
} |
||||
}` |
||||
|
||||
export const accessTokenMutation = ` |
||||
mutation($email: String!, $password: String!) { |
||||
accessToken(email: $email, password: $password) |
||||
}` |
||||
|
||||
export const meMutation = ` |
||||
mutation { |
||||
me { |
||||
id |
||||
email |
||||
} |
||||
}` |
||||
|
||||
export const signOutMutation = ` |
||||
mutation { |
||||
signOut |
||||
}` |
||||
@ -1,7 +0,0 @@ |
||||
<svelte:head> |
||||
<title>About</title> |
||||
</svelte:head> |
||||
|
||||
<h1>About this site</h1> |
||||
|
||||
<p>This is the 'about' page. There's not much here.</p> |
||||
@ -1,28 +0,0 @@ |
||||
import posts from './_posts.js'; |
||||
|
||||
const lookup = new Map(); |
||||
posts.forEach(post => { |
||||
lookup.set(post.slug, JSON.stringify(post)); |
||||
}); |
||||
|
||||
export function get(req, res, next) { |
||||
// the `slug` parameter is available because
|
||||
// this file is called [slug].json.js
|
||||
const { slug } = req.params; |
||||
|
||||
if (lookup.has(slug)) { |
||||
res.writeHead(200, { |
||||
'Content-Type': 'application/json' |
||||
}); |
||||
|
||||
res.end(lookup.get(slug)); |
||||
} else { |
||||
res.writeHead(404, { |
||||
'Content-Type': 'application/json' |
||||
}); |
||||
|
||||
res.end(JSON.stringify({ |
||||
message: `Not found` |
||||
})); |
||||
} |
||||
} |
||||
@ -1,64 +0,0 @@ |
||||
<script context="module"> |
||||
export async function preload({ params, query }) { |
||||
// the `slug` parameter is available because |
||||
// this file is called [slug].svelte |
||||
const res = await this.fetch(`blog/${params.slug}.json`); |
||||
const data = await res.json(); |
||||
|
||||
if (res.status === 200) { |
||||
return { post: data }; |
||||
} else { |
||||
this.error(res.status, data.message); |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<script> |
||||
export let post; |
||||
</script> |
||||
|
||||
<style> |
||||
/* |
||||
By default, CSS is locally scoped to the component, |
||||
and any unused styles are dead-code-eliminated. |
||||
In this page, Svelte can't know which elements are |
||||
going to appear inside the {{{post.html}}} block, |
||||
so we have to use the :global(...) modifier to target |
||||
all elements inside .content |
||||
*/ |
||||
.content :global(h2) { |
||||
font-size: 1.4em; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.content :global(pre) { |
||||
background-color: #f9f9f9; |
||||
box-shadow: inset 1px 1px 5px rgba(0,0,0,0.05); |
||||
padding: 0.5em; |
||||
border-radius: 2px; |
||||
overflow-x: auto; |
||||
} |
||||
|
||||
.content :global(pre) :global(code) { |
||||
background-color: transparent; |
||||
padding: 0; |
||||
} |
||||
|
||||
.content :global(ul) { |
||||
line-height: 1.5; |
||||
} |
||||
|
||||
.content :global(li) { |
||||
margin: 0 0 0.5em 0; |
||||
} |
||||
</style> |
||||
|
||||
<svelte:head> |
||||
<title>{post.title}</title> |
||||
</svelte:head> |
||||
|
||||
<h1>{post.title}</h1> |
||||
|
||||
<div class='content'> |
||||
{@html post.html} |
||||
</div> |
||||
@ -1,92 +0,0 @@ |
||||
// Ordinarily, you'd generate this data from markdown files in your
|
||||
// repo, or fetch them from a database of some kind. But in order to
|
||||
// avoid unnecessary dependencies in the starter template, and in the
|
||||
// service of obviousness, we're just going to leave it here.
|
||||
|
||||
// This file is called `_posts.js` rather than `posts.js`, because
|
||||
// we don't want to create an `/blog/posts` route — the leading
|
||||
// underscore tells Sapper not to do that.
|
||||
|
||||
const posts = [ |
||||
{ |
||||
title: 'What is Sapper?', |
||||
slug: 'what-is-sapper', |
||||
html: ` |
||||
<p>First, you have to know what <a href='https://svelte.dev'>Svelte</a> is. Svelte is a UI framework with a bold new idea: rather than providing a library that you write code with (like React or Vue, for example), it's a compiler that turns your components into highly optimized vanilla JavaScript. If you haven't already read the <a href='https://svelte.dev/blog/frameworks-without-the-framework'>introductory blog post</a>, you should!</p> |
||||
|
||||
<p>Sapper is a Next.js-style framework (<a href='blog/how-is-sapper-different-from-next'>more on that here</a>) built around Svelte. It makes it embarrassingly easy to create extremely high performance web apps. Out of the box, you get:</p> |
||||
|
||||
<ul> |
||||
<li>Code-splitting, dynamic imports and hot module replacement, powered by webpack</li> |
||||
<li>Server-side rendering (SSR) with client-side hydration</li> |
||||
<li>Service worker for offline support, and all the PWA bells and whistles</li> |
||||
<li>The nicest development experience you've ever had, or your money back</li> |
||||
</ul> |
||||
|
||||
<p>It's implemented as Express middleware. Everything is set up and waiting for you to get started, but you keep complete control over the server, service worker, webpack config and everything else, so it's as flexible as you need it to be.</p> |
||||
` |
||||
}, |
||||
|
||||
{ |
||||
title: 'How to use Sapper', |
||||
slug: 'how-to-use-sapper', |
||||
html: ` |
||||
<h2>Step one</h2> |
||||
<p>Create a new project, using <a href='https://github.com/Rich-Harris/degit'>degit</a>:</p> |
||||
|
||||
<pre><code>npx degit "sveltejs/sapper-template#rollup" my-app |
||||
cd my-app |
||||
npm install # or yarn! |
||||
npm run dev |
||||
</code></pre> |
||||
|
||||
<h2>Step two</h2> |
||||
<p>Go to <a href='http://localhost:3000'>localhost:3000</a>. Open <code>my-app</code> in your editor. Edit the files in the <code>src/routes</code> directory or add new ones.</p> |
||||
|
||||
<h2>Step three</h2> |
||||
<p>...</p> |
||||
|
||||
<h2>Step four</h2> |
||||
<p>Resist overdone joke formats.</p> |
||||
` |
||||
}, |
||||
|
||||
{ |
||||
title: 'Why the name?', |
||||
slug: 'why-the-name', |
||||
html: ` |
||||
<p>In war, the soldiers who build bridges, repair roads, clear minefields and conduct demolitions — all under combat conditions — are known as <em>sappers</em>.</p> |
||||
|
||||
<p>For web developers, the stakes are generally lower than those for combat engineers. But we face our own hostile environment: underpowered devices, poor network connections, and the complexity inherent in front-end engineering. Sapper, which is short for <strong>S</strong>velte <strong>app</strong> mak<strong>er</strong>, is your courageous and dutiful ally.</p> |
||||
` |
||||
}, |
||||
|
||||
{ |
||||
title: 'How is Sapper different from Next.js?', |
||||
slug: 'how-is-sapper-different-from-next', |
||||
html: ` |
||||
<p><a href='https://github.com/zeit/next.js'>Next.js</a> is a React framework from <a href='https://zeit.co'>Zeit</a>, and is the inspiration for Sapper. There are a few notable differences, however:</p> |
||||
|
||||
<ul> |
||||
<li>It's powered by <a href='https://svelte.dev'>Svelte</a> instead of React, so it's faster and your apps are smaller</li>
|
||||
<li>Instead of route masking, we encode route parameters in filenames. For example, the page you're looking at right now is <code>src/routes/blog/[slug].html</code></li> |
||||
<li>As well as pages (Svelte components, which render on server or client), you can create <em>server routes</em> in your <code>routes</code> directory. These are just <code>.js</code> files that export functions corresponding to HTTP methods, and receive Express <code>request</code> and <code>response</code> objects as arguments. This makes it very easy to, for example, add a JSON API such as the one <a href='blog/how-is-sapper-different-from-next.json'>powering this very page</a></li> |
||||
<li>Links are just <code><a></code> elements, rather than framework-specific <code><Link></code> components. That means, for example, that <a href='blog/how-can-i-get-involved'>this link right here</a>, despite being inside a blob of HTML, works with the router as you'd expect.</li> |
||||
</ul> |
||||
` |
||||
}, |
||||
|
||||
{ |
||||
title: 'How can I get involved?', |
||||
slug: 'how-can-i-get-involved', |
||||
html: ` |
||||
<p>We're so glad you asked! Come on over to the <a href='https://github.com/sveltejs/svelte'>Svelte</a> and <a href='https://github.com/sveltejs/sapper'>Sapper</a> repos, and join us in the <a href='https://svelte.dev/chat'>Discord chatroom</a>. Everyone is welcome, especially you!</p>
|
||||
` |
||||
} |
||||
]; |
||||
|
||||
posts.forEach(post => { |
||||
post.html = post.html.replace(/^\t{3}/gm, ''); |
||||
}); |
||||
|
||||
export default posts; |
||||
@ -1,16 +0,0 @@ |
||||
import posts from './_posts.js'; |
||||
|
||||
const contents = JSON.stringify(posts.map(post => { |
||||
return { |
||||
title: post.title, |
||||
slug: post.slug |
||||
}; |
||||
})); |
||||
|
||||
export function get(req, res) { |
||||
res.writeHead(200, { |
||||
'Content-Type': 'application/json' |
||||
}); |
||||
|
||||
res.end(contents); |
||||
} |
||||
@ -1,34 +0,0 @@ |
||||
<script context="module"> |
||||
export function preload({ params, query }) { |
||||
return this.fetch(`blog.json`).then(r => r.json()).then(posts => { |
||||
return { posts }; |
||||
}); |
||||
} |
||||
</script> |
||||
|
||||
<script> |
||||
export let posts; |
||||
</script> |
||||
|
||||
<style> |
||||
ul { |
||||
margin: 0 0 1em 0; |
||||
line-height: 1.5; |
||||
} |
||||
</style> |
||||
|
||||
<svelte:head> |
||||
<title>Blog</title> |
||||
</svelte:head> |
||||
|
||||
<h1>Recent posts</h1> |
||||
|
||||
<ul> |
||||
{#each posts as post} |
||||
<!-- we're using the non-standard `rel=prefetch` attribute to |
||||
tell Sapper to load the data for the page as soon as |
||||
the user hovers over the link or taps it, instead of |
||||
waiting for the 'click' event --> |
||||
<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li> |
||||
{/each} |
||||
</ul> |
||||
@ -0,0 +1,12 @@ |
||||
<script context="module"> |
||||
import { token, user } from "./_components/common" |
||||
import { get } from "svelte/store" |
||||
|
||||
export async function preload() { |
||||
if (get(token) == null) { |
||||
this.redirect(302, "sign-in") |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<p cy="session">user in store from session: {$user.email}</p> |
||||
@ -1,57 +0,0 @@ |
||||
<script> |
||||
import { request } from "graphql-request" |
||||
|
||||
const uri = "http://localhost:4000/graphql" |
||||
const createUserMutation = ` |
||||
mutation ($email: String!, $password: String!) { |
||||
createUser(email: $email, password: $password) { |
||||
email |
||||
id |
||||
} |
||||
}` |
||||
|
||||
const handleSubmit = () => { |
||||
response = getResponse() |
||||
} |
||||
|
||||
const getResponse = async () => { |
||||
if (email && password) { |
||||
const res = await request(uri, createUserMutation, { email, password }) |
||||
return res.createUser |
||||
} |
||||
} |
||||
// function handleSubmit() { |
||||
// console.log("HANDLE") |
||||
// } |
||||
|
||||
let email |
||||
let password |
||||
let response |
||||
</script> |
||||
|
||||
<svelte:head> |
||||
<title>User Registration</title> |
||||
</svelte:head> |
||||
|
||||
<h1>User Registration</h1> |
||||
|
||||
<form on:submit|preventDefault="{handleSubmit}"> |
||||
<label>Login</label> |
||||
<input bind:value="{email}" type="text" />{email} |
||||
<br /> |
||||
|
||||
<label>Password</label> |
||||
<input bind:value="{password}" type="text" />{password} |
||||
|
||||
<br /> |
||||
<button type="submit">Submit</button> |
||||
</form> |
||||
|
||||
{#await response} |
||||
<p>...waiting</p> |
||||
{:then user} |
||||
<p>The user ID is {{...user}.id}</p> |
||||
<p id="output">The user email is {{...user}.email}</p> |
||||
{:catch error} |
||||
<p style="color: red">{error.message}</p> |
||||
{/await} |
||||
@ -0,0 +1,41 @@ |
||||
<script> |
||||
import * as sapper from "@sapper/app" |
||||
import { accesTokenMutationRequest } from "./_components/common" |
||||
import { token } from "./_components/common" |
||||
import { onMount } from "svelte" |
||||
|
||||
token.subscribe(token => { |
||||
if (token !== null && token !== undefined) { |
||||
sapper.goto("/my-profile") |
||||
} |
||||
}) |
||||
|
||||
let email |
||||
let password |
||||
|
||||
const handleSubmit = async () => { |
||||
const accessToken = await accesTokenMutationRequest(email, password) |
||||
token.set(accessToken) |
||||
|
||||
await sapper.goto("/my-profile") |
||||
} |
||||
</script> |
||||
|
||||
<svelte:head> |
||||
<title>Login</title> |
||||
</svelte:head> |
||||
|
||||
<form on:submit|preventDefault={handleSubmit}> |
||||
<label>Login</label> |
||||
<input bind:value={email} type="text" cy="email" /> |
||||
<br /> |
||||
<label>Password</label> |
||||
<input bind:value={password} type="text" cy="password" /> |
||||
<br /> |
||||
|
||||
<button type="submit" cy="submit">Login</button> |
||||
<span> |
||||
Not a member? |
||||
<a href="sign-up">sign-up</a> |
||||
</span> |
||||
</form> |
||||
@ -0,0 +1,10 @@ |
||||
<script context="module"> |
||||
import { signOutMutationRequest, token } from "./_components/common" |
||||
|
||||
export async function preload() { |
||||
token.set(null) |
||||
|
||||
await signOutMutationRequest() |
||||
await this.redirect(302, "/") |
||||
} |
||||
</script> |
||||
@ -0,0 +1,38 @@ |
||||
<script> |
||||
import * as sapper from "@sapper/app" |
||||
import { createUserMutationRequest } from "./_components/common" |
||||
import { token } from "./_components/common" |
||||
import { onMount } from "svelte" |
||||
|
||||
token.subscribe(token => { |
||||
if (token !== null && token !== undefined) { |
||||
sapper.goto("/my-profile") |
||||
} |
||||
}) |
||||
|
||||
let email |
||||
let password |
||||
|
||||
const { session } = sapper.stores() |
||||
|
||||
const handleSubmit = async () => { |
||||
await createUserMutationRequest(email, password) |
||||
await sapper.goto("/sign-in") |
||||
} |
||||
</script> |
||||
|
||||
<svelte:head> |
||||
<title>User Registration</title> |
||||
</svelte:head> |
||||
|
||||
<form on:submit|preventDefault={handleSubmit}> |
||||
<label>Login</label> |
||||
<input bind:value={email} type="text" cy="email" /> |
||||
<br /> |
||||
|
||||
<label>Password</label> |
||||
<input bind:value={password} type="text" cy="password" /> |
||||
<br /> |
||||
|
||||
<button type="submit" cy="submit">Register</button> |
||||
</form> |
||||
Loading…
Reference in new issue