Page MenuHomePhabricator
Differential D8263

[web] Move `editAvatarBadge` div to `EditUserAvatarMenu`
ClosedPublic
Actions

Authored by atul on Jun 20 2023, 11:55 AM.
Tags
None
Referenced Files
F5938502: D8263.diff
Fri, Apr 18, 7:12 AM
Unknown Object (File)
Thu, Apr 3, 10:25 PM
Unknown Object (File)
Mar 15 2025, 4:36 PM
Unknown Object (File)
Mar 10 2025, 1:09 PM
Unknown Object (File)
Mar 8 2025, 12:42 PM
Unknown Object (File)
Mar 8 2025, 12:42 PM
Unknown Object (File)
Mar 8 2025, 12:42 PM
Unknown Object (File)
Mar 8 2025, 12:40 PM
View All Files
Subscribers
tomek

Details

Reviewers
ashoat
ginsu
rohan
inka
michal
kamil
Commits
rCOMM349d0eec12f8: [web] Move `editAvatarBadge` div to `EditUserAvatarMenu`
Summary

Currently only the pencil icon is "clickable," we want the whole thing to be "clickable."

Known regression:

23d369.png (744×726 px, 77 KB)

The menu is appearing right below the icon rather than below the "badge." Will address this layout issue in subsequent diff.

Depends on D8261

Test Plan

"Whole button" is clickable.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

atul created this revision.Jun 20 2023, 11:55 AM
Herald added a subscriber: tomek. · View Herald TranscriptJun 20 2023, 11:55 AM
atul edited the summary of this revision. (Show Details)Jun 20 2023, 11:55 AM
atul added a child revision: D8264: [web] Hide `EditUserAvatarMenu` when `userAvatarSaveInProgress`.Jun 20 2023, 12:02 PM
Harbormaster completed remote builds in B20364: Diff 27909.Jun 20 2023, 12:12 PM
atul requested review of this revision.Jun 20 2023, 12:12 PM
atul added reviewers: rohan, inka, michal, kamil.Jun 21 2023, 9:45 AM
kamil accepted this revision.Jun 22 2023, 4:54 AM

The menu is appearing right below the icon rather than below the "badge." Will address this layout issue in subsequent diff.

Can you link it?

This revision is now accepted and ready to land.Jun 22 2023, 4:54 AM
atul added a comment.Jun 22 2023, 10:50 AM
In D8263#244474, @kamil wrote:

The menu is appearing right below the icon rather than below the "badge." Will address this layout issue in subsequent diff.

Can you link it?

Haven't put it up yet, it requires modifying Menu component so deferring for the end of the stack

Closed by commit rCOMM349d0eec12f8: [web] Move `editAvatarBadge` div to `EditUserAvatarMenu` (authored by atul). · Explain WhyJun 22 2023, 10:56 AM
This revision was automatically updated to reflect the committed changes.
atul added a commit: rCOMM349d0eec12f8: [web] Move `editAvatarBadge` div to `EditUserAvatarMenu`.

Revision Contents
Changeset List

PathSize
web/
avatars/
edit-user-avatar-menu.css
edit-user-avatar.css
13 lines
7 lines
21 lines
4 lines

Diff 28011

View Options

web/avatars/edit-user-avatar-menu.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/edit-user-avatar-menu.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,
}; };
View Options

web/avatars/edit-user-avatar.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/edit-user-avatar.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,
}; };