feat: automatic session setup for dev

web/components/UserProfile.ce.vue

@@ -96,7 +96,7 @@ onBeforeMount(() => {
 
 onMounted(() => {
   if (devConfig.VITE_MOCK_USER_SESSION && devConfig.NODE_ENV === 'development') {
-    document.cookie = 'unraid_session_cookie=mock-user-session';
+    document.cookie = 'unraid_session_cookie=mockusersession';
   }
 })
 </script>

web/composables/gql/graphql.ts

@@ -44,10 +44,8 @@ export type AccessUrlInput = {
 };
 
 export type AddPermissionInput = {
-  action: Scalars['String']['input'];
+  actions: Array<Scalars['String']['input']>;
-  possession: Scalars['String']['input'];
   resource: Resource;
-  role: Role;
 };
 
 export type AddRoleForApiKeyInput = {
@@ -70,6 +68,7 @@ export type ApiKey = {
   description?: Maybe<Scalars['String']['output']>;
   id: Scalars['ID']['output'];
   name: Scalars['String']['output'];
+  permissions: Array<Permission>;
   roles: Array<Role>;
 };
 
@@ -86,6 +85,7 @@ export type ApiKeyWithSecret = {
   id: Scalars['ID']['output'];
   key: Scalars['String']['output'];
   name: Scalars['String']['output'];
+  permissions: Array<Permission>;
   roles: Array<Role>;
 };
 
@@ -351,8 +351,13 @@ export enum ContainerState {
 
 export type CreateApiKeyInput = {
   description?: InputMaybe<Scalars['String']['input']>;
+  /**  Whether to create the key in memory only (true), or on disk (false) - memory only keys will not persist through reboots of the API  */
+  memory?: InputMaybe<Scalars['Boolean']['input']>;
   name: Scalars['String']['input'];
-  roles: Array<Role>;
+  /**  This will replace the existing key if one already exists with the same name, otherwise returns the existing key  */
+  overwrite?: InputMaybe<Scalars['Boolean']['input']>;
+  permissions?: InputMaybe<Array<AddPermissionInput>>;
+  roles?: InputMaybe<Array<Role>>;
 };
 
 export type Devices = {
@@ -599,7 +604,7 @@ export type Me = UserAccount & {
   description: Scalars['String']['output'];
   id: Scalars['ID']['output'];
   name: Scalars['String']['output'];
-  permissions?: Maybe<Scalars['JSON']['output']>;
+  permissions?: Maybe<Array<Permission>>;
   roles: Array<Role>;
 };
 
@@ -1028,6 +1033,12 @@ export type Pci = {
   vendorname?: Maybe<Scalars['String']['output']>;
 };
 
+export type Permission = {
+  __typename?: 'Permission';
+  actions: Array<Scalars['String']['output']>;
+  resource: Resource;
+};
+
 export type ProfileModel = {
   __typename?: 'ProfileModel';
   avatar?: Maybe<Scalars['String']['output']>;
@@ -1196,7 +1207,7 @@ export enum Resource {
   Cloud = 'cloud',
   Config = 'config',
   Connect = 'connect',
-  CrashReportingEnabled = 'crash_reporting_enabled',
+  ConnectRemoteAccess = 'connect__remote_access',
   Customizations = 'customizations',
   Dashboard = 'dashboard',
   Disk = 'disk',
@@ -1224,10 +1235,8 @@ export enum Resource {
 /** Available roles for API keys and users */
 export enum Role {
   Admin = 'admin',
-  Guest = 'guest',
+  Connect = 'connect',
-  MyServers = 'my_servers',
+  Guest = 'guest'
-  Notifier = 'notifier',
-  Upc = 'upc'
 }
 
 export type Server = {
@@ -1450,6 +1459,7 @@ export type User = UserAccount & {
   name: Scalars['String']['output'];
   /** If the account has a password set */
   password?: Maybe<Scalars['Boolean']['output']>;
+  permissions?: Maybe<Array<Permission>>;
   roles: Array<Role>;
 };
 
@@ -1457,6 +1467,7 @@ export type UserAccount = {
   description: Scalars['String']['output'];
   id: Scalars['ID']['output'];
   name: Scalars['String']['output'];
+  permissions?: Maybe<Array<Permission>>;
   roles: Array<Role>;
 };
 
@@ -1678,6 +1689,7 @@ export enum VmState {
 export type Vms = {
   __typename?: 'Vms';
   domain?: Maybe<Array<VmDomain>>;
+  id: Scalars['ID']['output'];
 };
 
 export enum WAN_ACCESS_TYPE {

web/helpers/create-apollo-client.ts

@@ -1,11 +1,4 @@
-import {
+import { ApolloClient, ApolloLink, createHttpLink, from, Observable, split } from '@apollo/client/core/index.js';
-  ApolloClient,
-  ApolloLink,
-  createHttpLink,
-  from,
-  Observable,
-  split,
-} from '@apollo/client/core/index.js';
 import { onError } from '@apollo/client/link/error/index.js';
 import { RetryLink } from '@apollo/client/link/retry/index.js';
 import { GraphQLWsLink } from '@apollo/client/link/subscriptions/index.js';
@@ -20,7 +13,7 @@ const httpEndpoint = WEBGUI_GRAPHQL;
 const wsEndpoint = new URL(WEBGUI_GRAPHQL.toString().replace('http', 'ws'));
 
 const headers = {
-  'x-csrf-token': globalThis.csrf_token,
+  'x-csrf-token': globalThis.csrf_token ?? '0000000000000000',
 };
 
 const httpLink = createHttpLink({
@@ -108,4 +101,4 @@ export const client = new ApolloClient({
   cache: createApolloCache(),
 });
 
-provideApolloClient(client);
+provideApolloClient(client);

web/helpers/urls.ts

@@ -40,11 +40,6 @@ const DOCS_REGISTRATION_REPLACE_KEY = new URL('/go/changing-the-flash-device/',
 
 const SUPPORT = new URL('https://unraid.net');
 
-// initialize csrf_token in nuxt playground
-if (import.meta.env.VITE_CSRF_TOKEN) {
-  globalThis.csrf_token = import.meta.env.VITE_CSRF_TOKEN;
-}
-
 export {
   ACCOUNT,
   ACCOUNT_CALLBACK,

web/pages/index.vue

@@ -2,9 +2,9 @@
 import { ExclamationTriangleIcon } from '@heroicons/vue/24/solid';
 import { BrandButton, BrandLogo } from '@unraid/ui';
 import { serverState } from '~/_data/serverState';
+import SsoButtonCe from '~/components/SsoButton.ce.vue';
 import type { SendPayloads } from '~/store/callback';
 import AES from 'crypto-js/aes';
-import SsoButtonCe from '~/components/SsoButton.ce.vue';
 
 const { registerEntry } = useCustomElements();
 onBeforeMount(() => {
@@ -15,6 +15,10 @@ useHead({
   meta: [{ name: 'viewport', content: 'width=1300' }],
 });
 
+onMounted(() => {
+  document.cookie = 'unraid_session_cookie=mockusersession';
+});
+
 const valueToMakeCallback = ref<SendPayloads | undefined>();
 const callbackDestination = ref<string>('');
 
@@ -156,7 +160,7 @@ onMounted(() => {
           <div class="bg-background">
             <hr class="border-black dark:border-white" />
             <h2 class="text-xl font-semibold font-mono">SSO Button Component</h2>
-              <SsoButtonCe :ssoenabled="serverState.ssoEnabled" />
+            <SsoButtonCe :ssoenabled="serverState.ssoEnabled" />
           </div>
         </div>
       </client-only>