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

@@ -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/)
   });
 });
 

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;
 

src/lib/email/pre-defined/email-password-reset.js

@@ -8,13 +8,21 @@ export const emailPasswordReset = ({
 }) => email({
   to,
   from: '[email protected]',
-  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>
-  `,
-});
+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
+`,
+});

src/lib/stores/browserStore/display-ads.js → src/lib/global-state-stores/browserStore/display-ads.js

@@ -1,6 +1,6 @@
 import {
   browserStore
-} from '../browserStore';
+} from './index';
 import {
   AD_SEEN
 } from './preDefinedKeys';

src/lib/stores/browserStore/main-adventure.js → 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';

src/routes/landing.svelte

@@ -67,6 +67,7 @@
   }
 
   img {
+    width: 100%;
     display: flex;
     max-width: 500px;
     margin: 0 auto;

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>

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";

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:[email protected]">
+          [email protected]
+        </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:[email protected]">
-        [email protected]
-      </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>