adminclient auth classes

replaced amplify default ui
moved survey client auth to sharedcode
moved adminclient model code to separate module
added redux store to adminclient

README.md

@@ -5,7 +5,7 @@ This monorepo contains the following projects:
 - [cdk-stacks](cdk-stacks) - AWS CDK project to build required AWS components and deploy web applications.
 - [surveyclient](surveyclient) - React (PWA) web application for completing the LTL audit surveys.
 - [adminclient](adminclient) - React web application for review and retrieval of LTL audit survey responses.
-- [sharedmodel](sharedmodel) - content common to surveyclient and adminclient - the survey questions and description.
+- [sharedcode](sharedcode) - content common to surveyclient and adminclient - the survey questions and description.
 
 Built by [Scottish Tech Army](https://www.scottishtecharmy.org/) volunteers.
 
@@ -141,12 +141,13 @@ REACT_APP_AWS_CLIENT_API_ENDPOINT=[PREFIX-Backend-dev.LTLclientAPIendpoint]
 
 #### Build the shared component
 
-Create a production build of the [sharedmodel](../sharedmodel)
+Create a production build of the [sharedcode](../sharedcode)
 
 ```
-cd PROJECT_ROOT/sharedmodel
+cd PROJECT_ROOT/sharedcode
 npm install
 npm run build
+npm pack
 ```
 
 #### Build the web clients

adminclient/package.json

@@ -4,23 +4,25 @@
   "private": true,
   "homepage": ".",
   "dependencies": {
-    "learning-play-audit-shared": "file:../sharedmodel",
-    "@aws-amplify/auth": "^3.4.15",
-    "@aws-amplify/core": "^3.8.7",
-    "@aws-amplify/ui-react": "^0.2.32",
-    "@aws-sdk/client-dynamodb": "^1.0.0-rc.9",
-    "@aws-sdk/client-s3": "^1.0.0-rc.9",
-    "@aws-sdk/s3-request-presigner": "^1.0.0-rc.9",
-    "@aws-sdk/util-create-request": "^1.0.0-rc.8",
-    "@aws-sdk/util-dynamodb": "^1.0.0-rc.9",
-    "@aws-sdk/util-format-url": "^1.0.0-rc.8",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/lab": "^4.0.0-alpha.56",
-    "docx": "^5.3.0",
-    "file-saver": "^2.0.2",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0"
+    "@aws-amplify/auth": "^3.4.17",
+    "@aws-amplify/core": "^3.8.9",
+    "@aws-sdk/client-dynamodb": "^3.3.0",
+    "@aws-sdk/client-s3": "^3.3.0",
+    "@aws-sdk/s3-request-presigner": "^3.3.0",
+    "@aws-sdk/util-create-request": "^3.3.0",
+    "@aws-sdk/util-dynamodb": "^3.3.0",
+    "@aws-sdk/util-format-url": "^3.3.0",
+    "@material-ui/core": "^4.11.2",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.57",
+    "docx": "^5.4.1",
+    "file-saver": "^2.0.5",
+    "learning-play-audit-shared": "file:../sharedcode/learning-play-audit-shared-0.1.0.tgz",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-redux": "^7.2.2",
+    "redux": "^4.0.5",
+    "redux-thunk": "^2.3.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -46,10 +48,9 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
-    "env-cmd": "^10.1.0",
-    "react-scripts": "^4.0.1"
+    "@testing-library/jest-dom": "^5.11.9",
+    "react-scripts": "^4.0.1",
+    "redux-mock-store": "^1.5.4",
+    "rfdc": "^1.2.0"
   }
 }

adminclient/src/App.css

@@ -1,5 +1,174 @@
 :root {
-  --amplify-primary-color: #3f51b5;
-  --amplify-primary-tint: #757de8;
-  --amplify-primary-shade: #002984;
+  --colour-ltl-loader-grey: #f3f3f3;
+  --colour-ltl-blue: #2d6a89;
+}
+
+/** Generic elements and formatting **/
+
+.loader {
+  border: 5px solid transparent;
+  border-top: 5px solid var(--colour-ltl-loader-grey);
+  border-left: 5px solid var(--colour-ltl-loader-grey);
+  border-radius: 50%;
+  width: 15px;
+  height: 15px;
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+#auth-signout {
+  border: none;
+  background: none;
+  padding: 0;
+  outline: none;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-weight: 500;
+  line-height: 1.6;
+  letter-spacing: 0.0075em;
+  color: inherit;
+  margin-left: 20px;
+}
+
+/** Static shadows **/
+
+.question input[type="text"]:hover,
+.question input[type="text"]:focus,
+.toggle-button-group {
+  box-shadow: 0px 2px 4px #00000080;
+}
+
+.section.authenticator {
+  box-shadow: 5px 5px 5px #00000080;
+}
+
+/** Active shadows **/
+
+.section.authenticator button {
+  box-shadow: 0px 2px 4px #00000080;
+}
+
+.section.authenticator button:disabled,
+.section.authenticator button:active {
+  box-shadow: none;
+}
+
+/* Override for non-shadowed links */
+.section.authenticator button.inline-action {
+  box-shadow: none;
+}
+
+/** Authentication **/
+
+.section.authenticator {
+  display: flex;
+  flex-direction: column;
+  background-color: white;
+  margin: 40px;
+  padding: 30px 50px;
+  position: relative;
+}
+
+.section.authenticator .title {
+  text-align: center;
+}
+
+.section.authenticator {
+  padding: 20px 40px;
+  width: 60%;
+  box-sizing: border-box;
+}
+
+.section.authenticator .title-logo-small {
+  height: 80px;
+  width: 80px;
+  position: absolute;
+  top: 20px;
+  left: 40px;
+}
+
+.section.authenticator .question {
+  display: flex;
+  flex-direction: row;
+  padding: 0;
+}
+
+.section.authenticator .action-row {
+  justify-content: start;
+}
+
+.section.authenticator button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100px;
+  height: 40px;
+  background-color: var(--colour-ltl-blue);
+  color: white;
+  font-size: 12px;
+  font-weight: normal;
+  border: none;
+  margin-top: 15px;
+  margin-bottom: 20px;
+}
+
+.section.authenticator button:disabled {
+  background-color: darkGrey;
+  color: white;
+}
+
+.section.authenticator button.inline-action {
+  color: var(--colour-ltl-blue);
+  background-color: inherit;
+  border: none;
+  width: auto;
+  height: auto;
+  font-size: inherit;
+  padding: 0px 10px;
+  margin: 0;
+}
+.section.authenticator button.inline-action.start-of-line {
+  padding: 0;
+}
+
+.section.authenticator h2 {
+  font-weight: normal;
+  margin-top: 30px;
+  margin-bottom: 40px;
+  margin-left: 100px;
+}
+
+.section.authenticator input[type="email"],
+.section.authenticator input[type="password"],
+.section.authenticator input[type="number"] {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  height: 39px;
+  border: solid 1px black;
+  padding: 5px 10px;
+  font-size: 18px;
+}
+.section.authenticator input[type="number"] {
+  appearance: textfield;
+  -moz-appearance: textfield;
+  -webkit-appearance: textfield;
+}
+
+.section.authenticator #emailInput,
+.section.authenticator #confirmEmailInput {
+  margin-bottom: 20px;
+}
+.section.authenticator #passwordInput {
+  margin-bottom: 40px;
+}
+
+.section.authenticator #confirmEmailInput {
+  background-color: lightgray;
 }