fix(frontend): correctly show an unauthorized error when a user fails to login

fixes #322

src/components/Login/index.tsx

@@ -5,12 +5,15 @@ import axios from 'axios';
 import { useRouter } from 'next/dist/client/router';
 import ImageFader from '../Common/ImageFader';
 import { defineMessages, FormattedMessage } from 'react-intl';
+import Transition from '../Transition';
 
 const messages = defineMessages({
   signinplex: 'Sign in to continue',
 });
 
 const Login: React.FC = () => {
+  const [error, setError] = useState('');
+  const [isProcessing, setProcessing] = useState(false);
   const [authToken, setAuthToken] = useState<string | undefined>(undefined);
   const { user, revalidate } = useUser();
   const router = useRouter();
@@ -20,10 +23,17 @@ const Login: React.FC = () => {
   // ask swr to revalidate the user which _shouid_ come back with a valid user.
   useEffect(() => {
     const login = async () => {
-      const response = await axios.post('/api/v1/auth/login', { authToken });
+      setProcessing(true);
+      try {
+        const response = await axios.post('/api/v1/auth/login', { authToken });
 
-      if (response.data?.email) {
-        revalidate();
+        if (response.data?.email) {
+          revalidate();
+        }
+      } catch (e) {
+        setError(e.response.data.message);
+        setAuthToken(undefined);
+        setProcessing(false);
       }
     };
     if (authToken) {
@@ -64,7 +74,40 @@ const Login: React.FC = () => {
           className="bg-gray-800 bg-opacity-50 py-8 px-4 shadow sm:rounded-lg sm:px-10"
           style={{ backdropFilter: 'blur(5px)' }}
         >
+          <Transition
+            show={!!error}
+            enter="opacity-0 transition duration-300"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
+            leave="opacity-100 transition duration-300"
+            leaveFrom="opacity-100"
+            leaveTo="opacity-0"
+          >
+            <div className="rounded-md bg-red-600 p-4 mb-4">
+              <div className="flex">
+                <div className="flex-shrink-0">
+                  <svg
+                    className="h-5 w-5 text-red-300"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </div>
+                <div className="ml-3">
+                  <h3 className="text-sm font-medium text-red-300">{error}</h3>
+                </div>
+              </div>
+            </div>
+          </Transition>
           <PlexLoginButton
+            isProcessing={isProcessing}
             onAuthToken={(authToken) => setAuthToken(authToken)}
           />
         </div>

src/components/PlexLoginButton/index.tsx

@@ -12,23 +12,23 @@ const plexOAuth = new PlexOAuth();
 
 interface PlexLoginButtonProps {
   onAuthToken: (authToken: string) => void;
+  isProcessing?: boolean;
   onError?: (message: string) => void;
 }
 
 const PlexLoginButton: React.FC<PlexLoginButtonProps> = ({
   onAuthToken,
   onError,
+  isProcessing,
 }) => {
   const intl = useIntl();
   const [loading, setLoading] = useState(false);
-  const [isProcessing, setIsProcessing] = useState(false);
 
   const getPlexLogin = async () => {
     setLoading(true);
     try {
       const authToken = await plexOAuth.login();
       setLoading(false);
-      setIsProcessing(true);
       onAuthToken(authToken);
     } catch (e) {
       if (onError) {

src/styles/globals.css

@@ -7,7 +7,7 @@ body {
 }
 
 .plex-button {
-  @apply w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 transition ease-in-out duration-150 text-center;
+  @apply w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 transition ease-in-out duration-150 text-center disabled:opacity-50;
   background-color: #cc7b19;
 }