Merge pull request #39 from aws-samples/deps

Upgrade dependencies
aws-samples · Oct 25, 2022 · 6da0cb0 · 6da0cb0
2 parents 7faf251 + 7d42798
commit 6da0cb0
Show file tree

Hide file tree

Showing 7 changed files with 35,997 additions and 19,183 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -37,6 +37,9 @@
   "workspaces": ["src/web-ui"],
   "overrides": {
     "nth-check": "2.0.1",
-    "autoprefixer": "10.4.5"
+    "autoprefixer": "10.4.5",
+    "[email protected]": {
+      "[email protected]": "3.0.5"
+    }
   }
 }
diff --git a/requirements.txt b/requirements.txt
@@ -1,3 +1,3 @@
-awscli==1.24.2
+awscli==1.25.97
 cfn_flip==1.3.0
-cfn_lint==0.60.0
+cfn_lint==0.68.1
diff --git a/src/cfn/template.yaml b/src/cfn/template.yaml
@@ -16,7 +16,7 @@ Globals:
         CREATE_CLOUDFRONT_DISTRIBUTION: !Ref CreateCloudFrontDistribution
         REGION: !Ref AWS::Region
         TO_BUCKET: !Ref WebUIBucket
-        VERSION: "1.5"
+        VERSION: "1.6"
 
 Parameters:
   AdminEmail:

diff --git a/src/functions/setup/package-lock.json b/src/functions/setup/package-lock.json
diff --git a/src/web-ui/package.json b/src/web-ui/package.json
@@ -3,8 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@aws-amplify/ui-components": "^1.9.6",
+    "@aws-amplify/ui-react": "^2.3.0",
     "aws-amplify": "^4.3.22",
-    "aws-amplify-react": "^2.5.4",
     "react": "^17.0.2",
     "react-bootstrap": "1.0.0",
     "react-dom": "^17.0.2",

diff --git a/src/web-ui/src/App.js b/src/web-ui/src/App.js
@@ -1,5 +1,9 @@
-import { Authenticator, Greetings, SignUp } from "aws-amplify-react";
-import React, { useState } from "react";
+import {
+  AmplifyAuthenticator,
+  AmplifySignIn,
+} from "@aws-amplify/ui-react/legacy";
+import { onAuthUIStateChange } from "@aws-amplify/ui-components";
+import React, { useState, useEffect } from "react";
 import { Container } from "react-bootstrap";
 
 import Header from "./components/Header";
@@ -13,9 +17,8 @@ import gateway from "./utils/gateway";
 const App = () => {
   const [authState, setAuthState] = useState(undefined);
   const [currentPage, setCurrentPage] = useState("projects");
-  const [selectedProjectVersion, setSelectedProjectVersion] = useState(
-    undefined
-  );
+  const [selectedProjectVersion, setSelectedProjectVersion] =
+    useState(undefined);
 
   const onHelp = () => setCurrentPage("help");
   const loadProjectList = () => setCurrentPage("projects");
@@ -24,42 +27,67 @@ const App = () => {
     setCurrentPage("image");
   };
 
-  const classNames = ["App"];
-  if (authState !== "signedIn") classNames.push("amplify-auth");
+  useEffect(() => {
+    return onAuthUIStateChange((s) => setAuthState(s));
+  }, []);
+  console.log(authState)
+  const signedIn = authState === "signedin";
 
   return (
-    <div className={classNames.join(" ")}>
-      <Authenticator
-        onStateChange={(s) => setAuthState(s)}
-        hide={[Greetings, SignUp]}
-      >
-        {authState === "signedIn" && (
-          <>
-            <Header
-              currentPage={currentPage}
-              onHelp={onHelp}
-              loadProjectList={loadProjectList}
-            />
-            <Container>
-              <SettingsHelp show={!window.rekognitionSettings} />
-              {currentPage === "projects" && (
-                <ProjectsSummary
-                  gateway={gateway}
-                  onHelp={onHelp}
-                  onVersionClick={loadProjectVersion}
-                />
-              )}
-              {currentPage === "help" && <Help />}
-              {currentPage === "image" && (
-                <ImageMode
-                  gateway={gateway}
-                  projectVersionArn={selectedProjectVersion}
-                />
-              )}
-            </Container>
-          </>
-        )}
-      </Authenticator>
+    <div className="App">
+      {signedIn ? (
+        <>
+          <Header
+            currentPage={currentPage}
+            onHelp={onHelp}
+            loadProjectList={loadProjectList}
+          />
+          <Container>
+            <SettingsHelp show={!window.rekognitionSettings} />
+            {currentPage === "projects" && (
+              <ProjectsSummary
+                gateway={gateway}
+                onHelp={onHelp}
+                onVersionClick={loadProjectVersion}
+              />
+            )}
+            {currentPage === "help" && <Help />}
+            {currentPage === "image" && (
+              <ImageMode
+                gateway={gateway}
+                projectVersionArn={selectedProjectVersion}
+              />
+            )}
+          </Container>
+        </>
+      ) : (
+        <div className="amplify-auth-container">
+          <AmplifyAuthenticator usernameAlias="email">
+            <AmplifySignIn
+              slot="sign-in"
+              usernameAlias="email"
+              formFields={[
+                {
+                  type: "email",
+                  label: "Username *",
+                  placeholder: "Enter your username",
+                  required: true,
+                  inputProps: { autoComplete: "off" },
+                },
+                {
+                  type: "password",
+                  label: "Password *",
+                  placeholder: "Enter your password",
+                  required: true,
+                  inputProps: { autoComplete: "off" },
+                },
+              ]}
+            >
+              <div slot="secondary-footer-content"></div>
+            </AmplifySignIn>
+          </AmplifyAuthenticator>
+        </div>
+      )}
     </div>
   );
 };