request

.github/workflows/npm-publish-github-packages.yml

@@ -0,0 +1,36 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16
+      - run: npm ci
+      - run: npm test
+
+  publish-gpr:
+    needs: build
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 16
+          registry-url: https://npm.pkg.github.com/
+      - run: npm ci
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

server/static/index.html

@@ -1,63 +1,222 @@
-<form action="http://localhost:3090/confirmEmail" method="post">
-	<fieldset>
-		<legend>Enter Your Information</legend>
-
-		<label for="email">Email:</label>
-		<input type="text" name="email" placeholder="[email protected]" /><br>
-
-		<label for="first_name">First Name:</label>		
-		<input type="text" name="first_name" placeholder="John" /><br>
-
-		<label for="last_name">Last Name:</label>
-		<input type="text" name="last_name" placeholder="Doe" /><br>
-
-		<button type="submit" value="Submit" />SIGN UP</button>
+<div class="container">
+  <form action="https://sendgrid-subscribe.herokuapp.com/confirmEmail" method="post">
+    <fieldset>
+	    <legend></legend>
+	    <div class="chapter">Liity Pohjolan Liikenteen uutiskirjeen tilaajaksi</div>
+	    <div class="chapter2">Uutiskirjeen tilaajana saat ensimmäisenä
+	    tiedon eduista ja tarjouksista sekä ajankohtaisimmat uutiset Länsi-Uudenmaan liikenteestämme suoraan sähköpostiisi. Lähetämme Sinulle tietoa tarjouksista ja
+		aikatauluista noin kerran kuussa.
+	    Uutiskirjeen tilaaminen kannattaa, sillä tilaajana pääset ensimmäisten joukossa hyödyntämään mm. tarjouksemme, jotka ovat voimassa vain rajoitetun ajan!
+	    Liity tilaajaksi täyttämällä tietosi allaoleviin kenttiin.</div><div class="chapter2"></div>
+	    <ul class="flex-outer">
+      <li>
+        <label for="email">Sähköposti</label>
+        <input type="text" name="email" placeholder="Sähköposti" />
+      </li>
+      <li>
+       <label for="first_name">Etunimi</label>
+        <input type="text" name="first_name" placeholder="Etunimi" />
+      </li>
+      <li>
+        <label for="last_name">Sukunimi</label>
+        <input type="text" name="last_name" placeholder="Sukunimi" />
+      </li>
+      <li>
+        <ul class="flex-cent">
+          <li><input type="checkbox" id="markkinointilupa">
+            <label for="markkinointilupa">Hyväksyn, että Pohjolan Liikenne lähettää minulle 
+		    markkinointiviestejä noin kerran kuukaudessa sisältäen mm. lipputarjouksia,
+		    alennuskoodeja ja etuja.
+		</label>
+          </li>
+        </ul>
+      </li>
+      <li>
+        <button type="submit" value="Submit" />Tilaa uutiskirje</button>
+      </li>
+    </ul>
 	</fieldset>
-</form>
+  </form>
+</div>
 
 
 <style>
-html {
-	font-family: arial;
-	font-size: 16;
+	body {
+  font: normal 18px/1.5 "Fira Sans", "Helvetica Neue", sans-serif;
+  background: #ffffff;
+  color: #ffffff;
+  padding: 50px 0;
 }
-form {
-	display: inline-block;
+	fieldset {
+  background-color: #333;
+padding-top: 40;
+padding-bottom: 70;
+padding-right: 40;
+padding-left: 40;
+margin-top: 30;
+border: none;		
 }
+
 legend {
-	font-size: 14;
-}
-label {
-	width: 100px;
-	display: inline-block;
-	margin-left: 8;
-	margin-top: 15;
-	font-weight: bold;
-}
-input, button {
-	font-size: 12px;
-	padding: 5px;
-	margin-right: 8;
-}
-input {
-	border-radius: 3px;
-	border: 1px solid #ccc;
-	height: 25;
-	width: 200px;
-}
-button {
-	border-radius: 3px;
-	border: 0px solid #ccc;
-	margin-top: 15px;
-	margin-bottom: 5px;
-	background-color: #1A82E2;
-	color: white;
-	text-align: center;
-	font-weight: bold;
-	font-size: 14px;
-	width: 308px;
-	height: 32px;
-	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-	float: right;
-}
-</style>
+  background-color: transparent;
+  color: #ffffff;
+font: normal 18px/1.5 "Fira Sans", "Helvetica Neue", sans-serif;
+  padding: 0;
+}
+
+.container {
+  width: 80%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.container * {
+  box-sizing: border-box;
+}
+
+.flex-outer,
+.flex-inner {
+  list-style-type: none;
+  padding: 0;
+}
+
+.flex-outer {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.flex-outer li,
+.flex-inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.flex-outer > li:not(:last-child) {
+  margin-bottom: 20px;
+}
+
+.flex-outer li label,
+.flex-outer li p {
+  padding-left: 10px;
+  font-weight: 300;
+  letter-spacing: .09em;
+  text-transform: uppercase;
+	font-size: 16;
+	line-height: 1.4;
+}
+
+.flex-outer > li > label,
+.flex-outer li p {
+  flex: 1 0 120px;
+  max-width: 220px;
+}
+
+.flex-outer > li > label + *,
+.flex-inner {
+  flex: 1 0 220px;
+}
+
+.flex-outer li p {
+  margin: 0;
+}
+
+.flex-outer li input:not([type='checkbox']),
+.flex-outer li textarea {
+  padding: 15px;
+  border: none;
+}
+
+.flex-outer li button {
+  margin-left: auto;
+  padding: 14px 22px;
+  border: solid white;
+  border-width: 3px 3px 3px 3px;
+  background: #333;
+  color: #ffffff;
+  text-transform: uppercase;
+  letter-spacing: .09em;
+  border-radius: 0px;
+transition-duration: 0.4s;
+}
+.flex-outer li button:hover {
+  border: solid white;
+  border-width: 3px 3px 3px 3px;
+  background: #ffffff;
+  color: #333;
+}
+.flex-cent{
+  list-style-type: none;
+  padding: 20;
+}
+
+.flex-cent {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.flex-cent li {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+	justify-content: end;
+}
+
+.flex-cent > li:not(:last-child) {
+  margin-bottom: 20px;
+}
+
+.flex-cent li label,
+.flex-cent li p {
+  padding-left: 10px;
+ font: normal 19px/1.2 "Fira Sans", "Helvetica Neue", sans-serif;
+  font-weight: 300;
+  letter-spacing: .07em;
+	font-size: 16;
+	line-height: 1.2;
+	text-transform: none;
+}
+
+.flex-cent > li > label,
+.flex-cent li p {
+  flex: 1 0 120px;
+  max-width: 820px;
+}
+
+.flex-cent > li > label + *{
+  flex: 1 0 220px;
+}
+
+.flex-cent li p {
+  margin: 0;
+}
+
+.flex-cent li input:not([type='checkbox']),
+.flex-cent li textarea {
+  padding: 15px;
+  border: none;
+}
+.flex-inner li {
+  max-width: 1200px;
+}
+.chapter {
+color: #ffffff;
+font: normal 20px/1.5 "Fira Sans", "Helvetica Neue", sans-serif;
+  max-width: 800px;
+	padding-left: 50;
+	padding-bottom: 20;
+	padding-top: 30;
+	letter-spacing: .07em;
+	font-weight: 600;
+}
+	.chapter2 {
+color: #ffffff;
+font: normal 16px/1.5 "Fira Sans", "Helvetica Neue", sans-serif;
+  max-width: 820px;
+	padding-left: 70;
+	padding-bottom: 25;
+	padding-top: 0;
+	letter-spacing: .06em;
+	font-weight: 300;
+}
+</style>

settings.js

@@ -1,17 +1,17 @@
 // Change the url to the domain of your app
-exports.url = 'http://localhost:3090';
+exports.url = 'https://sendgrid-subscribe.herokuapp.com/';
 
-exports.senderEmail = "[email protected]";
-exports.senderName = "Sender Name";
+exports.senderEmail = "[email protected]";
+exports.senderName = "Pohjolan Liikenne";
 
 // set 'exports.listId = null' to add contact to all contacts, but no specific list
 // or a string with the listId to add to a specific list
-exports.listId = null;
+exports.listId = 57887;
 
 // set 'exports.templateId = null' to opt out of using a template
 // or a string with the templateId to use a template
 exports.templateId = null;
 
 // receive an email when a new signup is confirmed
-exports.sendNotification = true;
-exports.notificationEmail = "[email protected]";
+exports.sendNotification = false;
+exports.notificationEmail = "";