Merge pull request #9 from alura-challenges/aula05

Final aula 05

package.json

@@ -8,7 +8,9 @@
   },
   "dependencies": {
     "datocms-client": "^3.4.10",
+    "jsonwebtoken": "^8.5.1",
     "next": "latest",
+    "nookies": "^2.5.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-is": "^17.0.2",

pages/index.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import nookies from 'nookies';
+import jwt from 'jsonwebtoken';
 import MainGrid from '../src/components/MainGrid'
 import Box from '../src/components/Box'
 import { AlurakutMenu, AlurakutProfileSidebarMenuDefault, OrkutNostalgicIconSet } from '../src/lib/AlurakutCommons';
@@ -44,8 +46,8 @@ function ProfileRelationsBox(propriedades) {
   )
 }
 
-export default function Home() {
-  const usuarioAleatorio = 'omariosouto';
+export default function Home(props) {
+  const usuarioAleatorio = props.githubUser;
   const [comunidades, setComunidades] = React.useState([]);
   // const comunidades = comunidades[0];
   // const alteradorDeComunidades/setComunidades = comunidades[1];
@@ -216,3 +218,31 @@ export default function Home() {
     </>
   )
 }
+
+
+export async function getServerSideProps(context) {
+  const cookies = nookies.get(context)
+  const token = cookies.USER_TOKEN;
+  const { isAuthenticated } = await fetch('https://alurakut.vercel.app/api/auth', {
+    headers: {
+        Authorization: token
+      }
+  })
+  .then((resposta) => resposta.json())
+
+  if(!isAuthenticated) {
+    return {
+      redirect: {
+        destination: '/login',
+        permanent: false,
+      }
+    }
+  }
+
+  const { githubUser } = jwt.decode(token);
+  return {
+    props: {
+      githubUser
+    }, // will be passed to the page component as props
+  }
+}

pages/login.js

@@ -0,0 +1,82 @@
+import React from 'react';
+// Hook do NextJS
+import { useRouter } from 'next/router';
+import nookies from 'nookies';
+
+export default function LoginScreen() {
+  const router = useRouter();
+  const [githubUser, setGithubUser] = React.useState('omariosouto');
+
+  return (
+    <main style={{ display: 'flex', flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+      <div className="loginScreen">
+        <section className="logoArea">
+          <img src="https://alurakut.vercel.app/logo.svg" />
+
+          <p><strong>Conecte-se</strong> aos seus amigos e familiares usando recados e mensagens instantâneas</p>
+          <p><strong>Conheça</strong> novas pessoas através de amigos de seus amigos e comunidades</p>
+          <p><strong>Compartilhe</strong> seus vídeos, fotos e paixões em um só lugar</p>
+        </section>
+
+        <section className="formArea">
+          <form className="box" onSubmit={(infosDoEvento) => {
+                infosDoEvento.preventDefault();
+                // alert('Alguém clicou no botão!')
+                console.log('Usuário: ', githubUser)
+                fetch('https://alurakut.vercel.app/api/login', {
+                    method: 'POST',
+                    headers: {
+                       'Content-Type': 'application/json'  
+                    },
+                    body: JSON.stringify({ githubUser: githubUser })
+                })
+                .then(async (respostaDoServer) => {
+                    const dadosDaResposta = await respostaDoServer.json()
+                    const token = dadosDaResposta.token;
+                    nookies.set(null, 'USER_TOKEN', token, {
+                        path: '/',
+                        maxAge: 86400 * 7 
+                    })
+                    router.push('/')
+                })
+          }}>
+            <p>
+              Acesse agora mesmo com seu usuário do <strong>GitHub</strong>!
+          </p>
+            <input
+                placeholder="Usuário"
+                value={githubUser}
+                onChange={(evento) => {
+                    setGithubUser(evento.target.value)
+                }}
+            />
+            {githubUser.length === 0
+                ? 'Preencha o campo'
+                : ''
+            }
+            <button type="submit">
+              Login
+            </button>
+          </form>
+
+          <footer className="box">
+            <p>
+              Ainda não é membro? <br />
+              <a href="/login">
+                <strong>
+                  ENTRAR JÁ
+              </strong>
+              </a>
+            </p>
+          </footer>
+        </section>
+
+        <footer className="footerArea">
+          <p>
+            © 2021 alura.com.br - <a href="/">Sobre o Orkut.br</a> - <a href="/">Centro de segurança</a> - <a href="/">Privacidade</a> - <a href="/">Termos</a> - <a href="/">Contato</a>
+          </p>
+        </footer>
+      </div>
+    </main>
+  )
+}