Chat

.gitignore

@@ -1,4 +1,4 @@
 node_modules/
-
 ##MacOs
-.DS_Store
+.DS_Store
+.icloud

itchat/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

itchat/Otros/AuthContext.js

@@ -0,0 +1,36 @@
+import React, {useState} from 'react';
+import fakeAuthProvider from '../services/auth'
+import useLogin from '../hooks/useLogin';
+
+const AuthContext = React.createContext({});
+
+export function useAuth() {
+    return React.useContext(AuthContext);
+  }
+
+export default function AuthProvider({ children }) {
+    const [jwt, setJWT] = useState(
+        () => window.localStorage.getItem('jwt')
+      )
+      const [nickname, setNickname] = useState(
+        () => window.localStorage.getItem('nickname')
+      )
+
+  let signin = (newUser, callback) => {
+    return fakeAuthProvider.signin(() => {
+      setJWT(newUser);
+      callback();
+    });
+  };
+
+  let signout = (callback) => {
+    return fakeAuthProvider.signout(() => {
+      setJWT(null);
+      callback();
+    });
+  };
+
+  let value = { jwt, nickname, setNickname, setJWT, signin, signout};
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}

itchat/Otros/AuthStatus.js

@@ -0,0 +1,22 @@
+
+export default function AuthStatus() {
+    let auth = useAuth();
+    let navigate = useNavigate();
+
+    if (!auth.user) {
+      return <p>You are not logged in.</p>;
+    }
+
+    return (
+      <p>
+        Welcome {auth.user}!{" "}
+        <button
+          onClick={() => {
+            auth.signout(() => navigate("/"));
+          }}
+        >
+          Sign out
+        </button>
+      </p>
+    );
+  }

itchat/Otros/Login.js

@@ -0,0 +1,51 @@
+import React, { useEffect, useRef} from "react";
+import {Navigate, useLocation, useNavigate} from 'react-router-dom';
+import useLogin from '../hooks/useLogin'
+import '../styles/Login_Style.css'
+
+export default function Login({onLogin}) {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const {isLoginLoading, hasLoginError, login, isLogged, } = useLogin();
+  const userRef = useRef(null);
+  const passRef = useRef(null);
+  let from =  "/";
+  useEffect(() => {
+    if (isLogged) {
+      navigate('/')
+      onLogin && onLogin()
+    }
+  }, [isLogged, navigate, onLogin])
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const userValue = userRef.current.value
+    const passValue = passRef.current.value
+    login(userValue, passValue)
+
+  };
+
+  return (
+    <>
+      {isLoginLoading && <strong>Checking credentials...</strong>}
+      {!isLoginLoading &&
+        <form className='form' onSubmit={handleSubmit}>
+          <label>
+            email
+            <input className="login__input" placeholder="email" ref={userRef}/>
+          </label>
+
+          <label>
+            password
+            <input className="login__input" type="password" placeholder="password" ref={passRef}/>
+          </label>
+
+          <button className='login__button'>Login</button>
+        </form>
+      }
+      {
+        hasLoginError && <strong>Credentials are invalid</strong>
+      }
+    </>
+  );
+}