Create Reset Password Page

51073600 · Louis · 7a98749f · 51073600 · 51073600 · 51073600
Commit 51073600 authored 5 years ago by Louis
--- a/.env.example
+++ b/.env.example
@@ -2,6 +2,8 @@ APP_NAME=
 APP_KEY=
 PORT=8000

+WEB_URL=
+
 DATABASE_NAME=trash
 DATABASE_USER=trash
 DATABASE_PASS=trash

--- a/public/css/main.css
+++ b/public/css/main.css
+* {
+	box-sizing: border-box;
+	position: relative;
+}
+.required {
+	color: red;
+}
+.logo {
+	border-radius: 10px;
+	box-shadow: 0px 10px 30px 0 #BBB;
+	margin: 0 5rem;
+}
+.header {
+	padding: 3rem;
+	display: flex;
+	justify-content: center;
+}
+.error-message {
+	padding: 1rem;
+	margin: 1rem 0;
+	text-align: center;
+	background-color: #FF4136;
+	border: 1px solid #FF2015;
+	color: white;
+	font-weight: bold;
+}
+button:not(:disabled).button-primary {
+	background-color: #FF4D75;
+	border-color: #FF4D75;
+	background: linear-gradient(to right, #FF7BAC, #FF1E3D);
+}
+button:not(:disabled).button-primary:hover {
+	background-color: #FF5E82;
+	border-color: #FF5E82;
+	background: linear-gradient(to right, #ff88b4, #ff3450);
+}
+button:disabled {
+	background-color: #777;
+	border-color: #777;
+}
+button:disabled:hover {
+	background-color: #777;
+	border-color: #777;
+}
+.flex-row {
+	padding: 2rem 0;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+.flex-row h4 {
+	margin: 0;
+}
+.centered {
+	text-align: center;
+}
+a {
+	color: #FF5E82;
+}
+
+a:hover {
+	color: #ff3450;
+}
+
+.back-icon {
+	margin-right: 1rem;
+}
+@media screen and (max-width: 760px) {
+	.header {
+		flex-direction: column;
+		text-align: center;
+		align-items: center;
+	}
+	.logo {
+		margin-bottom: 5rem;
+	}
+}
+
+input[type=text]:disabled {
+	background: #FFF5F5;
+}
--- a/src/app.js
+++ b/src/app.js
@@ -6,13 +6,14 @@ const routers = require('http/routes')
 const handlebars = require('./vendor/koa-handlebars')
 const { fs, config } = require('bootstrap')
 const { extractDevice } = require('./http/middleware/deviceProperties')
-
+const serve = require('koa-static')

 const app = new Koa()

 app.keys = [config('app.key')]

 app.use(logger())
+app.use(serve(fs.path('public')))
 app.use(body())
 app.use(session({
 	key: 'trash:sss',

--- a/src/http/controllers/api/auth.js
+++ b/src/http/controllers/api/auth.js
@@ -28,4 +28,8 @@ exports.login = async ctx => {
 	const token = await user.asToken()

 	ctx.body = { token }
+}
+
+exports.triggerPasswordReset = async ctx => {
+	const { email } = ctx.request.body
 }
\ No newline at end of file
--- a/src/http/controllers/auth.js
+++ b/src/http/controllers/auth.js
@@ -19,4 +19,12 @@ exports.handleLoginRedirect = async ctx => {
 	} else {
 		return ctx.redirect('/')
 	}
+}
+
+exports.resetPassword = async ctx => {
+
+
+	await ctx.render('auth/reset-password', {
+		token: ctx.query.token,
+	})
 }
\ No newline at end of file
--- a/src/http/routes.js
+++ b/src/http/routes.js
@@ -17,6 +17,8 @@ web.get('/login', ctx => {
 })
 web.post('/login', controller('auth', 'login'))

+web.get('/reset-password', controller('auth', 'resetPassword'))
+
 web.get('/auth/authorize', AuthServer.authorize)
 web.post('/auth/authorize', AuthServer.authorize)
 web.post('/auth/token', AuthServer.token)

--- a/views/auth/reset-password.hbs
+++ b/views/auth/reset-password.hbs
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>Password Reset | Jetsam</title>
+	<meta name="description" content="Jetsam is a social plastics logging app that puts the power of change in your hands!">
+	<meta property="og:description" content="Jetsam is a social plastics logging app that puts the power of change in your hands!">
+	<meta property="og:image" content="https://jetsam.tech/images/card-image.png">
+	<meta property="og:image:type" content="image/png">
+	<meta name="twitter:site" content="@jetsam_tech">
+	<meta name="twitter:creator" content="@louisdoesdev">
+
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+
+	<link rel="shortcut icon" type="image/png" href="https://jetsam.tech/images/logo.png">
+	<link rel="stylesheet"
+		  href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
+		  integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU="
+		  crossorigin="anonymous" />
+	<link rel="stylesheet"
+		  href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
+		  integrity="sha256-2YQRJMXD7pIAPHiXr0s+vlRWA7GYJEK0ARns7k2sbHY="
+		  crossorigin="anonymous" />
+
+	<link rel="stylesheet" href="/css/main.css?v=2">
+</head>
+
+<body>
+<main class="container" style="max-width: 600px">
+	<header class="header">
+		<img class="logo" src="https://jetsam.tech/images/logo.png" width="128px" height="128px">
+		<div>
+			<h1>Jetsam</h1>
+			<h3>Your World; Cleaner</h3>
+		</div>
+	</header>
+
+	<form method="POST" action="/api/contact" id="contact">
+		<h3>Reset Password</h3>
+		<p>
+			You've requested a reset of your password; please use this form to choose a new one. The token is valid for 1 hour from the time we send it to you,
+			so if you've gone to grab a cup of tea between requesting a new password and using this form, you may need to request another password reset!
+		</p>
+		<div class="row">
+			<div class="twelve columns">
+				<label for="reset_token">Reset Token:</label>
+				<input id=reset_token name=reset_token required type=text class="u-full-width" value="{{token}}" disabled>
+			</div>
+		</div>
+		<div class="row">
+			<div class="twelve columns">
+				<label for=new_password><sup class="required" title="Required">*</sup>New Password:</label>
+				<input id=new_password name=new_password class="u-full-width" required type="password">
+			</div>
+		</div>
+		<div class="row">
+			<div class="twelve columns">
+				<label for=confirm_password><sup class="required" title="Required">*</sup>Confirm Password:</label>
+				<input id=confirm_password name=confirm_password class="u-full-width" required type="password">
+			</div>
+		</div>
+
+
+		<div class="row centered">
+			<button class="button-primary four columns" type="submit" id=submit>Reset Password</button>
+		</div>
+		<div id="formmessage" class="row"></div>
+	</form>
+</main>
+
+<script async>
+	(function() {
+		var script = document.createElement('script');
+		window.counter = 'https://jetsam.goatcounter.com/count'
+		script.async = 1;
+		script.src = '//gc.zgo.at/count.js';
+
+		var ins = document.getElementsByTagName('script')[0];
+		ins.parentNode.insertBefore(script, ins)
+	})();
+</script>
+
+</body>
+</html>