make login and signup routes

heytulsiprasad · Sep 5, 2020 · a5fafc2 · a5fafc2
1 parent b47f7c4
commit a5fafc2
Show file tree

Hide file tree

Showing 38 changed files with 91,777 additions and 538 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+  "editor.formatOnSave": true,
+  "editor.formatOnType": true,
+  "editor.formatOnPaste": true
+}
diff --git a/package.json b/package.json
@@ -1,34 +1,45 @@
 {
-  "name": "authy-frontend",
-  "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"
-  },
-  "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"
-    ]
-  }
+	"name": "authy-frontend",
+	"version": "0.1.0",
+	"private": true,
+	"dependencies": {
+		"@fullhuman/postcss-purgecss": "^2.3.0",
+		"autoprefixer": "^9.8.6",
+		"axios": "^0.20.0",
+		"npm-run-all": "^4.1.5",
+		"postcss-cli": "^7.1.2",
+		"react": "^16.13.1",
+		"react-dom": "^16.13.1",
+		"react-router-dom": "^5.2.0",
+		"react-scripts": "3.4.3",
+		"tailwindcss": "^1.7.6"
+	},
+	"scripts": {
+		"build:tailwind": "postcss src/tailwind.css -o src/tailwind.generated.css",
+		"watch:tailwind": "postcss -w src/tailwind.css -o src/tailwind.generated.css",
+		"start": "react-scripts start",
+		"dev": "run-p watch:tailwind start",
+		"prebuild": "npm run build:tailwind",
+		"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"
+		]
+	},
+	"devDependencies": {
+		"chokidar-cli": "^2.1.0"
+	}
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,20 @@
+// postcss.config.js
+const purgecss = require("@fullhuman/postcss-purgecss")({
+	// Specify the paths to all of the template files in your project
+	content: [
+		"./public/**/*.html",
+		"./src/**/*.js",
+		// etc.
+	],
+
+	// Include any special characters you're using in this regular expression
+	defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
+});
+
+module.exports = {
+	plugins: [
+		require("tailwindcss"),
+		require("autoprefixer"),
+		...(process.env.NODE_ENV === "production" ? [purgecss] : []),
+	],
+};
diff --git a/public/index.html b/public/index.html
@@ -1,21 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +22,14 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
+  <title>React App</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +39,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,16 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+html {
+  font-size: 100%;
 }
 
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+body {
+  font-family: 'Lato', sans-serif;
+  font-weight: 400;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,26 +1,22 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+
+import "./App.css";
+import "./tailwind.generated.css";
+import SignupContainer from "./components/SignupContainer/SingupContainer";
+import LoginContainer from "./components/LoginContainer/LoginContainer";
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+	return (
+		<React.Fragment>
+			<Router>
+				<Switch>
+					<Route path="/signup" component={SignupContainer} />
+					<Route path="/login" component={LoginContainer} />
+				</Switch>
+			</Router>
+		</React.Fragment>
+	);
 }
 
 export default App;
diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/assets/logo-talk.png b/src/assets/logo-talk.png
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/svg/Facebook.jsx b/src/assets/svg/Facebook.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+function Icon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="43"
+      height="43"
+      fill="none"
+      viewBox="0 0 43 43"
+    >
+      <circle cx="21.809" cy="21.598" r="20.5" stroke="#828282"></circle>
+      <g clip-path="url(#clip0)">
+        <path
+          fill="#828282"
+          d="M28.796 13.442H16.07c-1.454 0-2.637 1.154-2.637 2.572V28.43c0 1.419 1.183 2.573 2.637 2.573h5.308v-6.208h-2.11v-3.087h2.11v-2.092c0-1.703 1.42-3.087 3.164-3.087h3.2v3.087h-3.2v2.092h3.2l-.528 3.087h-2.672v6.208h4.254c1.454 0 2.637-1.154 2.637-2.573V16.014c0-1.418-1.183-2.572-2.637-2.572z"
+        ></path>
+      </g>
+      <defs>
+        <clipPath id="clip0">
+          <path
+            fill="#fff"
+            d="M0 0H18V17.561H0z"
+            transform="translate(13.433 13.442)"
+          ></path>
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export default Icon;
diff --git a/src/assets/svg/GitHub.jsx b/src/assets/svg/GitHub.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+function Icon() {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="43"
+			height="43"
+			fill="none"
+			viewBox="0 0 43 43"
+		>
+			<circle cx="21.661" cy="21.598" r="20.5" stroke="#828282"></circle>
+			<g clip-path="url(#clip0)">
+				<path
+					fill="#828282"
+					d="M22.285 13.442c-4.943 0-9 4.057-9 9 0 4.218 2.96 8.05 6.891 9v-2.978a2.2 2.2 0 01-1.144-.029c-.532-.157-.964-.511-1.285-1.051-.205-.345-.567-.72-.945-.692l-.093-1.05c.818-.07 1.525.498 1.945 1.203.186.314.401.498.677.579.266.078.552.04.885-.077.083-.667.389-.917.62-1.268-2.344-.35-3.279-1.594-3.65-2.576-.49-1.303-.227-2.931.642-3.96.017-.02.047-.073.035-.11-.398-1.203.088-2.199.105-2.304.46.136.535-.137 1.997.752l.253.151c.106.064.073.028.179.02a7.636 7.636 0 011.888-.266c.64.008 1.28.1 1.915.272l.082.009c-.007-.002.022-.006.072-.035 1.827-1.107 1.761-.745 2.251-.904.018.105.497 1.117.103 2.305-.053.164 1.584 1.663.676 4.07-.37.982-1.305 2.226-3.649 2.575.3.459.662.702.66 1.647v3.717c3.93-.95 6.89-4.782 6.89-9 0-4.943-4.056-9-9-9z"
+				></path>
+			</g>
+			<defs>
+				<clipPath id="clip0">
+					<path
+						fill="#fff"
+						d="M0 0H18V18H0z"
+						transform="translate(13.286 13.442)"
+					></path>
+				</clipPath>
+			</defs>
+		</svg>
+	);
+}
+
+export default Icon;
diff --git a/src/assets/svg/Google.jsx b/src/assets/svg/Google.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+function Icon() {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="43"
+			height="43"
+			fill="none"
+			viewBox="0 0 43 43"
+		>
+			<circle cx="21.883" cy="21.598" r="20.5" stroke="#828282"></circle>
+			<path
+				fill="#828282"
+				d="M21.91 15.888c1.885 0 3.59.968 4.568 2.3l2.316-2.332c-1.385-1.802-4.052-3.23-6.884-3.23-4.96 0-9.027 4.013-9.027 8.972 0 4.96 4.068 8.973 9.027 8.973a8.96 8.96 0 008.63-6.526 8.7 8.7 0 00.343-2.447v-.815h-8.157v3.262h4.323a5.676 5.676 0 01-5.139 3.263c-3.149 0-5.764-2.561-5.764-5.71 0-3.148 2.615-5.71 5.764-5.71z"
+			></path>
+		</svg>
+	);
+}
+
+export default Icon;
diff --git a/src/assets/svg/Twitter.jsx b/src/assets/svg/Twitter.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+function Icon() {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="43"
+			height="43"
+			fill="none"
+			viewBox="0 0 43 43"
+		>
+			<circle cx="21.735" cy="21.598" r="20.5" stroke="#828282"></circle>
+			<g clip-path="url(#clip0)">
+				<path
+					fill="#828282"
+					d="M19.45 29.826c-.778 0-1.58-.063-2.385-.19-1.42-.222-2.857-.965-3.263-1.187l-1.067-.583 1.155-.38c1.262-.415 2.03-.672 2.98-1.076-.952-.46-1.685-1.29-2.038-2.361l-.269-.816.22.034a4.006 4.006 0 01-.501-.619c-.455-.69-.696-1.534-.644-2.257l.05-.712.426.165c-.18-.34-.31-.702-.386-1.082a4.118 4.118 0 01.439-2.772l.371-.682.497.597c1.57 1.886 3.558 3.005 5.919 3.332a3.54 3.54 0 01.215-1.88 3.522 3.522 0 011.431-1.642 4.3 4.3 0 012.496-.613 3.985 3.985 0 012.45 1.01c.329-.085.57-.176.897-.299.197-.074.42-.158.699-.254l1.028-.354-.67 1.915.137-.01 1.098-.049-.649.887-.06.085c-.052.08-.117.177-1.008 1.367a1.678 1.678 0 00-.314 1.092c.08 1.546-.11 2.945-.564 4.157a7.356 7.356 0 01-1.974 2.925c-1.09.982-2.482 1.655-4.134 1.998-.81.17-1.68.254-2.582.254z"
+				></path>
+			</g>
+			<defs>
+				<clipPath id="clip0">
+					<path
+						fill="#fff"
+						d="M0 0H18V18H0z"
+						transform="translate(12.735 13.442)"
+					></path>
+				</clipPath>
+			</defs>
+		</svg>
+	);
+}
+
+export default Icon;