add restrictions to applications and accounts

src/containers/internal/views/accounts/form.tsx

@@ -21,7 +21,11 @@ import {
   LocalLimits,
 } from "src/components/forms";
 import { ROUTE_INTERNAL_ACCOUNTS } from "src/router/routes";
-import { DEFAULT_WEBHOOK, WEBHOOK_METHODS } from "src/api/constants";
+import {
+  DEFAULT_WEBHOOK,
+  USER_ACCOUNT,
+  WEBHOOK_METHODS,
+} from "src/api/constants";
 import { MSG_REQUIRED_FIELDS, MSG_WEBHOOK_FIELDS } from "src/constants";
 
 import type {
@@ -42,6 +46,7 @@ type AccountFormProps = {
 
 export const AccountForm = ({ apps, limits, account }: AccountFormProps) => {
   const navigate = useNavigate();
+  const user = useSelectState("user");
   const currentServiceProvider = useSelectState("currentServiceProvider");
   const [accounts] = useApiData<Account[]>("Accounts");
   const [name, setName] = useState("");
@@ -137,6 +142,14 @@ export const AccountForm = ({ apps, limits, account }: AccountFormProps) => {
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
 
+    if (
+      user?.scope === USER_ACCOUNT &&
+      user.account_sid !== account?.data?.account_sid
+    ) {
+      toastError("You do not have permissions to make changes to this Account");
+      return;
+    }
+
     setMessage("");
 
     if (accounts) {

src/containers/internal/views/accounts/index.tsx

@@ -6,12 +6,14 @@ import { useServiceProviderData, deleteAccount } from "src/api";
 import { ROUTE_INTERNAL_ACCOUNTS } from "src/router/routes";
 import { Section, Icons, Spinner, SearchFilter } from "src/components";
 import { DeleteAccount } from "./delete";
-import { toastError, toastSuccess } from "src/store";
+import { toastError, toastSuccess, useSelectState } from "src/store";
 import { hasLength, hasValue, useFilteredResults } from "src/utils";
 
 import type { Account } from "src/api/types";
+import { USER_ACCOUNT } from "src/api/constants";
 
 export const Accounts = () => {
+  const user = useSelectState("user");
   const [accounts, refetch] = useServiceProviderData<Account[]>("Accounts");
   const [account, setAccount] = useState<Account | null>(null);
   const [filter, setFilter] = useState("");
@@ -20,6 +22,16 @@ export const Accounts = () => {
 
   const handleDelete = () => {
     if (account) {
+      if (
+        user?.scope === USER_ACCOUNT &&
+        user.account_sid !== account.account_sid
+      ) {
+        toastError(
+          "You do not have permissions to make changes to this Account"
+        );
+        return;
+      }
+
       deleteAccount(account.account_sid)
         .then(() => {
           refetch();

src/containers/internal/views/applications/form.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { Button, ButtonGroup, MS } from "jambonz-ui";
 import { Link, useNavigate } from "react-router-dom";
 
-import { toastError, toastSuccess } from "src/store";
+import { toastError, toastSuccess, useSelectState } from "src/store";
 import { ClipBoard, Section } from "src/components";
 import {
   Selector,
@@ -31,7 +31,11 @@ import {
   ROUTE_INTERNAL_ACCOUNTS,
   ROUTE_INTERNAL_APPLICATIONS,
 } from "src/router/routes";
-import { DEFAULT_WEBHOOK, WEBHOOK_METHODS } from "src/api/constants";
+import {
+  DEFAULT_WEBHOOK,
+  USER_ACCOUNT,
+  WEBHOOK_METHODS,
+} from "src/api/constants";
 
 import type {
   RecognizerVendors,
@@ -58,6 +62,7 @@ type ApplicationFormProps = {
 export const ApplicationForm = ({ application }: ApplicationFormProps) => {
   const navigate = useNavigate();
   const { synthesis, recognizers } = useSpeechVendors();
+  const user = useSelectState("user");
   const [accounts] = useServiceProviderData<Account[]>("Accounts");
   const [applications] = useApiData<Application[]>("Applications");
   const [applicationName, setApplicationName] = useState("");
@@ -115,6 +120,13 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
 
+    if (user?.scope === USER_ACCOUNT && user.account_sid !== accountSid) {
+      toastError(
+        "You do not have permissions to make changes to these Speech Credentials"
+      );
+      return;
+    }
+
     setMessage("");
 
     if (applications) {
@@ -266,7 +278,13 @@ export const ApplicationForm = ({ application }: ApplicationFormProps) => {
         </fieldset>
         <fieldset>
           <AccountSelect
-            accounts={accounts}
+            accounts={
+              user?.scope === USER_ACCOUNT
+                ? accounts?.filter(
+                    (acct) => acct.account_sid === user.account_sid
+                  )
+                : accounts
+            }
             account={[accountSid, setAccountSid]}
           />
         </fieldset>

src/containers/internal/views/applications/index.tsx

@@ -3,7 +3,7 @@ import { H1, M, Button, Icon } from "jambonz-ui";
 import { Link } from "react-router-dom";
 
 import { deleteApplication, getFetch, useServiceProviderData } from "src/api";
-import { API_ACCOUNTS } from "src/api/constants";
+import { API_ACCOUNTS, USER_ACCOUNT } from "src/api/constants";
 import {
   ROUTE_INTERNAL_APPLICATIONS,
   ROUTE_INTERNAL_ACCOUNTS,
@@ -22,6 +22,7 @@ import { hasLength, hasValue, useFilteredResults } from "src/utils";
 import type { Application, Account } from "src/api/types";
 
 export const Applications = () => {
+  const user = useSelectState("user");
   const currentServiceProvider = useSelectState("currentServiceProvider");
   const [accounts] = useServiceProviderData<Account[]>("Accounts");
   const [accountSid, setAccountSid] = useState("");
@@ -44,6 +45,12 @@ export const Applications = () => {
 
   const handleDelete = () => {
     if (application) {
+      if (user?.scope === USER_ACCOUNT && user.account_sid !== accountSid) {
+        toastError(
+          "You do not have permissions to make changes to this Application"
+        );
+        return;
+      }
       deleteApplication(application.application_sid)
         .then(() => {
           getApplications();
@@ -97,7 +104,13 @@ export const Applications = () => {
         />
         <AccountFilter
           account={[accountSid, setAccountSid]}
-          accounts={accounts}
+          accounts={
+            user?.scope === USER_ACCOUNT
+              ? accounts?.filter(
+                  (acct) => acct.account_sid === user.account_sid
+                )
+              : accounts
+          }
         />
       </section>
       <Section {...(hasLength(filteredApplications) && { slim: true })}>