#6 Implement basic login

Including graphql backend
2020-08-23 12:55:49 +02:00 · 2020-08-23 12:55:49 +02:00 · c3ab197049
parent 3b15baf5ac
commit c3ab197049
6 changed files with 211 additions and 12 deletions
--- a/redaktions-app/package-lock.json
+++ b/redaktions-app/package-lock.json
@ -4,6 +4,25 @@
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
+    "@apollo/client": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.1.3.tgz",
+      "integrity": "sha512-zXMiaj+dX0sgXIwEV5d/PI6B8SZT2bqlKNjZWcEXRY7NjESF5J3nd4v8KOsrhHe+A3YhNv63tIl35Sq7uf41Pg==",
+      "requires": {
+        "@types/zen-observable": "^0.8.0",
+        "@wry/context": "^0.5.2",
+        "@wry/equality": "^0.2.0",
+        "fast-json-stable-stringify": "^2.0.0",
+        "graphql-tag": "^2.11.0",
+        "hoist-non-react-statics": "^3.3.2",
+        "optimism": "^0.12.1",
+        "prop-types": "^15.7.2",
+        "symbol-observable": "^1.2.0",
+        "ts-invariant": "^0.4.4",
+        "tslib": "^1.10.0",
+        "zen-observable": "^0.8.14"
+      }
+    },
    "@babel/code-frame": {
      "version": "7.10.4",
      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
@ -1992,6 +2011,11 @@
      "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-15.0.0.tgz",
      "integrity": "sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw=="
    },
+    "@types/zen-observable": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@types/zen-observable/-/zen-observable-0.8.0.tgz",
+      "integrity": "sha512-te5lMAWii1uEJ4FwLjzdlbw3+n0FZNOvFXHxQDKeT0dilh7HOzdMzV2TrJVUzq8ep7J4Na8OUYPRLSQkJHAlrg=="
+    },
    "@typescript-eslint/eslint-plugin": {
      "version": "2.34.0",
      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.34.0.tgz",
@ -2204,6 +2228,22 @@
        "@xtuc/long": "4.2.2"
      }
    },
+    "@wry/context": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.5.2.tgz",
+      "integrity": "sha512-B/JLuRZ/vbEKHRUiGj6xiMojST1kHhu4WcreLfNN7q9DqQFrb97cWgf/kiYsPSUCAMVN0HzfFc8XjJdzgZzfjw==",
+      "requires": {
+        "tslib": "^1.9.3"
+      }
+    },
+    "@wry/equality": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.2.0.tgz",
+      "integrity": "sha512-Y4d+WH6hs+KZJUC8YKLYGarjGekBrhslDbf/R20oV+AakHPINSitHfDRQz3EGcEWc1luXYNUvMhawWtZVWNGvQ==",
+      "requires": {
+        "tslib": "^1.9.3"
+      }
+    },
    "@xtuc/ieee754": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@ -6305,6 +6345,16 @@
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
      "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw=="
    },
+    "graphql": {
+      "version": "15.3.0",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-15.3.0.tgz",
+      "integrity": "sha512-GTCJtzJmkFLWRfFJuoo9RWWa/FfamUHgiFosxi/X1Ani4AVWbeyBenZTNX6dM+7WSbbFfTo/25eh0LLkwHMw2w=="
+    },
+    "graphql-tag": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.11.0.tgz",
+      "integrity": "sha512-VmsD5pJqWJnQZMUeRwrDhfgoyqcfwEkvtpANqcoUG8/tOLkwNgU9mzub/Mc78OJMhHjx7gfAMTxzdG43VGg3bA=="
+    },
    "growly": {
      "version": "1.3.0",
      "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
@ -9031,6 +9081,14 @@
        "is-wsl": "^1.1.0"
      }
    },
+    "optimism": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/optimism/-/optimism-0.12.1.tgz",
+      "integrity": "sha512-t8I7HM1dw0SECitBYAqFOVHoBAHEQBTeKjIL9y9ImHzAVkdyPK4ifTgM4VJRDtTUY4r/u5Eqxs4XcGPHaoPkeQ==",
+      "requires": {
+        "@wry/context": "^0.5.2"
+      }
+    },
    "optimize-css-assets-webpack-plugin": {
      "version": "5.0.3",
      "resolved": "https://registry.npmjs.org/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.3.tgz",
@ -12377,6 +12435,11 @@
        "util.promisify": "~1.0.0"
      }
    },
+    "symbol-observable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    },
    "symbol-tree": {
      "version": "3.2.4",
      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@ -12693,6 +12756,14 @@
        "punycode": "^2.1.0"
      }
    },
+    "ts-invariant": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz",
+      "integrity": "sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==",
+      "requires": {
+        "tslib": "^1.9.3"
+      }
+    },
    "ts-pnp": {
      "version": "1.1.6",
      "resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.6.tgz",
@ -13929,6 +14000,11 @@
        "camelcase": "^5.0.0",
        "decamelize": "^1.2.0"
      }
+    },
+    "zen-observable": {
+      "version": "0.8.15",
+      "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz",
+      "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ=="
    }
  }
 }
--- a/redaktions-app/package.json
+++ b/redaktions-app/package.json
@ -3,6 +3,7 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
+    "@apollo/client": "^3.1.3",
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^4.2.4",
@ -12,6 +13,7 @@
    "@types/node": "^12.12.54",
    "@types/react": "^16.9.46",
    "@types/react-dom": "^16.9.8",
+    "graphql": "^15.3.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3",
--- a/redaktions-app/src/App.tsx
+++ b/redaktions-app/src/App.tsx
@ -1,10 +1,15 @@
 import React from 'react';
 import './App.css';
 import SignIn from "./components/SignIn";
+import {ApolloProvider} from "@apollo/client";
+import {client} from "./backend-connection/helper";
+

 function App() {
  return (
-    <SignIn />
+    <ApolloProvider client={client}>
+      {localStorage.getItem("token") ? <div>you are logged in</div> : <SignIn/>}
+    </ApolloProvider>
  );
 }

--- a/redaktions-app/src/backend-connection/helper.ts
+++ b/redaktions-app/src/backend-connection/helper.ts
@ -0,0 +1,22 @@
+import {ApolloClient, createHttpLink, InMemoryCache} from "@apollo/client";
+import {setContext} from "@apollo/client/link/context";
+
+
+const httpLink = createHttpLink({
+  uri: 'http://localhost:5433/graphql',
+});
+
+const authLink = setContext((_, { headers }) => {
+  const token = localStorage.getItem('token');
+  return token ? {
+    headers: {
+      ...headers,
+      authorization: `Bearer ${token}`,
+    }
+  } : headers
+});
+
+export const client = new ApolloClient({
+  cache: new InMemoryCache(),
+  link: authLink.concat(httpLink),
+});
--- a/redaktions-app/src/components/ButtonWithSpinner.tsx
+++ b/redaktions-app/src/components/ButtonWithSpinner.tsx
@ -0,0 +1,55 @@
+import React from 'react';
+import {createStyles, makeStyles, Theme} from '@material-ui/core/styles';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import {green} from '@material-ui/core/colors';
+import Button from '@material-ui/core/Button';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    wrapper: {
+      margin: theme.spacing(1),
+      position: 'relative',
+    },
+    buttonProgress: {
+      color: green[500],
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      marginTop: -12,
+      marginLeft: -12,
+    },
+    button: {
+      margin: theme.spacing(3, 0, 2),
+    },
+  }),
+);
+
+
+interface ButtonWithSpinnerProps {
+  children: string,
+  handleClick: () => void,
+  loading: boolean
+  type?: "button" | "submit",
+  fullWidth?: boolean,
+}
+
+export default function ButtonWithSpinner(props: ButtonWithSpinnerProps) {
+  const classes = useStyles();
+
+  return (
+      <div className={classes.wrapper}>
+        <Button
+          className={classes.button}
+          variant="contained"
+          color="primary"
+          fullWidth={!!props.fullWidth}
+          type={props.type}
+          disabled={props.loading}
+          onClick={props.handleClick}
+        >
+          {props.children}
+        </Button>
+        {props.loading && <CircularProgress size={24} className={classes.buttonProgress} />}
+      </div>
+  );
+}
--- a/redaktions-app/src/components/SignIn.tsx
+++ b/redaktions-app/src/components/SignIn.tsx
@ -1,6 +1,5 @@
-import React from 'react';
+import React, {useState} from 'react';
 import Avatar from '@material-ui/core/Avatar';
-import Button from '@material-ui/core/Button';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import TextField from '@material-ui/core/TextField';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
@ -10,8 +9,10 @@ import Grid from '@material-ui/core/Grid';
 import Box from '@material-ui/core/Box';
 import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
 import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import {makeStyles} from '@material-ui/core/styles';
 import Container from '@material-ui/core/Container';
+import {gql, useMutation} from "@apollo/client";
+import ButtonWithSpinner from "./ButtonWithSpinner";

 function Copyright() {
  return (
@ -44,11 +45,24 @@ const useStyles = makeStyles((theme) => ({
  submit: {
    margin: theme.spacing(3, 0, 2),
  },
+  error: {
+    color: 'red',
+  }
 }));

+
 export default function SignIn() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [login, { loading, error, data }] = useMutation(loginMutation);
  const classes = useStyles();

+  if (data && data.authenticate.jwtToken) {
+      localStorage.setItem("token", data.authenticate.jwtToken)
+      window.location.reload()
+      return <span>{`Success!`}</span>
+  }
+
  return (
    <Container component="main" maxWidth="xs">
      <CssBaseline />
@ -59,7 +73,14 @@ export default function SignIn() {
        <Typography component="h1" variant="h5">
          Sign in
        </Typography>
-        <form className={classes.form} noValidate>
+        <form
+          className={classes.form}
+          noValidate
+          onSubmit={event => {
+            event.preventDefault();
+            login({variables: {email: email, password: password}})
+          }}
+        >
          <TextField
            variant="outlined"
            margin="normal"
@ -70,6 +91,8 @@ export default function SignIn() {
            name="email"
            autoComplete="email"
            autoFocus
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
          />
          <TextField
            variant="outlined"
@ -80,21 +103,25 @@ export default function SignIn() {
            label="Password"
            type="password"
            id="password"
+            value={password}
            autoComplete="current-password"
+            onChange={(e) => setPassword(e.target.value)}
          />
          <FormControlLabel
            control={<Checkbox value="remember" color="primary" />}
            label="Remember me"
          />
-          <Button
+          <ButtonWithSpinner
+            handleClick={() => {}}
+            loading={loading}
            type="submit"
            fullWidth
-            variant="contained"
-            color="primary"
-            className={classes.submit}
-          >
-            Sign In
-          </Button>
+            >Sign In</ButtonWithSpinner>
+          <p className={classes.error}>
+            {error
+              ? `Error while trying to log in: ${error.message}`
+              : data && !data.authenticate.jwtToken ? "Wrong username or password" : ""}
+          </p>
          <Grid container>
            <Grid item xs>
              <Link href="#" variant="body2">
@ -115,3 +142,15 @@ export default function SignIn() {
    </Container>
  );
 }
+
+const loginMutation = gql`
+  mutation Login($email: String!, $password: String!) {
+    authenticate(input: {email: $email, password: $password}) {
+      jwtToken
+    }
+  }`
+
+
+
+
+