polluterofminds/login.js

## login.js
import { useState } from "react";
import Head from "next/head";
import Link from "next/link";
import { login } from "./actions/auth";

const Login = () => {
  const [email, setEmail] = useState("");
  const [errorMessage, setError] = useState("");
  const [successMessage, setSuccessMessage] = useState("");

  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      await login(email);
      setSuccessMessage("Check your email to continue!");
      setEmail("");
    } catch (error) {
      setError(error.message);
    }
  };
  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}>
        <h1>Log In</h1>
        <p>A login link will be emailed to you.</p>
        <div style={styles.flexRow}>
          <form onSubmit={handleLogin}>
            <input
              style={styles.input}
              onChange={(e) => setEmail(e.target.value)}
              value={email}
              type="email"
              placeholder="Type your email"
            />
            <button type="submit" style={styles.btn}>
              Log In
            </button>
          </form>
        </div>
        <div>
          <p style={styles.error}>{errorMessage}</p>
          <p style={styles.success}>{successMessage}</p>
        </div>
      </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 Login;
	import { useState } from "react";
	import Head from "next/head";
	import Link from "next/link";
	import { login } from "./actions/auth";

	const Login = () => {
	const [email, setEmail] = useState("");
	const [errorMessage, setError] = useState("");
	const [successMessage, setSuccessMessage] = useState("");

	const handleLogin = async (e) => {
	e.preventDefault();
	try {
	await login(email);
	setSuccessMessage("Check your email to continue!");
	setEmail("");
	} catch (error) {
	setError(error.message);
	}
	};
	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}>
	<h1>Log In</h1>
	<p>A login link will be emailed to you.</p>
	<div style={styles.flexRow}>
	<form onSubmit={handleLogin}>
	<input
	style={styles.input}
	onChange={(e) => setEmail(e.target.value)}
	value={email}
	type="email"
	placeholder="Type your email"
	/>
	<button type="submit" style={styles.btn}>
	Log In
	</button>
	</form>
	</div>
	<div>
	<p style={styles.error}>{errorMessage}</p>
	<p style={styles.success}>{successMessage}</p>
	</div>
	</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 Login;