diff --git a/src/client/app/components/admin/AdminSideBar.tsx b/src/client/app/components/admin/AdminSideBar.tsx
new file mode 100644
index 000000000..da50823b7
--- /dev/null
+++ b/src/client/app/components/admin/AdminSideBar.tsx
@@ -0,0 +1,54 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react';
+import translate from '../../utils/translate';
+
+interface SidebarProps {
+ onSelectPreference: (preference: string) => void,
+ selectedPreference: string;
+}
+
+/**
+ * Admin navigation side bar
+ * @param props Props for side bar
+ * @returns Admin navigation side bar
+ */
+export default function AdminSideBar(props: SidebarProps): React.JSX.Element {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/client/app/components/admin/CreateUserModalComponent.tsx b/src/client/app/components/admin/CreateUserModalComponent.tsx
new file mode 100644
index 000000000..7d1d62ded
--- /dev/null
+++ b/src/client/app/components/admin/CreateUserModalComponent.tsx
@@ -0,0 +1,167 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react';
+import { useState } from 'react';
+import { Alert, Button, Col, Container, FormFeedback, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader, Row } from 'reactstrap';
+import { FormattedMessage } from 'react-intl';
+import { UserRole } from '../../types/items';
+import { userApi } from '../../redux/api/userApi';
+import { NewUser } from '../../types/items';
+import { showErrorNotification, showSuccessNotification } from '../../utils/notifications';
+import translate from '../../utils/translate';
+
+/**
+ * Defines the create user modal form
+ * @returns CreateUserModal component
+ */
+export default function CreateUserModal() {
+ const [showModal, setShowModal] = useState(false);
+ const [email, setEmail] = useState('');
+ const [password, setPassword] = useState('');
+ const [confirmPassword, setConfirmPassword] = useState('');
+ const [passwordMatch, setPasswordMatch] = useState(true);
+ const [role, setRole] = useState('');
+ const [createUser] = userApi.useCreateUserMutation();
+
+ const handleShowModal = () => setShowModal(true);
+ const handleCloseModal = () => {
+ setShowModal(false);
+ resetForm();
+ };
+
+ const resetForm = () => {
+ setEmail('');
+ setPassword('');
+ setConfirmPassword('');
+ setRole('');
+ setPasswordMatch(true);
+ };
+
+ const handleSubmit = async () => {
+ if (password === confirmPassword) {
+ setPasswordMatch(true);
+ const userRole: UserRole = UserRole[role as keyof typeof UserRole];
+ const newUser: NewUser = { email, role: userRole, password };
+ createUser(newUser)
+ .unwrap()
+ .then(() => {
+ showSuccessNotification(translate('users.successfully.create.user'));
+ handleCloseModal();
+ })
+ .catch(() => {
+ showErrorNotification(translate('users.failed.to.create.user'));
+ });
+ } else {
+ setPasswordMatch(false);
+ }
+ };
+
+ const isFormValid = email && password && confirmPassword === password && role;
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+