Merge pull request #137 from sinamics/de_auth_warning

Show modal when de-authorize a member

prisma/migrations/20230910161252_authorize_warning/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "UserOptions" ADD COLUMN     "deAuthorizeWarning" BOOLEAN DEFAULT false;

prisma/schema.prisma

@@ -151,6 +151,9 @@ model UserOptions {
   // local controller
   localControllerUrl             String?           @default("http://zerotier:9993")
   localControllerSecret          String?           @default("")
+
+  // member table
+  deAuthorizeWarning             Boolean?          @default(false)
 }
 
 enum AccessLevel {

src/components/modules/accountTable.tsx

@@ -283,7 +283,7 @@ export const Accounts = () => {
 						</tbody>
 					</table>
 					<div className="flex flex-col items-center justify-between py-3 sm:flex-row">
-						<TableFooter table={table} />
+						<TableFooter table={table} page="accountTable" />
 					</div>
 				</div>
 			</div>

src/components/modules/table/memberHeaderColumns.tsx

@@ -60,7 +60,7 @@ const sortingIpaddress = (
 export const MemberHeaderColumns = ({ nwid, central = false }: IProp) => {
 	const t = useTranslations();
 	const { callModal } = useModalStore((state) => state);
-
+	const { data: me } = api.auth.me.useQuery();
 	const { data: networkById, refetch: refetchNetworkById } =
 		api.network.getNetworkById.useQuery(
 			{
@@ -107,17 +107,36 @@ export const MemberHeaderColumns = ({ nwid, central = false }: IProp) => {
 							<input
 								type="checkbox"
 								checked={getValue()}
-								onChange={(event) =>
-									updateMember(
-										{
-											nwid,
-											memberId: original.id,
-											central,
-											updateParams: { authorized: event.target.checked },
-										},
-										{ onSuccess: () => void refetchNetworkById() },
-									)
-								}
+								onChange={(event) => {
+									const authorized = event.target.checked;
+									if (me?.options?.deAuthorizeWarning && !authorized) {
+										callModal({
+											title: "Warning",
+											description: "Are you sure you want to deauthorize this member?",
+											yesAction: () => {
+												updateMember(
+													{
+														nwid,
+														memberId: original.id,
+														central,
+														updateParams: { authorized },
+													},
+													{ onSuccess: () => void refetchNetworkById() },
+												);
+											},
+										});
+									} else {
+										updateMember(
+											{
+												nwid,
+												memberId: original.id,
+												central,
+												updateParams: { authorized: event.target.checked },
+											},
+											{ onSuccess: () => void refetchNetworkById() },
+										);
+									}
+								}}
 								// className="checkbox-error checkbox"
 								className="checkbox-success checkbox checkbox-xs sm:checkbox-sm"
 							/>

src/components/modules/tableFooter.tsx

@@ -81,7 +81,7 @@ const TableFooter = ({ table, page }: { table: Table<any>; page: string }) => {
 							{t("show")} {pageSize}
 						</option>
 					))}
-					<option value="all">Show All</option>
+					<option value="all">{t("show")} All</option>
 				</select>
 			</div>
 			<div className="space-x-3 p-2">

src/locales/en/common.json

@@ -486,7 +486,10 @@
 				"showMarkerInTable": "Show marker in Table",
 				"showMarkerInTableDescription": "This will add a circle before the the member name with the anotation color.<br></br>You can still search the anotation if disabled.",
 				"addBackgroundColorInTable": "Add background color in table",
-				"addBackgroundColorInTableDescription": "This will add row background color based on the anotation color.<br></br>You can still search the anotation if disabled."
+				"addBackgroundColorInTableDescription": "This will add row background color based on the anotation color.<br></br>You can still search the anotation if disabled.",
+				"memberTableTitle": "Member Table",
+				"deAuthorizationWarningTitle": "Display warning on member De-Authorization",
+				"deAuthorizationWarningLabel": "Display a confirmation modal to prevent accidental de-authorizations."
 			},
 			"zerotierCentral": {
 				"title": "Zerotier Central",

src/locales/es/common.json

@@ -486,7 +486,10 @@
 				"showMarkerInTable": "Mostrar marcador en la tabla",
 				"showMarkerInTableDescription": "Esto agregará un círculo antes del nombre del miembro con el color de la anotación. <br></br> Todavía puedes buscar la anotación si está desactivada.",
 				"addBackgroundColorInTable": "Agregar color de fondo en la tabla",
-				"addBackgroundColorInTableDescription": "Esto agregará color de fondo a la fila según el color de la anotación. <br></br> Todavía puedes buscar la anotación si está desactivada."
+				"addBackgroundColorInTableDescription": "Esto agregará color de fondo a la fila según el color de la anotación. <br></br> Todavía puedes buscar la anotación si está desactivada.",
+				"memberTableTitle": "Tabla de Miembros",
+				"deAuthorizationWarningTitle": "Mostrar advertencia al desautorizar a un miembro",
+				"deAuthorizationWarningLabel": "Mostrar un modal de confirmación para evitar desautorizaciones accidentales."
 			},
 			"zerotierCentral": {
 				"title": "Zerotier Central",

src/locales/no/common.json

@@ -486,7 +486,10 @@
 				"showMarkerInTable": "Vis markør i tabellen",
 				"showMarkerInTableDescription": "Dette vil legge til en sirkel før medlemsnavnet med anmerkningsfargen. <br></br> Du kan fremdeles søke anmerkningen hvis deaktivert.",
 				"addBackgroundColorInTable": "Legg til bakgrunnsfarge i tabellen",
-				"addBackgroundColorInTableDescription": "Dette vil legge til radbakgrunnsfarge basert på anmerkningsfargen. <br></br> Du kan fremdeles søke anmerkningen hvis deaktivert."
+				"addBackgroundColorInTableDescription": "Dette vil legge til radbakgrunnsfarge basert på anmerkningsfargen. <br></br> Du kan fremdeles søke anmerkningen hvis deaktivert.",
+				"memberTableTitle": "Medlems Liste",
+				"deAuthorizationWarningTitle": "Vis advarsel ved fjerning av medlemsautorisasjon",
+				"deAuthorizationWarningLabel": "Vis en bekreftelsesmodal for å forhindre utilsiktet fjerning av autorisasjoner."
 			},
 			"zerotierCentral": {
 				"title": "Zerotier Central",

src/locales/zh/common.json

@@ -486,7 +486,10 @@
 				"showMarkerInTable": "在表格中显示标记",
 				"showMarkerInTableDescription": "这将在成员名称前添加一个带有注释颜色的圆圈。<br></br>如果禁用，您仍然可以搜索注释。",
 				"addBackgroundColorInTable": "在表格中添加背景颜色",
-				"addBackgroundColorInTableDescription": "这将根据注释颜色添加行背景颜色。<br></br>如果禁用，您仍然可以搜索注释。"
+				"addBackgroundColorInTableDescription": "这将根据注释颜色添加行背景颜色。<br></br>如果禁用，您仍然可以搜索注释。",
+				"memberTableTitle": "成员表格",
+				"deAuthorizationWarningTitle": "在取消成员授权时显示警告",
+				"deAuthorizationWarningLabel": "显示确认模态框以防止意外取消授权。"
 			},
 			"zerotierCentral": {
 				"title": "Zerotier Central",

src/pages/user-settings/network/index.tsx

@@ -5,7 +5,8 @@ import { useTranslations } from "use-intl";
 
 const UserNetworkSetting = () => {
 	const t = useTranslations("userSettings");
-	const { mutate: updateNotation } = api.auth.updateUserNotation.useMutation();
+	const { mutate: updateSettings } = api.auth.updateUserOptions.useMutation();
+
 	const { data: me, refetch: refetchMe } = api.auth.me.useQuery();
 
 	return (
@@ -29,7 +30,7 @@ const UserNetworkSetting = () => {
 						checked={me?.options?.showNotationMarkerInTableRow || false}
 						className="checkbox-primary checkbox checkbox-sm justify-self-end"
 						onChange={(e) => {
-							updateNotation(
+							updateSettings(
 								{
 									showNotationMarkerInTableRow: e.target.checked,
 								},
@@ -54,7 +55,7 @@ const UserNetworkSetting = () => {
 						checked={me?.options?.useNotationColorAsBg || false}
 						className="checkbox-primary checkbox checkbox-sm justify-self-end"
 						onChange={(e) => {
-							updateNotation(
+							updateSettings(
 								{
 									useNotationColorAsBg: e.target.checked,
 								},
@@ -64,6 +65,35 @@ const UserNetworkSetting = () => {
 					/>
 				</div>
 			</div>
+			<div className="pb-10">
+				<p className="text-sm text-gray-400">
+					{t("account.networkSetting.memberTableTitle")}
+				</p>
+				<div className="divider mt-0 p-0 text-gray-500"></div>
+				<div className="flex justify-between py-2">
+					<div>
+						<p className="font-medium">
+							{t("account.networkSetting.deAuthorizationWarningTitle")}
+						</p>
+						<p className="text-sm text-gray-500">
+							{t("account.networkSetting.deAuthorizationWarningLabel")}
+						</p>
+					</div>
+					<input
+						type="checkbox"
+						checked={me?.options?.deAuthorizeWarning || false}
+						className="checkbox-primary checkbox checkbox-sm justify-self-end"
+						onChange={(e) => {
+							updateSettings(
+								{
+									deAuthorizeWarning: e.target.checked,
+								},
+								{ onSuccess: () => void refetchMe() },
+							);
+						}}
+					/>
+				</div>
+			</div>
 		</main>
 	);
 };

src/server/api/routers/authRouter.ts

@@ -464,29 +464,22 @@ export const authRouter = createTRPCRouter({
 	 * - showMarkerInTable: an optional boolean that determines whether to show a marker in the table for the notation
 	 * @returns A Promise that resolves with the updated NetworkMemberNotation instance.
 	 */
-	updateUserNotation: protectedProcedure
+	updateUserOptions: protectedProcedure
 		.input(
 			z.object({
 				useNotationColorAsBg: z.boolean().optional(),
 				showNotationMarkerInTableRow: z.boolean().optional(),
+				deAuthorizeWarning: z.boolean().optional(),
 			}),
 		)
 		.mutation(async ({ ctx, input }) => {
 			return await ctx.prisma.user.update({
-				where: {
-					id: ctx.session.user.id,
-				},
+				where: { id: ctx.session.user.id },
 				data: {
 					options: {
 						upsert: {
-							create: {
-								useNotationColorAsBg: input.useNotationColorAsBg,
-								showNotationMarkerInTableRow: input.showNotationMarkerInTableRow,
-							},
-							update: {
-								useNotationColorAsBg: input.useNotationColorAsBg,
-								showNotationMarkerInTableRow: input.showNotationMarkerInTableRow,
-							},
+							create: input,
+							update: input,
 						},
 					},
 				},