From 32dcd84964c9f5dcf3e18bd214dbe08893a036a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20T=C3=B6lle?= <julian.toelle97@gmail.com>
Date: Sat, 2 May 2020 21:46:05 +0200
Subject: [PATCH] feat(frontend): show page when login fails

---
 frontend/src/App.tsx                     |  4 ++--
 frontend/src/api/api.ts                  |  2 +-
 frontend/src/components/LoginFailure.tsx | 25 ++++++++++++++++++++++++
 frontend/src/hooks/use-query.tsx         |  5 +++++
 src/auth/auth.controller.ts              |  2 +-
 src/auth/spotify.filter.ts               |  2 +-
 6 files changed, 35 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/LoginFailure.tsx
 create mode 100644 frontend/src/hooks/use-query.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 6ba7014..6906aed 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { Route, Switch } from "react-router-dom";
+import { LoginFailure } from "./components/LoginFailure";
 import { NavBar } from "./components/NavBar";
 import { useAuth } from "./hooks/use-auth";
 import "./tailwind/generated.css";
@@ -7,8 +8,6 @@ import "./tailwind/generated.css";
 export function App() {
   const { isLoaded } = useAuth();
 
-  console.log("App", { isLoaded });
-
   if (!isLoaded) {
     return <div>Loading...</div>;
   }
@@ -20,6 +19,7 @@ export function App() {
       </header>
       <Switch>
         <Route path="/" exact />
+        <Route path="/login/failure" exact component={LoginFailure} />
       </Switch>
     </div>
   );
diff --git a/frontend/src/api/api.ts b/frontend/src/api/api.ts
index acdf799..a9a1fc4 100644
--- a/frontend/src/api/api.ts
+++ b/frontend/src/api/api.ts
@@ -21,7 +21,7 @@ const getDefaultHeaders = (): Headers => {
 };
 
 export const getUsersMe = async (): Promise<User> => {
-  const res = await fetch(`api/v1/users/me`, { headers: getDefaultHeaders() });
+  const res = await fetch(`/api/v1/users/me`, { headers: getDefaultHeaders() });
 
   switch (res.status) {
     case 200: {
diff --git a/frontend/src/components/LoginFailure.tsx b/frontend/src/components/LoginFailure.tsx
new file mode 100644
index 0000000..16dc20c
--- /dev/null
+++ b/frontend/src/components/LoginFailure.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { useQuery } from "../hooks/use-query";
+
+export const LoginFailure: React.FC = () => {
+  const query = useQuery();
+
+  const source = query.get("source");
+  const reason = query.get("reason");
+
+  return (
+    <div
+      className="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4 m-8"
+      role="alert"
+    >
+      <p className="font-bold">Login Failure</p>
+      <p>Something not ideal might be happening.</p>
+      <p className="m-5 bg-gray-100 p-5">
+        <ul className="text-xs text-gray-700 font-mono">
+          <li>Source: {source}</li>
+          <li>Reason: {reason}</li>
+        </ul>
+      </p>
+    </div>
+  );
+};
diff --git a/frontend/src/hooks/use-query.tsx b/frontend/src/hooks/use-query.tsx
new file mode 100644
index 0000000..da88c41
--- /dev/null
+++ b/frontend/src/hooks/use-query.tsx
@@ -0,0 +1,5 @@
+import { useLocation } from "react-router-dom";
+
+export function useQuery(): URLSearchParams {
+  return new URLSearchParams(useLocation().search);
+}
diff --git a/src/auth/auth.controller.ts b/src/auth/auth.controller.ts
index aad7c9a..33e0621 100644
--- a/src/auth/auth.controller.ts
+++ b/src/auth/auth.controller.ts
@@ -37,6 +37,6 @@ export class AuthController {
     });
 
     // Redirect User to SPA
-    res.redirect("/login/success?type=spotify");
+    res.redirect("/login/success?source=spotify");
   }
 }
diff --git a/src/auth/spotify.filter.ts b/src/auth/spotify.filter.ts
index 8a0d34b..86a0486 100644
--- a/src/auth/spotify.filter.ts
+++ b/src/auth/spotify.filter.ts
@@ -23,6 +23,6 @@ export class SpotifyAuthFilter implements ExceptionFilter {
       exception.stack
     );
 
-    response.redirect(`/login/failure?reason=${reason}&type=spotify`);
+    response.redirect(`/login/failure?reason=${reason}&source=spotify`);
   }
 }