add shared access section to user security page

locales/index.d.ts

@@ -13491,6 +13491,10 @@ export interface Locale extends ILocale {
      * Any accounts listed here will be granted access to the token and may use it to access this account.
      */
     "sharedAccessDescription": string;
+    /**
+     * Shared access allows another user to access your account without using your password. You may select exactly which features and data are available to guest users.
+     */
+    "sharedAccessDescription2": string;
     /**
      * Share access
      */
@@ -13581,6 +13585,30 @@ export interface Locale extends ILocale {
      * Are you sure you want to revoke this token? {num} shared other users will lose shared access.
      */
     "confirmRevokeSharedToken": ParameterizedString<"num">;
+    /**
+     * Grant shared access
+     */
+    "grantSharedAccessButton": string;
+    /**
+     * No shared access listed
+     */
+    "grantSharedAccessNoSelection": string;
+    /**
+     * No shared access users were selected. Please add at least one user in the "shared access" section.
+     */
+    "grantSharedAccessNoSelection2": string;
+    /**
+     * Shared access granted
+     */
+    "grantSharedAccessSuccess": string;
+    /**
+     * Shared access has been granted to {num} users.
+     */
+    "grantSharedAccessSuccess2": ParameterizedString<"num">;
+    /**
+     * Are you sure you want to create a token with no permissions?
+     */
+    "tokenHasNoPermissionsConfirm": string;
 }
 declare const locales: {
     [lang: string]: Locale;

packages/frontend/src/pages/settings/security.vue

@@ -24,6 +24,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<X2fa/>
 
+		<SearchMarker :keywords="['shared', 'access']">
+			<FormSection>
+				<template #label><SearchLabel>{{ i18n.ts.sharedAccess }}</SearchLabel></template>
+				<template #description>{{ i18n.ts.sharedAccessDescription2 }}</template>
+
+				<div class="_gaps_m">
+					<MkButton primary @click="grantSharedAccess">{{ i18n.ts.grantSharedAccessButton }}</MkButton>
+
+					<XApps ref="apps" :onlySharedAccess="true" :limit="10"/>
+				</div>
+			</FormSection>
+		</SearchMarker>
+
 		<FormSection>
 			<template #label>{{ i18n.ts.signinHistory }}</template>
 			<MkPagination :pagination="pagination" disableAutoLoad>
@@ -53,8 +66,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, defineAsyncComponent, useTemplateRef } from 'vue';
 import X2fa from './2fa.vue';
+import XApps from '@/pages/settings/apps.vue';
 import FormSection from '@/components/form/section.vue';
 import FormSlot from '@/components/form/slot.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -113,6 +127,36 @@ async function regenerateToken() {
 	});
 }
 
+const apps = useTemplateRef('apps');
+
+function grantSharedAccess() {
+	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {
+		withSharedAccess: true,
+	}, {
+		done: async result => {
+			const { name, permissions, grantees, rank } = result;
+			await os.promiseDialog(async () => {
+				await misskeyApi('miauth/gen-token', {
+					session: null,
+					name: name,
+					permission: permissions,
+					grantees: grantees,
+					rank: rank,
+				});
+
+				await apps.value?.reload();
+			});
+
+			await os.alert({
+				type: 'success',
+				title: i18n.ts.grantSharedAccessSuccess,
+				text: i18n.tsx.grantSharedAccessSuccess2({ num: grantees.length }),
+			});
+		},
+		closed: () => dispose(),
+	});
+}
+
 const headerActions = computed(() => []);
 
 const headerTabs = computed(() => []);

sharkey-locales/en-US.yml

@@ -687,6 +687,7 @@ adminPermissionsDescription: "Apps using this token will have no administrative
 sharedAccount: "Shared account"
 sharedAccess: "Shared access"
 sharedAccessDescription: "Any accounts listed here will be granted access to the token and may use it to access this account."
+sharedAccessDescription2: "Shared access allows another user to access your account without using your password. You may select exactly which features and data are available to guest users."
 addGrantee: "Share access"
 removeGrantee: "Remove access"
 loginWithSharedAccess: "Login with shared access"
@@ -710,3 +711,9 @@ sharedAccessLogin: "{target} logged in via shared access."
 accessTokenNameDescription: "Unique name to record the purpose of this access token"
 confirmRevokeToken: "Are you sure you want to revoke this token?"
 confirmRevokeSharedToken: "Are you sure you want to revoke this token? {num} shared other users will lose shared access."
+grantSharedAccessButton: "Grant shared access"
+grantSharedAccessNoSelection: "No shared access listed"
+grantSharedAccessNoSelection2: "No shared access users were selected. Please add at least one user in the \"shared access\" section."
+grantSharedAccessSuccess: "Shared access granted"
+grantSharedAccessSuccess2: "Shared access has been granted to {num} users."
+tokenHasNoPermissionsConfirm: "Are you sure you want to create a token with no permissions?"