From cbf45196b023f60c8e4cf7602c0295f886fe610c Mon Sep 17 00:00:00 2001
From: sct <sctsnipe@gmail.com>
Date: Wed, 17 Mar 2021 23:35:36 +0000
Subject: [PATCH] fix(frontend): use next/image to serve login page images

re #1207
---
 src/components/Common/ImageFader/index.tsx | 26 ++++++++++++++++++++--
 src/components/Login/index.tsx             |  1 +
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/Common/ImageFader/index.tsx b/src/components/Common/ImageFader/index.tsx
index 902e9a281..d6ad868cd 100644
--- a/src/components/Common/ImageFader/index.tsx
+++ b/src/components/Common/ImageFader/index.tsx
@@ -4,11 +4,13 @@ import React, {
   HTMLAttributes,
   ForwardRefRenderFunction,
 } from 'react';
+import Image from 'next/image';
 
 interface ImageFaderProps extends HTMLAttributes<HTMLDivElement> {
   backgroundImages: string[];
   rotationSpeed?: number;
   isDarker?: boolean;
+  useImage?: boolean;
 }
 
 const DEFAULT_ROTATION_SPEED = 6000;
@@ -18,6 +20,7 @@ const ImageFader: ForwardRefRenderFunction<HTMLDivElement, ImageFaderProps> = (
     backgroundImages,
     rotationSpeed = DEFAULT_ROTATION_SPEED,
     isDarker,
+    useImage,
     ...props
   },
   ref
@@ -52,10 +55,29 @@ const ImageFader: ForwardRefRenderFunction<HTMLDivElement, ImageFaderProps> = (
             i === activeIndex ? 'opacity-100' : 'opacity-0'
           }`}
           style={{
-            backgroundImage: `${gradient}, url(${imageUrl})`,
+            backgroundImage: !useImage
+              ? `${gradient}, url(${imageUrl})`
+              : undefined,
           }}
           {...props}
-        />
+        >
+          {useImage && (
+            <>
+              <Image
+                className="absolute inset-0 w-full h-full"
+                alt=""
+                src={imageUrl}
+                layout="fill"
+                objectFit="cover"
+                quality={100}
+              />
+              <div
+                className="absolute inset-0"
+                style={{ backgroundImage: gradient }}
+              />
+            </>
+          )}
+        </div>
       ))}
     </div>
   );
diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx
index ebd95e371..6649ac817 100644
--- a/src/components/Login/index.tsx
+++ b/src/components/Login/index.tsx
@@ -63,6 +63,7 @@ const Login: React.FC = () => {
     <div className="relative flex flex-col min-h-screen bg-gray-900 py-14">
       <PageTitle title={intl.formatMessage(messages.signin)} />
       <ImageFader
+        useImage
         backgroundImages={[
           '/images/rotate1.jpg',
           '/images/rotate2.jpg',