Page MenuHomePhabricator
Differential D8287

[web] Split `EmojiAvatarSelectionModal` into "Emoji" and "Color" tab
ClosedPublic
Actions

Authored by atul on Jun 21 2023, 4:04 PM.
Tags
None
Referenced Files
Unknown Object (File)
Thu, Apr 3, 10:25 PM
Unknown Object (File)
Mar 15 2025, 4:35 PM
Unknown Object (File)
Mar 5 2025, 4:02 PM
Unknown Object (File)
Mar 5 2025, 4:02 PM
Unknown Object (File)
Mar 5 2025, 4:02 PM
Unknown Object (File)
Mar 5 2025, 4:01 PM
Unknown Object (File)
Mar 5 2025, 3:57 PM
Unknown Object (File)
Feb 19 2025, 11:25 AM
View All Files
Subscribers
ashoat
• ted
tomek

Details

Reviewers
ashoat
ginsu
rohan
Commits
rCOMMdebbfe636078: [web] Split `EmojiAvatarSelectionModal` into "Emoji" and "Color" tab
Summary

Separate Emoji and Color into separate tabs.

NOTE: Layout/Styling will be handled separately.
WARNING: Took some liberties here with styling to unblock myself since emoji selection part of this modal wasn't part of designs (https://blob.sh/84e83d.png). Kept things as simple as possible, happy to iterate on this further. (cc @ashoat, @ted)

Depends on D8286

Test Plan

Looks (and continues to work) as expected:

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Revision Contents
Changeset List

Diff 28097

View Options

web/avatars/emoji-avatar-selection-modal.css

  • This file was moved from web/database/utils/worker-crypto-utils.js.
// @flow // @flow
const ENCRYPTION_ALGORITHM = 'AES-GCM'; const ENCRYPTION_ALGORITHM = 'AES-GCM';
const ENCRYPTION_KEY_USAGES: $ReadOnlyArray<CryptoKey$Usages> = [ const ENCRYPTION_KEY_USAGES: $ReadOnlyArray<CryptoKey$Usages> = [
'encrypt', 'encrypt',
'decrypt', 'decrypt',
]; ];
type EncryptedData = { type EncryptedData = {
+iv: BufferSource, +iv: BufferSource,
+ciphertext: Uint8Array, +ciphertext: Uint8Array,
}; };
function generateDatabaseCryptoKey({ function generateCryptoKey({
extractable, extractable,
}: { }: {
+extractable: boolean, +extractable: boolean,
}): Promise<CryptoKey> { }): Promise<CryptoKey> {
return crypto.subtle.generateKey( return crypto.subtle.generateKey(
{ {
name: ENCRYPTION_ALGORITHM, name: ENCRYPTION_ALGORITHM,
length: 256, length: 256,
}, },
extractable, extractable,
ENCRYPTION_KEY_USAGES, ENCRYPTION_KEY_USAGES,
); );
} }
function generateIV(): BufferSource { function generateIV(): BufferSource {
return crypto.getRandomValues(new Uint8Array(12)); return crypto.getRandomValues(new Uint8Array(12));
} }
async function encryptDatabaseFile( async function encryptData(
data: Uint8Array, data: Uint8Array,
key: CryptoKey, key: CryptoKey,
): Promise<EncryptedData> { ): Promise<EncryptedData> {
const iv = generateIV(); const iv = generateIV();
const ciphertext = await crypto.subtle.encrypt( const ciphertext = await crypto.subtle.encrypt(
{ {
name: ENCRYPTION_ALGORITHM, name: ENCRYPTION_ALGORITHM,
iv: iv, iv: iv,
}, },
key, key,
data, data,
); );
return { return {
ciphertext: new Uint8Array(ciphertext), ciphertext: new Uint8Array(ciphertext),
iv, iv,
}; };
} }
async function decryptDatabaseFile( async function decryptData(
encryptedData: EncryptedData, encryptedData: EncryptedData,
key: CryptoKey, key: CryptoKey,
): Promise<Uint8Array> { ): Promise<Uint8Array> {
const { ciphertext, iv } = encryptedData; const { ciphertext, iv } = encryptedData;
const decrypted = await crypto.subtle.decrypt( const decrypted = await crypto.subtle.decrypt(
{ {
name: ENCRYPTION_ALGORITHM, name: ENCRYPTION_ALGORITHM,
iv, iv,
Show All 18 Lines return await crypto.subtle.importKey(
jwkKey, jwkKey,
ENCRYPTION_ALGORITHM, ENCRYPTION_ALGORITHM,
true, true,
ENCRYPTION_KEY_USAGES, ENCRYPTION_KEY_USAGES,
); );
} }
export { export {
generateDatabaseCryptoKey, generateCryptoKey,
encryptDatabaseFile, encryptData,
decryptDatabaseFile, decryptData,
exportKeyToJWK, exportKeyToJWK,
importJWKKey, importJWKKey,
}; };
View Options

web/avatars/emoji-avatar-selection-modal.react.js

  • This file was moved from web/database/utils/worker-crypto-utils.js.
// @flow // @flow
const ENCRYPTION_ALGORITHM = 'AES-GCM'; const ENCRYPTION_ALGORITHM = 'AES-GCM';
const ENCRYPTION_KEY_USAGES: $ReadOnlyArray<CryptoKey$Usages> = [ const ENCRYPTION_KEY_USAGES: $ReadOnlyArray<CryptoKey$Usages> = [
'encrypt', 'encrypt',
'decrypt', 'decrypt',
]; ];
type EncryptedData = { type EncryptedData = {
+iv: BufferSource, +iv: BufferSource,
+ciphertext: Uint8Array, +ciphertext: Uint8Array,
}; };
function generateDatabaseCryptoKey({ function generateCryptoKey({
extractable, extractable,
}: { }: {
+extractable: boolean, +extractable: boolean,
}): Promise<CryptoKey> { }): Promise<CryptoKey> {
return crypto.subtle.generateKey( return crypto.subtle.generateKey(
{ {
name: ENCRYPTION_ALGORITHM, name: ENCRYPTION_ALGORITHM,
length: 256, length: 256,
}, },
extractable, extractable,
ENCRYPTION_KEY_USAGES, ENCRYPTION_KEY_USAGES,
); );
} }
function generateIV(): BufferSource { function generateIV(): BufferSource {
return crypto.getRandomValues(new Uint8Array(12)); return crypto.getRandomValues(new Uint8Array(12));
} }
async function encryptDatabaseFile( async function encryptData(
data: Uint8Array, data: Uint8Array,
key: CryptoKey, key: CryptoKey,
): Promise<EncryptedData> { ): Promise<EncryptedData> {
const iv = generateIV(); const iv = generateIV();
const ciphertext = await crypto.subtle.encrypt( const ciphertext = await crypto.subtle.encrypt(
{ {
name: ENCRYPTION_ALGORITHM, name: ENCRYPTION_ALGORITHM,
iv: iv, iv: iv,
}, },
key, key,
data, data,
); );
return { return {
ciphertext: new Uint8Array(ciphertext), ciphertext: new Uint8Array(ciphertext),
iv, iv,
}; };
} }
async function decryptDatabaseFile( async function decryptData(
encryptedData: EncryptedData, encryptedData: EncryptedData,
key: CryptoKey, key: CryptoKey,
): Promise<Uint8Array> { ): Promise<Uint8Array> {
const { ciphertext, iv } = encryptedData; const { ciphertext, iv } = encryptedData;
const decrypted = await crypto.subtle.decrypt( const decrypted = await crypto.subtle.decrypt(
{ {
name: ENCRYPTION_ALGORITHM, name: ENCRYPTION_ALGORITHM,
iv, iv,
Show All 18 Lines return await crypto.subtle.importKey(
jwkKey, jwkKey,
ENCRYPTION_ALGORITHM, ENCRYPTION_ALGORITHM,
true, true,
ENCRYPTION_KEY_USAGES, ENCRYPTION_KEY_USAGES,
); );
} }
export { export {
generateDatabaseCryptoKey, generateCryptoKey,
encryptDatabaseFile, encryptData,
decryptDatabaseFile, decryptData,
exportKeyToJWK, exportKeyToJWK,
importJWKKey, importJWKKey,
}; };