Page MenuHomePhabricator
Differential D8261

[web] Display `loadingSpinner` over `EditUserAvatar` when change in progress
ClosedPublic
Actions

Authored by atul on Jun 20 2023, 10:49 AM.
Tags
None
Referenced Files
F5915756: D8261.diff
Thu, Apr 17, 8:53 PM
Unknown Object (File)
Sun, Apr 13, 7:44 PM
Unknown Object (File)
Sat, Mar 22, 3:35 PM
Unknown Object (File)
Mar 15 2025, 4:36 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:42 PM
View All Files
Subscribers
tomek

Details

Reviewers
ashoat
ginsu
rohan
inka
kamil
michal
Commits
rCOMMb6e7da51ff11: [web] Display `loadingSpinner` over `EditUserAvatar` when change in progress
Summary

Show a loading spinner over EditUserAvatar when a save is in progress. Pretty straightforward. In next diff I'll quickly "disable" the edit button as well.

Depends on D8260

Test Plan

Looks as expected:

21c58a.png (1×996 px, 92 KB)

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

atul created this revision.Jun 20 2023, 10:49 AM
Herald added a subscriber: tomek. · View Herald TranscriptJun 20 2023, 10:49 AM
atul published this revision for review.Jun 20 2023, 10:49 AM
atul edited the test plan for this revision. (Show Details)
atul added inline comments.
web/avatars/edit-user-avatar.react.js
25–28 ↗(On Diff #27905)

Ah, let me pull this out.

atul updated this revision to Diff 27906.Jun 20 2023, 10:57 AM

pull out loadingSpinner from component

Harbormaster completed remote builds in B20360: Diff 27905.Jun 20 2023, 11:06 AM
Harbormaster completed remote builds in B20361: Diff 27906.Jun 20 2023, 11:14 AM
atul added a child revision: D8263: [web] Move `editAvatarBadge` div to `EditUserAvatarMenu`.Jun 20 2023, 11:55 AM
atul added reviewers: rohan, inka, kamil, michal.Jun 21 2023, 9:45 AM
kamil accepted this revision.Jun 22 2023, 4:41 AM
This revision is now accepted and ready to land.Jun 22 2023, 4:41 AM
atul updated this revision to Diff 28007.Jun 22 2023, 10:53 AM

undefined -> null

This revision was landed with ongoing or failed builds.Jun 22 2023, 10:56 AM
Closed by commit rCOMMb6e7da51ff11: [web] Display `loadingSpinner` over `EditUserAvatar` when change in progress (authored by atul). · Explain Why
This revision was automatically updated to reflect the committed changes.
atul added a commit: rCOMMb6e7da51ff11: [web] Display `loadingSpinner` over `EditUserAvatar` when change in progress.
Harbormaster failed remote builds in B20433: Diff 28007!Jun 22 2023, 11:15 AM

Revision Contents
Changeset List

PathSize
web/
avatars/
7 lines
14 lines

Diff 28009

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,
}; };