diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..07daba5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,27 @@ +.DS_Store +*.sublime-project +*.sublime-workspace +*.log +.serverless +v8-compile-cache-* +jest/* +coverage +testProjects/*/package-lock.json +testProjects/*/yarn.lock +.serverlessUnzipped +node_modules +.vscode/ +.eslintcache +dist +.idea +build/ +.env* +.cache* +.serverless +.serverless_nextjs +.serverless_plugins +env.js +tmp +package-lock.json +yarn.lock +test diff --git a/README.md b/README.md index 0ca446a..cd9d694 100644 --- a/README.md +++ b/README.md @@ -1,20 +1,112 @@ -# Introduction -TODO: Give a short introduction of your project. Let this section explain the objectives or the motivation behind this project. +[![Serverless Fullstack Application Express React DynamoDB AWS Lambda AWS HTTP API](https://s3.amazonaws.com/assets.github.serverless/components/readme-serverless-framework-fullstack-application.png +)](https://www.serverless-fullstack-app.com) -# Getting Started -TODO: Guide users through getting your code up and running on their own system. In this section you can talk about: -1. Installation process -2. Software dependencies -3. Latest releases -4. API references +A complete, serverless, full-stack application built on AWS Lambda, AWS HTTP API, Express.js, React and DynamoDB. -# Build and Test -TODO: Describe and show how to build your code and run the tests. +#### Live Demo: [https://www.serverless-fullstack-app.com](https://www.serverless-fullstack-app.com) -# Contribute -TODO: Explain how other users and developers can contribute to make your code better. +## Quick Start -If you want to learn more about creating good readme files then refer the following [guidelines](https://docs.microsoft.com/en-us/azure/devops/repos/git/create-a-readme?view=azure-devops). You can also seek inspiration from the below readme files: -- [ASP.NET Core](https://github.com/aspnet/Home) -- [Visual Studio Code](https://github.com/Microsoft/vscode) -- [Chakra Core](https://github.com/Microsoft/ChakraCore) \ No newline at end of file +Install the latest version of the Serverless Framework: + + +``` +npm i -g serverless +``` + +Then, initialize the `fullstack-app` template: + +``` +serverless init fullstack-app +cd fullstack-app +``` + +Then, add your AWS credentials in the `.env` file in the root directory, like this: + +```text +AWS_ACCESS_KEY_ID=JAFJ89109JASFKLJASF +AWS_SECRET_ACCESS_KEY=AJ91J9A0SFA0S9FSKAFLASJFLJ + +# This signs you JWT tokens used for auth. Enter a random string in here that's ~40 characters in length. +tokenSecret=yourSecretKey + +# Only add this if you want a custom domain. Purchase it on AWS Route53 in your target AWS account first. +domain=serverless-fullstack-app.com +``` + +In the root folder of the project, run `serverless deploy` + +Lastly, you will need to add your API domain manually to your React application in `./site/src/config.js`, so that you interact with your serverless Express.js back-end. You can find the your API url by going into `./api` and running `serverless info` and copying the `url:` value. It should look something like this `https://9jfalnal19.execute-api.us-east-1.amazonaws.com` or it will look like the custom domain you have set. + +**Note:** Upon the first deployment of your website, it will take a 2-3 minutes for the Cloudfront (CDN) URL to work. Until then, you can access it via the `bucketUrl`. + +After initial deployment, we recommend deploying only the parts you are changing, not the entire thing together (why risk deploying your database with a code change?). To do this, `cd` into a part of the application and run `serverless deploy`. + +When working on the `./api` we highly recommend using `serverless dev`. This command watches your code, auto-deploys it, and streams `console.log()` statements and errors directly to your CLI in real-time! + +If you want to add custom domains to your landing pages and API, either hardcode them in your `serverless.yml` or reference them as environment variables in `serverless.yml`, like this: + +```yaml +inputs: + domain: ${env:domain} +``` + +```text +domain=serverless-fullstack-app.com +``` + +Support for stages is built in. + +You can deploy everything or individual components to different stages via the `--stage` flag, like this: + +`serverless deploy --stage prod` + +Or, you can hardcode the stage in `serverless.yml` (not recommended): + +```yaml +app: fullstack +component: express@0.0.20 +name: fullstack-api +stage: prod # Put the stage in here +``` + +Lastly, you can add separate environment variables for each stage using `.env` files with the stage name in them: + +```bash +.env # Any stage +.env.dev # "dev" stage only +.env.prod # "prod" stage only +``` + +Then simply reference those environment variables using Serverless Variables in your YAML: + +```yaml +app: fullstack +component: express@0.0.20 +name: fullstack-api + +inputs: + domain: api.${env:domain} +``` + +And deploy! + +`serverless deploy --stage prod` + +Enjoy! This is a work in progress and we will continue to add funcitonality to this. + +## Other Resources + +For more details on each part of this fullstack application, check out these resources: + +* [Serverless Components](https://github.com/serverless/components) +* [Serverless Express](https://github.com/serverless-components/express) +* [Serverless Website](https://github.com/serverless-components/website) +* [Serverless AWS DynamoDB](https://github.com/serverless-components/aws-dynamodb) +* [Serverless AWS IAM Role](https://github.com/serverless-components/aws-iam-role) + +## Guides + +### How To Debug CORS Errors + +If you are running into CORS errors, see our guide on debugging them [within the Express Component's repo](https://github.com/serverless-components/express/blob/master/README.md#how-to-debug-cors-errors) diff --git a/api/app.js b/api/app.js new file mode 100644 index 0000000..d478c04 --- /dev/null +++ b/api/app.js @@ -0,0 +1,81 @@ +const express = require('express') +const app = express() +const passport = require('passport') +const { + users +} = require('./controllers') + +/** + * Configure Passport + */ + +try { require('./config/passport')(passport) } +catch (error) { console.log(error) } + +/** + * Configure Express.js Middleware + */ + +// Enable CORS +app.use(function (req, res, next) { + res.header('Access-Control-Allow-Origin', '*') + res.header('Access-Control-Allow-Methods', '*') + res.header('Access-Control-Allow-Headers', '*') + res.header('x-powered-by', 'serverless-express') + next() +}) + +// Initialize Passport and restore authentication state, if any, from the session +app.use(passport.initialize()) +app.use(passport.session()) + +// Enable JSON use +app.use(express.json()) + +// Since Express doesn't support error handling of promises out of the box, +// this handler enables that +const asyncHandler = fn => (req, res, next) => { + return Promise + .resolve(fn(req, res, next)) + .catch(next); +}; + +/** + * Routes - Public + */ + +app.options(`*`, (req, res) => { + res.status(200).send() +}) + +app.post(`/users/register`, asyncHandler(users.register)) + +app.post(`/users/login`, asyncHandler(users.login)) + +app.get(`/test/`, (req, res) => { + res.status(200).send('Request received') +}) + +/** + * Routes - Protected + */ + +app.post(`/user`, passport.authenticate('jwt', { session: false }), asyncHandler(users.get)) + +/** + * Routes - Catch-All + */ + +app.get(`/*`, (req, res) => { + res.status(404).send('Route not found') +}) + +/** + * Error Handler + */ +app.use(function (err, req, res, next) { + console.error(err) + res.status(500).json({ error: `Internal Serverless Error - "${err.message}"` }) +}) + +module.exports = app \ No newline at end of file diff --git a/api/config/passport.js b/api/config/passport.js new file mode 100644 index 0000000..d96ee55 --- /dev/null +++ b/api/config/passport.js @@ -0,0 +1,27 @@ +/** + * Config: Passport.js + */ + +const StrategyJWT = require('passport-jwt').Strategy +const ExtractJWT = require('passport-jwt').ExtractJwt +const { users } = require('../models') +const { comparePassword } = require('../utils') + +module.exports = (passport) => { + + const options = {} + options.jwtFromRequest = ExtractJWT.fromAuthHeaderAsBearerToken() + options.secretOrKey = process.env.tokenSecret || 'secret_j91jasf0j1asfkl' // Change this to only use your own secret token + + passport.use(new StrategyJWT(options, async (jwtPayload, done) => { + let user + try { user = await users.getById(jwtPayload.id) } + catch (error) { + console.log(error) + return done(error, null) + } + + if (!user) { return done(null, false) } + return done(null, user) + })) +} \ No newline at end of file diff --git a/api/controllers/index.js b/api/controllers/index.js new file mode 100644 index 0000000..34f82d6 --- /dev/null +++ b/api/controllers/index.js @@ -0,0 +1,5 @@ +const users = require('./users') + +module.exports = { + users, +} \ No newline at end of file diff --git a/api/controllers/users.js b/api/controllers/users.js new file mode 100644 index 0000000..4a042df --- /dev/null +++ b/api/controllers/users.js @@ -0,0 +1,81 @@ +/** + * Controllers: Users + */ + +const jwt = require('jsonwebtoken') +const { users } = require('../models') +const { comparePassword } = require('../utils') + +/** + * Save + * @param {*} req + * @param {*} res + * @param {*} next + */ +const register = async (req, res, next) => { + + try { + await users.register(req.body) + } catch (error) { + return res.status(400).json({ error: error.message }) + } + + let user + try { + user = await users.getByEmail(req.body.email) + } catch (error) { + console.log(error) + return next(error, null) + } + + const token = jwt.sign(user, process.env.tokenSecret, { + expiresIn: 604800 // 1 week + }) + + res.json({ message: 'Authentication successful', token }) +} + +/** + * Sign a user in + * @param {*} req + * @param {*} res + * @param {*} next + */ +const login = async (req, res, next) => { + + let user + try { user = await users.getByEmail(req.body.email) } + catch (error) { return done(error, null) } + + if (!user) { + return res.status(404).send({ error: 'Authentication failed. User not found.' }) + } + + const isCorrect = comparePassword(req.body.password, user.password) + if (!isCorrect) { + return res.status(401).send({ error: 'Authentication failed. Wrong password.' }) + } + + const token = jwt.sign(user, process.env.tokenSecret, { + expiresIn: 604800 // 1 week + }) + + res.json({ message: 'Authentication successful', token }) +} + +/** + * Get a user + * @param {*} req + * @param {*} res + * @param {*} next + */ +const get = async (req, res, next) => { + const user = users.convertToPublicFormat(req.user) + res.json({ user }) +} + +module.exports = { + register, + login, + get, +} \ No newline at end of file diff --git a/api/models/index.js b/api/models/index.js new file mode 100644 index 0000000..34f82d6 --- /dev/null +++ b/api/models/index.js @@ -0,0 +1,5 @@ +const users = require('./users') + +module.exports = { + users, +} \ No newline at end of file diff --git a/api/models/users.js b/api/models/users.js new file mode 100644 index 0000000..b29e60f --- /dev/null +++ b/api/models/users.js @@ -0,0 +1,136 @@ +/** + * Model: Users + */ + +const AWS = require('aws-sdk') +const shortid = require('shortid') +const utils = require('../utils') + +const dynamodb = new AWS.DynamoDB.DocumentClient({ + region: process.env.AWS_REGION +}) + +/** + * Register user + * @param {string} user.email User email + * @param {string} user.password User password + */ +const register = async(user = {}) => { + + // Validate + if (!user.email) { + throw new Error(`"email" is required`) + } + if (!user.password) { + throw new Error(`"password" is required`) + } + if (!utils.validateEmailAddress(user.email)) { + throw new Error(`"${user.email}" is not a valid email address`) + } + + // Check if user is already registered + const existingUser = await getByEmail(user.email) + if (existingUser) { + throw new Error(`A user with email "${user.email}" is already registered`) + } + + user.password = utils.hashPassword(user.password) + + // Save + const params = { + TableName: process.env.db, + Item: { + hk: user.email, + sk: 'user', + sk2: shortid.generate(), + createdAt: Date.now(), + updatedAt: Date.now(), + password: user.password, + } + } + + await dynamodb.put(params).promise() +} + +/** + * Get user by email address + * @param {string} email + */ + +const getByEmail = async(email) => { + + // Validate + if (!email) { + throw new Error(`"email" is required`) + } + if (!utils.validateEmailAddress(email)) { + throw new Error(`"${email}" is not a valid email address`) + } + + // Query + const params = { + TableName: process.env.db, + KeyConditionExpression: 'hk = :hk', + ExpressionAttributeValues: { ':hk': email } + } + + let user = await dynamodb.query(params).promise() + + user = user.Items && user.Items[0] ? user.Items[0] : null + if (user) { + user.id = user.sk2 + user.email = user.hk + } + return user +} + +/** + * Get user by id + * @param {string} id + */ + +const getById = async(id) => { + + // Validate + if (!id) { + throw new Error(`"id" is required`) + } + + // Query + const params = { + TableName: process.env.db, + IndexName: process.env.dbIndex1, + KeyConditionExpression: 'sk2 = :sk2 and sk = :sk', + ExpressionAttributeValues: { ':sk2': id, ':sk': 'user' } + } + let user = await dynamodb.query(params).promise() + + user = user.Items && user.Items[0] ? user.Items[0] : null + if (user) { + user.id = user.sk2 + user.email = user.hk + } + return user +} + +/** + * Convert user record to public format + * This hides the keys used for the dynamodb's single table design and returns human-readable properties. + * @param {*} user + */ +const convertToPublicFormat = (user = {}) => { + user.email = user.hk || null + user.id = user.sk2 || null + if (user.hk) delete user.hk + if (user.sk) delete user.sk + if (user.sk2) delete user.sk2 + if (user.password) delete user.password + return user +} + +module.exports = { + register, + getByEmail, + getById, + convertToPublicFormat, +} diff --git a/api/package.json b/api/package.json new file mode 100644 index 0000000..ea75df5 --- /dev/null +++ b/api/package.json @@ -0,0 +1,20 @@ +{ + "name": "serverless-fullstack-app-api", + "version": "1.0.0", + "description": "", + "main": "app.js", + "dependencies": { + "bcryptjs": "^2.4.3", + "express": "^4.17.1", + "jsonwebtoken": "^8.5.1", + "passport": "^0.4.1", + "passport-jwt": "^4.0.0", + "shortid": "^2.2.15" + }, + "devDependencies": {}, + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC" +} diff --git a/api/serverless.yml b/api/serverless.yml new file mode 100644 index 0000000..99da196 --- /dev/null +++ b/api/serverless.yml @@ -0,0 +1,18 @@ +component: express +name: api + +inputs: + # Express application source code. + src: ./ + # Permissions required for the AWS Lambda function to interact with other resources + roleName: ${output:permissions.name} + # Enable this when you want to set a custom domain. + # domain: api.${env:domain} + # Environment variables + env: + # AWS DynamoDB Table name. Needed for the code to access it. + db: ${output:database.name} + # AWS DynamoDB Table Index name. Needed for the code to access it. + dbIndex1: ${output:database.indexes.gsi1.name} + # A secret token to sign the JWT tokens with. + tokenSecret: secret_1234 # Change to secret via environment variable: ${env:tokenSecret} diff --git a/api/utils/index.js b/api/utils/index.js new file mode 100644 index 0000000..12a7749 --- /dev/null +++ b/api/utils/index.js @@ -0,0 +1,35 @@ +/** + * Utils + */ + +const bcrypt = require('bcryptjs') + +/** + * Validate email address + */ +const validateEmailAddress = (email) => { + var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ + return re.test(String(email).toLowerCase()) +} + +/** + * Hash password + * @param {*} user + */ +const hashPassword = (password) => { + const salt = bcrypt.genSaltSync(10) + return bcrypt.hashSync(password, salt) +} + +/** + * Compare password + */ +const comparePassword = (candidatePassword, trustedPassword) => { + return bcrypt.compareSync(candidatePassword, trustedPassword) +} + +module.exports = { + hashPassword, + comparePassword, + validateEmailAddress +} \ No newline at end of file diff --git a/database/serverless.yml b/database/serverless.yml new file mode 100644 index 0000000..f9081af --- /dev/null +++ b/database/serverless.yml @@ -0,0 +1,30 @@ +component: aws-dynamodb +name: database + +inputs: + name: ${name}-${stage} + region: us-east-1 + # Don't delete the Database Table if "serverless remove" is run + deletionPolicy: retain + # Simple, single-table design + attributeDefinitions: + - AttributeName: hk + AttributeType: S + - AttributeName: sk + AttributeType: S + - AttributeName: sk2 + AttributeType: S + keySchema: + - AttributeName: hk + KeyType: HASH + - AttributeName: sk + KeyType: RANGE + globalSecondaryIndexes: + - IndexName: gsi1 + KeySchema: + - AttributeName: sk2 + KeyType: HASH + - AttributeName: sk + KeyType: RANGE + Projection: + ProjectionType: ALL diff --git a/permissions/serverless.yml b/permissions/serverless.yml new file mode 100644 index 0000000..5229904 --- /dev/null +++ b/permissions/serverless.yml @@ -0,0 +1,28 @@ +component: aws-iam-role +name: permissions + +inputs: + name: ${name}-${stage} + region: us-east-1 + service: lambda.amazonaws.com + policy: + # AWS Lambda function containing Express Logs and Assume Role access + - Effect: Allow + Action: + - sts:AssumeRole + - logs:CreateLogGroup + - logs:CreateLogStream + - logs:PutLogEvents + Resource: "*" + # AWS DynamoDB Table access + - Effect: Allow + Action: + - dynamodb:DescribeTable + - dynamodb:Query + - dynamodb:GetItem + - dynamodb:PutItem + - dynamodb:UpdateItem + - dynamodb:DeleteItem + Resource: + - ${output:database.arn} + - ${output:database.arn}/index/* diff --git a/serverless.yml b/serverless.yml new file mode 100644 index 0000000..73162f4 --- /dev/null +++ b/serverless.yml @@ -0,0 +1,2 @@ +app: forgetmenot +org: yemarnn \ No newline at end of file diff --git a/site/README.md b/site/README.md new file mode 100644 index 0000000..9c40dcd --- /dev/null +++ b/site/README.md @@ -0,0 +1,68 @@ +This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). + +## Available Scripts + +In the project directory, you can run: + +### `yarn start` + +Runs the app in the development mode.
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser. + +The page will reload if you make edits.
+You will also see any lint errors in the console. + +### `yarn test` + +Launches the test runner in the interactive watch mode.
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. + +### `yarn build` + +Builds the app for production to the `build` folder.
+It correctly bundles React in production mode and optimizes the build for the best performance. + +The build is minified and the filenames include the hashes.
+Your app is ready to be deployed! + +See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. + +### `yarn eject` + +**Note: this is a one-way operation. Once you `eject`, you can’t go back!** + +If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. + +Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. + +You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. + +## Learn More + +You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). + +To learn React, check out the [React documentation](https://reactjs.org/). + +### Code Splitting + +This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting + +### Analyzing the Bundle Size + +This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size + +### Making a Progressive Web App + +This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app + +### Advanced Configuration + +This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration + +### Deployment + +This section has moved here: https://facebook.github.io/create-react-app/docs/deployment + +### `yarn build` fails to minify + +This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify diff --git a/site/package.json b/site/package.json new file mode 100644 index 0000000..9525e65 --- /dev/null +++ b/site/package.json @@ -0,0 +1,37 @@ +{ + "name": "serverless-fullstack-app-website", + "version": "0.1.0", + "private": true, + "dependencies": { + "@testing-library/jest-dom": "^4.2.4", + "@testing-library/react": "^9.3.2", + "@testing-library/user-event": "^7.1.2", + "react": "^16.13.1", + "react-dom": "^16.13.1", + "react-scripts": "3.4.3", + "js-cookie": "^2.2.1", + "moment": "^2.24.0", + "react-router-dom": "^5.1.2" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": "react-app" + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/site/public/android-chrome-192x192.png b/site/public/android-chrome-192x192.png new file mode 100644 index 0000000..050fdbf Binary files /dev/null and b/site/public/android-chrome-192x192.png differ diff --git a/site/public/android-chrome-512x512.png b/site/public/android-chrome-512x512.png new file mode 100644 index 0000000..5e1f8ee Binary files /dev/null and b/site/public/android-chrome-512x512.png differ diff --git a/site/public/apple-touch-icon.png b/site/public/apple-touch-icon.png new file mode 100644 index 0000000..eadddf2 Binary files /dev/null and b/site/public/apple-touch-icon.png differ diff --git a/site/public/favicon-16x16.png b/site/public/favicon-16x16.png new file mode 100644 index 0000000..8a3c249 Binary files /dev/null and b/site/public/favicon-16x16.png differ diff --git a/site/public/favicon-32x32.png b/site/public/favicon-32x32.png new file mode 100644 index 0000000..0624682 Binary files /dev/null and b/site/public/favicon-32x32.png differ diff --git a/site/public/favicon.ico b/site/public/favicon.ico new file mode 100644 index 0000000..abca195 Binary files /dev/null and b/site/public/favicon.ico differ diff --git a/site/public/fullstack-app-artwork.png b/site/public/fullstack-app-artwork.png new file mode 100644 index 0000000..8ae7d9b Binary files /dev/null and b/site/public/fullstack-app-artwork.png differ diff --git a/site/public/fullstack-app-title.png b/site/public/fullstack-app-title.png new file mode 100644 index 0000000..d750ceb Binary files /dev/null and b/site/public/fullstack-app-title.png differ diff --git a/site/public/index.html b/site/public/index.html new file mode 100644 index 0000000..d2994a7 --- /dev/null +++ b/site/public/index.html @@ -0,0 +1,27 @@ + + + + + + + + + + + + Serverless Fullstack Application + + + +
+ + diff --git a/site/public/manifest.json b/site/public/manifest.json new file mode 100644 index 0000000..52eb326 --- /dev/null +++ b/site/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "Serverless Fullstack Application", + "name": "Serverless Fullstack Application", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "android-chrome-192x192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "android-chrome-512x512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/site/public/robots.txt b/site/public/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ b/site/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/site/serverless.yml b/site/serverless.yml new file mode 100644 index 0000000..845044b --- /dev/null +++ b/site/serverless.yml @@ -0,0 +1,11 @@ +component: website +name: site + +inputs: + # React application. "hook" runs before deployment to build the source code. "dist" is the built artifact directory which is uploaded. + src: + src: ./ + hook: npm run build + dist: build + # Enable this when you want to set a custom domain. + # domain: ${env:domain} diff --git a/site/src/App.js b/site/src/App.js new file mode 100644 index 0000000..ce17c13 --- /dev/null +++ b/site/src/App.js @@ -0,0 +1,58 @@ +import React, { Component } from 'react' +import { + BrowserRouter as Router, + Switch, + Route, +} from 'react-router-dom' +import Home from './pages/Home/Home' +import Auth from './pages/Auth/Auth' +import Dashboard from './pages/Dashboard/Dashboard' +import { getSession } from './utils' + +export default class App extends Component { + + constructor(props) { + super(props) + this.state = {} + } + + async componentDidMount() { + // console.log(getSession()) + } + + render() { + return ( + + + + + + + + + + + + + + + + ) + } +} + +/** + * A component to protect routes. + * Shows Auth page if the user is not authenticated + */ +const PrivateRoute = ({ component, ...options }) => { + + const session = getSession() + + const finalComponent = session ? Dashboard : Home + return +} \ No newline at end of file diff --git a/site/src/App.module.css b/site/src/App.module.css new file mode 100644 index 0000000..14936b8 --- /dev/null +++ b/site/src/App.module.css @@ -0,0 +1,333 @@ +.container { + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; + box-sizing: border-box; + overflow: hidden; + width: 100%; + height: 100vh; +} + +.containerInner { + display: flex; + flex-direction: column; + box-sizing: border-box; + background: #000; + width: 100%; + height: 100%; + align-self: center; + max-width: 700px; + padding: 50px 15px 30px 15px; +} + +.containerLoading { + display: flex; + flex-direction: row; + width: 100%; + height: auto; + justify-content: center; + align-content: center; + padding: 160px 0 0 0; +} + +.column { + display: flex; + flex-direction: row; + box-sizing: border-box; + height: 100%; + width: 50%; +} + +.row { + display: flex; + flex-direction: column; + box-sizing: border-box; + width: 100%; +} + +.heroArtwork { + display: flex; + flex-direction: row; + box-sizing: border-box; + align-content: center; + justify-content: center; + width: 100%; +} + +.heroArtwork img { + width: auto; + height: auto; + align-self: center; + max-height: 100%; + max-width: 500px; + user-select: none; +} + +.heroTitle { + display: flex; + flex-direction: row; + box-sizing: border-box; + align-content: center; + justify-content: center; + width: 100%; +} + +.heroTitle img { + width: auto; + height: auto; + align-self: center; + max-height: 100%; + max-width: 500px; + user-select: none; +} + +.heroDescription { + display: flex; + text-align: center; + font-size: 18px; + line-height: 30px; + margin: 10px 0 32px 0px; +} + +.error { + display: flex; + flex-direction: column; + width: 100%; + margin: 18px 0; + align-content: center; + justify-content: center; + text-align: center; + color: #FD5750; + font-size: 18px; +} + +.success { + display: flex; + flex-direction: column; + width: 100%; + margin: 32px 0; + align-content: center; + justify-content: center; + text-align: center; + text-transform: lowercase; + color: #78f542; + font-size: 22px; +} + +.containerRegister {} + +.containerSignIn {} + +.socialButtons { + display: flex; + flex-direction: row; + box-sizing: border-box; + margin: 15px auto 0px auto; + width: 100%; +} + +.buttonGithub { + display: flex; + flex-direction: row; + justify-content: center; + align-content: center; + box-sizing: border-box; + margin: 0 auto 10px auto; + width: 100%; + padding: 12px; + border-radius: 4px; + font-size: 19px; + font-weight: 500; + opacity: 0.6; + transition: all 0.3s ease; + text-transform: lowercase; +} + +.buttonGithub:hover { + cursor: pointer; + opacity: 1; +} + +.buttonGithub img { + max-height: 28px; + margin-right: 13px; + margin-top: 1.5px; +} + +.buttonGoogle { + display: flex; + flex-direction: row; + justify-content: center; + align-content: center; + box-sizing: border-box; + width: 100%; + padding: 12px; + border-radius: 4px; + font-size: 19px; + font-weight: 500; + opacity: 0.6; + transition: all 0.3s ease; + text-transform: lowercase; +} + +.buttonGoogle:hover { + cursor: pointer; + opacity: 1; +} + +.buttonGoogle img { + max-height: 25px; + margin-right: 11px; + margin-top: 3px; +} + +.formType { + display: flex; + flex-direction: row; + margin: 0px auto 0px auto; + width: 100%; + padding: 10px 0; + font-size: 22px; + color: rgba(255,255,255,0.6); + text-transform: lowercase; + user-select: none; +} + +.formTypeRegister { + display: flex; + width: 50%; + padding: 5px 40px 5px 0; + justify-content: flex-end; + border-right: 2px solid rgba(255,255,255,0.15); +} + +.formTypeRegister:hover { + cursor: pointer; +} + +.formTypeSignIn { + display: flex; + width: 50%; + padding: 5px 0 5px 40px; + text-align: left; +} + +.formTypeSignIn:hover { + cursor: pointer; +} + +.formTypeActive { + color: rgba(255,255,255,1); +} + +.form { + display: flex; + flex-direction: column; + max-width: 380px; + width: 100%; + margin: 10px auto 0 auto; + text-align: center; +} + +.formField { + display: flex; + flex-direction: column; + width: 100%; + margin-bottom: 25px; +} + + +.formLabel { + font-size: 19px; + font-weight: 500; + margin: 0 0 10px 0; + user-select: none; + display: none; +} + +.formInput { + text-align: center; + font-size: 22px; + padding: 10px 0px 22px 0px; + border-bottom: 1.5px solid rgba(255,255,255,0.4); + border-top: 1.5px solid transparent; + border-right: 1.5px solid transparent; + border-left: 1.5px solid transparent; + transition: all 0.6s ease; + background: none; + outline: none; + color: #ffffff; + caret-color: white; +} + +.formInput::placeholder { + text-align: center; + font-size: 22px; + color: rgba(255,255,255,0.5); + margin: 0; +} + +.formInput:focus { + border-bottom: 1.5px solid rgba(255,255,255,1); +} + +.formError { + margin: 10px 0 10px 0; + color: #FD5750; + font-size: 18px; + line-height: 32px; +} + +.formButton { + margin: 16px auto 0 auto!important; +} + +.formButton:hover { + cursor: pointer; + transform: scale(1.05); +} + +.formButton:active { + cursor: pointer; + transform: scale(1); +} + +.forgotPassword { + display: flex; + flex-direction: row; + justify-content: center; + align-content: center; + margin: 20px auto 5px auto; + width: 100%; + padding: 10px 0; + font-size: 19px; + color: rgba(255,255,255,0.6); + transition: all 0.3s ease; +} + +.forgotPassword:hover { + cursor: pointer; + color: rgba(255,255,255,1); +} + +.githubLink { + display: flex; + justify-content: center; + align-content: center; + width: 100%; + margin: 26px 0 40px 0; +} + +.githubLink a { + font-size: 20px; + color: #FD5750; + opacity: 0.7; + transition: all 0.3s ease; + text-decoration: none; +} + +.githubLink:hover a { + cursor: pointer; + opacity: 1; +} \ No newline at end of file diff --git a/site/src/config.js b/site/src/config.js new file mode 100644 index 0000000..3044c1b --- /dev/null +++ b/site/src/config.js @@ -0,0 +1,18 @@ +/** + * Global Config + */ + +const config = {} + +// Domains +config.domains = {} + +/** + * API Domain + * Add the domain from your serverless express.js back-end here. + * This will enable your front-end to communicate with your back-end. + * (e.g. 'https://api.mydomain.com' or 'https://091jafsl10.execute-api.us-east-1.amazonaws.com') + */ +config.domains.api = null + +export default config \ No newline at end of file diff --git a/site/src/fragments/Loading/Loading.js b/site/src/fragments/Loading/Loading.js new file mode 100644 index 0000000..a6d7725 --- /dev/null +++ b/site/src/fragments/Loading/Loading.js @@ -0,0 +1,32 @@ +import React, { Component } from 'react' +import styles from './Loading.module.css' + +export default class Loading extends Component { + + constructor(props) { + super(props) + this.state = {} + } + + async componentDidMount() {} + + render() { + return ( +
+
+ + {`Loading`} + +

loading...

+ +
+
+ ) + } +} \ No newline at end of file diff --git a/site/src/fragments/Loading/Loading.module.css b/site/src/fragments/Loading/Loading.module.css new file mode 100644 index 0000000..6e319f5 --- /dev/null +++ b/site/src/fragments/Loading/Loading.module.css @@ -0,0 +1,47 @@ +.container { + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; + box-sizing: border-box; + width: auto; + height: 100px; + opacity: 0.45; + text-align: center; +} + +.container img { + display: flex; + align-self: center; + height: 100%; + width: auto; + max-width: 100px; + max-height: 100px; + margin: 0 0 20px 0; + animation-duration: 0.4s; + animation-name: pulse; + animation-iteration-count: infinite; + animation-direction: alternate; + animation-timing-function: ease; + filter: none; + -webkit-filter: grayscale(100%); + -moz-filter: grayscale(100%); + -ms-filter: grayscale(100%); + -o-filter: grayscale(100%); +} + +.container p { + font-size: 22px; + color: rgba(255,255,255,0.5); +} + +@keyframes pulse { + from { + transform: scale(1); + } + + to { + transform: scale(1.15); + } +} + diff --git a/site/src/fragments/Loading/index.js b/site/src/fragments/Loading/index.js new file mode 100644 index 0000000..51e3f8b --- /dev/null +++ b/site/src/fragments/Loading/index.js @@ -0,0 +1 @@ +export { default } from './Loading' \ No newline at end of file diff --git a/site/src/index.css b/site/src/index.css new file mode 100644 index 0000000..5ee888f --- /dev/null +++ b/site/src/index.css @@ -0,0 +1,123 @@ +html, body, #root { + display: block; + width: 100%; + height: 100%; + min-height: 100vh; + box-sizing: border-box; + background: #000; + color: #ffffff; + margin: 0; + font-family: 'Titillium Web', sans-serif; + font-weight: 500; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + font-size: 18px; +} + +div, h1, h2, h3, h4, h5, h6, p, span, input, button, li { + font-family: 'Titillium Web', sans-serif; + font-size: 24px; + color: #ffffff; +} + +/** + * Links + */ + +a, .link { + font-family: 'Titillium Web', sans-serif; + font-size: 24px; + font-weight: 400; + color: rgba(255,255,255,0.6); + text-decoration: none; + transition: all 0.14s ease; +} + +a:hover, .link:hover { + cursor: pointer; + color: rgba(255,255,255,1); +} + +a:active, .link:active { + color: rgba(255,255,255,0.6); +} + +/** + * Buttons + */ + +.buttonPrimaryLarge { + text-align: center; + font-size: 18px; + width: 100%; + max-width: 360px; + height: auto; + margin: 20px 0 0 0; + padding: 24px 24px 28px 24px; + background: #fd5750; + color: #fff; + font-family: 'Titillium Web', sans-serif; + font-size: 24px; + font-weight: 600; + border-radius: 4px; + border: 0px; + transition: all 0.14s ease; + user-select: none; + outline: none; + text-transform: lowercase; +} + +.buttonPrimaryLarge:hover { + cursor: pointer; + transform: scale(1.03); +} + +.buttonPrimaryLarge:active { + cursor: pointer; + transform: scale(1); + outline: none; +} + +/** + * Animations + */ + +.animateFadeIn { + animation: fadeIn 0.45s; +} + +.animateScaleIn { + animation: scaleIn 0.35s; +} + +.animateFlicker { + animation: flicker 2.5s infinite; +} + +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes scaleIn { + from { + opacity: 0; + transform: scale(0.8); + } + to { + opacity: 1; + transform: scale(1); + } +} + +@keyframes flicker { + 0% { + opacity: 0.3; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0.3; + } +} \ No newline at end of file diff --git a/site/src/index.js b/site/src/index.js new file mode 100644 index 0000000..9e3c542 --- /dev/null +++ b/site/src/index.js @@ -0,0 +1,15 @@ +import React from 'react' +import ReactDOM from 'react-dom' +import App from './App' +import './index.css' + +/** + * Render App + */ + +ReactDOM.render( + + + , + document.getElementById('root') +) \ No newline at end of file diff --git a/site/src/pages/Auth/Auth.js b/site/src/pages/Auth/Auth.js new file mode 100644 index 0000000..3477728 --- /dev/null +++ b/site/src/pages/Auth/Auth.js @@ -0,0 +1,249 @@ +import React, { Component } from 'react' +import { + Link, + withRouter, +} from 'react-router-dom' +import Loading from '../../fragments/Loading' +import styles from './Auth.module.css' +import { + userRegister, + userLogin, + userGet, + saveSession, +} from '../../utils' + +class Auth extends Component { + + constructor(props) { + super(props) + + const pathName = window.location.pathname.replace('/', '') + + this.state = {} + this.state.state = pathName + this.state.loading = true + this.state.error = null + this.state.formEmail = '' + this.state.formPassword = '' + + // Bindings + this.handleFormInput = this.handleFormInput.bind(this) + this.handleFormSubmit = this.handleFormSubmit.bind(this) + this.handleFormTypeChange = this.handleFormTypeChange.bind(this) + } + + /** + * Component did mount + */ + componentDidMount() { + this.setState({ + loading: false + }) + + // Clear query params + const url = document.location.href + window.history.pushState({}, '', url.split('?')[0]) + } + + /** + * Handles a form change + */ + handleFormTypeChange(type) { + this.setState({ state: type }, + () => { + this.props.history.push(`/${type}`) + }) + } + + /** + * Handle text changes within form fields + */ + handleFormInput(field, value) { + value = value.trim() + + const nextState = {} + nextState[field] = value + + this.setState(Object.assign(this.state, nextState)) + } + + /** + * Handles form submission + * @param {object} evt + */ + async handleFormSubmit(evt) { + evt.preventDefault() + + this.setState({ loading: true }) + + // Validate email + if (!this.state.formEmail) { + return this.setState({ + loading: false, + formError: 'email is required' + }) + } + + // Validate password + if (!this.state.formPassword) { + return this.setState({ + loading: false, + formError: 'password is required' + }) + } + + let token + try { + if (this.state.state === 'register') { + token = await userRegister(this.state.formEmail, this.state.formPassword) + } else { + token = await userLogin(this.state.formEmail, this.state.formPassword) + } + } catch (error) { + console.log(error) + if (error.message) { + this.setState({ + formError: error.message, + loading: false + }) + } else { + this.setState({ + formError: 'Sorry, something unknown went wrong. Please try again.', + loading: false + }) + } + return + } + + // Fetch user record and set session in cookie + let user = await userGet(token.token) + user = user.user + saveSession(user.id, user.email, token.token) + + window.location.replace('/') + } + + render() { + + return ( +
+
+ + { /* Logo */} + + + serverless-fullstack-application + + + { /* Loading */} + + {this.state.loading && ( +
+ {< Loading className={styles.containerLoading} />} +
+ )} + + { /* Registration Form */} + + {!this.state.loading && ( +
+
{ this.handleFormTypeChange('register') }}> + Register +
+
{ this.handleFormTypeChange('login') }}> + Sign-In +
+
+ )} + + {this.state.state === 'register' && !this.state.loading && ( +
+ +
+
+ + { this.handleFormInput('formEmail', e.target.value) }} + /> +
+
+ + { this.handleFormInput('formPassword', e.target.value) }} + /> +
+ + {this.state.formError && ( +
{this.state.formError}
+ )} + + + +
+
+ )} + + {this.state.state === 'login' && !this.state.loading && ( +
+ +
+
+ + { this.handleFormInput('formEmail', e.target.value) }} + /> +
+
+ + { this.handleFormInput('formPassword', e.target.value) }} + /> +
+ + {this.state.formError && ( +
{this.state.formError}
+ )} + + +
+
+ )} +
+
+ ) + } +} + +export default withRouter(Auth) \ No newline at end of file diff --git a/site/src/pages/Auth/Auth.module.css b/site/src/pages/Auth/Auth.module.css new file mode 100644 index 0000000..044b349 --- /dev/null +++ b/site/src/pages/Auth/Auth.module.css @@ -0,0 +1,231 @@ +.container { + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; + box-sizing: border-box; + overflow: hidden; + width: 100%; + height: 100vh; +} + +.containerInner { + display: flex; + flex-direction: column; + box-sizing: border-box; + background: #000; + width: 100%; + height: 100%; + align-self: center; + max-width: 700px; + padding: 50px 15px 30px 15px; +} + +.containerLoading { + display: flex; + flex-direction: row; + width: 100%; + height: auto; + justify-content: center; + align-content: center; + padding: 160px 0 0 0; +} + +.logo { + display: flex; + flex-direction: row; + box-sizing: border-box; + align-content: center; + justify-content: center; + width: 100%; +} + +.logo img { + width: auto; + height: auto; + align-self: center; + max-height: 100%; + max-width: 400px; + user-select: none; +} + +.error { + display: flex; + flex-direction: column; + width: 100%; + margin: 18px 0; + align-content: center; + justify-content: center; + text-align: center; + color: #FD5750; + font-size: 18px; +} + +.success { + display: flex; + flex-direction: column; + width: 100%; + margin: 32px 0; + align-content: center; + justify-content: center; + text-align: center; + text-transform: lowercase; + color: #78f542; + font-size: 22px; +} + +.containerRegister {} + +.containerSignIn {} + +.formType { + display: flex; + flex-direction: row; + margin: 26px auto 0px auto; + width: 100%; + padding: 10px 0; + font-size: 22px; + color: rgba(255,255,255,0.6); + text-transform: lowercase; + user-select: none; +} + +.formTypeRegister { + display: flex; + width: 50%; + padding: 5px 40px 5px 0; + justify-content: flex-end; + border-right: 2px solid rgba(255,255,255,0.15); + color: rgba(255,255,255,0.6); +} + +.formTypeRegister:hover { + cursor: pointer; +} + +.formTypeSignIn { + display: flex; + width: 50%; + padding: 5px 0 5px 40px; + text-align: left; + color: rgba(255,255,255,0.6); +} + +.formTypeSignIn:hover { + cursor: pointer; +} + +.formTypeActive { + color: rgba(255,255,255,1); +} + +.form { + display: flex; + flex-direction: column; + max-width: 380px; + width: 100%; + margin: 10px auto 0 auto; + text-align: center; +} + +.formField { + display: flex; + flex-direction: column; + width: 100%; + margin-bottom: 25px; +} + + +.formLabel { + font-size: 19px; + font-weight: 500; + margin: 0 0 10px 0; + user-select: none; + display: none; +} + +.formInput { + text-align: center; + font-size: 22px; + padding: 10px 0px 22px 0px; + border-bottom: 1.5px solid rgba(255,255,255,0.4); + border-top: 1.5px solid transparent; + border-right: 1.5px solid transparent; + border-left: 1.5px solid transparent; + transition: all 0.6s ease; + background: none; + outline: none; + color: #ffffff; + caret-color: white; +} + +.formInput::placeholder { + text-align: center; + font-size: 22px; + color: rgba(255,255,255,0.5); + margin: 0; +} + +.formInput:focus { + border-bottom: 1.5px solid rgba(255,255,255,1); +} + +.formError { + margin: 10px 0 10px 0; + color: #FD5750; + font-size: 18px; + line-height: 32px; +} + +.formButton { + margin: 16px auto 0 auto!important; +} + +.formButton:hover { + cursor: pointer; + transform: scale(1.05); +} + +.formButton:active { + cursor: pointer; + transform: scale(1); +} + +.forgotPassword { + display: flex; + flex-direction: row; + justify-content: center; + align-content: center; + margin: 20px auto 5px auto; + width: 100%; + padding: 10px 0; + font-size: 19px; + color: rgba(255,255,255,0.6); + transition: all 0.3s ease; +} + +.forgotPassword:hover { + cursor: pointer; + color: rgba(255,255,255,1); +} + +.githubLink { + display: flex; + justify-content: center; + align-content: center; + width: 100%; + margin: 26px 0 40px 0; +} + +.githubLink a { + font-size: 20px; + color: #FD5750; + opacity: 0.7; + transition: all 0.3s ease; + text-decoration: none; +} + +.githubLink:hover a { + cursor: pointer; + opacity: 1; +} \ No newline at end of file diff --git a/site/src/pages/Dashboard/Dashboard.js b/site/src/pages/Dashboard/Dashboard.js new file mode 100644 index 0000000..20dfd8d --- /dev/null +++ b/site/src/pages/Dashboard/Dashboard.js @@ -0,0 +1,82 @@ +import React, { Component } from 'react' +import { + withRouter +} from 'react-router-dom' +import styles from './Dashboard.module.css' +import { + getSession, + deleteSession +} from '../../utils' + +class Dashboard extends Component { + + constructor(props) { + super(props) + this.state = {} + + // Bindings + this.logout = this.logout.bind(this) + } + + async componentDidMount() { + + const userSession = getSession() + + this.setState({ + session: userSession, + }) + } + + /** + * Log user out by clearing cookie and redirecting + */ + logout() { + deleteSession() + this.props.history.push(`/`) + } + + render() { + + return ( +
+
+ + { /* Navigation */ } + +
+
+ { this.state.session ? this.state.session.userEmail : '' } +
+
+ logout +
+
+ + { /* Content */ } + +
+ +
+ serverless-fullstack-application +
+ +
+ Welcome to your serverless fullstack dashboard... +
+ +
+ +
+
+ ) + } +} + +export default withRouter(Dashboard) \ No newline at end of file diff --git a/site/src/pages/Dashboard/Dashboard.module.css b/site/src/pages/Dashboard/Dashboard.module.css new file mode 100644 index 0000000..9bcde3f --- /dev/null +++ b/site/src/pages/Dashboard/Dashboard.module.css @@ -0,0 +1,92 @@ +.container { + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; + box-sizing: border-box; + overflow: hidden; + width: 100%; + height: 100vh; +} + +.containerInner { + display: flex; + flex-direction: column; + box-sizing: border-box; + background: #000; + width: 100%; + height: 100%; + padding: 0 0 30px 0; +} + +.navigationContainer { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-content: center; + box-sizing: border-box; + background: #000; + width: 100%; + height: 80px; + padding: 25px 45px 0 45px; +} + +.navigationContainer div { + margin-left: 40px; +} + +.contentContainer { + display: flex; + flex-direction: column; + align-content: center; + box-sizing: border-box; + background: #000; + width: 100%; + height: 100%; + padding: 7% 15px 45px 15px; +} + +.welcomeMessage { + display: flex; + flex-direction: column; + align-content: center; + text-align: center; + width: 100%; + height: auto; + font-size: 28px; +} + +.artwork { + display: flex; + flex-direction: row; + box-sizing: border-box; + align-content: center; + justify-content: center; + width: 100%; + height: 250px; +} + +.artwork img { + width: auto; + height: auto; + align-self: center; + max-height: 100%; + max-width: 500px; + user-select: none; +} + +/** + * Special + */ + +::-moz-selection { + background: #fd5750; + color: #ffffff; + opacity: 1; +} + +::selection { + background: #fd5750; + color: #ffffff; + opacity: 1; +} \ No newline at end of file diff --git a/site/src/pages/Home/Home.js b/site/src/pages/Home/Home.js new file mode 100644 index 0000000..a9675d7 --- /dev/null +++ b/site/src/pages/Home/Home.js @@ -0,0 +1,64 @@ +import React, { Component } from 'react' +import { + Link, + withRouter +} from 'react-router-dom' +import styles from './Home.module.css' + +class Home extends Component { + + constructor(props) { + super(props) + this.state = {} + } + + async componentDidMount() { } + + render() { + + return ( +
+
+ + { /* Hero Artwork */} + +
+ serverless-fullstack-application +
+
+ serverless-fullstack-application +
+ + { /* Hero Description */} + +
+ A serverless full-stack application built with AWS Lambda, AWS HTTP API, Express.js, React & AWS DynamoDB. +
+ + { /* Call To Action */} + +
+ + + + + + sign-in +
+
+
+ ) + } +} + +export default withRouter(Home) \ No newline at end of file diff --git a/site/src/pages/Home/Home.module.css b/site/src/pages/Home/Home.module.css new file mode 100644 index 0000000..f30d520 --- /dev/null +++ b/site/src/pages/Home/Home.module.css @@ -0,0 +1,105 @@ +.container { + display: flex; + flex-direction: column; + align-content: center; + justify-content: center; + box-sizing: border-box; + overflow: hidden; + width: 100%; + height: 100vh; +} + +.containerInner { + display: flex; + flex-direction: column; + box-sizing: border-box; + background: #000; + width: 100%; + height: 100%; + align-self: center; + max-width: 700px; + padding: 50px 15px 30px 15px; +} + +.heroArtwork { + display: flex; + flex-direction: row; + box-sizing: border-box; + align-content: center; + justify-content: center; + width: 100%; +} + +.heroArtwork img { + width: auto; + height: auto; + align-self: center; + max-height: 100%; + max-width: 500px; + user-select: none; +} + +.heroTitle { + display: flex; + flex-direction: row; + box-sizing: border-box; + align-content: center; + justify-content: center; + width: 100%; +} + +.heroTitle img { + width: auto; + height: auto; + align-self: center; + max-height: 100%; + max-width: 500px; + user-select: none; +} + +.heroDescription { + display: flex; + text-align: center; + font-weight: 400; + font-size: 24px; + line-height: 38px; + margin: 32px 0px 52px 0; +} + +.containerCta { + display: flex; + flex-direction: column; + justify-content: center; + align-content: center; + text-align: center; +} + +.containerCta button { + margin: 0px auto 20px auto; +} + +.containerCta .linkSignIn { + padding: 10px; + color: #fd5750; + opacity: 0.65; +} + +.containerCta .linkSignIn:hover { + opacity: 1; +} + +/** + * Special + */ + +::-moz-selection { + background: #fd5750; + color: #ffffff; + opacity: 1; +} + +::selection { + background: #fd5750; + color: #ffffff; + opacity: 1; +} \ No newline at end of file diff --git a/site/src/utils/api.js b/site/src/utils/api.js new file mode 100644 index 0000000..a27600a --- /dev/null +++ b/site/src/utils/api.js @@ -0,0 +1,71 @@ +/** + * Utils: Back-end + */ + +import config from '../config' + +/** + * Register a new user + */ +export const userRegister = async (email, password) => { + return await requestApi('/users/register', 'POST', { email, password }) +} + +/** + * Login a new user + */ +export const userLogin = async (email, password) => { + return await requestApi('/users/login', 'POST', { email, password }) +} + +/** + * userGet + */ +export const userGet = async (token) => { + return await requestApi('/user', 'POST', null, { + Authorization: `Bearer ${token}` + }) +} + +/** + * API request to call the backend + */ +export const requestApi = async ( + path = '', + method = 'GET', + data = null, + headers = {}) => { + + // Check if API URL has been set + if (!config?.domains?.api) { + throw new Error(`Error: Missing API Domain – Please add the API domain from your serverless Express.js back-end to this front-end application. You can do this in the "site" folder, in the "./config.js" file. Instructions are listed there and in the documentation.`) + } + + // Prepare URL + if (!path.startsWith('/')) { + path = `/${path}` + } + const url = `${config.domains.api}${path}` + + // Set headers + headers = Object.assign( + { 'Content-Type': 'application/json' }, + headers + ) + + // Default options are marked with * + const response = await fetch(url, { + method: method.toUpperCase(), + mode: 'cors', + cache: 'no-cache', + headers, + body: data ? JSON.stringify(data) : null + }) + + if (response.status < 200 || response.status >= 300) { + const error = await response.json() + throw new Error(error.error) + } + + return await response.json() +} \ No newline at end of file diff --git a/site/src/utils/helpers.js b/site/src/utils/helpers.js new file mode 100644 index 0000000..73c63ac --- /dev/null +++ b/site/src/utils/helpers.js @@ -0,0 +1,76 @@ +import Cookies from 'js-cookie' + +/** + * Format Org and Username correctly for the Serverless Platform backend + */ +export const formatOrgAndUsername = (name = '') => { + name = name.toString().toLowerCase().replace(/[^a-z\d-]+/gi, '-') + // Remove multiple instances of hyphens + name = name.replace(/-{2,}/g, '-') + if (name.length > 40) { + name = name.substring(0, 40) + } + return name +} + +/** + * Parse query parameters in a URL + * @param {*} searchString + */ +export const parseQueryParams = (searchString = null) => { + if (!searchString) { + return null + } + + // Clone string + let clonedParams = (' ' + searchString).slice(1) + + return clonedParams + .substr(1) + .split('&') + .filter((el) => el.length) + .map((el) => el.split('=')) + .reduce( + (accumulator, currentValue) => + Object.assign(accumulator, { + [decodeURIComponent(currentValue.shift())]: decodeURIComponent(currentValue.pop()) + }), + {} + ) +} + +/** + * Parse hash fragment parameters in a URL + */ +export const parseHashFragment = (hashString) => { + const hashData = {} + let hash = decodeURI(hashString) + hash = hash.split('&') + hash.forEach((val) => { + val = val.replace('#', '') + hashData[val.split('=')[0]] = val.split('=')[1] + }) + return hashData +} + +/** + * Save session in browser cookie + */ +export const saveSession = (userId, userEmail, userToken) => { + Cookies.set('serverless', { userId, userEmail, userToken }) +} + +/** + * Get session in browser cookie + */ +export const getSession = () => { + const data = Cookies.get('serverless') + return data ? JSON.parse(data) : null +} + +/** + * Delete session in browser cookie + */ +export const deleteSession = () => { + Cookies.remove('serverless') +} \ No newline at end of file diff --git a/site/src/utils/index.js b/site/src/utils/index.js new file mode 100644 index 0000000..5bfa17a --- /dev/null +++ b/site/src/utils/index.js @@ -0,0 +1,2 @@ +export * from './helpers' +export * from './api' \ No newline at end of file