feat: user profile/settings pages (#958)

2025-12-31 19:59:31 -05:00 · 2021-02-18 11:38:24 +09:00
parent 29b97ef6d8
commit bbb683e637
50 changed files with 2388 additions and 596 deletions
--- a/src/components/Common/Button/index.tsx
+++ b/src/components/Common/Button/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ForwardedRef } from 'react';

 export type ButtonType =
  | 'default'
@@ -16,6 +16,10 @@ type MergeElementProps<

 type ElementTypes = 'button' | 'a';

+type Element<P extends ElementTypes = 'button'> = P extends 'a'
+  ? HTMLAnchorElement
+  : HTMLButtonElement;
+
 type BaseProps<P> = {
  buttonType?: ButtonType;
  buttonSize?: 'default' | 'lg' | 'md' | 'sm';
@@ -29,16 +33,19 @@ type ButtonProps<P extends React.ElementType> = {
  as?: P;
 } & MergeElementProps<P, BaseProps<P>>;

-function Button<P extends ElementTypes = 'button'>({
-  buttonType = 'default',
-  buttonSize = 'default',
-  as,
-  children,
-  className,
-  ...props
-}: ButtonProps<P>): JSX.Element {
+function Button<P extends ElementTypes = 'button'>(
+  {
+    buttonType = 'default',
+    buttonSize = 'default',
+    as,
+    children,
+    className,
+    ...props
+  }: ButtonProps<P>,
+  ref?: React.Ref<Element<P>>
+): JSX.Element {
  const buttonStyle = [
-    'inline-flex items-center justify-center border border-transparent leading-5 font-medium rounded-md focus:outline-none transition ease-in-out duration-150',
+    'inline-flex items-center justify-center border border-transparent leading-5 font-medium rounded-md focus:outline-none transition ease-in-out duration-150 cursor-pointer',
  ];
  switch (buttonType) {
    case 'primary':
@@ -93,6 +100,7 @@ function Button<P extends ElementTypes = 'button'>({
      <a
        className={buttonStyle.join(' ')}
        {...(props as React.ComponentProps<'a'>)}
+        ref={ref as ForwardedRef<HTMLAnchorElement>}
      >
        <span className="flex items-center">{children}</span>
      </a>
@@ -102,6 +110,7 @@ function Button<P extends ElementTypes = 'button'>({
      <button
        className={buttonStyle.join(' ')}
        {...(props as React.ComponentProps<'button'>)}
+        ref={ref as ForwardedRef<HTMLButtonElement>}
      >
        <span className="flex items-center">{children}</span>
      </button>
@@ -109,4 +118,4 @@ function Button<P extends ElementTypes = 'button'>({
  }
 }

-export default Button;
+export default React.forwardRef(Button) as typeof Button;
--- a/src/components/Layout/UserDropdown/index.tsx
+++ b/src/components/Layout/UserDropdown/index.tsx
@@ -3,13 +3,17 @@ import Transition from '../../Transition';
 import { useUser } from '../../../hooks/useUser';
 import axios from 'axios';
 import useClickOutside from '../../../hooks/useClickOutside';
-import { defineMessages, FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
+import Link from 'next/link';

 const messages = defineMessages({
+  myprofile: 'Profile',
+  settings: 'Settings',
  signout: 'Sign Out',
 });

 const UserDropdown: React.FC = () => {
+  const intl = useIntl();
  const dropdownRef = useRef<HTMLDivElement>(null);
  const { user, revalidate } = useUser();
  const [isDropdownOpen, setDropdownOpen] = useState(false);
@@ -55,13 +59,43 @@ const UserDropdown: React.FC = () => {
            aria-orientation="vertical"
            aria-labelledby="user-menu"
          >
+            <Link href={`/profile`}>
+              <a
+                className="block px-4 py-2 text-sm text-gray-200 transition duration-150 ease-in-out hover:bg-gray-600"
+                role="menuitem"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    setDropdownOpen(false);
+                  }
+                }}
+                onClick={() => setDropdownOpen(false)}
+              >
+                {intl.formatMessage(messages.myprofile)}
+              </a>
+            </Link>
+            <Link href={`/profile/settings`}>
+              <a
+                className="block px-4 py-2 text-sm text-gray-200 transition duration-150 ease-in-out hover:bg-gray-600"
+                role="menuitem"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    setDropdownOpen(false);
+                  }
+                }}
+                onClick={() => setDropdownOpen(false)}
+              >
+                {intl.formatMessage(messages.settings)}
+              </a>
+            </Link>
            <a
              href="#"
              className="block px-4 py-2 text-sm text-gray-200 transition duration-150 ease-in-out hover:bg-gray-600"
              role="menuitem"
              onClick={() => logout()}
            >
-              <FormattedMessage {...messages.signout} />
+              {intl.formatMessage(messages.signout)}
            </a>
          </div>
        </div>
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -36,6 +36,9 @@ const Layout: React.FC = ({ children }) => {

  return (
    <div className="flex h-full min-w-0 min-h-full bg-gray-900">
+      <div className="absolute w-full h-64 from-gray-800 to-gray-900 bg-gradient-to-bl">
+        <div className="relative inset-0 w-full h-full from-gray-900 to-transparent bg-gradient-to-t" />
+      </div>
      <Sidebar open={isSidebarOpen} setClosed={() => setSidebarOpen(false)} />

      <div className="relative flex flex-col flex-1 w-0 min-w-0 mb-16 md:ml-64">
--- a/src/components/Login/LocalLogin.tsx
+++ b/src/components/Login/LocalLogin.tsx
@@ -4,6 +4,7 @@ import Button from '../Common/Button';
 import { Field, Form, Formik } from 'formik';
 import * as Yup from 'yup';
 import axios from 'axios';
+import Link from 'next/link';

 const messages = defineMessages({
  email: 'Email Address',
@@ -99,9 +100,11 @@ const LocalLogin: React.FC<LocalLoginProps> = ({ revalidate }) => {
              <div className="pt-5 mt-8 border-t border-gray-700">
                <div className="flex justify-between">
                  <span className="inline-flex rounded-md shadow-sm">
-                    <Button as="a" buttonType="ghost" href="/resetpassword">
-                      {intl.formatMessage(messages.forgotpassword)}
-                    </Button>
+                    <Link href="/resetpassword" passHref>
+                      <Button as="a" buttonType="ghost">
+                        {intl.formatMessage(messages.forgotpassword)}
+                      </Button>
+                    </Link>
                  </span>
                  <span className="inline-flex rounded-md shadow-sm">
                    <Button
--- a/src/components/RequestCard/index.tsx
+++ b/src/components/RequestCard/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { useInView } from 'react-intersection-observer';
 import type { MediaRequest } from '../../../server/entity/MediaRequest';
 import type { TvDetails } from '../../../server/models/Tv';
@@ -37,9 +37,10 @@ const RequestCardPlaceholder: React.FC = () => {

 interface RequestCardProps {
  request: MediaRequest;
+  onTitleData?: (requestId: number, title: MovieDetails | TvDetails) => void;
 }

-const RequestCard: React.FC<RequestCardProps> = ({ request }) => {
+const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
  const { ref, inView } = useInView({
    triggerOnce: true,
  });
@@ -69,6 +70,12 @@ const RequestCard: React.FC<RequestCardProps> = ({ request }) => {
    }
  };

+  useEffect(() => {
+    if (title && onTitleData) {
+      onTitleData(request.id, title);
+    }
+  }, [title, onTitleData, request]);
+
  if (!title && !error) {
    return (
      <div ref={ref}>
@@ -105,16 +112,18 @@ const RequestCard: React.FC<RequestCardProps> = ({ request }) => {
            {isMovie(title) ? title.title : title.name}
          </Link>
        </h2>
-        <div className="flex items-center">
-          <img
-            src={requestData.requestedBy.avatar}
-            alt=""
-            className="w-4 mr-1 rounded-full sm:mr-2 sm:w-5"
-          />
-          <span className="text-xs truncate sm:text-sm">
-            {requestData.requestedBy.displayName}
-          </span>
-        </div>
+        <Link href={`/users/${requestData.requestedBy.id}`}>
+          <a className="flex items-center group">
+            <img
+              src={requestData.requestedBy.avatar}
+              alt=""
+              className="w-4 mr-1 rounded-full sm:mr-2 sm:w-5"
+            />
+            <span className="text-xs truncate sm:text-sm group-hover:underline">
+              {requestData.requestedBy.displayName}
+            </span>
+          </a>
+        </Link>
        {requestData.media.status && (
          <div className="mt-1 sm:mt-2">
            <StatusBadge
--- a/src/components/RequestList/RequestItem/index.tsx
+++ b/src/components/RequestList/RequestItem/index.tsx
@@ -162,16 +162,18 @@ const RequestItem: React.FC<RequestItemProps> = ({
                {isMovie(title) ? title.title : title.name}
              </a>
            </Link>
-            <div className="flex items-center">
-              <img
-                src={requestData.requestedBy.avatar}
-                alt=""
-                className="w-5 mr-2 rounded-full"
-              />
-              <span className="text-sm">
-                {requestData.requestedBy.displayName}
-              </span>
-            </div>
+            <Link href={`/users/${requestData.requestedBy.id}`}>
+              <a className="flex items-center mt-1">
+                <img
+                  src={requestData.requestedBy.avatar}
+                  alt=""
+                  className="w-5 mr-2 rounded-full"
+                />
+                <span className="text-sm hover:underline">
+                  {requestData.requestedBy.displayName}
+                </span>
+              </a>
+            </Link>
            {requestData.seasons.length > 0 && (
              <div className="items-center hidden mt-2 text-sm sm:flex">
                <span className="mr-2">
--- a/src/components/ResetPassword/RequestResetLink.tsx
+++ b/src/components/ResetPassword/RequestResetLink.tsx
@@ -6,6 +6,7 @@ import Button from '../Common/Button';
 import { Field, Form, Formik } from 'formik';
 import * as Yup from 'yup';
 import axios from 'axios';
+import Link from 'next/link';

 const messages = defineMessages({
  forgotpassword: 'Forgot Your Password?',
@@ -60,13 +61,15 @@ const ResetPassword: React.FC = () => {
          <div className="px-10 py-8">
            {hasSubmitted ? (
              <>
-                <p className="text-md text-gray-300">
+                <p className="text-gray-300 text-md">
                  {intl.formatMessage(messages.requestresetlinksuccessmessage)}
                </p>
-                <span className="flex rounded-md shadow-sm justify-center mt-4">
-                  <Button as="a" href="/login" buttonType="ghost">
-                    {intl.formatMessage(messages.gobacklogin)}
-                  </Button>
+                <span className="flex justify-center mt-4 rounded-md shadow-sm">
+                  <Link href="/login" passHref>
+                    <Button as="a" buttonType="ghost">
+                      {intl.formatMessage(messages.gobacklogin)}
+                    </Button>
+                  </Link>
                </span>
              </>
            ) : (
@@ -105,7 +108,7 @@ const ResetPassword: React.FC = () => {
                              name="email"
                              type="text"
                              placeholder="name@example.com"
-                              className="text-white flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
+                              className="flex-1 block w-full min-w-0 text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
                            />
                          </div>
                          {errors.email && touched.email && (
--- a/src/components/ResetPassword/index.tsx
+++ b/src/components/ResetPassword/index.tsx
@@ -7,6 +7,7 @@ import { Field, Form, Formik } from 'formik';
 import * as Yup from 'yup';
 import axios from 'axios';
 import { useRouter } from 'next/router';
+import Link from 'next/link';

 const messages = defineMessages({
  resetpassword: 'Reset Password',
@@ -76,13 +77,15 @@ const ResetPassword: React.FC = () => {
          <div className="px-10 py-8">
            {hasSubmitted ? (
              <>
-                <p className="text-md text-gray-300">
+                <p className="text-gray-300 text-md">
                  {intl.formatMessage(messages.resetpasswordsuccessmessage)}
                </p>
-                <span className="flex rounded-md shadow-sm justify-center mt-4">
-                  <Button as="a" href="/login" buttonType="ghost">
-                    {intl.formatMessage(messages.gobacklogin)}
-                  </Button>
+                <span className="flex justify-center mt-4 rounded-md shadow-sm">
+                  <Link href="/login" passHref>
+                    <Button as="a" buttonType="ghost">
+                      {intl.formatMessage(messages.gobacklogin)}
+                    </Button>
+                  </Link>
                </span>
              </>
            ) : (
@@ -124,7 +127,7 @@ const ResetPassword: React.FC = () => {
                              placeholder={intl.formatMessage(
                                messages.password
                              )}
-                              className="text-white flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
+                              className="flex-1 block w-full min-w-0 text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
                            />
                          </div>
                          {errors.password && touched.password && (
@@ -144,7 +147,7 @@ const ResetPassword: React.FC = () => {
                              name="confirmPassword"
                              placeholder="Confirm Password"
                              type="password"
-                              className="text-white flex-1 block w-full min-w-0 transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
+                              className="flex-1 block w-full min-w-0 text-white transition duration-150 ease-in-out bg-gray-700 border border-gray-500 rounded-md form-input sm:text-sm sm:leading-5"
                            />
                          </div>
                          {errors.confirmPassword &&
--- a/src/components/UserEdit/index.tsx
+++ b/src/components/UserEdit/index.tsx
@@ -1,198 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useRouter } from 'next/router';
-import LoadingSpinner from '../Common/LoadingSpinner';
-import { useUser } from '../../hooks/useUser';
-import Button from '../Common/Button';
-import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
-import axios from 'axios';
-import { useToasts } from 'react-toast-notifications';
-import Header from '../Common/Header';
-import PermissionEdit from '../PermissionEdit';
-import { Field, Form, Formik } from 'formik';
-import { UserType } from '../../../server/constants/user';
-import PageTitle from '../Common/PageTitle';
-import * as Yup from 'yup';
-
-export const messages = defineMessages({
-  edituser: 'Edit User',
-  plexUsername: 'Plex Username',
-  username: 'Display Name',
-  avatar: 'Avatar',
-  email: 'Email',
-  permissions: 'Permissions',
-  save: 'Save Changes',
-  saving: 'Saving…',
-  usersaved: 'User saved!',
-  userfail: 'Something went wrong while saving the user.',
-  validationEmail: 'You must provide a valid email address',
-});
-
-const UserEdit: React.FC = () => {
-  const router = useRouter();
-  const intl = useIntl();
-  const { addToast } = useToasts();
-  const { user: currentUser } = useUser();
-  const { user, error, revalidate } = useUser({
-    id: Number(router.query.userId),
-  });
-  const [currentPermission, setCurrentPermission] = useState(0);
-
-  useEffect(() => {
-    if (currentPermission !== user?.permissions ?? 0) {
-      setCurrentPermission(user?.permissions ?? 0);
-    }
-    // We know what we are doing here.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [user]);
-
-  const UserEditSchema = Yup.object().shape({
-    email: Yup.string()
-      .required(intl.formatMessage(messages.validationEmail))
-      .email(intl.formatMessage(messages.validationEmail)),
-  });
-
-  if (!user && !error) {
-    return <LoadingSpinner />;
-  }
-
-  return (
-    <Formik
-      initialValues={{
-        plexUsername: user?.plexUsername,
-        username: user?.username,
-        email: user?.email,
-      }}
-      validationSchema={UserEditSchema}
-      onSubmit={async (values) => {
-        try {
-          await axios.put(`/api/v1/user/${user?.id}`, {
-            permissions: currentPermission,
-            email: user?.email,
-            username: values.username,
-          });
-          addToast(intl.formatMessage(messages.usersaved), {
-            appearance: 'success',
-            autoDismiss: true,
-          });
-        } catch (e) {
-          addToast(intl.formatMessage(messages.userfail), {
-            appearance: 'error',
-            autoDismiss: true,
-          });
-          throw new Error(
-            `Something went wrong while saving the user: ${e.message}`
-          );
-        } finally {
-          revalidate();
-        }
-      }}
-    >
-      {({ errors, touched, isSubmitting, handleSubmit }) => (
-        <Form>
-          <PageTitle title={intl.formatMessage(messages.edituser)} />
-          <div>
-            <div className="flex flex-col justify-between sm:flex-row">
-              <Header>
-                <FormattedMessage {...messages.edituser} />
-              </Header>
-            </div>
-            {user?.userType === UserType.PLEX && (
-              <div className="form-row">
-                <label htmlFor="plexUsername" className="text-label">
-                  {intl.formatMessage(messages.plexUsername)}
-                </label>
-                <div className="form-input">
-                  <div className="flex max-w-lg rounded-md shadow-sm">
-                    <Field
-                      id="plexUsername"
-                      name="plexUsername"
-                      type="text"
-                      readOnly
-                    />
-                  </div>
-                </div>
-              </div>
-            )}
-            <div className="form-row">
-              <label htmlFor="username" className="text-label">
-                {intl.formatMessage(messages.username)}
-              </label>
-              <div className="form-input">
-                <div className="flex max-w-lg rounded-md shadow-sm">
-                  <Field id="username" name="username" type="text" />
-                </div>
-              </div>
-            </div>
-            <div className="form-row">
-              <label htmlFor="email" className="text-label">
-                <FormattedMessage {...messages.email} />
-              </label>
-              <div className="form-input">
-                <div className="flex max-w-lg rounded-md shadow-sm">
-                  <Field id="email" name="email" type="text" readOnly />
-                </div>
-                {errors.email && touched.email && (
-                  <div className="error">{errors.email}</div>
-                )}
-              </div>
-            </div>
-            <div className="form-row">
-              <span className="text-label">
-                <FormattedMessage {...messages.avatar} />
-              </span>
-              <div className="form-input">
-                <div className="flex max-w-lg rounded-md shadow-sm">
-                  <img
-                    className="w-40 h-40 rounded-full"
-                    src={user?.avatar}
-                    alt=""
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            role="group"
-            aria-labelledby="group-label"
-            className="form-group"
-          >
-            <div className="form-row">
-              <span id="group-label" className="group-label">
-                <FormattedMessage {...messages.permissions} />
-              </span>
-              <div className="form-input">
-                <div className="max-w-lg">
-                  <PermissionEdit
-                    user={currentUser}
-                    currentPermission={currentPermission}
-                    onUpdate={(newPermission) =>
-                      setCurrentPermission(newPermission)
-                    }
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="actions">
-            <div className="flex justify-end">
-              <span className="inline-flex ml-3 rounded-md shadow-sm">
-                <Button
-                  buttonType="primary"
-                  type="submit"
-                  disabled={isSubmitting}
-                  onClick={() => handleSubmit}
-                >
-                  {isSubmitting
-                    ? intl.formatMessage(messages.saving)
-                    : intl.formatMessage(messages.save)}
-                </Button>
-              </span>
-            </div>
-          </div>
-        </Form>
-      )}
-    </Formik>
-  );
-};
-
-export default UserEdit;
--- a/src/components/UserList/BulkEditModal.tsx
+++ b/src/components/UserList/BulkEditModal.tsx
@@ -5,7 +5,6 @@ import { User, useUser } from '../../hooks/useUser';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import axios from 'axios';
 import { useToasts } from 'react-toast-notifications';
-import { messages as userEditMessages } from '../UserEdit';

 interface BulkEditProps {
  selectedUserIds: number[];
@@ -17,6 +16,11 @@ interface BulkEditProps {

 const messages = defineMessages({
  userssaved: 'Users saved',
+  save: 'Save Changes',
+  saving: 'Saving…',
+  userfail: 'Something went wrong while saving the user.',
+  permissions: 'Permissions',
+  edituser: 'Edit User',
 });

 const BulkEditModal: React.FC<BulkEditProps> = ({
@@ -53,7 +57,7 @@ const BulkEditModal: React.FC<BulkEditProps> = ({
        autoDismiss: true,
      });
    } catch (e) {
-      addToast(intl.formatMessage(userEditMessages.userfail), {
+      addToast(intl.formatMessage(messages.userfail), {
        appearance: 'error',
        autoDismiss: true,
      });
@@ -81,12 +85,12 @@ const BulkEditModal: React.FC<BulkEditProps> = ({

  return (
    <Modal
-      title={intl.formatMessage(userEditMessages.edituser)}
+      title={intl.formatMessage(messages.edituser)}
      onOk={() => {
        updateUsers();
      }}
      okDisabled={isSaving}
-      okText={intl.formatMessage(userEditMessages.save)}
+      okText={intl.formatMessage(messages.save)}
      onCancel={onCancel}
    >
      <div className="mt-6 mb-6">
@@ -94,7 +98,7 @@ const BulkEditModal: React.FC<BulkEditProps> = ({
          <div className="form-row">
            <div>
              <div id="group-label" className="group-label">
-                <FormattedMessage {...userEditMessages.permissions} />
+                <FormattedMessage {...messages.permissions} />
              </div>
            </div>
            <div className="form-input">
--- a/src/components/UserList/index.tsx
+++ b/src/components/UserList/index.tsx
@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
 import useSWR from 'swr';
 import LoadingSpinner from '../Common/LoadingSpinner';
-import type { User } from '../../../server/entity/User';
 import Badge from '../Common/Badge';
 import { FormattedDate, defineMessages, useIntl } from 'react-intl';
 import Button from '../Common/Button';
 import { hasPermission } from '../../../server/lib/permissions';
-import { Permission, UserType, useUser } from '../../hooks/useUser';
+import { Permission, User, UserType, useUser } from '../../hooks/useUser';
 import { useRouter } from 'next/router';
 import Header from '../Common/Header';
 import Table from '../Common/Table';
@@ -21,6 +20,7 @@ import AddUserIcon from '../../assets/useradd.svg';
 import Alert from '../Common/Alert';
 import BulkEditModal from './BulkEditModal';
 import PageTitle from '../Common/PageTitle';
+import Link from 'next/link';

 const messages = defineMessages({
  users: 'Users',
@@ -485,17 +485,21 @@ const UserList: React.FC = () => {
              </Table.TD>
              <Table.TD>
                <div className="flex items-center">
-                  <div className="flex-shrink-0 w-10 h-10">
-                    <img
-                      className="w-10 h-10 rounded-full"
-                      src={user.avatar}
-                      alt=""
-                    />
-                  </div>
+                  <Link href={`/users/${user.id}`}>
+                    <a className="flex-shrink-0 w-10 h-10">
+                      <img
+                        className="w-10 h-10 rounded-full"
+                        src={user.avatar}
+                        alt=""
+                      />
+                    </a>
+                  </Link>
                  <div className="ml-4">
-                    <div className="text-sm font-medium leading-5">
-                      {user.displayName}
-                    </div>
+                    <Link href={`/users/${user.id}`}>
+                      <a className="text-sm font-medium leading-5">
+                        {user.displayName}
+                      </a>
+                    </Link>
                    <div className="text-sm leading-5 text-gray-300">
                      {user.email}
                    </div>
@@ -533,8 +537,8 @@ const UserList: React.FC = () => {
                  className="mr-2"
                  onClick={() =>
                    router.push(
-                      '/users/[userId]/edit',
-                      `/users/${user.id}/edit`
+                      '/users/[userId]/settings',
+                      `/users/${user.id}/settings`
                    )
                  }
                >
--- a/src/components/UserProfile/ProfileHeader/index.tsx
+++ b/src/components/UserProfile/ProfileHeader/index.tsx
@@ -0,0 +1,120 @@
+import Link from 'next/link';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Permission, User, useUser } from '../../../hooks/useUser';
+import Button from '../../Common/Button';
+
+const messages = defineMessages({
+  settings: 'Edit Settings',
+  profile: 'View Profile',
+});
+
+interface ProfileHeaderProps {
+  user: User;
+  isSettingsPage?: boolean;
+}
+
+const ProfileHeader: React.FC<ProfileHeaderProps> = ({
+  user,
+  isSettingsPage,
+}) => {
+  const intl = useIntl();
+  const { user: loggedInUser, hasPermission } = useUser();
+
+  return (
+    <div className="relative z-40 mt-6 mb-12 md:flex md:items-end md:justify-between md:space-x-5">
+      <div className="flex items-end space-x-5 justify-items-end">
+        <div className="flex-shrink-0">
+          <div className="relative">
+            <img
+              className="w-24 h-24 bg-gray-600 rounded-full"
+              src={user.avatar}
+              alt=""
+            />
+            <span
+              className="absolute inset-0 rounded-full shadow-inner"
+              aria-hidden="true"
+            ></span>
+          </div>
+        </div>
+        <div className="pt-1.5">
+          <h1 className="flex flex-col mb-1 sm:items-center sm:flex-row">
+            <Link
+              href={
+                user.id === loggedInUser?.id ? '/profile' : `/users/${user.id}`
+              }
+            >
+              <a className="text-lg font-bold text-transparent sm:text-2xl bg-clip-text bg-gradient-to-br from-indigo-400 to-purple-400 hover:to-purple-200">
+                {user.displayName}
+              </a>
+            </Link>
+            {user.email && (
+              <span className="text-sm text-gray-400 sm:text-lg sm:ml-2">
+                ({user.email})
+              </span>
+            )}
+          </h1>
+          <p className="text-sm font-medium text-gray-400">
+            Joined {intl.formatDate(user.createdAt)} |{' '}
+            {intl.formatNumber(user.requestCount)} Requests
+          </p>
+        </div>
+      </div>
+      <div className="flex flex-col-reverse mt-6 space-y-4 space-y-reverse justify-stretch sm:flex-row-reverse sm:justify-end sm:space-x-reverse sm:space-y-0 sm:space-x-3 md:mt-0 md:flex-row md:space-x-3">
+        {(loggedInUser?.id === user.id ||
+          hasPermission(Permission.MANAGE_USERS)) &&
+        !isSettingsPage ? (
+          <Link
+            href={
+              loggedInUser?.id === user.id
+                ? `/profile/settings`
+                : `/users/${user.id}/settings`
+            }
+            passHref
+          >
+            <Button as="a">
+              <svg
+                className="w-5 h-5 mr-1"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              {intl.formatMessage(messages.settings)}
+            </Button>
+          </Link>
+        ) : (
+          <Link
+            href={
+              loggedInUser?.id === user.id ? `/profile` : `/users/${user.id}`
+            }
+            passHref
+          >
+            <Button as="a">
+              <svg
+                className="w-5 h-5 mr-1"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              {intl.formatMessage(messages.profile)}
+            </Button>
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ProfileHeader;
--- a/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserGeneralSettings/index.tsx
@@ -0,0 +1,135 @@
+import axios from 'axios';
+import { Field, Form, Formik } from 'formik';
+import { useRouter } from 'next/router';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
+import useSWR from 'swr';
+import { UserType, useUser } from '../../../../hooks/useUser';
+import Error from '../../../../pages/_error';
+import Badge from '../../../Common/Badge';
+import Button from '../../../Common/Button';
+import LoadingSpinner from '../../../Common/LoadingSpinner';
+
+const messages = defineMessages({
+  generalsettings: 'General Settings',
+  displayName: 'Display Name',
+  save: 'Save Changes',
+  saving: 'Saving…',
+  plexuser: 'Plex User',
+  localuser: 'Local User',
+  toastSettingsSuccess: 'Settings successfully saved!',
+  toastSettingsFailure: 'Something went wrong while saving settings.',
+});
+
+const UserGeneralSettings: React.FC = () => {
+  const intl = useIntl();
+  const { addToast } = useToasts();
+  const router = useRouter();
+  const { user, mutate } = useUser({ id: Number(router.query.userId) });
+  const { data, error, revalidate } = useSWR<{ username?: string }>(
+    user ? `/api/v1/user/${user?.id}/settings/main` : null
+  );
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  if (!data) {
+    return <Error statusCode={500} />;
+  }
+
+  return (
+    <>
+      <div className="mb-6">
+        <h3 className="heading">
+          {intl.formatMessage(messages.generalsettings)}
+        </h3>
+      </div>
+      <Formik
+        initialValues={{
+          displayName: data?.username,
+        }}
+        enableReinitialize
+        onSubmit={async (values) => {
+          try {
+            await axios.post(`/api/v1/user/${user?.id}/settings/main`, {
+              username: values.displayName,
+            });
+
+            addToast(intl.formatMessage(messages.toastSettingsSuccess), {
+              autoDismiss: true,
+              appearance: 'success',
+            });
+          } catch (e) {
+            addToast(intl.formatMessage(messages.toastSettingsFailure), {
+              autoDismiss: true,
+              appearance: 'error',
+            });
+          } finally {
+            revalidate();
+            mutate();
+          }
+        }}
+      >
+        {({ errors, touched, isSubmitting }) => {
+          return (
+            <Form className="section">
+              <div className="form-row">
+                <div className="text-label">Account Type</div>
+                <div className="mb-1 text-sm font-medium leading-5 text-gray-400 sm:mt-2">
+                  <div className="flex items-center max-w-lg">
+                    {user?.userType === UserType.PLEX ? (
+                      <Badge badgeType="warning">
+                        {intl.formatMessage(messages.plexuser)}
+                      </Badge>
+                    ) : (
+                      <Badge badgeType="default">
+                        {intl.formatMessage(messages.localuser)}
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className="form-row">
+                <label htmlFor="displayName" className="text-label">
+                  {intl.formatMessage(messages.displayName)}
+                </label>
+                <div className="form-input">
+                  <div className="flex max-w-lg rounded-md shadow-sm">
+                    <Field
+                      id="displayName"
+                      name="displayName"
+                      type="text"
+                      placeholder={user?.displayName}
+                    />
+                  </div>
+                  {errors.displayName && touched.displayName && (
+                    <div className="error">{errors.displayName}</div>
+                  )}
+                </div>
+              </div>
+              <div className="actions">
+                <div className="flex justify-end">
+                  <span className="inline-flex ml-3 rounded-md shadow-sm">
+                    <Button
+                      buttonType="primary"
+                      type="submit"
+                      disabled={isSubmitting}
+                    >
+                      {isSubmitting
+                        ? intl.formatMessage(messages.saving)
+                        : intl.formatMessage(messages.save)}
+                    </Button>
+                  </span>
+                </div>
+              </div>
+            </Form>
+          );
+        }}
+      </Formik>
+    </>
+  );
+};
+
+export default UserGeneralSettings;
--- a/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx
@@ -0,0 +1,134 @@
+import axios from 'axios';
+import { Field, Form, Formik } from 'formik';
+import { useRouter } from 'next/router';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
+import useSWR from 'swr';
+import { useUser } from '../../../../hooks/useUser';
+import Error from '../../../../pages/_error';
+import Button from '../../../Common/Button';
+import LoadingSpinner from '../../../Common/LoadingSpinner';
+import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
+
+const messages = defineMessages({
+  notificationsettings: 'Notification Settings',
+  enableNotifications: 'Enable Notifications',
+  discordId: 'Discord ID',
+  save: 'Save Changes',
+  saving: 'Saving…',
+  plexuser: 'Plex User',
+  localuser: 'Local User',
+  toastSettingsSuccess: 'Settings successfully saved!',
+  toastSettingsFailure: 'Something went wrong while saving settings.',
+});
+
+const UserNotificationSettings: React.FC = () => {
+  const intl = useIntl();
+  const { addToast } = useToasts();
+  const router = useRouter();
+  const { user, mutate } = useUser({ id: Number(router.query.userId) });
+  const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
+    user ? `/api/v1/user/${user?.id}/settings/notifications` : null
+  );
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  if (!data) {
+    return <Error statusCode={500} />;
+  }
+
+  return (
+    <>
+      <div className="mb-6">
+        <h3 className="heading">
+          {intl.formatMessage(messages.notificationsettings)}
+        </h3>
+      </div>
+      <Formik
+        initialValues={{
+          enableNotifications: data?.enableNotifications,
+          discordId: data?.discordId,
+        }}
+        enableReinitialize
+        onSubmit={async (values) => {
+          try {
+            await axios.post(
+              `/api/v1/user/${user?.id}/settings/notifications`,
+              {
+                enableNotifications: values.enableNotifications,
+                discordId: values.discordId,
+              }
+            );
+
+            addToast(intl.formatMessage(messages.toastSettingsSuccess), {
+              autoDismiss: true,
+              appearance: 'success',
+            });
+          } catch (e) {
+            addToast(intl.formatMessage(messages.toastSettingsFailure), {
+              autoDismiss: true,
+              appearance: 'error',
+            });
+          } finally {
+            revalidate();
+            mutate();
+          }
+        }}
+      >
+        {({ errors, touched, isSubmitting }) => {
+          return (
+            <Form className="section">
+              <div className="form-row">
+                <label htmlFor="enableNotifications" className="checkbox-label">
+                  <span className="mr-2">
+                    {intl.formatMessage(messages.enableNotifications)}
+                  </span>
+                </label>
+                <div className="form-input">
+                  <Field
+                    type="checkbox"
+                    id="enableNotifications"
+                    name="enableNotifications"
+                  />
+                </div>
+              </div>
+              <div className="form-row">
+                <label htmlFor="discordId" className="text-label">
+                  {intl.formatMessage(messages.discordId)}
+                </label>
+                <div className="form-input">
+                  <div className="flex max-w-lg rounded-md shadow-sm">
+                    <Field id="discordId" name="discordId" type="text" />
+                  </div>
+                  {errors.discordId && touched.discordId && (
+                    <div className="error">{errors.discordId}</div>
+                  )}
+                </div>
+              </div>
+              <div className="actions">
+                <div className="flex justify-end">
+                  <span className="inline-flex ml-3 rounded-md shadow-sm">
+                    <Button
+                      buttonType="primary"
+                      type="submit"
+                      disabled={isSubmitting}
+                    >
+                      {isSubmitting
+                        ? intl.formatMessage(messages.saving)
+                        : intl.formatMessage(messages.save)}
+                    </Button>
+                  </span>
+                </div>
+              </div>
+            </Form>
+          );
+        }}
+      </Formik>
+    </>
+  );
+};
+
+export default UserNotificationSettings;
--- a/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserPasswordChange/index.tsx
@@ -0,0 +1,192 @@
+import axios from 'axios';
+import { Field, Form, Formik } from 'formik';
+import { useRouter } from 'next/router';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
+import useSWR from 'swr';
+import { useUser } from '../../../../hooks/useUser';
+import Error from '../../../../pages/_error';
+import Alert from '../../../Common/Alert';
+import Button from '../../../Common/Button';
+import LoadingSpinner from '../../../Common/LoadingSpinner';
+import * as Yup from 'yup';
+
+const messages = defineMessages({
+  password: 'Password',
+  currentpassword: 'Current Password',
+  newpassword: 'New Password',
+  confirmpassword: 'Confirm Password',
+  save: 'Save Changes',
+  saving: 'Saving…',
+  toastSettingsSuccess: 'Password changed!',
+  toastSettingsFailure:
+    'Something went wrong while changing the password. Is your current password correct?',
+  validationCurrentPassword: 'You must provide your current password',
+  validationNewPassword: 'You must provide a new password',
+  validationNewPasswordLength:
+    'Password is too short; should be a minimum of 8 characters',
+  validationConfirmPassword: 'You must confirm your new password',
+  validationConfirmPasswordSame: 'Password must match',
+  nopasswordset: 'No Password Set',
+  nopasswordsetDescription:
+    'This user account currently does not have an Overseerr-specific password.  Configure a password below to allow this account to sign-in as a "local user."',
+});
+
+const UserPasswordChange: React.FC = () => {
+  const intl = useIntl();
+  const { addToast } = useToasts();
+  const router = useRouter();
+  const { user: currentUser } = useUser();
+  const { user } = useUser({ id: Number(router.query.userId) });
+  const { data, error, revalidate } = useSWR<{ hasPassword: boolean }>(
+    user ? `/api/v1/user/${user?.id}/settings/password` : null
+  );
+
+  const PasswordChangeSchema = Yup.object().shape({
+    currentPassword: Yup.lazy(() =>
+      data?.hasPassword
+        ? Yup.string().required(
+            intl.formatMessage(messages.validationCurrentPassword)
+          )
+        : Yup.mixed().optional()
+    ),
+    newPassword: Yup.string()
+      .required(intl.formatMessage(messages.validationNewPassword))
+      .min(8, intl.formatMessage(messages.validationNewPasswordLength)),
+    confirmPassword: Yup.string()
+      .required(intl.formatMessage(messages.validationConfirmPassword))
+      .oneOf(
+        [Yup.ref('newPassword'), null],
+        intl.formatMessage(messages.validationConfirmPasswordSame)
+      ),
+  });
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  if (!data) {
+    return <Error statusCode={500} />;
+  }
+
+  return (
+    <>
+      <div className="mb-6">
+        <h3 className="heading">{intl.formatMessage(messages.password)}</h3>
+      </div>
+      <Formik
+        initialValues={{
+          currentPassword: '',
+          newPassword: '',
+          confirmPassword: '',
+        }}
+        validationSchema={PasswordChangeSchema}
+        enableReinitialize
+        onSubmit={async (values, { resetForm }) => {
+          try {
+            await axios.post(`/api/v1/user/${user?.id}/settings/password`, {
+              currentPassword: values.currentPassword,
+              newPassword: values.newPassword,
+              confirmPassword: values.confirmPassword,
+            });
+
+            addToast(intl.formatMessage(messages.toastSettingsSuccess), {
+              autoDismiss: true,
+              appearance: 'success',
+            });
+          } catch (e) {
+            addToast(intl.formatMessage(messages.toastSettingsFailure), {
+              autoDismiss: true,
+              appearance: 'error',
+            });
+          } finally {
+            revalidate();
+            resetForm();
+          }
+        }}
+      >
+        {({ errors, touched, isSubmitting }) => {
+          return (
+            <Form className="section">
+              {!data.hasPassword && (
+                <Alert
+                  type="warning"
+                  title={intl.formatMessage(messages.nopasswordset)}
+                >
+                  {intl.formatMessage(messages.nopasswordsetDescription)}
+                </Alert>
+              )}
+              {data.hasPassword && user?.id === currentUser?.id && (
+                <div className="pb-6 form-row">
+                  <label htmlFor="currentPassword" className="text-label">
+                    {intl.formatMessage(messages.currentpassword)}
+                  </label>
+                  <div className="form-input">
+                    <div className="flex max-w-lg rounded-md shadow-sm">
+                      <Field
+                        id="currentPassword"
+                        name="currentPassword"
+                        type="text"
+                      />
+                    </div>
+                    {errors.currentPassword && touched.currentPassword && (
+                      <div className="error">{errors.currentPassword}</div>
+                    )}
+                  </div>
+                </div>
+              )}
+              <div className="form-row">
+                <label htmlFor="newPassword" className="text-label">
+                  {intl.formatMessage(messages.newpassword)}
+                </label>
+                <div className="form-input">
+                  <div className="flex max-w-lg rounded-md shadow-sm">
+                    <Field id="newPassword" name="newPassword" type="text" />
+                  </div>
+                  {errors.newPassword && touched.newPassword && (
+                    <div className="error">{errors.newPassword}</div>
+                  )}
+                </div>
+              </div>
+              <div className="form-row">
+                <label htmlFor="confirmPassword" className="text-label">
+                  {intl.formatMessage(messages.confirmpassword)}
+                </label>
+                <div className="form-input">
+                  <div className="flex max-w-lg rounded-md shadow-sm">
+                    <Field
+                      id="confirmPassword"
+                      name="confirmPassword"
+                      type="text"
+                    />
+                  </div>
+                  {errors.confirmPassword && touched.confirmPassword && (
+                    <div className="error">{errors.confirmPassword}</div>
+                  )}
+                </div>
+              </div>
+              <div className="actions">
+                <div className="flex justify-end">
+                  <span className="inline-flex ml-3 rounded-md shadow-sm">
+                    <Button
+                      buttonType="primary"
+                      type="submit"
+                      disabled={isSubmitting}
+                    >
+                      {isSubmitting
+                        ? intl.formatMessage(messages.saving)
+                        : intl.formatMessage(messages.save)}
+                    </Button>
+                  </span>
+                </div>
+              </div>
+            </Form>
+          );
+        }}
+      </Formik>
+    </>
+  );
+};
+
+export default UserPasswordChange;
--- a/src/components/UserProfile/UserSettings/UserPermissions/index.tsx
+++ b/src/components/UserProfile/UserSettings/UserPermissions/index.tsx
@@ -0,0 +1,122 @@
+import axios from 'axios';
+import { Form, Formik } from 'formik';
+import { useRouter } from 'next/router';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
+import useSWR from 'swr';
+import { useUser } from '../../../../hooks/useUser';
+import Error from '../../../../pages/_error';
+import Button from '../../../Common/Button';
+import LoadingSpinner from '../../../Common/LoadingSpinner';
+import PermissionEdit from '../../../PermissionEdit';
+
+const messages = defineMessages({
+  displayName: 'Display Name',
+  save: 'Save Changes',
+  saving: 'Saving…',
+  plexuser: 'Plex User',
+  localuser: 'Local User',
+  toastSettingsSuccess: 'Settings successfully saved!',
+  toastSettingsFailure: 'Something went wrong while saving settings.',
+  permissions: 'Permissions',
+});
+
+const UserPermissions: React.FC = () => {
+  const intl = useIntl();
+  const { addToast } = useToasts();
+  const router = useRouter();
+  const { user: currentUser } = useUser();
+  const { user, mutate } = useUser({ id: Number(router.query.userId) });
+  const { data, error, revalidate } = useSWR<{ permissions?: number }>(
+    user ? `/api/v1/user/${user?.id}/settings/permissions` : null
+  );
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  if (!data) {
+    return <Error statusCode={500} />;
+  }
+
+  return (
+    <>
+      <div className="mb-6">
+        <h3 className="heading">{intl.formatMessage(messages.permissions)}</h3>
+      </div>
+      <Formik
+        initialValues={{
+          currentPermissions: data?.permissions,
+        }}
+        enableReinitialize
+        onSubmit={async (values) => {
+          try {
+            await axios.post(`/api/v1/user/${user?.id}/settings/permissions`, {
+              permissions: values.currentPermissions ?? 0,
+            });
+
+            addToast(intl.formatMessage(messages.toastSettingsSuccess), {
+              autoDismiss: true,
+              appearance: 'success',
+            });
+          } catch (e) {
+            addToast(intl.formatMessage(messages.toastSettingsFailure), {
+              autoDismiss: true,
+              appearance: 'error',
+            });
+          } finally {
+            revalidate();
+            mutate();
+          }
+        }}
+      >
+        {({ isSubmitting, setFieldValue, values }) => {
+          return (
+            <Form className="section">
+              <div
+                role="group"
+                aria-labelledby="group-label"
+                className="form-group"
+              >
+                <div className="form-row">
+                  <span id="group-label" className="group-label">
+                    {intl.formatMessage(messages.permissions)}
+                  </span>
+                  <div className="form-input">
+                    <div className="max-w-lg">
+                      <PermissionEdit
+                        user={currentUser}
+                        currentPermission={values.currentPermissions ?? 0}
+                        onUpdate={(newPermission) =>
+                          setFieldValue('currentPermissions', newPermission)
+                        }
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div className="actions">
+                <div className="flex justify-end">
+                  <span className="inline-flex ml-3 rounded-md shadow-sm">
+                    <Button
+                      buttonType="primary"
+                      type="submit"
+                      disabled={isSubmitting}
+                    >
+                      {isSubmitting
+                        ? intl.formatMessage(messages.saving)
+                        : intl.formatMessage(messages.save)}
+                    </Button>
+                  </span>
+                </div>
+              </div>
+            </Form>
+          );
+        }}
+      </Formik>
+    </>
+  );
+};
+
+export default UserPermissions;
--- a/src/components/UserProfile/UserSettings/index.tsx
+++ b/src/components/UserProfile/UserSettings/index.tsx
@@ -0,0 +1,172 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { Permission, useUser } from '../../../hooks/useUser';
+import Error from '../../../pages/_error';
+import LoadingSpinner from '../../Common/LoadingSpinner';
+import PageTitle from '../../Common/PageTitle';
+import ProfileHeader from '../ProfileHeader';
+
+const messages = defineMessages({
+  settings: 'User Settings',
+  menuGeneralSettings: 'General Settings',
+  menuChangePass: 'Password',
+  menuNotifications: 'Notifications',
+  menuPermissions: 'Permissions',
+});
+
+interface SettingsRoute {
+  text: string;
+  route: string;
+  regex: RegExp;
+  requiredPermission?: Permission | Permission[];
+  permissionType?: { type: 'and' | 'or' };
+}
+
+const UserSettings: React.FC = ({ children }) => {
+  const router = useRouter();
+  const { hasPermission } = useUser();
+  const { user, error } = useUser({ id: Number(router.query.userId) });
+  const intl = useIntl();
+
+  if (!user && !error) {
+    return <LoadingSpinner />;
+  }
+
+  if (!user) {
+    return <Error statusCode={500} />;
+  }
+
+  const settingsRoutes: SettingsRoute[] = [
+    {
+      text: intl.formatMessage(messages.menuGeneralSettings),
+      route: '/settings/main',
+      regex: /\/settings(\/main)?$/,
+    },
+    {
+      text: intl.formatMessage(messages.menuChangePass),
+      route: '/settings/password',
+      regex: /\/settings\/password/,
+    },
+    {
+      text: intl.formatMessage(messages.menuNotifications),
+      route: '/settings/notifications',
+      regex: /\/settings\/notifications/,
+    },
+    {
+      text: intl.formatMessage(messages.menuPermissions),
+      route: '/settings/permissions',
+      regex: /\/settings\/permissions/,
+      requiredPermission: Permission.MANAGE_USERS,
+    },
+  ];
+
+  const activeLinkColor =
+    'border-indigo-600 text-indigo-500 focus:outline-none focus:text-indigo-500 focus:border-indigo-500';
+
+  const inactiveLinkColor =
+    'border-transparent text-gray-500 hover:text-gray-400 hover:border-gray-300 focus:outline-none focus:text-gray-4700 focus:border-gray-300';
+
+  const SettingsLink: React.FC<{
+    route: string;
+    regex: RegExp;
+    isMobile?: boolean;
+  }> = ({ children, route, regex, isMobile = false }) => {
+    const finalRoute = router.asPath.includes('/profile')
+      ? `/profile${route}`
+      : `/users/${user.id}${route}`;
+    if (isMobile) {
+      return <option value={finalRoute}>{children}</option>;
+    }
+
+    return (
+      <Link href={finalRoute}>
+        <a
+          className={`whitespace-nowrap ml-8 first:ml-0 py-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 ${
+            router.pathname.match(regex) ? activeLinkColor : inactiveLinkColor
+          }`}
+          aria-current="page"
+        >
+          {children}
+        </a>
+      </Link>
+    );
+  };
+
+  const currentRoute = settingsRoutes.find(
+    (route) => !!router.pathname.match(route.regex)
+  )?.route;
+
+  const finalRoute = router.asPath.includes('/profile')
+    ? `/profile${currentRoute}`
+    : `/users/${user.id}${currentRoute}`;
+
+  return (
+    <>
+      <PageTitle title={intl.formatMessage(messages.settings)} />
+      <ProfileHeader user={user} isSettingsPage />
+      <div className="mt-6">
+        <div className="sm:hidden">
+          <select
+            onChange={(e) => {
+              router.push(e.target.value);
+            }}
+            onBlur={(e) => {
+              router.push(e.target.value);
+            }}
+            defaultValue={finalRoute}
+            aria-label="Selected tab"
+          >
+            {settingsRoutes
+              .filter((route) =>
+                route.requiredPermission
+                  ? hasPermission(
+                      route.requiredPermission,
+                      route.permissionType
+                    )
+                  : true
+              )
+              .map((route, index) => (
+                <SettingsLink
+                  route={route.route}
+                  regex={route.regex}
+                  isMobile
+                  key={`mobile-settings-link-${index}`}
+                >
+                  {route.text}
+                </SettingsLink>
+              ))}
+          </select>
+        </div>
+        <div className="hidden sm:block">
+          <div className="border-b border-gray-600">
+            <nav className="flex -mb-px">
+              {settingsRoutes
+                .filter((route) =>
+                  route.requiredPermission
+                    ? hasPermission(
+                        route.requiredPermission,
+                        route.permissionType
+                      )
+                    : true
+                )
+                .map((route, index) => (
+                  <SettingsLink
+                    route={route.route}
+                    regex={route.regex}
+                    key={`standard-settings-link-${index}`}
+                  >
+                    {route.text}
+                  </SettingsLink>
+                ))}
+            </nav>
+          </div>
+        </div>
+      </div>
+      <div className="mt-10 text-white">{children}</div>
+    </>
+  );
+};
+
+export default UserSettings;
--- a/src/components/UserProfile/index.tsx
+++ b/src/components/UserProfile/index.tsx
@@ -0,0 +1,105 @@
+import { useRouter } from 'next/router';
+import React, { useCallback, useEffect, useState } from 'react';
+import useSWR from 'swr';
+import { useUser } from '../../hooks/useUser';
+import Error from '../../pages/_error';
+import LoadingSpinner from '../Common/LoadingSpinner';
+import { UserRequestsResponse } from '../../../server/interfaces/api/userInterfaces';
+import Slider from '../Slider';
+import RequestCard from '../RequestCard';
+import { MovieDetails } from '../../../server/models/Movie';
+import { TvDetails } from '../../../server/models/Tv';
+import ImageFader from '../Common/ImageFader';
+import PageTitle from '../Common/PageTitle';
+import ProfileHeader from './ProfileHeader';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  recentrequests: 'Recent Requests',
+});
+
+type MediaTitle = MovieDetails | TvDetails;
+
+const UserProfile: React.FC = () => {
+  const intl = useIntl();
+  const router = useRouter();
+  const { user, error } = useUser({
+    id: Number(router.query.userId),
+  });
+  const [availableTitles, setAvailableTitles] = useState<
+    Record<number, MediaTitle>
+  >({});
+
+  const { data: requests, error: requestError } = useSWR<UserRequestsResponse>(
+    user ? `/api/v1/user/${user?.id}/requests?take=10&skip=0` : null
+  );
+
+  const updateAvailableTitles = useCallback(
+    (requestId: number, mediaTitle: MediaTitle) => {
+      setAvailableTitles((titles) => ({
+        ...titles,
+        [requestId]: mediaTitle,
+      }));
+    },
+    []
+  );
+
+  useEffect(() => {
+    setAvailableTitles({});
+  }, [user?.id]);
+
+  if (!user && !error) {
+    return <LoadingSpinner />;
+  }
+
+  if (!user) {
+    return <Error statusCode={404} />;
+  }
+
+  return (
+    <>
+      <PageTitle title={user.displayName} />
+      {Object.keys(availableTitles).length > 0 && (
+        <div className="absolute left-0 right-0 z-0 -top-16 h-96">
+          <ImageFader
+            key={user.id}
+            isDarker
+            backgroundImages={Object.values(availableTitles)
+              .filter((media) => media.backdropPath)
+              .map(
+                (media) =>
+                  `//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${media.backdropPath}`
+              )
+              .slice(0, 6)}
+          />
+        </div>
+      )}
+      <ProfileHeader user={user} />
+      <div className="relative z-40 mt-6 mb-4 md:flex md:items-center md:justify-between">
+        <div className="flex-1 min-w-0">
+          <div className="inline-flex items-center text-xl leading-7 text-gray-300 cursor-default sm:text-2xl sm:leading-9 sm:truncate">
+            <span>{intl.formatMessage(messages.recentrequests)}</span>
+          </div>
+        </div>
+      </div>
+      <div className="relative z-40">
+        <Slider
+          sliderKey="requests"
+          isLoading={!requests && !requestError}
+          isEmpty={!!requests && !requestError && requests.results.length === 0}
+          items={(requests?.results ?? []).map((request) => (
+            <RequestCard
+              key={`request-slider-item-${request.id}`}
+              request={request}
+              onTitleData={updateAvailableTitles}
+            />
+          ))}
+          placeholder={<RequestCard.Placeholder />}
+          emptyMessage={'No Requests'}
+        />
+      </div>
+    </>
+  );
+};
+
+export default UserProfile;
--- a/src/hooks/useUser.ts
+++ b/src/hooks/useUser.ts
@@ -5,6 +5,7 @@ import {
  PermissionCheckOptions,
 } from '../../server/lib/permissions';
 import { UserType } from '../../server/constants/user';
+import { mutateCallback } from 'swr/dist/types';

 export { Permission, UserType };

@@ -17,6 +18,9 @@ export interface User {
  avatar: string;
  permissions: number;
  userType: number;
+  createdAt: Date;
+  updatedAt: Date;
+  requestCount: number;
 }

 interface UserHookResponse {
@@ -24,6 +28,10 @@ interface UserHookResponse {
  loading: boolean;
  error: string;
  revalidate: () => Promise<boolean>;
+  mutate: (
+    data?: User | Promise<User> | mutateCallback<User> | undefined,
+    shouldRevalidate?: boolean | undefined
+  ) => Promise<User | undefined>;
  hasPermission: (
    permission: Permission | Permission[],
    options?: PermissionCheckOptions
@@ -34,7 +42,7 @@ export const useUser = ({
  id,
  initialData,
 }: { id?: number; initialData?: User } = {}): UserHookResponse => {
-  const { data, error, revalidate } = useSwr<User>(
+  const { data, error, revalidate, mutate } = useSwr<User>(
    id ? `/api/v1/user/${id}` : `/api/v1/auth/me`,
    {
      initialData,
@@ -57,5 +65,6 @@ export const useUser = ({
    error,
    revalidate,
    hasPermission: checkPermission,
+    mutate,
  };
 };
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -28,6 +28,8 @@
  "components.Layout.Sidebar.requests": "Requests",
  "components.Layout.Sidebar.settings": "Settings",
  "components.Layout.Sidebar.users": "Users",
+  "components.Layout.UserDropdown.myprofile": "Profile",
+  "components.Layout.UserDropdown.settings": "Settings",
  "components.Layout.UserDropdown.signout": "Sign Out",
  "components.Layout.alphawarning": "This is ALPHA software. Features may be broken and/or unstable. Please report issues on GitHub!",
  "components.Login.email": "Email Address",
@@ -614,17 +616,6 @@
  "components.TvDetails.userrating": "User Rating",
  "components.TvDetails.viewfullcrew": "View Full Crew",
  "components.TvDetails.watchtrailer": "Watch Trailer",
-  "components.UserEdit.avatar": "Avatar",
-  "components.UserEdit.edituser": "Edit User",
-  "components.UserEdit.email": "Email Address",
-  "components.UserEdit.permissions": "Permissions",
-  "components.UserEdit.plexUsername": "Plex Username",
-  "components.UserEdit.save": "Save Changes",
-  "components.UserEdit.saving": "Saving…",
-  "components.UserEdit.userfail": "Something went wrong while saving the user.",
-  "components.UserEdit.username": "Display Name",
-  "components.UserEdit.usersaved": "User saved!",
-  "components.UserEdit.validationEmail": "You must provide a valid email address",
  "components.UserList.admin": "Admin",
  "components.UserList.autogeneratepassword": "Automatically generate password",
  "components.UserList.bulkedit": "Bulk Edit",
@@ -637,6 +628,7 @@
  "components.UserList.deleteconfirm": "Are you sure you want to delete this user? All existing request data from this user will be removed.",
  "components.UserList.deleteuser": "Delete User",
  "components.UserList.edit": "Edit",
+  "components.UserList.edituser": "Edit User",
  "components.UserList.email": "Email Address",
  "components.UserList.importedfromplex": "{userCount, plural, =0 {No new users} one {# new user} other {# new users}} imported from Plex",
  "components.UserList.importfromplex": "Import Users from Plex",
@@ -646,8 +638,11 @@
  "components.UserList.password": "Password",
  "components.UserList.passwordinfo": "Password Information",
  "components.UserList.passwordinfodescription": "Email notifications need to be configured and enabled in order to automatically generate passwords.",
+  "components.UserList.permissions": "Permissions",
  "components.UserList.plexuser": "Plex User",
  "components.UserList.role": "Role",
+  "components.UserList.save": "Save Changes",
+  "components.UserList.saving": "Saving…",
  "components.UserList.sortCreated": "Creation Date",
  "components.UserList.sortDisplayName": "Display Name",
  "components.UserList.sortRequests": "Request Count",
@@ -658,12 +653,61 @@
  "components.UserList.usercreatedsuccess": "User created successfully!",
  "components.UserList.userdeleted": "User deleted.",
  "components.UserList.userdeleteerror": "Something went wrong while deleting the user.",
+  "components.UserList.userfail": "Something went wrong while saving the user.",
  "components.UserList.userlist": "User List",
  "components.UserList.users": "Users",
  "components.UserList.userssaved": "Users saved!",
  "components.UserList.usertype": "User Type",
  "components.UserList.validationEmail": "You must provide a valid email address",
  "components.UserList.validationpasswordminchars": "Password is too short; should be a minimum of 8 characters",
+  "components.UserProfile.ProfileHeader.profile": "View Profile",
+  "components.UserProfile.ProfileHeader.settings": "Edit Settings",
+  "components.UserProfile.UserSettings.UserGeneralSettings.displayName": "Display Name",
+  "components.UserProfile.UserSettings.UserGeneralSettings.generalsettings": "General Settings",
+  "components.UserProfile.UserSettings.UserGeneralSettings.localuser": "Local User",
+  "components.UserProfile.UserSettings.UserGeneralSettings.plexuser": "Plex User",
+  "components.UserProfile.UserSettings.UserGeneralSettings.save": "Save Changes",
+  "components.UserProfile.UserSettings.UserGeneralSettings.saving": "Saving…",
+  "components.UserProfile.UserSettings.UserGeneralSettings.toastSettingsFailure": "Something went wrong while saving settings.",
+  "components.UserProfile.UserSettings.UserGeneralSettings.toastSettingsSuccess": "Settings successfully saved!",
+  "components.UserProfile.UserSettings.UserNotificationSettings.discordId": "Discord ID",
+  "components.UserProfile.UserSettings.UserNotificationSettings.enableNotifications": "Enable Notifications",
+  "components.UserProfile.UserSettings.UserNotificationSettings.localuser": "Local User",
+  "components.UserProfile.UserSettings.UserNotificationSettings.notificationsettings": "Notification Settings",
+  "components.UserProfile.UserSettings.UserNotificationSettings.plexuser": "Plex User",
+  "components.UserProfile.UserSettings.UserNotificationSettings.save": "Save Changes",
+  "components.UserProfile.UserSettings.UserNotificationSettings.saving": "Saving…",
+  "components.UserProfile.UserSettings.UserNotificationSettings.toastSettingsFailure": "Something went wrong while saving settings.",
+  "components.UserProfile.UserSettings.UserNotificationSettings.toastSettingsSuccess": "Settings successfully saved!",
+  "components.UserProfile.UserSettings.UserPasswordChange.confirmpassword": "Confirm Password",
+  "components.UserProfile.UserSettings.UserPasswordChange.currentpassword": "Current Password",
+  "components.UserProfile.UserSettings.UserPasswordChange.newpassword": "New Password",
+  "components.UserProfile.UserSettings.UserPasswordChange.nopasswordset": "No Password Set",
+  "components.UserProfile.UserSettings.UserPasswordChange.nopasswordsetDescription": "This user account currently does not have an Overseerr-specific password.  Configure a password below to allow this account to sign-in as a \"local user.\"",
+  "components.UserProfile.UserSettings.UserPasswordChange.password": "Password",
+  "components.UserProfile.UserSettings.UserPasswordChange.save": "Save Changes",
+  "components.UserProfile.UserSettings.UserPasswordChange.saving": "Saving…",
+  "components.UserProfile.UserSettings.UserPasswordChange.toastSettingsFailure": "Something went wrong while changing the password. Is your current password correct?",
+  "components.UserProfile.UserSettings.UserPasswordChange.toastSettingsSuccess": "Password changed!",
+  "components.UserProfile.UserSettings.UserPasswordChange.validationConfirmPassword": "You must confirm your new password",
+  "components.UserProfile.UserSettings.UserPasswordChange.validationConfirmPasswordSame": "Password must match",
+  "components.UserProfile.UserSettings.UserPasswordChange.validationCurrentPassword": "You must provide your current password",
+  "components.UserProfile.UserSettings.UserPasswordChange.validationNewPassword": "You must provide a new password",
+  "components.UserProfile.UserSettings.UserPasswordChange.validationNewPasswordLength": "Password is too short; should be a minimum of 8 characters",
+  "components.UserProfile.UserSettings.UserPermissions.displayName": "Display Name",
+  "components.UserProfile.UserSettings.UserPermissions.localuser": "Local User",
+  "components.UserProfile.UserSettings.UserPermissions.permissions": "Permissions",
+  "components.UserProfile.UserSettings.UserPermissions.plexuser": "Plex User",
+  "components.UserProfile.UserSettings.UserPermissions.save": "Save Changes",
+  "components.UserProfile.UserSettings.UserPermissions.saving": "Saving…",
+  "components.UserProfile.UserSettings.UserPermissions.toastSettingsFailure": "Something went wrong while saving settings.",
+  "components.UserProfile.UserSettings.UserPermissions.toastSettingsSuccess": "Settings successfully saved!",
+  "components.UserProfile.UserSettings.menuChangePass": "Password",
+  "components.UserProfile.UserSettings.menuGeneralSettings": "General Settings",
+  "components.UserProfile.UserSettings.menuNotifications": "Notifications",
+  "components.UserProfile.UserSettings.menuPermissions": "Permissions",
+  "components.UserProfile.UserSettings.settings": "User Settings",
+  "components.UserProfile.recentrequests": "Recent Requests",
  "i18n.advanced": "Advanced",
  "i18n.approve": "Approve",
  "i18n.approved": "Approved",
--- a/src/pages/profile/index.tsx
+++ b/src/pages/profile/index.tsx
@@ -0,0 +1,9 @@
+import { NextPage } from 'next';
+import React from 'react';
+import UserProfile from '../../components/UserProfile';
+
+const UserPage: NextPage = () => {
+  return <UserProfile />;
+};
+
+export default UserPage;
--- a/src/pages/profile/settings/index.tsx
+++ b/src/pages/profile/settings/index.tsx
@@ -0,0 +1,14 @@
+import { NextPage } from 'next';
+import React from 'react';
+import UserSettings from '../../../components/UserProfile/UserSettings';
+import UserGeneralSettings from '../../../components/UserProfile/UserSettings/UserGeneralSettings';
+
+const UserSettingsPage: NextPage = () => {
+  return (
+    <UserSettings>
+      <UserGeneralSettings />
+    </UserSettings>
+  );
+};
+
+export default UserSettingsPage;
--- a/src/pages/profile/settings/main.tsx
+++ b/src/pages/profile/settings/main.tsx
@@ -0,0 +1,14 @@
+import { NextPage } from 'next';
+import React from 'react';
+import UserSettings from '../../../components/UserProfile/UserSettings';
+import UserGeneralSettings from '../../../components/UserProfile/UserSettings/UserGeneralSettings';
+
+const UserSettingsMainPage: NextPage = () => {
+  return (
+    <UserSettings>
+      <UserGeneralSettings />
+    </UserSettings>
+  );
+};
+
+export default UserSettingsMainPage;
--- a/src/pages/profile/settings/notifications.tsx
+++ b/src/pages/profile/settings/notifications.tsx
@@ -0,0 +1,14 @@
+import { NextPage } from 'next';
+import React from 'react';
+import UserSettings from '../../../components/UserProfile/UserSettings';
+import UserNotificationSettings from '../../../components/UserProfile/UserSettings/UserNotificationSettings';
+
+const UserSettingsMainPage: NextPage = () => {
+  return (
+    <UserSettings>
+      <UserNotificationSettings />
+    </UserSettings>
+  );
+};
+
+export default UserSettingsMainPage;
--- a/src/pages/profile/settings/password.tsx
+++ b/src/pages/profile/settings/password.tsx
@@ -0,0 +1,14 @@
+import { NextPage } from 'next';
+import React from 'react';
+import UserSettings from '../../../components/UserProfile/UserSettings';
+import UserPasswordChange from '../../../components/UserProfile/UserSettings/UserPasswordChange';
+
+const UserPassswordPage: NextPage = () => {
+  return (
+    <UserSettings>
+      <UserPasswordChange />
+    </UserSettings>
+  );
+};
+
+export default UserPassswordPage;
--- a/src/pages/profile/settings/permissions.tsx
+++ b/src/pages/profile/settings/permissions.tsx
@@ -0,0 +1,14 @@
+import { NextPage } from 'next';
+import React from 'react';
+import UserSettings from '../../../components/UserProfile/UserSettings';
+import UserPermissions from '../../../components/UserProfile/UserSettings/UserPermissions';
+
+const UserPermissionsPage: NextPage = () => {
+  return (
+    <UserSettings>
+      <UserPermissions />
+    </UserSettings>
+  );
+};
+
+export default UserPermissionsPage;
--- a/src/pages/users/[userId]/edit.tsx
+++ b/src/pages/users/[userId]/edit.tsx
@@ -1,12 +0,0 @@
-import React from 'react';
-import { NextPage } from 'next';
-import UserEdit from '../../../components/UserEdit';
-import useRouteGuard from '../../../hooks/useRouteGuard';
-import { Permission } from '../../../hooks/useUser';
-
-const UserProfilePage: NextPage = () => {
-  useRouteGuard(Permission.MANAGE_USERS);
-  return <UserEdit />;
-};
-
-export default UserProfilePage;
--- a/src/pages/users/[userId]/index.tsx
+++ b/src/pages/users/[userId]/index.tsx
@@ -0,0 +1,9 @@
+import { NextPage } from 'next';
+import React from 'react';
+import UserProfile from '../../../components/UserProfile';
+
+const UserPage: NextPage = () => {
+  return <UserProfile />;
+};
+
+export default UserPage;
--- a/src/pages/users/[userId]/settings/index.tsx
+++ b/src/pages/users/[userId]/settings/index.tsx
@@ -0,0 +1,17 @@
+import { NextPage } from 'next';
+import React from 'react';
+import UserSettings from '../../../../components/UserProfile/UserSettings';
+import UserGeneralSettings from '../../../../components/UserProfile/UserSettings/UserGeneralSettings';
+import useRouteGuard from '../../../../hooks/useRouteGuard';
+import { Permission } from '../../../../hooks/useUser';
+
+const UserSettingsPage: NextPage = () => {
+  useRouteGuard(Permission.MANAGE_USERS);
+  return (
+    <UserSettings>
+      <UserGeneralSettings />
+    </UserSettings>
+  );
+};
+
+export default UserSettingsPage;
--- a/src/pages/users/[userId]/settings/main.tsx
+++ b/src/pages/users/[userId]/settings/main.tsx
@@ -0,0 +1,17 @@
+import { NextPage } from 'next';
+import React from 'react';
+import UserSettings from '../../../../components/UserProfile/UserSettings';
+import UserGeneralSettings from '../../../../components/UserProfile/UserSettings/UserGeneralSettings';
+import useRouteGuard from '../../../../hooks/useRouteGuard';
+import { Permission } from '../../../../hooks/useUser';
+
+const UserSettingsMainPage: NextPage = () => {
+  useRouteGuard(Permission.MANAGE_USERS);
+  return (
+    <UserSettings>
+      <UserGeneralSettings />
+    </UserSettings>
+  );
+};
+
+export default UserSettingsMainPage;
--- a/src/pages/users/[userId]/settings/notifications.tsx
+++ b/src/pages/users/[userId]/settings/notifications.tsx
@@ -0,0 +1,17 @@
+import { NextPage } from 'next';
+import React from 'react';
+import UserSettings from '../../../../components/UserProfile/UserSettings';
+import UserNotificationSettings from '../../../../components/UserProfile/UserSettings/UserNotificationSettings';
+import useRouteGuard from '../../../../hooks/useRouteGuard';
+import { Permission } from '../../../../hooks/useUser';
+
+const UserSettingsMainPage: NextPage = () => {
+  useRouteGuard(Permission.MANAGE_USERS);
+  return (
+    <UserSettings>
+      <UserNotificationSettings />
+    </UserSettings>
+  );
+};
+
+export default UserSettingsMainPage;
--- a/src/pages/users/[userId]/settings/password.tsx
+++ b/src/pages/users/[userId]/settings/password.tsx
@@ -0,0 +1,17 @@
+import { NextPage } from 'next';
+import React from 'react';
+import UserSettings from '../../../../components/UserProfile/UserSettings';
+import UserPasswordChange from '../../../../components/UserProfile/UserSettings/UserPasswordChange';
+import useRouteGuard from '../../../../hooks/useRouteGuard';
+import { Permission } from '../../../../hooks/useUser';
+
+const UserPassswordPage: NextPage = () => {
+  useRouteGuard(Permission.MANAGE_USERS);
+  return (
+    <UserSettings>
+      <UserPasswordChange />
+    </UserSettings>
+  );
+};
+
+export default UserPassswordPage;
--- a/src/pages/users/[userId]/settings/permissions.tsx
+++ b/src/pages/users/[userId]/settings/permissions.tsx
@@ -0,0 +1,17 @@
+import { NextPage } from 'next';
+import React from 'react';
+import UserSettings from '../../../../components/UserProfile/UserSettings';
+import UserPermissions from '../../../../components/UserProfile/UserSettings/UserPermissions';
+import useRouteGuard from '../../../../hooks/useRouteGuard';
+import { Permission } from '../../../../hooks/useUser';
+
+const UserPermissionsPage: NextPage = () => {
+  useRouteGuard(Permission.MANAGE_USERS);
+  return (
+    <UserSettings>
+      <UserPermissions />
+    </UserSettings>
+  );
+};
+
+export default UserPermissionsPage;