2 - Auth Page

index.js → context/index.js

@@ -2,7 +2,7 @@ import React, { useState, createContext } from "react";
 
 export const Context = createContext();
 
-export const ContextProvider = () => {
+export const ContextProvider = (props) => {
   const [username, setUsername] = useState("");
   const [secret, setSecret] = useState("");
 

package.json

@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "axios": "^0.23.0",
     "next": "^11.0.0",
     "react": "17.0.2",
     "react-dom": "17.0.2"

pages/index.js

@@ -1,5 +1,63 @@
-import React from "react";
+import React, { useContext } from "react";
 
-export default function Auth() {
-  return <div className="background">auth</div>;
-}
+import { Context } from "../context";
+
+import { useRouter } from "next/router";
+
+import axios from "axios";
+
+const Auth = () => {
+  const { username, setUsername, secret, setSecret } = useContext(Context);
+
+  const router = useRouter();
+
+  function onSubmit(e) {
+    e.preventDefault();
+
+    if (username.length === 1 || secret.length === 1) return;
+
+    axios
+      .put(
+        "https://api.chatengine.io/users/",
+        { username, secret },
+        { headers: { "Private-Key": "c2f82e63-9978-4c5c-9c17-8b0dec845dc6" } }
+      )
+
+      .then((r) => {
+        router.push("/chats");
+      });
+  }
+
+  return (
+    <div className="background">
+      <div className="auth-container">
+        <form className="auth-form" onSubmit={(e) => onSubmit(e)}>
+          <div className="auth-title">NextJS Chat</div>
+
+          <div className="input-container">
+            <input
+              placeholder="Email"
+              className="text-input"
+              onChange={(e) => setUsername(e.target.value)}
+            />
+          </div>
+
+          <div className="input-container">
+            <input
+              type="password"
+              placeholder="Password"
+              className="text-input"
+              onChange={(e) => setSecret(e.target.value)}
+            />
+          </div>
+
+          <button type="submit" className="submit-button">
+            Login / Sign Up
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Auth;