Fixed spelling issues, button oveflow, link text beeing too long, and…

… added error handling for auth error

components/ErrorMessage/ErrorMessage.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect } from 'react';
+
+import { useRouter } from 'next/router';
+import styled from 'styled-components';
+
+interface Props {
+	error: string | string[] | undefined;
+}
+
+// Thanks to https://simplernerd.com/next-auth-custom-error-page/
+// For the below error messages for next-auth I have modified the OAuthAccountNotLinked message
+type ErrorTypes = {
+	[key: string]: string;
+};
+
+const possibleErrors: ErrorTypes = {
+	Signin: 'Try signing with a different account.',
+	OAuthSignin: 'Try signing with a different account.',
+	OAuthCallback: 'Try signing with a different account.',
+	OAuthCreateAccount: 'Try signing with a different account.',
+	EmailCreateAccount: 'Try signing with a different account.',
+	Callback: 'Try signing with a different account.',
+	OAuthAccountNotLinked:
+		'Looks like we have seen you before! Sign in using the same method you used this email to sign in with before. You are likely trying to sign using a email that already has a magic link sent to it :)',
+	EmailSignin: 'Check your email address.',
+	CredentialsSignin:
+		'Sign in failed. Check the details you provided are correct.',
+	default: 'Unable to sign in.',
+};
+
+export const ErrorMessage: React.FC<Props> = ({ error }) => {
+	const router = useRouter();
+
+	useEffect(() => {
+		return () => {
+			router.push(
+				{
+					pathname: '/',
+					query: null,
+				},
+				undefined,
+				{ shallow: true }
+			);
+		};
+	}, [router]);
+
+	const errorMessage =
+		error && (possibleErrors[error as string] ?? possibleErrors.default);
+
+	return <Wrapper>{errorMessage}</Wrapper>;
+};
+
+const Wrapper = styled.div`
+	width: 100%;
+	padding: 6px;
+	color: ${(p) => p.theme.COLORS.white};
+	background-color: ${(p) => p.theme.COLORS.warning};
+	border-radius: 3px;
+	margin: 16px 0px;
+	font-size: ${14 / 16}rem;
+`;

components/LoginModal/LoginModal.tsx

@@ -11,15 +11,18 @@ import gitHubIconSrc from '../../public/assets/icons/icon-github.svg';
 import googleIconSrc from '../../public/assets/icons/icon-google.svg';
 import { inputTextStyles } from '../../styles/typography';
 import { AuthButton } from '../AuthButton/AuthButton';
+import { ErrorMessage } from '../ErrorMessage/ErrorMessage';
 
 interface ModalProps {
 	showDialog: boolean;
 	setShowDialog: Dispatch<SetStateAction<boolean>>;
+	error: string | string[] | undefined;
 }
 
 export const LoginModal: React.FC<ModalProps> = ({
 	showDialog,
 	setShowDialog,
+	error,
 }) => {
 	const close = () => setShowDialog(false);
 
@@ -36,6 +39,7 @@ export const LoginModal: React.FC<ModalProps> = ({
 	return (
 		<Wrapper isOpen={showDialog} onDismiss={close}>
 			<StyledDialog aria-label="Login modal">
+				{error && <Error error={error} />}
 				<CloseButton onClick={close}>
 					<VisuallyHidden>Close Modal </VisuallyHidden>
 					<Image
@@ -69,11 +73,9 @@ export const LoginModal: React.FC<ModalProps> = ({
 						onClick={() => signIn('google')}
 						imgSrc={googleIconSrc}
 						altText="Gmail's social media icon">
-						Sigin in with Google
+						Sign in with Google
 					</AuthButton>
-					{/*<AuthButton onClick={() => signIn("github")} imgSrc={twitterIconSrc} altText="Twitter's social media icon">Sigin in with Twitter</AuthButton> */}
 				</ButtonContainer>
-				{/* <button onClick={() => signIn("github")}>Sign in with Email</button> */}
 			</StyledDialog>
 		</Wrapper>
 	);
@@ -178,3 +180,7 @@ const StyledLabel = styled.label`
 	font-size: ${14 / 16}rem;
 	color: ${(p) => p.theme.COLORS.dark[400]};
 `;
+
+const Error = styled(ErrorMessage)`
+	margin-bottom: 16px;
+`;

components/ShortenedLink/ShortenedLink.tsx

@@ -60,8 +60,6 @@ const Wrapper = styled.li`
 	@media ${(p) => p.theme.QUERIES.tabletAndUp} {
 		flex-flow: row;
 		align-items: center;
-		/* padding-left: 32px;
-		padding-right: 24px; */
 		padding: 0;
 	}
 `;
@@ -80,9 +78,15 @@ const InnerWrapper = styled.div`
 
 const LinkToShorten = styled.a`
 	${linkTextStyles};
+
+	max-width: 100%;
 	color: ${(p) => p.theme.COLORS.dark[900]};
 	width: fit-content;
 	word-wrap: break-word;
+
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 `;
 
 const ShortLink = styled.a`
@@ -93,6 +97,7 @@ const ShortLink = styled.a`
 
 	@media ${(p) => p.theme.QUERIES.tabletAndUp} {
 		margin-left: auto;
+		padding-left: 120px;
 		margin-right: 24px;
 		word-wrap: break-word;
 		width: fit-content;

next.config.js

@@ -1,15 +1,6 @@
 module.exports = {
 	reactStrictMode: true,
 	images: {
-		domains: ["avatars.githubusercontent.com"],
+		domains: ['avatars.githubusercontent.com'],
 	},
-	// async redirects() {
-	// 	return [
-	// 		{
-	// 			source: "/redirect",
-	// 			destination: "/redirect/asd",
-	// 			permanent: true,
-	// 		},
-	// 	];
-	// },
 };

pages/api/auth/[...nextauth].ts

@@ -11,7 +11,8 @@ interface NextAuthUserWithStringId extends NextAuthUser {
 
 const options = {
     pages: {
-        verifyRequest: '/auth/verify'
+        verifyRequest: '/auth/verify',
+        error: "/"
     },
     providers: [
         Providers.GitHub({

pages/index.tsx

@@ -5,6 +5,7 @@ import { GetServerSideProps } from 'next';
 import { Session } from 'next-auth';
 import { getSession } from 'next-auth/client';
 import Head from 'next/head';
+import { useRouter } from 'next/router';
 import styled from 'styled-components';
 
 import { CallToActionBanner } from '../components/CallToActionBanner/CallToActionBanner';
@@ -32,6 +33,11 @@ export default function Home({
 	const [showDialog, setShowDialog] = useState(false);
 	const [menuOpen, setMenuOpen] = useState(false);
 	const focusRef = useRef<HTMLInputElement>(null);
+	const { error } = useRouter().query;
+
+	useEffect(() => {
+		if (error) setShowDialog(true);
+	}, [error]);
 
 	const handleFocus = () => {
 		if (focusRef.current) {
@@ -67,7 +73,11 @@ export default function Home({
 				menuOpen={menuOpen}
 				setMenuOpen={setMenuOpen}
 			/>
-			<LoginModal showDialog={showDialog} setShowDialog={setShowDialog} />
+			<LoginModal
+				error={error}
+				showDialog={showDialog}
+				setShowDialog={setShowDialog}
+			/>
 			<Wrapper>
 				<NavWrapper>
 					<StyledNav

styles/theme.ts

@@ -36,7 +36,7 @@ export const theme = {
 			900: "#3A3054",
 			700: "#4B3F6B"
 		},
-		warning: "#F46363",
+		warning: "#df2b2b",
 		dark: {
 			900: "#34313D",
 			800: "#232127",

utils/cropLongText.ts

@@ -0,0 +1,3 @@
+export const cropLongText = (text: string, maxLength: number): string => {
+    return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
+}