User accounts #345

MartinDawson · 2021-05-12T20:04:10Z

No description provided.

MartinDawson · 2021-05-12T20:04:25Z

ui/package.json

@@ -84,7 +86,7 @@
    "generate-exh-pairs": "node ./scripts/writeECBExchangePairsToJSON.js",
    "generate-fundamentals": "node ./scripts/writeBulkFundamentalsDataToJSON.js",
    "find-missing-gbonds": "node ./scripts/findMissingGBonds.js",
-    "preinstall": "cd ../packages/dcf-react && npm install",
+    "preinstall": "cd ../packages/dcf-react && npm install && cd ../auth && npm install",


MartinDawson · 2021-05-12T20:06:02Z

ui/src/components/Authentication.jsx

+  FORGOTTEN_PASSWORD: "FORGOTTEN_PASSWORD",
+};
+
+const StyledBox = styled(Box)(() => ({


We are using Material UI v5.x.

Please bookmark this docs for it: https://next.material-ui.com/getting-started/usage/

And in this version we can not use styled as it does not work with SSR and gatsby.

See this issue I created: mui/material-ui#25312

The solution is to use Box with the sx prop. https://next.material-ui.com/system/basics/#heading-the-sx-prop

MartinDawson · 2021-05-12T20:07:35Z

ui/src/components/Form.styles.js

@@ -0,0 +1,24 @@
+import { makeStyles } from "@material-ui/core";
+
+export const useFormStyles = makeStyles((theme) => ({


Cannot use this. Same issue as styled. You can use sx prop and target the classes instead.

If you want to share styles I would recommend to create a separate react component with the sx prop.

MartinDawson · 2021-05-12T20:08:14Z

ui/src/components/Header.jsx


-const rightLinks = [
+const rightLinks = (isAuthenticated) => [


rightLinks -> getRightLinks

MartinDawson · 2021-05-12T20:16:10Z

ui/src/components/SignUpForm.jsx

+    <div className={classes.paper}>
+      <TracktakLogoSvg />
+      <Typography component="h1" variant="h5">
+        Sign up


Don't add it to this ticket, we will do it in a follow up because I think we can not do it for non-EU countries but we need a checkbox in this form component that says something like this.

[] Please tick if you consent to getting the occasional feature update or marketing email.

Let's do this after though. I ain't scared of no GDPRR!!

MartinDawson · 2021-05-12T20:18:00Z

ui/src/layouts/index.js

-      {children}
-      <TTSnackbar />
-    </Root>
+    <ProvideAuth>


I think this Provider should go in the sharedGatsby file.

That is the absolute root file for all pages.

MartinDawson · 2021-05-12T20:20:33Z

ui/src/pages/sign-in.jsx

+
+const SignIn = () => {
+  const handleSuccess = () => {
+    navigate("/");


I think we will want to redirect to the page the user just came from?

Or if they have no previous page then I guess the home page.

MartinDawson · 2021-05-12T20:21:16Z

ui/src/pages/sign-in.jsx

+    <>
+      <Helmet>
+        <title>{getTitle("Sign in")}</title>
+        <link rel="canonical" href={`${resourceName}/sign-up`} />


sign-up -> sign-in

MartinDawson · 2021-05-12T20:22:04Z

ui/src/pages/sign-out.jsx

+  const { session, signOut } = useAuth();
+
+  const handleSuccess = () => {
+    navigate("/");


Same comment as above. But does sign out need to be a page?

Usually sign outs are just buttons.

MartinDawson · 2021-05-12T20:23:42Z

ui/src/theme.js

@@ -22,6 +22,9 @@ let theme = createMuiTheme({
      dark: "#41407d",
      contrastText: "#fff",
    },
+    icons: {
+      facebook: "#3B5998"


Should we keep it consistent with the landing page and make it green instead? Or will that look weird?

We should keep facebook & google icons as "their" colors for user accounts.

…igning in brings you to previous page or home page if one doesn't exist

Completed forgot password flow in Modal mode Handle redirects for sign-in / sign-up / forgot-password when user is already authenticated

…with PreventUserExistenceErrors for security

masesor · 2021-05-18T21:29:52Z

I need to ensure that there are no nasty AWS errors being displayed to user, think most are ok but so far need to fix the weak password error, don't want user's seeing this: "1 validation error detected: Value at 'password' failed to satisfy constraint: Member must have length greater than or equal to 6"

MartinDawson · 2021-05-19T13:24:27Z

I need to ensure that there are no nasty AWS errors being displayed to user, think most are ok but so far need to fix the weak password error, don't want user's seeing this: "1 validation error detected: Value at 'password' failed to satisfy constraint: Member must have length greater than or equal to 6"

Yeah, also don't want to leak backend errors at all to users because a security concern. Should just be generic user erros.

MartinDawson · 2021-05-19T13:33:19Z

aws/cognito/lambda-triggers/verify-auth-challenge-response/verify-auth-challenge-response.ts

+        region: 'eu-west-2'
+    });
+    const params = {
+        FunctionName: 'cognitoEmailAuthFlow-ChangePassword-P8M0410OHSTW', // TODO - better way to get name?


If someone destroys the lambda and re-creates it I presume it breaks this code because of the hash at the end?

It would have yep. Changed it to not use a auto-generated name

MartinDawson · 2021-05-19T13:33:57Z

aws/cognito/package.json

+{
+  "name": "cognito-email-auth-backend",
+  "version": "1.0.0",
+  "description": "This is a sample template for cognito-sam - Below is a brief explanation of what we have generated for you:",


cognito-sam? :D. should this be cognito-tracktak? And the same for 'sam' references below

haha its 'Serverless Application Model'
https://docs.aws.amazon.com/serverless-application-model/index.html

haha didn't realise

MartinDawson · 2021-05-19T13:37:34Z

ui/src/api/auth.js

+} from "amazon-cognito-identity-js";
+
+const POOL_CONFIG = {
+  UserPoolId: process.env.GATSBY_COGNITO_USER_POOL_ID,


We will need to add these to our .env to test and to GitHub settings secrets for staging deploy.

Could you send all .env variables to us over slack and delete the message once you do?

MartinDawson · 2021-05-19T13:39:26Z

ui/src/components/Authentication.jsx

+    navigate(-1);
+  };
+
+  return (


Very nice code :)

MartinDawson · 2021-05-19T13:41:11Z

ui/src/components/ForgotPasswordForm.jsx

+        }}
+      >
+        <TracktakLogoSvg />
+        <Typography component="h1" variant="h5">


You don't need component="h1", it doesn't do anything here I don't think.

SEO purposes google doesn't care what heading type is used

MartinDawson · 2021-05-19T13:45:42Z

ui/src/components/Header.jsx

+  textTransform: "none",
+  fontSize: "16px",
+  fontWeight: "bold",
+  color: "#313450",


should we use theme here?

you can do this:

color: (theme) => theme.palette.blahblah

MartinDawson · 2021-05-19T13:45:52Z

ui/src/components/Header.jsx

+
+const buttonStyle = {
+  textTransform: "none",
+  fontSize: "16px",


Think maybe should use theme here too?

MartinDawson · 2021-05-19T13:47:07Z

ui/src/components/SignInForm.jsx

+      }}
+    >
+      <TracktakLogoSvg />
+      <Typography component="h1" variant="h5">


same comment as other

MartinDawson · 2021-05-19T13:47:25Z

ui/src/components/SignUpForm.jsx

+      }}
+    >
+      <TracktakLogoSvg />
+      <Typography component="h1" variant="h5">


same comment as other

MartinDawson · 2021-05-19T13:48:29Z

ui/src/hooks/useAuth.js

+    };
+
+    const onNewPasswordRequired = () => {
+      console.error("New password required"); // TODO


MartinDawson · 2021-05-19T13:50:20Z

ui/src/pages/sign-in.jsx

+const SignIn = ({ location }) => {
+  const { isAuthenticated } = useAuth();
+
+  const navigateToPreviousPage = useCallback(() => {


is useCallback needed here? I probably wouldn't use it if it's not needed. Bugs are more likely.

added because its used in an effect below

…ue. Mapped AWS error. PR fixes

krisolchova

There's should be margin between "tracktak" logo and "Sign in"/Sign up /Forgot password/Reset password text and the title text should have color:#313450 (use in theme.js).
Button's text should be in lower case and have fontSize and make buttons less massive. So it should be the same format as in the landing page to keep it consistent, example in SearchSection.jsx. If we need to make the button more reusable, put it in the theme.js.
Same applies to Forgot password/Resetting password section, buttons should be the same format as landing page.
Better error messages if user dublicates their credentials. Example, if I register with the same email again.
When resetting the password, haven't received verification code via my email.
If I input fake code, we should have better error message, maybe like this: "The code has expired"?

masesor · 2021-05-24T18:49:03Z

For the buttons, do you mean not have them full width to match the text fields? Similar to this:
What day did you try this? Will check the logs to try determine why
What error did you get? Should have got below:

krisolchova · 2021-05-24T19:13:32Z

For the buttons, do you mean not have them full width to match the text fields? Similar to this:
Ah yeah, forgot to mention. The button itself looks fine, just needs the full width then.

What day did you try this? Will check the logs to try determine why
Still didn't receive any code via email.

What error did you get? Should have got below:

masesor added 6 commits May 3, 2021 20:19

Initial authentication functions and hook

5e4bdcc

Added sign up form and modal links

9558557

Removed auth repo

ee997d4

File perm change

5e5c20b

Added authentication forms, sign-in and sign-up pages, useAuth hook.

819d5be

Retrieve user session from local storage

b8e649d

MartinDawson commented May 12, 2021

View reviewed changes

masesor force-pushed the user-accounts branch from 500e67c to f4e771b Compare May 14, 2021 19:34

masesor added 2 commits May 14, 2021 20:36

Add AWS Cognito User Pool configuration and Lambdas

d40a8f9

Add Forgot Password Form, page, links and functions

57b8ec4

masesor force-pushed the user-accounts branch from f4e771b to 57b8ec4 Compare May 14, 2021 19:37

masesor added 7 commits May 16, 2021 16:56

Address PR comments

1c083c9

Merge branch 'main' into user-accounts

322809e

Sign out is now just a button, use correct Tracktak Logo component. S…

e4acce0

…igning in brings you to previous page or home page if one doesn't exist

Fixed issue where emails were always being validated on login

ee3a15d

Completed forgot password flow in Modal mode Handle redirects for sign-in / sign-up / forgot-password when user is already authenticated

Use full Tracktak logo in auth forms

94a09e3

Add workflow secret for Cognito creds

ca4cc83

Remove social media sign up buttons for now. Update cognito template …

d6d6545

…with PreventUserExistenceErrors for security

MartinDawson commented May 19, 2021

View reviewed changes

ui/src/components/Authentication.jsx

navigate(-1);

};

return (

Copy link

Contributor Author

MartinDawson May 19, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very nice code :)

MartinDawson commented May 19, 2021

View reviewed changes

masesor added 3 commits May 20, 2021 17:52

Change Password Lambda refactor

dba73c0

VerifyAuth Lambda can now call ChangePassword without name change iss…

87896ca

…ue. Mapped AWS error. PR fixes

Merge branch 'main' into user-accounts

87ef909

krisolchova self-requested a review May 22, 2021 12:39

krisolchova requested changes May 22, 2021

View reviewed changes

masesor added 2 commits May 24, 2021 20:00

Address some PR comments

be175f3

Merge branch 'main' into user-accounts

ba511e0

masesor and others added 5 commits May 24, 2021 20:58

Disable authentication in prod

2f018c5

Merge branch 'main' into user-accounts

af7d2fb

changed production feature toggle to development

862a6e8

increment node version for staging deployment

2eb63b6

delete old dcf-react folder

c7b1d5f

MartinDawson merged commit aeffcdb into main May 26, 2021

MartinDawson deleted the user-accounts branch May 26, 2021 17:55

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

User accounts #345

User accounts #345

MartinDawson commented May 12, 2021

MartinDawson May 12, 2021

MartinDawson May 12, 2021

MartinDawson May 12, 2021 •

edited

Loading

MartinDawson May 12, 2021

MartinDawson May 12, 2021 •

edited

Loading

MartinDawson May 12, 2021

MartinDawson May 12, 2021 •

edited

Loading

MartinDawson May 12, 2021

MartinDawson May 12, 2021 •

edited

Loading

MartinDawson May 12, 2021 •

edited

Loading

krisolchova May 13, 2021 •

edited

Loading

masesor commented May 18, 2021

MartinDawson commented May 19, 2021

MartinDawson May 19, 2021

masesor May 21, 2021

MartinDawson May 19, 2021 •

edited

Loading

masesor May 21, 2021

MartinDawson May 21, 2021

MartinDawson May 19, 2021

MartinDawson May 19, 2021

MartinDawson May 19, 2021

MartinDawson May 19, 2021

MartinDawson May 19, 2021 •

edited

Loading

MartinDawson May 19, 2021

MartinDawson May 19, 2021

MartinDawson May 19, 2021

MartinDawson May 19, 2021 •

edited

Loading

masesor May 21, 2021

krisolchova left a comment •

edited

Loading

masesor commented May 24, 2021

krisolchova commented May 24, 2021 •

edited

Loading

		@@ -0,0 +1,24 @@
		import { makeStyles } from "@material-ui/core";

		export const useFormStyles = makeStyles((theme) => ({


		const rightLinks = [
		const rightLinks = (isAuthenticated) => [

User accounts #345

User accounts #345

Conversation

MartinDawson commented May 12, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MartinDawson May 12, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MartinDawson May 12, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MartinDawson May 12, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MartinDawson May 12, 2021 • edited Loading

Choose a reason for hiding this comment

MartinDawson May 12, 2021 • edited Loading

Choose a reason for hiding this comment

krisolchova May 13, 2021 • edited Loading

Choose a reason for hiding this comment

masesor commented May 18, 2021

MartinDawson commented May 19, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MartinDawson May 19, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MartinDawson May 19, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MartinDawson May 19, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

krisolchova left a comment • edited Loading

Choose a reason for hiding this comment

masesor commented May 24, 2021

krisolchova commented May 24, 2021 • edited Loading

MartinDawson May 12, 2021 •

edited

Loading

MartinDawson May 12, 2021 •

edited

Loading

MartinDawson May 12, 2021 •

edited

Loading

MartinDawson May 12, 2021 •

edited

Loading

MartinDawson May 12, 2021 •

edited

Loading

krisolchova May 13, 2021 •

edited

Loading

MartinDawson May 19, 2021 •

edited

Loading

MartinDawson May 19, 2021 •

edited

Loading

MartinDawson May 19, 2021 •

edited

Loading

krisolchova left a comment •

edited

Loading

krisolchova commented May 24, 2021 •

edited

Loading