frontend/public/markdown/forgejo.md

+---
+title: 'Forgejo'
+tileExcerpt: 'Software development tool and version control using Git, including bug tracking, code review, tickets and wikis'
+---
+
+## Introduction
+
+> [Forgejo](https://forgejo.org/) is a self-hosted lightweight software forge. Easy to install and low maintenance, it just does the job.
+
+## Signing in
+
+Forgejo shows some public data without requiring a sign-in. To sign in, first
+click "Sign in" in the top-right corner, then on the resulting Forgejo sign-in
+page click the organisation logo at the bottom saying "Sign in with".

frontend/public/markdown/gitea.md

+---
+title: 'Gitea'
+tileExcerpt: 'All-in-one software development service, including Git hosting, code review, team collaboration, package registry and CI/CD'
+---
+
+## Introduction
+
+> [Gitea](https://github.com/go-gitea/gitea): Painless self-hosted all-in-one software
+> development service, including Git hosting, code review, team collaboration,
+> package registry and CI/CD.

frontend/public/style.css

+:root {
+    --colour-primary-50: #F2FFFF;
+    --colour-primary-100: #D6FDFF;
+    --colour-primary-200: #B6F7FB;
+    --colour-primary-300: #7AE5EA;
+    --colour-primary-400: #55C6CC;
+    --colour-primary-500: #39A9B1;
+    --colour-primary-600: #24929C;
+    --colour-primary-700: #157983;
+    --colour-primary-800: #135D66;
+    --colour-primary-900: #0F4F57;
+    --colour-primary-950: #0A353A;
+    --colour-primary-light: #54C6CC;
+    --colour-primary-default: #54C6CC;
+    --colour-primary-dark: #1E8290;
+}

frontend/src/App.tsx

@@ -4,7 +4,7 @@ import { Routes, Route, Navigate, Outlet } from 'react-router-dom';
 import { Toaster } from 'react-hot-toast';
 
 import { useAuth } from 'src/services/auth';
-import { Dashboard, Users, Login, Apps, AppSingle } from './modules';
+import { Dashboard, Users, Login, Apps, AppSingle, ResourcesDashboard } from './modules';
 import { Layout } from './components';
 import { LoginCallback } from './modules/login/LoginCallback';
 
@@ -27,6 +27,7 @@ function App() {
         <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
         <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
         <link rel="manifest" href="/site.webmanifest" />
+        <link rel="stylesheet" href="/style.css" />
         <meta name="msapplication-TileColor" content="#da532c" />
         <meta name="theme-color" content="#ffffff" />
       </Helmet>
@@ -41,7 +42,7 @@ function App() {
         ) : (
           <Layout>
             <Routes>
-              <Route path="/dashboard" element={<Dashboard />} />
+              <Route path="/dashboard" element={<Dashboard isAdmin={isAdmin} />} />
               <Route path="/users" element={<ProtectedRoute />}>
                 <Route index element={<Users />} />
               </Route>
@@ -49,6 +50,9 @@ function App() {
                 <Route path=":slug" element={<AppSingle />} />
                 <Route index element={<Apps />} />
               </Route>
+              <Route path="/resources" element={<ProtectedRoute />}>
+                <Route index element={<ResourcesDashboard />} />
+              </Route>
               <Route path="*" element={<Navigate to="/dashboard" />} />
             </Routes>
           </Layout>

frontend/src/components/Form/Select/Select.tsx

@@ -26,7 +26,7 @@ export const Select = ({ control, name, label, options, disabled = false }: Sele
         value={field.value ? field.value : ''} // input value
         name={name} // send down the input name
         ref={field.ref} // send input ref, so we can focus on input when error appear
-        className="block shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+        className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
         disabled={disabled}
       >
         {options?.map((option) => (

frontend/src/components/Header/Header.tsx

 import React, { Fragment, useEffect, useState } from 'react';
 import { Disclosure, Menu, Transition } from '@headlessui/react';
-import { MenuIcon, XIcon } from '@heroicons/react/outline';
+import { MenuIcon, XIcon, ExclamationIcon } from '@heroicons/react/outline';
 import { performApiCall } from 'src/services/api';
 import { useAuth } from 'src/services/auth';
 import { useApps } from 'src/services/apps';
+import md5 from 'md5';
 import Gravatar from 'react-gravatar';
 import { Link, useLocation } from 'react-router-dom';
 import clsx from 'clsx';
@@ -15,6 +16,7 @@ const navigation = [
   { name: 'Dashboard', to: '/dashboard', requiresAdmin: false },
   { name: 'Users', to: '/users', requiresAdmin: true },
   { name: 'Apps', to: '/apps', requiresAdmin: true },
+  { name: 'System resources', to: '/resources', requiresAdmin: true },
 ];
 
 function classNames(...classes: any[]) {
@@ -32,11 +34,13 @@ function filterNavigationByDashboardRole(isAdmin: boolean) {
 export interface Environment {
   HYDRA_PUBLIC_URL: string;
   KRATOS_PUBLIC_URL: string;
+  TELEPRESENCE: boolean;
 }
 
 const defaultEnvironment: Environment = {
   HYDRA_PUBLIC_URL: 'error-failed-to-load-env-from-backend',
   KRATOS_PUBLIC_URL: 'error-failed-to-load-env-from-backend',
+  TELEPRESENCE: false,
 };
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
@@ -89,13 +93,23 @@ const Header: React.FC<HeaderProps> = () => {
   const kratosSettingsUrl = `${environment.KRATOS_PUBLIC_URL}/self-service/settings/browser`;
 
   const adminTag = isAdmin ? (
-    <span className="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-500 ring-1 ring-inset ring-gray-300">
+    <span className="inline-flex items-center rounded-md bg-primary-100 px-2 py-1 text-xs font-medium text-gray-500 ring-1 ring-inset ring-gray-300">
       Admin
     </span>
   ) : null;
 
+  // banner that only shows if telepresence is active
+  const underConstruction = environment.TELEPRESENCE ? (
+    <div className="shadow bg-pink-500 h-6 text-xs text-white font-semibold uppercase flex justify-center items-center gap-2">
+      <ExclamationIcon className="h-4" />
+      <span className="h-4 m-0 p-0">Development environment</span>
+      <ExclamationIcon className="h-4" />
+    </div>
+  ) : null;
+
   return (
     <>
+      {underConstruction}
       <Disclosure as="nav" className="bg-white shadow relative z-10">
         {({ open }) => (
           <div className="relative">
@@ -114,8 +128,8 @@ const Header: React.FC<HeaderProps> = () => {
                 </div>
                 <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
                   <Link to="/" className="flex-shrink-0 flex items-center">
-                    <img className="block lg:hidden" src="/assets/logo-small.svg" alt="Stackspin" />
-                    <img className="hidden lg:block" src="/assets/logo.svg" alt="Stackspin" />
+                    <img className="stackspin-logo-small block lg:hidden" src="/icons/logo-small.svg" alt="Stackspin" />
+                    <img className="stackspin-logo hidden lg:block" src="/icons/logo.svg" alt="Stackspin" />
                   </Link>
                   <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
                     {/* Current: "border-primary-500 text-gray-900", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" */}
@@ -124,9 +138,9 @@ const Header: React.FC<HeaderProps> = () => {
                         key={item.name}
                         to={item.to}
                         className={clsx(
-                          'border-primary-50 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
+                          'border-primary-50 hover:border-gray-300 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium',
                           {
-                            'border-primary-500 text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 text-sm font-medium':
+                            'border-primary-500 hover:border-primary-500 text-gray-500 inline-flex items-center px-1 pt-1 text-sm font-medium':
                               pathname.includes(item.to),
                           },
                         )}
@@ -145,7 +159,12 @@ const Header: React.FC<HeaderProps> = () => {
                       <Menu.Button className="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
                         <span className="sr-only">Open user menu</span>
                         <span className="inline-flex items-center justify-center h-8 w-8 rounded-full bg-gray-500 overflow-hidden">
-                          <Gravatar email={currentUser?.email || undefined} size={32} rating="pg" protocol="https://" />
+                          <Gravatar
+                            md5={md5(currentUser?.email ?? 'no-user') || undefined}
+                            size={32}
+                            rating="pg"
+                            protocol="https://"
+                          />
                         </span>
                       </Menu.Button>
                     </div>

frontend/src/components/Modal/InfoModal/InfoModal.tsx

@@ -48,7 +48,7 @@ export const InfoModal = ({ open, onClose, title, body, dynamicData }: InfoModal
             leaveFrom="opacity-100 translate-y-0 sm:scale-100"
             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+            <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-xl sm:w-full">
               <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                 <div className="sm:flex sm:items-start">
                   <div className="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10">

frontend/src/components/Modal/Modal/Modal.tsx

@@ -23,7 +23,24 @@ export const Modal: React.FC<ModalProps> = ({
   return (
     <Transition.Root show={open} as={Fragment}>
       <Dialog as="div" className="fixed z-10 inset-0 overflow-y-auto" initialFocus={cancelButtonRef} onClose={() => {}}>
-        <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+        {isLoading && (
+          <Dialog.Overlay className="isloading inset-0 bg-gray-400 z-20 bg-opacity-75 transition-opacity absolute flex justify-center items-center">
+            <svg
+              className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              />
+            </svg>
+          </Dialog.Overlay>
+        )}
+        <div className="pt-4 h-full px-4 pb-20 text-center sm:block sm:p-0">
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
@@ -37,9 +54,9 @@ export const Modal: React.FC<ModalProps> = ({
           </Transition.Child>
 
           {/* This element is to trick the browser into centering the modal contents. */}
-          <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
+          {/* <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
             &#8203;
-          </span>
+          </span> */}
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-300"
@@ -49,72 +66,56 @@ export const Modal: React.FC<ModalProps> = ({
             leaveFrom="opacity-100 translate-y-0 sm:scale-100"
             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full relative">
-              {isLoading && (
-                <Dialog.Overlay className="inset-0 bg-gray-400 bg-opacity-75 transition-opacity absolute flex justify-center items-center">
-                  <svg
-                    className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                  >
-                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                    <path
-                      className="opacity-75"
-                      fill="currentColor"
-                      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                    />
-                  </svg>
-                </Dialog.Overlay>
-              )}
-
-              {!useCancelButton && (
-                <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:items-center sm:justify-between">
-                  <div className="flex items-center">
-                    <img className="rounded-md" width={32} src={img} alt={title} />
-                    <span className="ml-2 uppercase font-bold">{title}</span>
-                  </div>
-                  <button
-                    type="button"
-                    className="w-full inline-flex justify-center rounded-md border border-gray-200 p-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-                    onClick={onClose}
-                    ref={cancelButtonRef}
-                  >
-                    <XIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
-                  </button>
-                </div>
-              )}
-
-              <div className="bg-white px-4 p-6">{children}</div>
-
-              {onSave && (
-                <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex">
-                  {leftActions}
-                  <div className="ml-auto sm:flex sm:flex-row-reverse">
+            <div className="w-full h-full flex justify-center items-center">
+              <div className="bg-white h-4/5 overflow-auto flex flex-col rounded-lg text-left shadow-xl transform transition-all sm:max-w-2xl sm:w-full">
+                {!useCancelButton && (
+                  <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:items-center sm:justify-between">
+                    <div className="flex items-center">
+                      <img className="rounded-md" width={32} src={img} alt={title} />
+                      <span className="ml-2 uppercase font-bold">{title}</span>
+                    </div>
                     <button
                       type="button"
-                      className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm ${
-                        saveButtonDisabled ? 'opacity-50' : ''
-                      }`}
-                      onClick={onSave}
-                      ref={saveButtonRef}
-                      disabled={saveButtonDisabled}
+                      className="w-full inline-flex justify-center rounded-md border border-gray-200 p-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                      onClick={onClose}
+                      ref={cancelButtonRef}
                     >
-                      {saveButtonTitle}
+                      <XIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
                     </button>
-                    {useCancelButton && (
+                  </div>
+                )}
+
+                <div className="bg-white px-4 p-6 relative overflow-y-auto">{children}</div>
+
+                {onSave && (
+                  <div className="bg-gray-50 px-4 py-5 flex flex-shrink-0 w-full border-0 border-t-2 border-gray-300">
+                    <div className="mr-auto sm:flex gap-2">{leftActions}</div>
+                    <div className="ml-auto sm:flex sm:flex-row-reverse">
                       <button
                         type="button"
-                        className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-200 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
-                        onClick={onClose}
-                        ref={cancelButtonRef}
+                        className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:ml-3 sm:w-auto sm:text-sm ${
+                          saveButtonDisabled ? 'opacity-50' : ''
+                        }`}
+                        onClick={onSave}
+                        ref={saveButtonRef}
+                        disabled={saveButtonDisabled}
                       >
-                        {cancelButtonTitle}
+                        {saveButtonTitle}
                       </button>
-                    )}
+                      {useCancelButton && (
+                        <button
+                          type="button"
+                          className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-200 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                          onClick={onClose}
+                          ref={cancelButtonRef}
+                        >
+                          {cancelButtonTitle}
+                        </button>
+                      )}
+                    </div>
                   </div>
-                </div>
-              )}
+                )}
+              </div>
             </div>
           </Transition.Child>
         </div>

frontend/src/components/MultiEditUserModal/MultiEditUserModal.tsx

+import React, { useEffect, useState } from 'react';
+import _ from 'lodash';
+import { useFieldArray, useForm, useWatch } from 'react-hook-form';
+import { Banner, ConfirmationModal, Modal } from 'src/components';
+import { Select } from 'src/components/Form';
+import { User, UserRole, MultiEditUser, useUsers, NoChange } from 'src/services/users';
+import { useAuth } from 'src/services/auth';
+import { AppStatusEnum } from 'src/services/apps/types';
+
+import { HIDDEN_APPS } from 'src/modules/dashboard/consts';
+// import { initialUserForm } from './consts';
+import { TrashIcon } from '@heroicons/react/outline';
+
+import { MultiEditUserModalProps } from './types';
+
+export const MultiEditUserModal = ({ open, onClose, userIds, setUserId, apps }: MultiEditUserModalProps) => {
+  const [deleteModal, setDeleteModal] = useState(false);
+  const [isAdminRoleSelected, setAdminRoleSelected] = useState(true);
+  const {
+    user,
+    editUserById,
+    deleteUserById,
+    // editMultipleUsers,
+    userModalLoading,
+    clearSelectedUser,
+  } = useUsers();
+  const { currentUser, isAdmin } = useAuth();
+
+  // Extending the app list with "No Change" value, so that
+  // there is a sane default selection
+  // when doing multi-user edits
+
+  interface AppListInt {
+    name: string;
+    role: UserRole | NoChange;
+  }
+  const appList: AppListInt[] = [];
+  const initialAppRoleLatest = () => {
+    apps
+      .filter((app) => app.status !== AppStatusEnum.NotInstalled)
+      .map((app) => appList.push({ name: app.slug, role: NoChange.NoChange }));
+  };
+  initialAppRoleLatest();
+
+  const userIdsList: string[] = [];
+  const populateUserIdsList = () => {
+    userIds.map((id: any) => userIdsList.push(id.original.id));
+  };
+  populateUserIdsList();
+
+  const userNamesList: string[] = [];
+  const populateUserNamesList = () => {
+    userIds.map((id: any) => userNamesList.push(id.original.name));
+  };
+  populateUserNamesList();
+
+  const userEmailsList: string[] = [];
+  const populateUserEmailsList = () => {
+    userIds.map((id: any) => userEmailsList.push(id.original.email));
+  };
+  populateUserEmailsList();
+
+  const initialUserForm = {
+    userEmails: userEmailsList,
+    userIds: userIdsList,
+    app_roles: appList,
+    userNames: userNamesList,
+  };
+
+  // populate the initial "New User" window with installed apps and default roles
+  const { control, reset, handleSubmit } = useForm<MultiEditUser>({
+    defaultValues: initialUserForm,
+  });
+
+  const { fields, update } = useFieldArray({
+    control,
+    name: 'app_roles',
+  });
+
+  useEffect(() => {
+    if (!_.isEmpty(user)) {
+      reset(user);
+    }
+  }, [user, reset, open]);
+
+  const dashboardRole = useWatch({
+    control,
+    name: 'app_roles.0.role',
+  });
+
+  useEffect(() => {
+    const isAdminDashboardRoleSelected = dashboardRole === UserRole.Admin;
+    setAdminRoleSelected(isAdminDashboardRoleSelected);
+    if (isAdminDashboardRoleSelected) {
+      fields.forEach((field, index) => update(index, { name: field.name, role: UserRole.Admin }));
+    } else {
+      fields.forEach((field, index) => update(index, { name: field.name, role: NoChange.NoChange }));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dashboardRole]);
+
+  function transformSubmitData(data: MultiEditUser) {
+    const userBatch: any = [];
+    const editedAppList: any = [];
+    const populateEditedAppList = () => {
+      data.app_roles
+        .filter((role) => role.role !== NoChange.NoChange)
+        .map((role) => editedAppList.push({ name: role.name, role: role.role }));
+    };
+    populateEditedAppList();
+    const populateUserBatch = () => {
+      data.userIds.map((userId, index) =>
+        userBatch.push({
+          email: data.userEmails[index],
+          name: data.userNames[index],
+          id: userId,
+          app_roles: editedAppList,
+        }),
+      );
+    };
+    populateUserBatch();
+
+    return userBatch;
+  }
+
+  const handleSave = async () => {
+    try {
+      await handleSubmit((data) => {
+        const transformedData = transformSubmitData(data);
+        // For now, this function loops over users and sends multiple individual PUT requests.
+        // Once the JSON payload schema issue is solved, we can test the batch edit
+        // with the below command
+        // (remember to also uncomment the import on top of this file)
+        // return editMultipleUsers(transformedData);
+        transformedData.forEach((userId: User) => {
+          return editUserById(userId);
+        });
+      })();
+    } catch (e: any) {
+      // Continue
+    }
+
+    onClose();
+    clearSelectedUser();
+  };
+
+  const handleClose = () => {
+    onClose();
+    clearSelectedUser();
+  };
+
+  const deleteModalOpen = () => setDeleteModal(true);
+  const deleteModalClose = () => setDeleteModal(false);
+
+  const handleDelete = () => {
+    userIdsList.forEach((id: string) => {
+      deleteUserById(id);
+    });
+
+    clearSelectedUser();
+    setUserId(null);
+    handleClose();
+    deleteModalClose();
+  };
+
+  // Button with delete option.
+  const buttonDelete = () => {
+    return (
+      !userIdsList.includes(currentUser?.id as string) && (
+        <button
+          onClick={deleteModalOpen}
+          type="button"
+          className="mb-4 sm:mb-0 inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
+        >
+          <TrashIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
+          Delete {userIds.length} users
+        </button>
+      )
+    );
+  };
+  return (
+    <>
+      <Modal
+        onClose={handleClose}
+        open={open}
+        onSave={handleSave}
+        isLoading={userModalLoading}
+        leftActions={<>{buttonDelete()}</>}
+        useCancelButton
+      >
+        <div className="bg-white px-4">
+          <div className="space-y-10 divide-y divide-gray-200">
+            <div>
+              <div>
+                <h3 className="text-lg leading-6 font-medium text-gray-900">Edit {userIds.length} users</h3>
+              </div>
+
+              <div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
+                {isAdmin && (
+                  <>
+                    <div className="sm:col-span-3">
+                      {fields
+                        .filter((field) => field.name === 'dashboard')
+                        .map((item, index) => (
+                          <Select
+                            key={item.name}
+                            control={control}
+                            name={`app_roles.${index}.role`}
+                            label="Role"
+                            options={[
+                              { value: UserRole.User, name: 'User' },
+                              { value: UserRole.Admin, name: 'Admin' },
+                            ]}
+                          />
+                        ))}
+                    </div>
+                    <div className="sm:col-span-3 opacity-40 cursor-default pointer-events-none select-none">
+                      <label htmlFor="status" className="block text-sm font-medium text-gray-700">
+                        Status
+                      </label>
+                      <div className="mt-1">
+                        <select
+                          id="status"
+                          name="status"
+                          className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                        >
+                          <option>Active</option>
+                          <option>Inactive</option>
+                          <option>Banned</option>
+                        </select>
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+            {isAdmin && !userModalLoading && (
+              <div>
+                <div className="mt-8">
+                  <h3 className="text-lg leading-6 font-medium text-gray-900">App Access</h3>
+                </div>
+
+                {isAdminRoleSelected && (
+                  <div className="sm:col-span-6">
+                    <Banner
+                      title="Admin users automatically have admin-level access to all apps."
+                      titleSm="Admin user"
+                    />
+                  </div>
+                )}
+
+                {!isAdminRoleSelected && (
+                  <div>
+                    <div className="flow-root mt-6">
+                      <ul className="-my-5 divide-y divide-gray-200">
+                        {fields.map((item, index) => {
+                          if (item.name != null && HIDDEN_APPS.indexOf(item.name) !== -1) {
+                            return null;
+                          }
+
+                          return (
+                            <li className="py-4" key={item.name}>
+                              <div className="flex items-center space-x-4">
+                                <div className="flex-shrink-0 flex-1 flex items-center">
+                                  <img
+                                    className="h-10 w-10 rounded-md overflow-hidden"
+                                    src={_.find(apps, ['slug', item.name!])?.assetSrc}
+                                    alt={item.name ?? 'Image'}
+                                  />
+                                  <h3 className="ml-4 text-md leading-6 font-medium text-gray-900">
+                                    {_.find(apps, ['slug', item.name!])?.name}
+                                  </h3>
+                                </div>
+                                <div>
+                                  <Select
+                                    key={item.id}
+                                    control={control}
+                                    name={`app_roles.${index}.role`}
+                                    disabled={isAdminRoleSelected}
+                                    options={[
+                                      { value: NoChange.NoChange, name: '...' },
+                                      { value: UserRole.NoAccess, name: 'No Access' },
+                                      { value: UserRole.User, name: 'User' },
+                                      { value: UserRole.Admin, name: 'Admin' },
+                                    ]}
+                                  />
+                                </div>
+                              </div>
+                            </li>
+                          );
+                        })}
+                      </ul>
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </Modal>
+      <ConfirmationModal
+        onDeleteAction={handleDelete}
+        open={deleteModal}
+        onClose={deleteModalClose}
+        title="Delete user"
+        body={`You are about to delete ${userIds.length} users. Are sure you want to delete them? All of the user data will be permanently removed. This action cannot be undone.`}
+      />
+    </>
+  );
+};

frontend/src/components/MultiEditUserModal/consts.ts

+// This file is still being used in the AppSingle.tsx file
+// to populate the single app card with URLs and images.
+// Single App is not an active view at the moment,
+// so automating this is not a priority at the moment.
+// once we activate single app views, we will need to use the API call
+// to populate the AppSingle card with this info.
+// See UserModal.tsx for inspiration, search for initialAppRoleLatest()
+
+// import { UserRole } from 'src/services/users';
+
+export const appAccessList = [
+  {
+    name: 'hedgedoc',
+    image: '/icons/hedgedoc.svg',
+    label: 'HedgeDoc',
+    documentationUrl: 'https://docs.hedgedoc.org/',
+  },
+  {
+    name: 'wekan',
+    image: '/icons/wekan.svg',
+    label: 'Wekan',
+    documentationUrl: 'https://github.com/wekan/wekan/wiki',
+  },
+  {
+    name: 'wordpress',
+    image: '/icons/wordpress.svg',
+    label: 'Wordpress',
+    documentationUrl: 'https://wordpress.org/support/',
+  },
+  {
+    name: 'nextcloud',
+    image: '/icons/nextcloud.svg',
+    label: 'Nextcloud',
+    documentationUrl: 'https://docs.nextcloud.com/server/latest/user_manual/en/',
+  },
+  {
+    name: 'zulip',
+    image: '/icons/zulip.svg',
+    label: 'Zulip',
+    documentationUrl: 'https://docs.zulip.com/help/',
+  },
+  {
+    name: 'monitoring',
+    image: '/icons/monitoring.svg',
+    label: 'Monitoring',
+    documentationUrl: 'https://grafana.com/docs/',
+  },
+];
+
+export const allAppAccessList = [
+  {
+    name: 'dashboard',
+    image: '/icons/logo-small.svg',
+    label: 'Dashboard',
+  },
+  ...appAccessList,
+];

frontend/src/components/MultiEditUserModal/index.ts

+export { MultiEditUserModal } from './MultiEditUserModal';

frontend/src/components/MultiEditUserModal/types.ts

+import { App } from 'src/services/apps';
+
+export type MultiEditUserModalProps = {
+  open: boolean;
+  onClose: () => void;
+  userIds: any;
+  setUserId: any;
+  apps: App[];
+};

frontend/src/components/Table/Table.tsx

 import { ArrowSmDownIcon, ArrowSmUpIcon } from '@heroicons/react/solid';
 import React, { useEffect } from 'react';
-import { useTable, useRowSelect, Column, IdType, useSortBy } from 'react-table';
+import { useTable, useRowSelect, Column, IdType, useSortBy, usePagination } from 'react-table';
 
 export interface ReactTableProps<T extends Record<string, unknown>> {
   columns: Column<T>[];
@@ -38,7 +38,7 @@ export const Table = <T extends Record<string, unknown>>({
   pagination = false,
   onRowClick,
   getSelectedRowIds,
-  selectable = false,
+  selectable = true,
   loading = false,
 }: ReactTableProps<T>) => {
   const {
@@ -55,6 +55,7 @@ export const Table = <T extends Record<string, unknown>>({
       data,
     },
     useSortBy,
+    usePagination,
     useRowSelect,
     selectable
       ? (hooks) => {

frontend/src/components/Tags/Tags.tsx

+import React, { useCallback, useState, useRef } from 'react';
+import ReactTags from 'react-tag-autocomplete'; // https://www.npmjs.com/package/react-tag-autocomplete
+
+// This tagging component is a bare bones Proof of Concept and needs tons more work
+
+// import { User } from 'src/services/users/types';
+// import { suggestions } from './country-list';
+
+type Tag = {
+  id: string;
+  name: string;
+};
+// const tags: Tag[] = [];
+
+export const Tags = () => {
+  const [tags, setTags] = useState<Tag[]>([]);
+
+  const [suggestions, setSuggestions] = useState([
+    { id: 'Apples', name: 'Apples' },
+    { id: 'Pears', name: 'Pears' },
+    { id: 'Bananas', name: 'Bananas' },
+    { id: 'Mangos', name: 'Mangos' },
+    { id: 'Lemons', name: 'Lemons' },
+    { id: 'Apricots', name: 'Apricots' },
+  ]);
+
+  const reactTags = useRef(null);
+
+  const onDelete = useCallback(
+    (tagIndex) => {
+      setTags(tags.filter((_, i) => i !== tagIndex));
+      // console.log(tagIndex);
+      // console.log(tags[tagIndex]);
+      setSuggestions(suggestions.filter((s) => s.name !== tags[tagIndex].name));
+    },
+    [tags, suggestions],
+  );
+
+  const onAddition = useCallback(
+    (newTag) => {
+      setTags([...tags, { id: newTag.name, name: newTag.name }]);
+      if (suggestions.find((s) => s.name === newTag.name)) {
+        // console.log(`We already have ${newTag.name}, not adding`);
+      } else {
+        setSuggestions([...suggestions, { id: newTag.name, name: newTag.name }]);
+      }
+    },
+    [tags, suggestions],
+  );
+
+  return (
+    <>
+      <ReactTags
+        ref={reactTags}
+        tags={tags}
+        suggestions={suggestions}
+        onDelete={onDelete}
+        onAddition={onAddition}
+        allowNew
+        classNames={{
+          root: 'react-tags',
+          rootFocused: 'is-focused',
+          selected: 'react-tags__selected',
+          selectedTag:
+            'react-tags__selected-tag inline-flex items-center gap-x-0.5 rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10',
+          selectedTagName: 'react-tags__selected-tag-name',
+          search: 'react-tags__search my-6',
+          // searchWrapper: 'react-tags__search-wrapper',
+          searchInput:
+            'react-tags__search-input block w-full rounded-md border-0 py-1.5 mx-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6',
+          suggestions: 'react-tags__suggestions',
+          suggestionActive: 'is-active',
+          suggestionDisabled: 'is-disabled',
+          // suggestionPrefix: 'react-tags__suggestion-prefix',
+        }}
+      />
+      {suggestions.map((suggestion) => {
+        return (
+          <span
+            key={suggestion.id}
+            className="inline-flex items-center gap-x-0.5 rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10"
+          >
+            {suggestion.name}
+            <button type="button" className="group relative -mr-1 h-3.5 w-3.5 rounded-sm hover:bg-gray-500/20" />
+          </span>
+        );
+      })}
+      {/*
+      {console.log(suggestions)}
+      {console.log(tags)} */}
+    </>
+  );
+};

frontend/src/components/Tags/index.ts

+export { Tags } from './Tags';

frontend/src/components/UserModal/UserModal.tsx

 import React, { useEffect, useState } from 'react';
 import _ from 'lodash';
-import { TrashIcon } from '@heroicons/react/outline';
+import { TrashIcon, KeyIcon, QrcodeIcon } from '@heroicons/react/outline';
 import { useFieldArray, useForm, useWatch } from 'react-hook-form';
 import { Banner, Modal, ConfirmationModal, InfoModal } from 'src/components';
 import { Input, Select } from 'src/components/Form';
@@ -8,6 +8,9 @@ import { User, UserRole, useUsers } from 'src/services/users';
 import { useAuth } from 'src/services/auth';
 import { AppStatusEnum } from 'src/services/apps/types';
 
+// Tagging component, work in progress. commented out for the time being
+// import { Tags } from 'src/components/Tags';
+
 import { HIDDEN_APPS } from 'src/modules/dashboard/consts';
 // import { initialUserForm } from './consts';
 
@@ -16,6 +19,8 @@ import { UserModalProps } from './types';
 export const UserModal = ({ open, onClose, userId, setUserId, apps }: UserModalProps) => {
   const [deleteModal, setDeleteModal] = useState(false);
   const [passwordLinkModal, setPasswordLinkModal] = useState(false);
+  const [totpModal, setTotpModal] = useState(false);
+  const [webAuthnModal, setWebAuthnModal] = useState(false);
   const [isAdminRoleSelected, setAdminRoleSelected] = useState(true);
   const [isPersonalModal, setPersonalModal] = useState(false);
   const {
@@ -30,6 +35,8 @@ export const UserModal = ({ open, onClose, userId, setUserId, apps }: UserModalP
     deleteUserById,
     getRecoveryLinkUserById,
     clearSelectedUser,
+    resetTotp,
+    resetWebAuthn,
   } = useUsers();
   const { currentUser, isAdmin } = useAuth();
 
@@ -92,9 +99,15 @@ export const UserModal = ({ open, onClose, userId, setUserId, apps }: UserModalP
     // };
   }, [user, reset, open]);
 
+  let dashboardIndex = 0;
+  apps.forEach((app, index) => {
+    if (app.name === 'dashboard') {
+      dashboardIndex = index;
+    }
+  });
   const dashboardRole = useWatch({
     control,
-    name: 'app_roles.0.role',
+    name: `app_roles.${dashboardIndex}.role`,
   });
 
   useEffect(() => {
@@ -126,18 +139,18 @@ export const UserModal = ({ open, onClose, userId, setUserId, apps }: UserModalP
     setUserId(null);
   };
 
-  const handleKeyPress = (e: any) => {
-    if (e.key === 'Enter' || e.key === 'NumpadEnter') {
-      handleSave();
-    }
-  };
-
   const handleClose = () => {
     onClose();
     clearSelectedUser();
     setUserId(null);
   };
 
+  const handleKeyPress = (e: any) => {
+    if (e.key === 'Enter' || e.key === 'NumpadEnter') {
+      handleSave();
+    }
+  };
+
   const deleteModalOpen = () => setDeleteModal(true);
   const deleteModalClose = () => setDeleteModal(false);
 
@@ -150,6 +163,28 @@ export const UserModal = ({ open, onClose, userId, setUserId, apps }: UserModalP
 
   const passwordLinkModalClose = () => setPasswordLinkModal(false);
 
+  const totpModalOpen = () => {
+    if (userId) {
+      resetTotp(userId);
+      clearSelectedUser();
+      setUserId(userId);
+    }
+    setTotpModal(true);
+  };
+
+  const totpModalClose = () => setTotpModal(false);
+
+  const webAuthnModalOpen = () => {
+    if (userId) {
+      resetWebAuthn(userId);
+      clearSelectedUser();
+      setUserId(userId);
+    }
+    setWebAuthnModal(true);
+  };
+
+  const webAuthnModalClose = () => setWebAuthnModal(false);
+
   const handleDelete = () => {
     if (userId) {
       deleteUserById(userId);
@@ -171,8 +206,8 @@ export const UserModal = ({ open, onClose, userId, setUserId, apps }: UserModalP
           type="button"
           className="mb-4 sm:mb-0 inline-flex items-center px-4 py-2 text-sm font-medium rounded-md text-red-700 bg-red-50 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
         >
-          <TrashIcon className="-ml-0.5 mr-2 h-4 w-4" aria-hidden="true" />
-          Delete
+          Delete user
+          <TrashIcon className="-mr-0.5 ml-2 h-4 w-4" aria-hidden="true" />
         </button>
       )
     );
@@ -187,9 +222,48 @@ export const UserModal = ({ open, onClose, userId, setUserId, apps }: UserModalP
           onClick={passwordLinkModalOpen}
           type="button"
           className="mb-4 sm:mb-0 inline-flex items-center px-4 py-2 text-sm
-  font-medium rounded-md text-blue-700 bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
+  font-medium rounded-md text-primary-700 bg-primary-100 hover:bg-primary-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-700"
         >
           Password Link
+          <KeyIcon className="-mr-0.5 ml-2 h-4 w-4" aria-hidden="true" />
+        </button>
+      )
+    );
+  };
+
+  // Button to reset TOTP
+  const buttonTotp = () => {
+    return (
+      userId &&
+      isAdmin &&
+      user.totp && (
+        <button
+          onClick={totpModalOpen}
+          type="button"
+          className="mb-4 sm:mb-0 inline-flex items-center px-4 py-2 text-sm
+  font-medium rounded-md text-primary-700 bg-primary-100 hover:bg-primary-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-700"
+        >
+          Reset TOTP
+          <QrcodeIcon className="-mr-0.5 ml-2 h-4 w-4" aria-hidden="true" />
+        </button>
+      )
+    );
+  };
+
+  // Button to reset WebAuthn
+  const buttonWebAuthn = () => {
+    return (
+      userId &&
+      isAdmin &&
+      user.webauthn && (
+        <button
+          onClick={webAuthnModalOpen}
+          type="button"
+          className="mb-4 sm:mb-0 inline-flex items-center px-4 py-2 text-sm
+  font-medium rounded-md text-primary-700 bg-primary-100 hover:bg-primary-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-700"
+        >
+          Reset WebAuthn
+          <QrcodeIcon className="-mr-0.5 ml-2 h-4 w-4" aria-hidden="true" />
         </button>
       )
     );
@@ -197,24 +271,14 @@ export const UserModal = ({ open, onClose, userId, setUserId, apps }: UserModalP
 
   return (
     <>
-      <Modal
-        onClose={handleClose}
-        open={open}
-        onSave={handleSave}
-        isLoading={userModalLoading}
-        leftActions={
-          <>
-            {buttonDelete()}
-            {buttonPasswordLink()}
-          </>
-        }
-        useCancelButton
-      >
+      <Modal onClose={handleClose} open={open} onSave={handleSave} isLoading={userModalLoading} useCancelButton>
         <div className="bg-white px-4">
           <div className="space-y-10 divide-y divide-gray-200">
             <div>
-              <div>
-                <h3 className="text-lg leading-6 font-medium text-gray-900">{userId ? 'Edit user' : 'Add new user'}</h3>
+              <div className="py-4">
+                <h3 className="text-lg leading-6 font-medium text-gray-900">
+                  {userId ? <span>Edit {user.email}</span> : 'Add new user'}
+                </h3>
               </div>
 
               <div className="mt-6 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
@@ -268,7 +332,7 @@ export const UserModal = ({ open, onClose, userId, setUserId, apps }: UserModalP
                     </div>
                     {userId && (
                       <div className="sm:col-span-6">
-                        <Input control={control} name="id" label="UUID" required={false} disabled />
+                        <p className="text-gray-400 text-xs">User ID: {userId}</p>
                       </div>
                     )}
                   </>
@@ -282,7 +346,7 @@ export const UserModal = ({ open, onClose, userId, setUserId, apps }: UserModalP
                 </div>
 
                 {isAdminRoleSelected && (
-                  <div className="sm:col-span-6">
+                  <div className="sm:col-span-6 py-12">
                     <Banner
                       title="Admin users automatically have admin-level access to all apps."
                       titleSm="Admin user"
@@ -335,6 +399,75 @@ export const UserModal = ({ open, onClose, userId, setUserId, apps }: UserModalP
                 )}
               </div>
             )}
+            {/* This is the Tag section */}
+            {/* {isAdmin && !userModalLoading && (
+              <div>
+                <div className="mt-8">
+                  <h3 className="text-lg leading-6 font-medium text-gray-900">Tags</h3>
+                </div>
+                <Tags />
+              </div>
+            )} */}
+            {isAdmin && userId && !userModalLoading && (
+              <div>
+                <div className="mt-8">
+                  <h3 className="text-lg leading-6 font-medium text-gray-900">User Access</h3>
+                </div>
+                <div>
+                  <div className="flow-root mt-6">
+                    <ul className="-my-5 divide-y divide-gray-200">
+                      <li className="py-4">
+                        <div className="flex items-center justify-between">
+                          <p className="leading-6 text-sm  text-gray-500">
+                            Generate password reset link for {user.email}
+                          </p>
+                          {buttonPasswordLink()}
+                        </div>
+                      </li>
+                      <li className="py-4">
+                        <div className="flex items-center justify-between">
+                          <p className="leading-6 text-sm  text-gray-500">Reset TOTP</p>
+                          {user.totp ? (
+                            <>{buttonTotp()}</>
+                          ) : (
+                            <p
+                              className="leading-6 text-sm  text-gray-400 mb-4 sm:mb-0 inline-flex items-center px-4 py-2
+  font-medium rounded-md bg-gray-50"
+                            >
+                              No TOTP enrolled
+                            </p>
+                          )}
+                        </div>
+                      </li>
+                      <li className="py-4">
+                        <div className="flex items-center justify-between">
+                          <p className="leading-6 text-sm  text-gray-500">Reset WebAuthn</p>
+                          {user.webauthn ? (
+                            <>{buttonWebAuthn()}</>
+                          ) : (
+                            <p
+                              className="leading-6 text-sm  text-gray-400 mb-4 sm:mb-0 inline-flex items-center px-4 py-2
+  font-medium rounded-md bg-gray-50"
+                            >
+                              No WebAuthn registered
+                            </p>
+                          )}
+                        </div>
+                      </li>
+
+                      {user.email !== currentUser?.email && (
+                        <li className="py-4">
+                          <div className="flex items-center justify-between">
+                            <p className="leading-6 text-sm  text-gray-500">Delete {user.email}</p>
+                            {buttonDelete()}
+                          </div>
+                        </li>
+                      )}
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            )}
           </div>
         </div>
       </Modal>
@@ -352,6 +485,20 @@ export const UserModal = ({ open, onClose, userId, setUserId, apps }: UserModalP
         body="Below is a password reset link. Copy this link and send to the user to reset the password without using e-mail"
         dynamicData={recoveryLink}
       />
+      <InfoModal
+        open={totpModal}
+        onClose={totpModalClose}
+        title="Reset TOTP"
+        body="You have successfully removed the user's TOTP registration."
+        dynamicData=""
+      />
+      <InfoModal
+        open={webAuthnModal}
+        onClose={webAuthnModalClose}
+        title="Reset WebAuthn"
+        body="You have successfully removed the user's WebAuthn registration."
+        dynamicData=""
+      />
     </>
   );
 };