Fixed API folder name

Birdmap.API/ClientApp/src/components/auth/Auth.tsx

@@ -0,0 +1,131 @@
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { Box, Grid, TextField, Button, Typography, Paper, CircularProgress } from '@material-ui/core';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import AuthService from './AuthService';
+
+export default function Auth(props: any) {
+    const history = useHistory();
+    const classes = useStyles();
+
+    const [username, setUsername] = useState<string>("");
+    const [password, setPassword] = useState<string>("");
+
+    const [showError, setShowError] = useState(false);
+    const [errorMessage, setErrorMessage] = useState('');
+    const [isLoggingIn, setIsLoggingIn] = useState(false);
+
+    const onUsernameChanged = (event: any) => {
+        setUsername(event.target.value);
+
+        setShowError(false);
+        setErrorMessage('');
+    };
+
+    const onPasswordChanged = (event: any) => {
+        setPassword(event.target.value);
+
+        setShowError(false);
+        setErrorMessage('');
+    };
+
+    const onPasswordKeyPress = (event: any) => {
+        if (event.key === 'Enter') {
+            onLoginClicked();
+        }
+    };
+
+    const onLoginClicked = () => {
+        setIsLoggingIn(true);
+
+        if (!username) {
+            setShowError(true);
+            setErrorMessage('Username required');
+
+            return;
+        }
+
+        if (!password) {
+            setShowError(true);
+            setErrorMessage('Password required');
+
+            return;
+        }
+
+        AuthService.login(username, password)
+        .then(() => {
+            props.onAuthenticated();
+            history.push('/');
+        }).catch(() => {
+            setShowError(true);
+            setErrorMessage('Invalid credentials');
+        }).finally(() => {
+            setIsLoggingIn(false);
+        });
+    };
+
+    const renderErrorLabel = () => {
+        return showError
+            ? <Typography>{errorMessage}</Typography>
+            : <React.Fragment />;
+    };
+
+    const renderLoginButton = () => {
+        return isLoggingIn
+            ? <CircularProgress className={classes.button} />
+            : <Button className={classes.button} variant="contained" color="primary" onClick={onLoginClicked}>Sign in</Button>
+    };
+
+    return (
+        <Box className={classes.root}>
+            <Paper className={classes.paper} elevation={8}>
+                <Grid container className={classes.container} spacing={2}>
+                    <Grid item>
+                        <Typography component="h1" variant="h5">
+                            Sign in
+                        </Typography>
+                    </Grid>
+                    <Grid item xs={12} >
+                        <TextField label="Username" type="text" onChange={onUsernameChanged} />
+                    </Grid>
+                    <Grid item xs={12} >
+                        <TextField label="Password" type="password" onChange={onPasswordChanged} onKeyPress={onPasswordKeyPress} />
+                    </Grid>
+                    <Grid item xs={12} className={classes.error}>
+                        {renderErrorLabel()}
+                    </Grid>
+                    <Grid item xs={12} className={classes.button}>
+                        {renderLoginButton()}
+                    </Grid>
+                </Grid>
+            </Paper>
+        </Box>
+    );
+};
+
+const useStyles = makeStyles((theme: Theme) =>
+    createStyles({
+        root: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            minWidth: 400,
+            minHeight: 600,
+        },
+        container: {
+            padding: 40,
+            flexDirection: "column",
+            justifyContent: "space-around",
+            alignItems: "center",
+        },
+        paper: {
+            borderRadius: 15,
+        },
+        button: {
+            justifyContent: "center",
+        },
+        error: {
+            color: "red",
+        }
+    }),
+);

Birdmap.API/ClientApp/src/components/auth/AuthService.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var ServiceBase_1 = require("../../common/ServiceBase");
+var login_url = 'api/auth/authenticate';
+exports.default = {
+    isAuthenticated: function () {
+        return sessionStorage.getItem('user') !== null;
+    },
+    login: function (username, password) {
+        var body = {
+            username: username,
+            password: password
+        };
+        var options = {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body),
+        };
+        return ServiceBase_1.default.makeRequest(login_url, options)
+            .then(function (response) {
+            sessionStorage.setItem('user', response.token_type + " " + response.access_token);
+            return Promise.resolve();
+        });
+    }
+};
+//# sourceMappingURL=AuthService.js.map

Birdmap.API/ClientApp/src/components/auth/AuthService.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthService.js","sourceRoot":"","sources":["AuthService.ts"],"names":[],"mappings":";;AAAA,wDAAmD;AAEnD,IAAM,SAAS,GAAG,uBAAuB,CAAC;AAE1C,kBAAe;IACX,eAAe;QACX,OAAO,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IACnD,CAAC;IAED,KAAK,EAAL,UAAM,QAAgB,EAAE,QAAgB;QACpC,IAAI,IAAI,GAAG;YACP,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,QAAQ;SACrB,CAAC;QACF,IAAI,OAAO,GAAG;YACV,MAAM,EAAE,MAAM;YACd,OAAO,EAAE;gBACL,cAAc,EAAE,kBAAkB;aACrC;YACD,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;SAC7B,CAAC;QAEF,OAAO,qBAAW,CAAC,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC;aAC7C,IAAI,CAAC,UAAA,QAAQ;YACV,cAAc,CAAC,OAAO,CAAC,MAAM,EAAK,QAAQ,CAAC,UAAU,SAAI,QAAQ,CAAC,YAAc,CAAC,CAAC;YAClF,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;QAC7B,CAAC,CAAC,CAAC;IACX,CAAC;CACJ,CAAA"}

Birdmap.API/ClientApp/src/components/auth/AuthService.ts

@@ -0,0 +1,29 @@
+import ServiceBase from '../../common/ServiceBase';
+
+const login_url = 'api/auth/authenticate';
+
+export default {
+    isAuthenticated() {
+        return sessionStorage.getItem('user') !== null;
+    },
+
+    login(username: string, password: string) {
+        let body = {
+            username: username,
+            password: password
+        };
+        let options = {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(body),
+        };
+
+        return ServiceBase.makeRequest(login_url, options)
+            .then(response => {
+                sessionStorage.setItem('user', `${response.token_type} ${response.access_token}`);
+                return Promise.resolve();
+            });
+    }
+}