From 77be17dcce5c9df8dbf800f7e9318f8319db9239 Mon Sep 17 00:00:00 2001
From: thororen1234 <78185467+thororen1234@users.noreply.github.com>
Date: Sun, 6 Oct 2024 13:42:21 -0400
Subject: [PATCH] Update LoginWithQR
---
src/equicordplugins/loginWithQR/images.ts | 6 +-
src/equicordplugins/loginWithQR/index.tsx | 76 ++++++++++---------
src/equicordplugins/loginWithQR/ui/index.ts | 1 -
.../loginWithQR/ui/modals/QrModal.tsx | 26 ++++++-
src/equicordplugins/loginWithQR/ui/styles.css | 29 +++++--
5 files changed, 87 insertions(+), 51 deletions(-)
diff --git a/src/equicordplugins/loginWithQR/images.ts b/src/equicordplugins/loginWithQR/images.ts
index c73d3e98..865ea50a 100644
--- a/src/equicordplugins/loginWithQR/images.ts
+++ b/src/equicordplugins/loginWithQR/images.ts
@@ -8,11 +8,11 @@ export const images = {
cross: "https://i.imgur.com/XxRnu3b.png",
deviceImage: {
success:
- "https://github.com/nexpid/Themelings/blob/3a063c5188f4cac096171f29163f9e2659f275a3/icons/images/native/img_remote_auth_succeeded.png",
+ "https://github.com/nexpid/Themelings/raw/data/icons/images/native/img_remote_auth_succeeded.png",
notFound:
- "https://github.com/nexpid/Themelings/blob/3a063c5188f4cac096171f29163f9e2659f275a3/icons/images/native/img_remote_auth_not_found.png",
+ "https://github.com/nexpid/Themelings/raw/data/icons/images/native/img_remote_auth_not_found.png",
loading:
- "https://github.com/nexpid/Themelings/blob/3a063c5188f4cac096171f29163f9e2659f275a3/icons/images/native/img_remote_auth_loaded.png",
+ "https://github.com/nexpid/Themelings/raw/data/icons/images/native/img_remote_auth_loaded.png",
},
} as const;
diff --git a/src/equicordplugins/loginWithQR/index.tsx b/src/equicordplugins/loginWithQR/index.tsx
index 394165ac..bd2653b6 100644
--- a/src/equicordplugins/loginWithQR/index.tsx
+++ b/src/equicordplugins/loginWithQR/index.tsx
@@ -5,19 +5,25 @@
*/
import { definePluginSettings } from "@api/Settings";
-import { EquicordDevs } from "@utils/constants";
import definePlugin, { OptionType } from "@utils/types";
-import { Button, Forms, i18n, Menu, TabBar } from "@webpack/common";
+import { Button, Forms, i18n, Menu } from "@webpack/common";
import { ReactElement } from "react";
import { preload, unload } from "./images";
-import { cl, QrCodeIcon } from "./ui";
+import { cl } from "./ui";
import openQrModal from "./ui/modals/QrModal";
export default definePlugin({
name: "LoginWithQR",
- description: "Allows you to login to another device by scanning a login QR code, just like on mobile!",
- authors: [EquicordDevs.nexpid],
+ description:
+ "Allows you to login to another device by scanning a login QR code, just like on mobile!",
+ // replace with EquicordDevs.nexpid when merged to Equicord
+ authors: [
+ {
+ name: "Nexpid",
+ id: 853550207039832084n,
+ },
+ ],
settings: definePluginSettings({
scanQr: {
@@ -62,25 +68,31 @@ export default definePlugin({
replace: ",$self.insertScanQrButton($1)",
},
},
- // Insert a Scan QR Code MenuItem in the simplified user popout
+ // Insert a Scan QR Code MenuItem in the Swith Accounts popout
{
- find: "Messages.MULTI_ACCOUNT_MENU_LABEL",
+ find: ".SWITCH_ACCOUNTS_MANAGE_ACCOUNTS,",
replacement: {
- // Insert our own MenuItem before the Switch Accounts button
- match: /children:\[(.{0,54}id:"switch-accounts")/,
- replace: "children:[$self.ScanQrMenuItem,$1",
- },
+ match: /(id:"manage-accounts",.*?)}\)\)(,\i)/,
+ replace: "$1}),$self.ScanQrMenuItem)$2"
+ }
},
- // Add a Scan QR entry to the settings TabBar
+
+ // Insert a Scan QR Code button in the Settings sheet
{
- find: ".BILLING_SETTINGS,",
+ find: "useGenerateUserSettingsSections",
replacement: {
- match: /((\i\.settings)\.forEach.+?(\i).push\(.+}\)}\))/,
- replace: (_, original, settings, elements) =>
- `${original},${settings}?.[0]=="ACCOUNT"` +
- `&&${elements}.push({section:"CUSTOM",element:$self.ScanQrTabBarComponent})`,
- },
+ match: /(\.FRIEND_REQUESTS)/,
+ replace: "$1,\"SCAN_QR_CODE\""
+ }
},
+ // Insert a Scan QR Code button in the Settings sheet (part 2)
+ {
+ find: ".PRIVACY_ENCRYPTION_VERIFIED_DEVICES_V2]",
+ replacement: {
+ match: /(\.CLIPS]:{.*?},)/,
+ replace: "$1\"SCAN_QR_CODE\":$self.ScanQrSettingsSheet,"
+ }
+ }
],
qrModalOpen: false,
@@ -93,26 +105,18 @@ export default definePlugin({
{button}
),
-
get ScanQrMenuItem() {
- return (
-
-
-
- );
+ return ;
+ },
+ get ScanQrSettingsSheet() {
+ return {
+ section: i18n.Messages.USER_SETTINGS_SCAN_QR_CODE,
+ onClick: openQrModal,
+ searchableTitles: [i18n.Messages.USER_SETTINGS_SCAN_QR_CODE],
+ label: i18n.Messages.USER_SETTINGS_SCAN_QR_CODE,
+ ariaLabel: i18n.Messages.USER_SETTINGS_SCAN_QR_CODE
+ };
},
-
- ScanQrTabBarComponent: () => (
-
- {i18n.Messages.USER_SETTINGS_SCAN_QR_CODE}
-
- ),
start() {
// Preload images
diff --git a/src/equicordplugins/loginWithQR/ui/index.ts b/src/equicordplugins/loginWithQR/ui/index.ts
index e2bc34cc..8ee835d5 100644
--- a/src/equicordplugins/loginWithQR/ui/index.ts
+++ b/src/equicordplugins/loginWithQR/ui/index.ts
@@ -43,4 +43,3 @@ export const QrCodeIcon = proxyLazy(() => icons.QrCodeCameraIcon ?? icons.QrCode
}>;
export const cl = classNameFactory("qrlogin-");
-
diff --git a/src/equicordplugins/loginWithQR/ui/modals/QrModal.tsx b/src/equicordplugins/loginWithQR/ui/modals/QrModal.tsx
index efa3ba64..2cd87a73 100644
--- a/src/equicordplugins/loginWithQR/ui/modals/QrModal.tsx
+++ b/src/equicordplugins/loginWithQR/ui/modals/QrModal.tsx
@@ -345,6 +345,7 @@ function QrModal(props: ModalProps) {
video.srcObject = str;
video.addEventListener("loadedmetadata", () => {
if (stopped) return stop(str);
+
video.play();
modalProps.current.setPreview(video);
snapshot();
@@ -381,7 +382,8 @@ function QrModal(props: ModalProps) {
state === LoginStateType.Camera &&
!preview?.source &&
"modal-filepaste-disabled",
- preview?.source && "modal-filepaste-preview"
+ preview?.source && "modal-filepaste-preview",
+ preview?.crosses && "modal-filepaste-crosses"
)}
onClick={() =>
state === LoginStateType.Idle && inputRef.current?.click()
@@ -418,10 +420,28 @@ function QrModal(props: ModalProps) {
>
{preview?.source ? (
i + x, 0) /
+ preview.crosses.length -
+ 50)}%`
+ : undefined,
+ ["--offset-y" as any]: preview.crosses
+ ? `${-(preview.crosses.reduce((i, { y }) => i + y, 0) /
+ preview.crosses.length -
+ 50)}%`
+ : undefined,
+ }}
+ className={cl(preview?.crosses && "preview-crosses")}
>
{preview.source}
- {preview.crosses?.map(({ x, y, rot, size }, i) => (
+ {preview.crosses?.map(({ x, y, rot, size }) => (