From 7c76fa83db001f6645f00b3a508e989da9b5f398 Mon Sep 17 00:00:00 2001
From: "K.C" <kristopherpaulsen@gmail.com>
Date: Sat, 21 Dec 2019 07:29:03 -0700
Subject: [PATCH] Update password reset email look (#8)

* renaming and password reset fix

* wrapping element for simpler resizing

* give the user a route back to signin

* tests for victory

* Thats just a helper script

* Speeling fixes
---
 cypress/integration/password-reset.spec.js    |  6 +-
 src/components/Adventure/YamlTracker.svelte   |  1 -
 .../email/pre-defined/email-password-reset.js | 26 ++++---
 .../browserStore/display-ads.js               |  2 +-
 .../browserStore/index.js                     |  0
 .../browserStore/main-adventure.js            |  2 +-
 .../browserStore/preDefinedKeys.js            |  0
 src/lib/global-state-stores/index.js          |  0
 src/lib/{stores => }/status-tracking.js       |  0
 src/lib/utils.js                              | 16 ----
 src/routes/landing.svelte                     |  1 +
 src/routes/password-reset.svelte              | 20 ++---
 src/routes/story/[slug].svelte                |  4 +-
 src/routes/user/new.svelte                    | 73 ++++++++++---------
 14 files changed, 76 insertions(+), 75 deletions(-)
 rename src/lib/{stores => global-state-stores}/browserStore/display-ads.js (92%)
 rename src/lib/{stores => global-state-stores}/browserStore/index.js (100%)
 rename src/lib/{stores => global-state-stores}/browserStore/main-adventure.js (95%)
 rename src/lib/{stores => global-state-stores}/browserStore/preDefinedKeys.js (100%)
 create mode 100644 src/lib/global-state-stores/index.js
 rename src/lib/{stores => }/status-tracking.js (100%)
 delete mode 100644 src/lib/utils.js

diff --git a/cypress/integration/password-reset.spec.js b/cypress/integration/password-reset.spec.js
index 87294aca..4e68d477 100644
--- a/cypress/integration/password-reset.spec.js
+++ b/cypress/integration/password-reset.spec.js
@@ -3,7 +3,7 @@ describe("Password Reset Flow: Submit an email", () => {
     cy.visit("/password-reset");
   });
 
-  it("displays errors and success on reset flow", () => {
+  it("displays errors, success, and navigation on reset flow", () => {
     cy.logIn()
       .visit("/user/login")
       .get('[data-cy="password-reset"]')
@@ -24,6 +24,10 @@ describe("Password Reset Flow: Submit an email", () => {
       .click();
 
     cy.get("h3").should("contain", "You have been sent an email");
+
+    cy.contains('return to login')
+      .click()
+      .url().should('match', /user\/login/)
   });
 });
 
diff --git a/src/components/Adventure/YamlTracker.svelte b/src/components/Adventure/YamlTracker.svelte
index 23c5b6eb..4c494661 100644
--- a/src/components/Adventure/YamlTracker.svelte
+++ b/src/components/Adventure/YamlTracker.svelte
@@ -1,7 +1,6 @@
 <script>
   import yaml from "js-yaml";
   import AnimatedStoryNode from "./AnimatedStoryNode.svelte";
-  import { first } from "src/lib/utils";
 
   const { keys } = Object;
 
diff --git a/src/lib/email/pre-defined/email-password-reset.js b/src/lib/email/pre-defined/email-password-reset.js
index 14c271a8..f4652ad7 100644
--- a/src/lib/email/pre-defined/email-password-reset.js
+++ b/src/lib/email/pre-defined/email-password-reset.js
@@ -8,13 +8,21 @@ export const emailPasswordReset = ({
 }) => email({
   to,
   from: 'noreply@turningpointtales.com',
-  subject: 'Password reset request',
+  subject: 'TurningPointTales: Please reset your password',
   html: `
-    You have requested a password reset.
-    <br/>
-    If this was made in error, disregard.
-    <br/>
-    <br/>
-    <a href="${resetUrl}" >Click here to reset your password</a>
-  `,
-});
\ No newline at end of file
+You forgot your password, didn't you? A tale as old as time.<br/>
+We won't hold it against you<br/>
+Here's a link to reset your password.
+<br/>
+<br/>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="${resetUrl}" >Password reset link</a>
+<br/>
+<br/>
+If you didn't request a password reset, please ignore this email.
+<br />
+<br/>
+Adventure safely,
+<br/>
+- The Team At Turning Point Tales
+`,
+});
diff --git a/src/lib/stores/browserStore/display-ads.js b/src/lib/global-state-stores/browserStore/display-ads.js
similarity index 92%
rename from src/lib/stores/browserStore/display-ads.js
rename to src/lib/global-state-stores/browserStore/display-ads.js
index a2a5f2cb..be56b6ab 100644
--- a/src/lib/stores/browserStore/display-ads.js
+++ b/src/lib/global-state-stores/browserStore/display-ads.js
@@ -1,6 +1,6 @@
 import {
   browserStore
-} from '../browserStore';
+} from './index';
 import {
   AD_SEEN
 } from './preDefinedKeys';
diff --git a/src/lib/stores/browserStore/index.js b/src/lib/global-state-stores/browserStore/index.js
similarity index 100%
rename from src/lib/stores/browserStore/index.js
rename to src/lib/global-state-stores/browserStore/index.js
diff --git a/src/lib/stores/browserStore/main-adventure.js b/src/lib/global-state-stores/browserStore/main-adventure.js
similarity index 95%
rename from src/lib/stores/browserStore/main-adventure.js
rename to src/lib/global-state-stores/browserStore/main-adventure.js
index b323f78e..600d35e6 100644
--- a/src/lib/stores/browserStore/main-adventure.js
+++ b/src/lib/global-state-stores/browserStore/main-adventure.js
@@ -1,7 +1,7 @@
 import sha256 from 'crypto-js/sha256'
 import {
   browserStore
-} from '../browserStore';
+} from './index';
 import {
   MAIN_ADVENTURE
 } from './preDefinedKeys';
diff --git a/src/lib/stores/browserStore/preDefinedKeys.js b/src/lib/global-state-stores/browserStore/preDefinedKeys.js
similarity index 100%
rename from src/lib/stores/browserStore/preDefinedKeys.js
rename to src/lib/global-state-stores/browserStore/preDefinedKeys.js
diff --git a/src/lib/global-state-stores/index.js b/src/lib/global-state-stores/index.js
new file mode 100644
index 00000000..e69de29b
diff --git a/src/lib/stores/status-tracking.js b/src/lib/status-tracking.js
similarity index 100%
rename from src/lib/stores/status-tracking.js
rename to src/lib/status-tracking.js
diff --git a/src/lib/utils.js b/src/lib/utils.js
deleted file mode 100644
index fbdf7e33..00000000
--- a/src/lib/utils.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export const uniq = (list = []) => (
-  [...new Set([...list || []])]
-);
-
-export const last = (list = []) => list[list.length - 1];
-
-export const first = (list = []) => list[0];
-
-export const stripNulls = hash => hash.toString("utf-8").replace(/\0/g, "");
-
-export const addNullPadding = hash => {
-  const fullHash = Buffer.alloc(128);
-  fullHash.write(hash.toString());
-
-  return fullHash;
-}
\ No newline at end of file
diff --git a/src/routes/landing.svelte b/src/routes/landing.svelte
index 046327ac..c5fe82af 100644
--- a/src/routes/landing.svelte
+++ b/src/routes/landing.svelte
@@ -67,6 +67,7 @@
   }
 
   img {
+    width: 100%;
     display: flex;
     max-width: 500px;
     margin: 0 auto;
diff --git a/src/routes/password-reset.svelte b/src/routes/password-reset.svelte
index 4fd9a144..c625d72a 100644
--- a/src/routes/password-reset.svelte
+++ b/src/routes/password-reset.svelte
@@ -2,7 +2,7 @@
   import * as sapper from "@sapper/app";
   import { fade } from "../lib/Transition";
   import { axios } from "src/lib/axios";
-  import { statusTracking } from "../lib/stores/status-tracking";
+  import { statusTracking } from "../lib/status-tracking";
   import { Input, Form } from "src/components/Form";
   import Button from "src/components/Button.svelte";
 
@@ -41,17 +41,17 @@
 </script>
 
 <style>
-  :global(.password-reset) {
+  :global(.form) {
     width: 100%;
     max-width: 50ch;
   }
 
-  :global(.password-reset .button) {
+  :global(.form .button) {
     width: 100%;
     margin: 32px auto auto auto;
   }
 
-  :global(.password-reset .input) {
+  :global(.form .input) {
     width: 100%;
   }
 
@@ -60,17 +60,17 @@
     margin: 8px 0 8px 0;
   }
 
-  a {
-    text-align: left;
+  a { text-align: left; }
+
+  h3 {
+    margin-bottom: 32px;
   }
 </style>
 
-<Form className="password-reset">
+<Form>
   {#if successMsg}
     <h3 in:fade>{successMsg}</h3>
-    {#if $page.query.token}
-      <a href="/user/login">Click here to login</a>
-    {/if}
+    <a href="/user/login">return to login</a>
   {:else if $page.query.token}
     <h2>New Password</h2>
     <small>Try not to forget this one!</small>
diff --git a/src/routes/story/[slug].svelte b/src/routes/story/[slug].svelte
index 622dcc03..23ebe0d1 100644
--- a/src/routes/story/[slug].svelte
+++ b/src/routes/story/[slug].svelte
@@ -28,9 +28,9 @@
   import BadgePopup from "src/routes/story/_BadgePopup.svelte";
   import Button from "src/components/Button.svelte";
   import { Logger } from "src/lib/client/logger";
-  import { adStore } from "src/lib/stores/browserStore/display-ads";
+  import { adStore } from "src/lib/global-state-stores/browserStore/display-ads";
   import { fetchCsrf } from "src/lib/client/csrf";
-  import { mainAdventure } from "src/lib/stores/browserStore/main-adventure";
+  import { mainAdventure } from "src/lib/global-state-stores/browserStore/main-adventure";
   import { onMount } from "svelte";
   import { goto, stores } from "@sapper/app";
   import { userSubscribed } from "src/lib/client/user";
diff --git a/src/routes/user/new.svelte b/src/routes/user/new.svelte
index 8004b820..1ce30d9e 100644
--- a/src/routes/user/new.svelte
+++ b/src/routes/user/new.svelte
@@ -2,7 +2,7 @@
   import * as sapper from "@sapper/app";
   import { axios } from "src/lib/axios";
   import { fade } from "src/lib/Transition";
-  import { statusTracking } from "src/lib/stores/status-tracking";
+  import { statusTracking } from "src/lib/status-tracking";
   import { Input, Form, Checkbox } from "src/components/Form";
   import Button from "src/components/Button.svelte";
   import FAQ from "src/routes/faq.svelte";
@@ -54,6 +54,11 @@
 </script>
 
 <style>
+  .user-new {
+    max-width: 720px;
+    margin: auto;
+  }
+
   p {
     text-align: left;
     margin-bottom: 0;
@@ -82,36 +87,36 @@
   <title>User Creation</title>
 </svelte:head>
 
-{#if $page.query.error === 'unknown'}
-  <section class="errors text">
+<section class='user-new'>
+  {#if $page.query.error === 'unknown'}
+    <article class="errors">
+      <p>
+        An unknown error occurred! Please try again or contact
+        <a href="mailto:support@turningpointtales.com">
+          support@turningpointtales.com
+        </a>
+        .
+      </p>
+    </article>
+  {/if}
+
+  <article>
+    <h1>Let's create your user!</h1>
+
     <p>
-      An unknown error occurred! Please try again or contact
-      <a href="mailto:support@turningpointtales.com">
-        support@turningpointtales.com
-      </a>
-      .
+      Creating an account grants you access to the entire library of adventures.
+      We use your email and name, which we only share for things like payments, to
+      personalize the experience and send you exciting updates. In lieu of sharing
+      your data and browsing with a third party, we handcraft some interesting ads
+      or let you skip those entirely with a paid subscription.
     </p>
-  </section>
-{/if}
-
-<section class="preamble text">
-  <h1>Let's create your user!</h1>
-
-  <p>
-    Creating an account grants you access to the entire library of adventures.
-    We use your email and name, which we only share for things like payments, to
-    personalize the experience and send you exciting updates. In lieu of sharing
-    your data and browsing with a third party, we handcraft some interesting ads
-    or let you skip those entirely with a paid subscription.
-  </p>
-
-  <p>
-    More questions? Check out our
-    <a href="/faq">FAQ.</a>
-  </p>
-</section>
 
-<section class="form text">
+    <p>
+      More questions? Check out our
+      <a href="/faq">FAQ.</a>
+    </p>
+  </article>
+
   <Form on:submit="{handleSubmit}" bind:this="{form}">
     {#if errorMsg}
       <span class="error form-group">{errorMsg}</span>
@@ -177,11 +182,11 @@
       Sign up
     </Button>
   </Form>
-</section>
 
-<section class="text">
-  <p>
-    If you already have an account with us, you can log in
-    <a href="/user/login">here.</a>
-  </p>
+  <article>
+    <p>
+      If you already have an account with us, you can log in
+      <a href="/user/login">here.</a>
+    </p>
+  </article>
 </section>