Merge pull request #534 from roflcoopter/feature/onboarding-improvements

properly navigate to login/onboarding

docker/jetson-nano/Dockerfile.base

@@ -16,7 +16,8 @@ ARG JETPACK_VERSION_MAJOR
 ARG JETPACK_VERSION_MINOR
 ARG JETSON_NANO_FFMPEG_APT_VERSION
 ENV \
-  LD_LIBRARY_PATH="/usr/lib/aarch64-linux-gnu/tegra:/usr/lib/aarch64-linux-gnu/tegra-egl"
+  LD_LIBRARY_PATH="/usr/lib/aarch64-linux-gnu/tegra:/usr/lib/aarch64-linux-gnu/tegra-egl" \
+  LD_PRELOAD="/usr/lib/aarch64-linux-gnu/libgomp.so.1"
 
 RUN \
   cd /usr/local/bin && \

frontend/src/context/ViseronContext.tsx

@@ -1,7 +1,14 @@
 import { useQueryClient } from "@tanstack/react-query";
-import React, { FC, createContext, useEffect, useState } from "react";
+import React, {
+  FC,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import { useNavigate } from "react-router-dom";
 
+import { AuthContext } from "context/AuthContext";
 import { toastIds, useToast } from "hooks/UseToast";
 import { subscribeCameras, subscribeRecording } from "lib/commands";
 import * as types from "lib/types";
@@ -27,17 +34,19 @@ export const ViseronContext =
 export const ViseronProvider: FC<ViseronProviderProps> = ({
   children,
 }: ViseronProviderProps) => {
-  const [connection, setConnection] = useState<Connection | undefined>(
-    undefined
-  );
-  const [connected, setConnected] = useState<boolean>(false);
+  const { auth } = useContext(AuthContext);
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const toast = useToast();
 
+  const [connection, setConnection] = useState<Connection | undefined>(
+    undefined
+  );
+  const [connected, setConnected] = useState<boolean>(false);
   const onConnectRef = React.useRef<() => void>();
   const onDisconnectRef = React.useRef<() => void>();
   const onConnectionErrorRef = React.useRef<() => void>();
+
   useEffect(() => {
     if (connection) {
       const cameraRegistered = async (camera: types.Camera) => {
@@ -71,8 +80,11 @@ export const ViseronProvider: FC<ViseronProviderProps> = ({
         setConnected(false);
       };
       onConnectionErrorRef.current = async () => {
-        console.error("Connection error, redirecting to login");
-        navigate("/login");
+        if (auth.enabled) {
+          const url = auth.onboarding_complete ? "/login" : "/onboarding";
+          console.error(`Connection error, redirecting to ${url}`);
+          navigate(url);
+        }
       };
 
       connection.addEventListener("connected", onConnectRef.current);

frontend/src/pages/Login.tsx

@@ -4,11 +4,12 @@ import Container from "@mui/material/Container";
 import Grid from "@mui/material/Grid";
 import Paper from "@mui/material/Paper";
 import Typography from "@mui/material/Typography";
-import { useEffect, useReducer, useRef } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useContext, useEffect, useReducer, useRef } from "react";
+import { Navigate, useLocation, useNavigate } from "react-router-dom";
 import { ReactComponent as ViseronLogo } from "viseron-logo.svg";
 
 import { TextFieldItem, TextFieldItemState } from "components/TextFieldItem";
+import { AuthContext } from "context/AuthContext";
 import { useTitle } from "hooks/UseTitle";
 import { useAuthLogin } from "lib/api/auth";
 import queryClient from "lib/api/client";
@@ -42,12 +43,14 @@ function reducer(state: InputState, action: InputAction): InputState {
 
 const Login = () => {
   useTitle("Login");
-  const [inputState, dispatch] = useReducer(reducer, initialState);
+  const { auth } = useContext(AuthContext);
   const location = useLocation();
   const navigate = useNavigate();
-  const fromRef = useRef();
   const login = useAuthLogin();
 
+  const [inputState, dispatch] = useReducer(reducer, initialState);
+  const fromRef = useRef();
+
   queryClient.removeQueries({
     predicate(query) {
       return query.queryKey[0] !== "auth" && query.queryKey[1] !== "enabled";
@@ -68,6 +71,14 @@ const Login = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  if (auth.enabled && !auth.onboarding_complete) {
+    return <Navigate to="/onboarding" />;
+  }
+
+  if (!auth.enabled) {
+    return <Navigate to="/" />;
+  }
+
   return (
     <Container sx={{ marginTop: "2%" }}>
       <Box display="flex" justifyContent="center" alignItems="center">

frontend/src/pages/Onboarding.tsx

@@ -58,7 +58,7 @@ const Onboarding = () => {
   const [inputState, dispatch] = useReducer(reducer, initialState);
   const onboarding = useOnboarding();
 
-  if (auth.enabled && auth.onboarding_complete) {
+  if ((auth.enabled && auth.onboarding_complete) || !auth.enabled) {
     return <Navigate to="/" />;
   }