Chapter2 authorization

src/components/Contact.js

@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+
+function Contact() {
+  const password = "swordfish";
+  const [authorized, setAuthorized] = useState(false);
+
+  function handleSubmit(e) {
+    const enteredPassword = e.target.querySelector(
+      'input[type="password"]'
+    ).value;
+    const auth = enteredPassword === password;
+    setAuthorized(auth);
+  }
+  const login = (
+    <form action="#" onSubmit={handleSubmit}>
+      <input type="password" placeholder="Password" />
+      <input type="submit" />
+    </form>
+  );
+  const contactInfo = (
+    <ul>
+      <li>client@example.com</li>
+      <li>555.555.5555</li>
+    </ul>
+  );
+
+  return (
+    <div id="authorization">
+      <h1>{authorized ? "Contact" : "Enter the Password"}</h1>
+      {authorized ? contactInfo : login}
+    </div>
+  );
+}
+
+export default Contact;

src/css/styles.css

@@ -0,0 +1,119 @@
+html, body {
+	margin: 0;
+	height: 100%;
+}
+
+body {
+	background-color: #ffffff;
+	font-family: Helvetica, Arial, sans-serif;
+  text-align: center;
+}
+
+#app {
+	position: relative;
+	height: 100%;
+	width: 100%;
+	padding-top: 10px;
+}
+
+#app div div {
+	height: 100%;
+}
+
+#app div div div {
+	position: relative;
+	height: auto;
+}
+
+h1, h2 {
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+ul {
+	list-style-type: none;
+	padding: 0;
+}
+
+label {
+	display: block;
+	margin: 20px;
+	font-size: 30px;
+	font-weight: bold;
+}
+
+nav a {
+	margin:12px;
+	text-transform: uppercase;
+	font-size: 10px;
+}
+
+button {
+	-webkit-transition-duration: 0.1s; /* Safari */
+	transition-duration: 0.1s;
+	background-color: #F4595B;
+	border-radius: 8px;
+	border-bottom: 4px solid #C24648;
+	color: white;
+	padding: 15px 32px;
+	text-align: center;
+	text-decoration: none;
+	display: inline-block;
+	font-size: 16px;
+	font-family: 'Oxygen', sans-serif;
+	letter-spacing: 2px;
+}
+
+button:hover {
+  background-color: #FF7375;
+  border: none;
+  border-radius: 8px;
+  border-bottom: 4px solid #C24648;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  font-family: 'Oxygen', sans-serif;
+  letter-spacing: 2px;
+}
+
+button:active {
+  background-color: #C24648;
+  border: none;
+  border-radius: 8px;
+  border-bottom: 4px solid #C24648;
+  color: #CCC;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  font-family: 'Oxygen', sans-serif;
+  letter-spacing: 2px;
+}
+
+#authorization {
+	max-width: 600px;
+	width: 70%;
+	margin: 100px auto;
+	border: 1px solid black;
+}
+
+input {
+	display: block;
+	margin: 10px auto;
+	padding: 5px;
+	font-size: 16px;
+	border-radius: 5px;
+}
+
+button, input[type="submit"] {
+	margin: 20px;
+	padding: 7px 35px;
+	border-radius: 10px;
+	font-size: 16px;
+	cursor: pointer;
+	display: inline-block;
+}

src/index.js

@@ -1,13 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
+import './css/styles.css';
+import Contact from './components/Contact';
+
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
-    <App />
+  <React.StrictMode>    
+    <Contact />
   </React.StrictMode>
 );