migrate New User Page

src/controllers/dashboard/users/usernew.html

@@ -1,3 +0,0 @@
-<div id="newUserPage" data-role="page" class="page type-interior">
-
-</div>

src/routes/NewUserPage.tsx

@@ -1,14 +1,15 @@
 import React, { FunctionComponent, useCallback, useEffect, useState, useRef } from 'react';
 
-import Dashboard from '../../utils/dashboard';
-import globalize from '../../scripts/globalize';
-import loading from '../loading/loading';
-import toast from '../toast/toast';
-import SectionTitleContainer from '../dashboard/elements/SectionTitleContainer';
-import InputElement from '../dashboard/elements/InputElement';
-import ButtonElement from '../dashboard/elements/ButtonElement';
-import AccessContainer from '../dashboard/users/AccessContainer';
-import CheckBoxElement from '../dashboard/elements/CheckBoxElement';
+import Dashboard from '../utils/dashboard';
+import globalize from '../scripts/globalize';
+import loading from '../components/loading/loading';
+import toast from '../components/toast/toast';
+import SectionTitleContainer from '../components/dashboard/elements/SectionTitleContainer';
+import InputElement from '../components/dashboard/elements/InputElement';
+import ButtonElement from '../components/dashboard/elements/ButtonElement';
+import AccessContainer from '../components/dashboard/users/AccessContainer';
+import CheckBoxElement from '../components/dashboard/elements/CheckBoxElement';
+import Page from '../components/Page';
 
 type userInput = {
     Name?: string;
@@ -175,8 +176,11 @@ const NewUserPage: FunctionComponent = () => {
     }, [loadUser]);
 
     return (
-        <div ref={element}>
-            <div className='content-primary'>
+        <Page
+            id='newUserPage'
+            className='mainAnimatedPage type-interior'
+        >
+            <div ref={element} className='content-primary'>
                 <div className='verticalSection'>
                     <SectionTitleContainer
                         title={globalize.translate('HeaderAddUser')}
@@ -254,7 +258,8 @@ const NewUserPage: FunctionComponent = () => {
                     </div>
                 </form>
             </div>
-        </div>
+        </Page>
+
     );
 };
 

src/routes/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 
 import ConnectionRequired from '../components/ConnectionRequired';
+import NewUserPage from './NewUserPage';
 import SearchPage from './search';
 
 const AppRoutes = () => (
@@ -15,6 +16,14 @@ const AppRoutes = () => (
                     </ConnectionRequired>
                 }
             />
+            <Route
+                path='usernew.html'
+                element={
+                    <ConnectionRequired>
+                        <NewUserPage />
+                    </ConnectionRequired>
+                }
+            />
             {/* Suppress warnings for unhandled routes */}
             <Route path='*' element={null} />
         </Route>

src/scripts/routes.js

@@ -445,14 +445,6 @@ import { appRouter } from '../components/appRouter';
         pageComponent: 'UserLibraryAccessPage'
     });
 
-    defineRoute({
-        alias: '/usernew.html',
-        path: 'dashboard/users/usernew.html',
-        autoFocus: false,
-        roles: 'admin',
-        pageComponent: 'NewUserPage'
-    });
-
     defineRoute({
         alias: '/userparentalcontrol.html',
         path: 'dashboard/users/userparentalcontrol.html',