From 99fd237364ceb1ec358cba17444f7422b1a6f9b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jorge=20Cort=C3=A9s?= <jorge.cortes@gmail.com>
Date: Fri, 19 Apr 2024 12:31:38 -0700
Subject: [PATCH] Added login and signup components

---
 src/components/login-view/login-view.jsx   | 65 ++++++++++++++++
 src/components/main-view/main-view.jsx     | 37 +++++++++-
 src/components/signup-view/signup-view.jsx | 86 ++++++++++++++++++++++
 3 files changed, 186 insertions(+), 2 deletions(-)
 create mode 100644 src/components/login-view/login-view.jsx
 create mode 100644 src/components/signup-view/signup-view.jsx

diff --git a/src/components/login-view/login-view.jsx b/src/components/login-view/login-view.jsx
new file mode 100644
index 0000000..cffaddf
--- /dev/null
+++ b/src/components/login-view/login-view.jsx
@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+
+export const LoginView = ({ onLoggedIn }) => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleSubmit = (event) => {
+    // this prevents the default behavior of the form which is to
+    // reload the entire page
+    event.preventDefault();
+
+    const data = {
+      Email: email,
+      Password: password
+    };
+
+    fetch("https://cf-2-movie-api.onrender.com/login", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(data)
+      })
+      .then(response => response.json())
+      .then(data => {
+        // Please review the response format of the API here
+        // https://cf-2-movie-api.onrender.com/docs/#/Auth/post_login
+        if (data.success) {
+          const { user, token } = data.data;
+          localStorage.setItem("user", JSON.stringify(user));
+          localStorage.setItem("token", token);
+          onLoggedIn(user, token);
+        } else {
+          alert(`Login failed: ${data.error.message}`);
+        }
+      })
+      .catch(error => {
+        alert("Something went wrong");
+      });
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        Email:
+        <input
+          type="text"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+        />
+      </label>
+      <label>
+        Password:
+        <input
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          required
+        />
+      </label>
+      <button type="submit">Submit</button>
+    </form>
+  );
+};
diff --git a/src/components/main-view/main-view.jsx b/src/components/main-view/main-view.jsx
index acc443a..9a5aa0c 100644
--- a/src/components/main-view/main-view.jsx
+++ b/src/components/main-view/main-view.jsx
@@ -1,13 +1,25 @@
 import { useState, useEffect } from "react";
 import { MovieCard } from "../movie-card/movie-card";
 import { MovieView } from "../movie-view/movie-view";
+import { LoginView } from "../login-view/login-view";
+import { SignupView } from "../signup-view/signup-view";
 
 export const MainView = () => {
+  const storedUser = JSON.parse(localStorage.getItem("user"));
+  const storedToken = localStorage.getItem("token");
+  const [user, setUser] = useState(storedUser? storedUser : null);
+  const [token, setToken] = useState(storedToken? storedToken : null);
   const [movies, setMovies] = useState([]);
   const [selectedMovie, setSelectedMovie] = useState(null);
 
   useEffect(() => {
-    fetch("https://cf-2-movie-api.onrender.com/movies")
+    if (!token) {
+      return;
+    }
+
+    fetch("https://cf-2-movie-api.onrender.com/movies", {
+      headers: { Authorization: `Bearer ${token}` },
+    })
       .then((response) => response.json())
       .then(({ data }) => {
         // Please review the response format of the API here
@@ -30,7 +42,20 @@ export const MainView = () => {
 
         setMovies(moviesFromApi);
       });
-  }, []);
+  }, [token]);
+
+  if (!user) {
+    return (
+      <>
+        <LoginView onLoggedIn={(user, token) => {
+          setUser(user);
+          setToken(token);
+        }} />
+        or
+        <SignupView />
+      </>
+    );
+  }
 
   if (selectedMovie) {
     // Bonus Task 2: Similar Movies
@@ -73,6 +98,14 @@ export const MainView = () => {
           }}
         />
       ))}
+      <button
+        onClick={
+          () => {
+            setUser(null);
+            setToken(null);
+            localStorage.clear();
+          }}
+        >Logout</button>
     </div>
   );
 };
diff --git a/src/components/signup-view/signup-view.jsx b/src/components/signup-view/signup-view.jsx
new file mode 100644
index 0000000..aacbf0a
--- /dev/null
+++ b/src/components/signup-view/signup-view.jsx
@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+
+export const SignupView = () => {
+  const [name, setName] = useState("");
+  const [password, setPassword] = useState("");
+  const [email, setEmail] = useState("");
+  const [birthday, setBirthday] = useState("");
+
+  const handleSubmit = (event) => {
+    // this prevents the default behavior of the form which is to
+    // reload the entire page
+    event.preventDefault();
+
+    const data = {
+      Email: email,
+      Password: password,
+      Name: name,
+      Birthday: birthday
+    };
+
+    fetch("https://cf-2-movie-api.onrender.com/users", {
+        method: "POST",
+        body: JSON.stringify(data),
+        headers: {
+          "Content-Type": "application/json"
+        }
+      })
+      .then(response => response.json())
+      .then(data => {
+        // Please review the response format of the API here
+        // https://cf-2-movie-api.onrender.com/docs/#/User/post_users
+        if (data.success) {
+          alert("Signup successful");
+          window.location.reload();
+        } else {
+          alert(`Signup failed: ${data.error.message}`);
+        }
+      })
+      .catch(error => {
+        alert("Something went wrong");
+      });
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <label>
+        Email:
+        <input
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+        />
+      </label>
+      <label>
+        Password:
+        <input
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          required
+        />
+      </label>
+      <label>
+        Name:
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          required
+          minLength="3"
+        />
+      </label>
+      <label>
+        Birthday:
+        <input
+          type="date"
+          value={birthday}
+          onChange={(e) => setBirthday(e.target.value)}
+          required
+        />
+      </label>
+      <button type="submit">Submit</button>
+    </form>
+  );
+};