polluterofminds/verify.js

## verify.js
import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import { validateToken } from "./actions/auth";
import Head from "next/head";
import Link from "next/link";

const Verify = () => {
  const [error, setError] = useState(false);
  const router = useRouter();
  useEffect(() => {
    if (router.query && router.query.token) {
      decodeToken(router.query.token);
    }
  }, [router]);

  const decodeToken = async (token) => {
    try {
      const validToken = await validateToken(token);
      if (validToken) {
        router.push("/");
      }
    } catch (error) {
      setError(true);
    }
  };

  return (
    <div>
      <Head>
        <title>Pinnie For Your Thoughts</title>
        <link rel="icon" href="/pinnie.svg" />
      </Head>
      <div style={styles.nav}>
        <Link href="/">{"< Back"}</Link>
      </div>
      <div style={styles.flex}>
        {error ? (
          <div>
            <h1>Trouble validating your token</h1>
          </div>
        ) : (
          <h1>Logging you in...</h1>
        )}
      </div>
    </div>
  );
};

const styles = {
  flex: {
    height: "100vh",
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    alignItems: "center",
  },
  input: {
    height: 50,
    width: 250,
    borderTopLeftRadius: 5,
    borderBottomLeftRadius: 5,
    border: "1px solid rgb(255, 224, 0)",
    borderRight: "none",
    padding: 10,
  },
  btn: {
    borderTopLeftRadius: 0,
    borderBottomLeftRadius: 0,
    borderTopRightRadius: 5,
    borderBottomRightRadius: 5,
    outline: "none",
    border: "none",
    background: "rgb(255, 224, 0)",
    width: 150,
    cursor: "pointer",
    height: "100%",
  },
  flexRow: {
    display: "flex",
    flexDirection: "row",
  },
  nav: {
    position: "fixed",
    width: "100%",
    top: 0,
    left: 0,
    display: "flex",
    flexDirection: "row",
    justifyContent: "flex-start",
    paddingLeft: 15,
    paddingTop: 20
  },
  error: {
    color: "red",
  },
  success: {
    color: "green",
  },
};

export default Verify;
	import { useEffect, useState } from "react";
	import { useRouter } from "next/router";
	import { validateToken } from "./actions/auth";
	import Head from "next/head";
	import Link from "next/link";

	const Verify = () => {
	const [error, setError] = useState(false);
	const router = useRouter();
	useEffect(() => {
	if (router.query && router.query.token) {
	decodeToken(router.query.token);
	}
	}, [router]);

	const decodeToken = async (token) => {
	try {
	const validToken = await validateToken(token);
	if (validToken) {
	router.push("/");
	}
	} catch (error) {
	setError(true);
	}
	};

	return (
	<div>
	<Head>
	<title>Pinnie For Your Thoughts</title>
	<link rel="icon" href="/pinnie.svg" />
	</Head>
	<div style={styles.nav}>
	<Link href="/">{"< Back"}</Link>
	</div>
	<div style={styles.flex}>
	{error ? (
	<div>
	<h1>Trouble validating your token</h1>
	</div>
	) : (
	<h1>Logging you in...</h1>
	)}
	</div>
	</div>
	);
	};

	const styles = {
	flex: {
	height: "100vh",
	display: "flex",
	flexDirection: "column",
	justifyContent: "center",
	alignItems: "center",
	},
	input: {
	height: 50,
	width: 250,
	borderTopLeftRadius: 5,
	borderBottomLeftRadius: 5,
	border: "1px solid rgb(255, 224, 0)",
	borderRight: "none",
	padding: 10,
	},
	btn: {
	borderTopLeftRadius: 0,
	borderBottomLeftRadius: 0,
	borderTopRightRadius: 5,
	borderBottomRightRadius: 5,
	outline: "none",
	border: "none",
	background: "rgb(255, 224, 0)",
	width: 150,
	cursor: "pointer",
	height: "100%",
	},
	flexRow: {
	display: "flex",
	flexDirection: "row",
	},
	nav: {
	position: "fixed",
	width: "100%",
	top: 0,
	left: 0,
	display: "flex",
	flexDirection: "row",
	justifyContent: "flex-start",
	paddingLeft: 15,
	paddingTop: 20
	},
	error: {
	color: "red",
	},
	success: {
	color: "green",
	},
	};

	export default Verify;