add plotly to package.json, add plotly example, working version before trying out plotly

typescript/Frontend/package.json

@@ -22,6 +22,7 @@
     "css-loader": "^6.7.3",
     "formik": "^2.2.9",
     "package.json": "^2.0.1",
+    "plotly.js": "^2.20.0",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dnd": "^16.0.1",
@@ -29,6 +30,7 @@
     "react-dnd-scrolling": "^1.3.3",
     "react-dom": "^18.2.0",
     "react-intl": "^6.2.10",
+    "react-plotly.js": "^2.6.0",
     "react-router-dom": "^6.8.0",
     "react-scripts": "5.0.1",
     "reactflow": "^11.5.6",
@@ -65,6 +67,7 @@
     ]
   },
   "devDependencies": {
-    "@formatjs/cli": "^6.0.3"
+    "@formatjs/cli": "^6.0.3",
+    "@types/react-plotly.js": "^2.6.0"
   }
 }

typescript/Frontend/src/App.tsx

@@ -4,7 +4,7 @@ import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
 import { Container, Grid } from "@mui/material";
 import routes from "./routes.json";
 import { IntlProvider } from "react-intl";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import en from "./lang/en.json";
 import de from "./lang/de.json";
 import LanguageSelect from "./components/Layout/LanguageSelect";
@@ -12,11 +12,14 @@ import LogoutButton from "./components/Layout/LogoutButton";
 import Users from "./components/Users/Users";
 import NavigationButtons from "./components/Layout/NavigationButtons";
 import InstallationPage from "./components/Installations/InstallationPage";
+import { UserContext } from "./components/Context/UserContextProvider";
 
 const App = () => {
   const { token, setToken, removeToken } = useToken();
   const [language, setLanguage] = useState("EN");
 
+  const { currentUser } = useContext(UserContext);
+
   const getTranslations = () => {
     if (language === "DE") {
       return de;
@@ -28,6 +31,9 @@ const App = () => {
     return <Login setToken={setToken} setLanguage={setLanguage} />;
   }
 
+  /* TODO create reset page  if (token && currentUser?.mustResetPassword) {
+    return <div>Reset page</div>;
+  } */
   return (
     <BrowserRouter>
       <IntlProvider

typescript/Frontend/src/ResetPassword.tsx

@@ -0,0 +1,75 @@
+import React, { useContext, useState } from "react";
+import { Alert, CircularProgress, Grid } from "@mui/material";
+import Container from "@mui/material/Container";
+import { axiosConfigWithoutToken } from "./config/axiosConfig";
+import InnovenergyTextfield from "./components/Layout/InnovenergyTextfield";
+import InnovenergyButton from "./components/Layout/InnovenergyButton";
+import { UserContext } from "./components/Context/UserContextProvider";
+
+const loginUser = async (username: string, password: string) => {
+  return axiosConfigWithoutToken.post("/Login", null, {
+    params: { username, password },
+  });
+};
+
+interface I_LoginProps {
+  setToken: (value: string) => void;
+  setLanguage: (value: string) => void;
+}
+
+const ResetPassword = ({ setToken, setLanguage }: I_LoginProps) => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState();
+  const { setCurrentUser } = useContext(UserContext);
+
+  const verifyToken = async (token: string) => {
+    axiosConfigWithoutToken.get("/GetAllInstallations", {
+      params: { authToken: token },
+    });
+  };
+
+  const handleSubmit = () => {
+    setLoading(true);
+    loginUser(username, password).then(({ data }) => {
+      // TODO change this if they return err codes from backend
+      if (data && data.token) {
+        verifyToken(data.token)
+          .then(() => {
+            setToken(data.token);
+            setCurrentUser(data.user);
+            setLoading(false);
+            setLanguage(data.user.language);
+          })
+          .catch((err) => {
+            setError(err);
+            setLoading(false);
+          });
+      }
+      setError(data);
+      setLoading(false);
+    });
+  };
+
+  return (
+    <Container maxWidth="xs" sx={{ p: 2, alignContent: "center" }}>
+      <InnovenergyTextfield
+        id="username-textfield"
+        label="Username"
+        name="email"
+        value={username}
+        handleChange={(e) => setUsername(e.target.value)}
+      />
+      {error && <Alert severity="error">Incorrect username or password</Alert>}
+      <Grid container justifyContent="flex-end" sx={{ pt: 1 }}>
+        <InnovenergyButton onClick={handleSubmit} sx={{ my: 1 }}>
+          Login
+        </InnovenergyButton>
+      </Grid>
+      {loading && <CircularProgress />}
+    </Container>
+  );
+};
+
+export default ResetPassword;

typescript/Frontend/src/components/Installations/Log.tsx

@@ -1,3 +1,6 @@
+import React from "react";
+import Plot from "react-plotly.js";
+
 const Log = () => {
   const foo = {
     TimeStamp: "1676643900",
@@ -149,7 +152,21 @@ const Log = () => {
       return previous;
     }, {});
 
-  return <div>log</div>;
+  return (
+    <Plot
+      data={[
+        {
+          x: [1, 2, 3],
+          y: [2, 6, 3],
+          type: "scatter",
+          mode: "lines+markers",
+          marker: { color: "red" },
+        },
+        { type: "bar", x: [1, 2, 3], y: [2, 5, 3] },
+      ]}
+      layout={{ width: 320, height: 240, title: "A Fancy Plot" }}
+    />
+  );
 };
 
 export default Log;

typescript/Frontend/src/util/user.util.tsx

@@ -9,6 +9,7 @@ export interface I_User {
   password: number;
   type: string;
   folderIds?: number[];
+  mustResetPassword: boolean;
 }
 
 export interface UserWithInheritedAccess {