Page MenuHomePhabricator
Differential D8415

[web] Introduce edit link modal
ClosedPublic
Actions

Authored by tomek on Jul 3 2023, 5:12 AM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Mar 19, 10:58 AM
Unknown Object (File)
Tue, Mar 18, 2:04 PM
Unknown Object (File)
Sat, Mar 15, 5:58 PM
Unknown Object (File)
Thu, Mar 6, 5:08 PM
Unknown Object (File)
Thu, Mar 6, 5:08 PM
Unknown Object (File)
Thu, Mar 6, 5:08 PM
Unknown Object (File)
Thu, Mar 6, 5:08 PM
Unknown Object (File)
Thu, Mar 6, 5:08 PM
View All Files
Subscribers
ashoat

Details

Reviewers
kamil
inka
bartek
ashoat
Commits
rCOMM5e19f016d6b8: [web] Introduce edit link modal
Summary

Introduce a stage of manage link modal where a link can be modified / created.

https://www.figma.com/file/a1nkbWgbgjRlrOY9LVurTz/Comm-%2F-Desktop-app?node-id=11341%3A281468&mode=dev

edit-modal.png (938×1 px, 104 KB)

Depends on D8414

Test Plan

Check if edit link and enable link buttons point to edit link modal. Check if the modal is displayed correctly.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

tomek created this revision.Jul 3 2023, 5:12 AM
Herald added a subscriber: ashoat. · View Herald TranscriptJul 3 2023, 5:12 AM
tomek edited the summary of this revision. (Show Details)Jul 3 2023, 5:12 AM
tomek added a reviewer: ashoat.
Harbormaster completed remote builds in B20683: Diff 28345.Jul 3 2023, 5:29 AM
tomek requested review of this revision.Jul 3 2023, 5:29 AM
tomek added a child revision: D8416: [lib] Extract invite links actions.Jul 3 2023, 6:28 AM
ashoat accepted this revision.Jul 3 2023, 11:05 AM
ashoat added inline comments.
web/invite-links/manage/edit-link-modal.react.js
38–44 ↗(On Diff #28345)

In ENG-4304, I shared replacement text for this screen on native. We can use the same text on web:

Invite links make it easy for your friends to join your community. Anybody who knows your community's invite link will be able to join it. Note that if you change your public link's URL, other communities will be able to claim the old URL.

This revision is now accepted and ready to land.Jul 3 2023, 11:05 AM
tomek updated this revision to Diff 28406.Jul 5 2023, 4:01 AM

Update copy

web/invite-links/manage/edit-link-modal.react.js
38–44 ↗(On Diff #28345)

web-edit-link-new-copy.png (952×1 px, 100 KB)

tomek attached a referenced file: F621583: web-edit-link-new-copy.png. (Show Details)Jul 5 2023, 4:01 AM
Harbormaster completed remote builds in B20733: Diff 28406.Jul 5 2023, 4:17 AM
tomek updated this revision to Diff 28436.Jul 6 2023, 7:04 AM

Rebase

Harbormaster completed remote builds in B20760: Diff 28436.Jul 6 2023, 7:20 AM
ashoat added inline comments.Jul 6 2023, 12:35 PM
web/invite-links/manage/edit-link-modal.react.js
41–42 ↗(On Diff #28436)

Let's avoid using <br /> for spacing

tomek updated this revision to Diff 28464.Jul 7 2023, 2:33 AM

Use 12px gap instead of new line chars

web/invite-links/manage/edit-link-modal.react.js
41–42 ↗(On Diff #28436)

Changed line breaks to 12px gap

web-edit-link-gap.png (976×1 px, 103 KB)

tomek attached a referenced file: F624807: web-edit-link-gap.png. (Show Details)Jul 7 2023, 2:33 AM
Harbormaster completed remote builds in B20784: Diff 28464.Jul 7 2023, 2:50 AM
Closed by commit rCOMM5e19f016d6b8: [web] Introduce edit link modal (authored by tomek). · Explain WhyJul 10 2023, 5:48 AM
This revision was automatically updated to reflect the committed changes.
tomek added a commit: rCOMM5e19f016d6b8: [web] Introduce edit link modal.

Revision Contents
Changeset List

Diff 28539

View Options

web/invite-links/manage-invite-links-modal.react.js

Show First 20 Lines • Show All 526 Lines • ▼ Show 20 Lines tShape<SIWEAuthRequest>({
signature: t.String, signature: t.String,
message: t.String, message: t.String,
calendarQuery: entryQueryInputValidator, calendarQuery: entryQueryInputValidator,
deviceTokenUpdateRequest: t.maybe(deviceTokenUpdateRequestInputValidator), deviceTokenUpdateRequest: t.maybe(deviceTokenUpdateRequestInputValidator),
platformDetails: tPlatformDetails, platformDetails: tPlatformDetails,
watchedIDs: t.list(tID), watchedIDs: t.list(tID),
signedIdentityKeysBlob: t.maybe(signedIdentityKeysBlobValidator), signedIdentityKeysBlob: t.maybe(signedIdentityKeysBlobValidator),
initialNotificationsEncryptedMessage: t.maybe(t.String), initialNotificationsEncryptedMessage: t.maybe(t.String),
doNotRegister: t.maybe(t.Boolean),
}); });
async function siweAuthResponder( async function siweAuthResponder(
viewer: Viewer, viewer: Viewer,
request: SIWEAuthRequest, request: SIWEAuthRequest,
): Promise<LogInResponse> { ): Promise<LogInResponse> {
const { const {
message, message,
signature, signature,
deviceTokenUpdateRequest, deviceTokenUpdateRequest,
platformDetails, platformDetails,
signedIdentityKeysBlob, signedIdentityKeysBlob,
initialNotificationsEncryptedMessage, initialNotificationsEncryptedMessage,
doNotRegister,
} = request; } = request;
const calendarQuery = normalizeCalendarQuery(request.calendarQuery); const calendarQuery = normalizeCalendarQuery(request.calendarQuery);
// 1. Ensure that `message` is a well formed Comm SIWE Auth message. // 1. Ensure that `message` is a well formed Comm SIWE Auth message.
const siweMessage: SIWEMessage = new SiweMessage(message); const siweMessage: SIWEMessage = new SiweMessage(message);
if (!isValidSIWEMessage(siweMessage)) { if (!isValidSIWEMessage(siweMessage)) {
throw new ServerError('invalid_parameters'); throw new ServerError('invalid_parameters');
} }
▲ Show 20 Lines • Show All 72 Lines • ▼ Show 20 Lines): Promise<LogInResponse> {
const socialProof: SIWESocialProof = { const socialProof: SIWESocialProof = {
siweMessage: siweMessage.toMessage(), siweMessage: siweMessage.toMessage(),
siweMessageSignature: signature, siweMessageSignature: signature,
}; };
// 8. Create account with call to `processSIWEAccountCreation(...)` // 8. Create account with call to `processSIWEAccountCreation(...)`
// if address does not correspond to an existing user. // if address does not correspond to an existing user.
let userID = await fetchUserIDForEthereumAddress(siweMessage.address); let userID = await fetchUserIDForEthereumAddress(siweMessage.address);
if (!userID) { if (!userID && doNotRegister) {
throw new ServerError('account_does_not_exist');
} else if (!userID) {
const siweAccountCreationRequest = { const siweAccountCreationRequest = {
address: siweMessage.address, address: siweMessage.address,
calendarQuery, calendarQuery,
deviceTokenUpdateRequest, deviceTokenUpdateRequest,
platformDetails, platformDetails,
socialProof, socialProof,
}; };
userID = await processSIWEAccountCreation( userID = await processSIWEAccountCreation(
▲ Show 20 Lines • Show All 99 Lines • Show Last 20 Lines
View Options

web/invite-links/manage/edit-link-modal.react.js

Show First 20 Lines • Show All 526 Lines • ▼ Show 20 Lines tShape<SIWEAuthRequest>({
signature: t.String, signature: t.String,
message: t.String, message: t.String,
calendarQuery: entryQueryInputValidator, calendarQuery: entryQueryInputValidator,
deviceTokenUpdateRequest: t.maybe(deviceTokenUpdateRequestInputValidator), deviceTokenUpdateRequest: t.maybe(deviceTokenUpdateRequestInputValidator),
platformDetails: tPlatformDetails, platformDetails: tPlatformDetails,
watchedIDs: t.list(tID), watchedIDs: t.list(tID),
signedIdentityKeysBlob: t.maybe(signedIdentityKeysBlobValidator), signedIdentityKeysBlob: t.maybe(signedIdentityKeysBlobValidator),
initialNotificationsEncryptedMessage: t.maybe(t.String), initialNotificationsEncryptedMessage: t.maybe(t.String),
doNotRegister: t.maybe(t.Boolean),
}); });
async function siweAuthResponder( async function siweAuthResponder(
viewer: Viewer, viewer: Viewer,
request: SIWEAuthRequest, request: SIWEAuthRequest,
): Promise<LogInResponse> { ): Promise<LogInResponse> {
const { const {
message, message,
signature, signature,
deviceTokenUpdateRequest, deviceTokenUpdateRequest,
platformDetails, platformDetails,
signedIdentityKeysBlob, signedIdentityKeysBlob,
initialNotificationsEncryptedMessage, initialNotificationsEncryptedMessage,
doNotRegister,
} = request; } = request;
const calendarQuery = normalizeCalendarQuery(request.calendarQuery); const calendarQuery = normalizeCalendarQuery(request.calendarQuery);
// 1. Ensure that `message` is a well formed Comm SIWE Auth message. // 1. Ensure that `message` is a well formed Comm SIWE Auth message.
const siweMessage: SIWEMessage = new SiweMessage(message); const siweMessage: SIWEMessage = new SiweMessage(message);
if (!isValidSIWEMessage(siweMessage)) { if (!isValidSIWEMessage(siweMessage)) {
throw new ServerError('invalid_parameters'); throw new ServerError('invalid_parameters');
} }
▲ Show 20 Lines • Show All 72 Lines • ▼ Show 20 Lines): Promise<LogInResponse> {
const socialProof: SIWESocialProof = { const socialProof: SIWESocialProof = {
siweMessage: siweMessage.toMessage(), siweMessage: siweMessage.toMessage(),
siweMessageSignature: signature, siweMessageSignature: signature,
}; };
// 8. Create account with call to `processSIWEAccountCreation(...)` // 8. Create account with call to `processSIWEAccountCreation(...)`
// if address does not correspond to an existing user. // if address does not correspond to an existing user.
let userID = await fetchUserIDForEthereumAddress(siweMessage.address); let userID = await fetchUserIDForEthereumAddress(siweMessage.address);
if (!userID) { if (!userID && doNotRegister) {
throw new ServerError('account_does_not_exist');
} else if (!userID) {
const siweAccountCreationRequest = { const siweAccountCreationRequest = {
address: siweMessage.address, address: siweMessage.address,
calendarQuery, calendarQuery,
deviceTokenUpdateRequest, deviceTokenUpdateRequest,
platformDetails, platformDetails,
socialProof, socialProof,
}; };
userID = await processSIWEAccountCreation( userID = await processSIWEAccountCreation(
▲ Show 20 Lines • Show All 99 Lines • Show Last 20 Lines
View Options

web/invite-links/manage/empty-link-content.react.js

Show First 20 Lines • Show All 526 Lines • ▼ Show 20 Lines tShape<SIWEAuthRequest>({
signature: t.String, signature: t.String,
message: t.String, message: t.String,
calendarQuery: entryQueryInputValidator, calendarQuery: entryQueryInputValidator,
deviceTokenUpdateRequest: t.maybe(deviceTokenUpdateRequestInputValidator), deviceTokenUpdateRequest: t.maybe(deviceTokenUpdateRequestInputValidator),
platformDetails: tPlatformDetails, platformDetails: tPlatformDetails,
watchedIDs: t.list(tID), watchedIDs: t.list(tID),
signedIdentityKeysBlob: t.maybe(signedIdentityKeysBlobValidator), signedIdentityKeysBlob: t.maybe(signedIdentityKeysBlobValidator),
initialNotificationsEncryptedMessage: t.maybe(t.String), initialNotificationsEncryptedMessage: t.maybe(t.String),
doNotRegister: t.maybe(t.Boolean),
}); });
async function siweAuthResponder( async function siweAuthResponder(
viewer: Viewer, viewer: Viewer,
request: SIWEAuthRequest, request: SIWEAuthRequest,
): Promise<LogInResponse> { ): Promise<LogInResponse> {
const { const {
message, message,
signature, signature,
deviceTokenUpdateRequest, deviceTokenUpdateRequest,
platformDetails, platformDetails,
signedIdentityKeysBlob, signedIdentityKeysBlob,
initialNotificationsEncryptedMessage, initialNotificationsEncryptedMessage,
doNotRegister,
} = request; } = request;
const calendarQuery = normalizeCalendarQuery(request.calendarQuery); const calendarQuery = normalizeCalendarQuery(request.calendarQuery);
// 1. Ensure that `message` is a well formed Comm SIWE Auth message. // 1. Ensure that `message` is a well formed Comm SIWE Auth message.
const siweMessage: SIWEMessage = new SiweMessage(message); const siweMessage: SIWEMessage = new SiweMessage(message);
if (!isValidSIWEMessage(siweMessage)) { if (!isValidSIWEMessage(siweMessage)) {
throw new ServerError('invalid_parameters'); throw new ServerError('invalid_parameters');
} }
▲ Show 20 Lines • Show All 72 Lines • ▼ Show 20 Lines): Promise<LogInResponse> {
const socialProof: SIWESocialProof = { const socialProof: SIWESocialProof = {
siweMessage: siweMessage.toMessage(), siweMessage: siweMessage.toMessage(),
siweMessageSignature: signature, siweMessageSignature: signature,
}; };
// 8. Create account with call to `processSIWEAccountCreation(...)` // 8. Create account with call to `processSIWEAccountCreation(...)`
// if address does not correspond to an existing user. // if address does not correspond to an existing user.
let userID = await fetchUserIDForEthereumAddress(siweMessage.address); let userID = await fetchUserIDForEthereumAddress(siweMessage.address);
if (!userID) { if (!userID && doNotRegister) {
throw new ServerError('account_does_not_exist');
} else if (!userID) {
const siweAccountCreationRequest = { const siweAccountCreationRequest = {
address: siweMessage.address, address: siweMessage.address,
calendarQuery, calendarQuery,
deviceTokenUpdateRequest, deviceTokenUpdateRequest,
platformDetails, platformDetails,
socialProof, socialProof,
}; };
userID = await processSIWEAccountCreation( userID = await processSIWEAccountCreation(
▲ Show 20 Lines • Show All 99 Lines • Show Last 20 Lines
View Options

web/invite-links/manage/existing-link-content.react.js

Show First 20 Lines • Show All 526 Lines • ▼ Show 20 Lines tShape<SIWEAuthRequest>({
signature: t.String, signature: t.String,
message: t.String, message: t.String,
calendarQuery: entryQueryInputValidator, calendarQuery: entryQueryInputValidator,
deviceTokenUpdateRequest: t.maybe(deviceTokenUpdateRequestInputValidator), deviceTokenUpdateRequest: t.maybe(deviceTokenUpdateRequestInputValidator),
platformDetails: tPlatformDetails, platformDetails: tPlatformDetails,
watchedIDs: t.list(tID), watchedIDs: t.list(tID),
signedIdentityKeysBlob: t.maybe(signedIdentityKeysBlobValidator), signedIdentityKeysBlob: t.maybe(signedIdentityKeysBlobValidator),
initialNotificationsEncryptedMessage: t.maybe(t.String), initialNotificationsEncryptedMessage: t.maybe(t.String),
doNotRegister: t.maybe(t.Boolean),
}); });
async function siweAuthResponder( async function siweAuthResponder(
viewer: Viewer, viewer: Viewer,
request: SIWEAuthRequest, request: SIWEAuthRequest,
): Promise<LogInResponse> { ): Promise<LogInResponse> {
const { const {
message, message,
signature, signature,
deviceTokenUpdateRequest, deviceTokenUpdateRequest,
platformDetails, platformDetails,
signedIdentityKeysBlob, signedIdentityKeysBlob,
initialNotificationsEncryptedMessage, initialNotificationsEncryptedMessage,
doNotRegister,
} = request; } = request;
const calendarQuery = normalizeCalendarQuery(request.calendarQuery); const calendarQuery = normalizeCalendarQuery(request.calendarQuery);
// 1. Ensure that `message` is a well formed Comm SIWE Auth message. // 1. Ensure that `message` is a well formed Comm SIWE Auth message.
const siweMessage: SIWEMessage = new SiweMessage(message); const siweMessage: SIWEMessage = new SiweMessage(message);
if (!isValidSIWEMessage(siweMessage)) { if (!isValidSIWEMessage(siweMessage)) {
throw new ServerError('invalid_parameters'); throw new ServerError('invalid_parameters');
} }
▲ Show 20 Lines • Show All 72 Lines • ▼ Show 20 Lines): Promise<LogInResponse> {
const socialProof: SIWESocialProof = { const socialProof: SIWESocialProof = {
siweMessage: siweMessage.toMessage(), siweMessage: siweMessage.toMessage(),
siweMessageSignature: signature, siweMessageSignature: signature,
}; };
// 8. Create account with call to `processSIWEAccountCreation(...)` // 8. Create account with call to `processSIWEAccountCreation(...)`
// if address does not correspond to an existing user. // if address does not correspond to an existing user.
let userID = await fetchUserIDForEthereumAddress(siweMessage.address); let userID = await fetchUserIDForEthereumAddress(siweMessage.address);
if (!userID) { if (!userID && doNotRegister) {
throw new ServerError('account_does_not_exist');
} else if (!userID) {
const siweAccountCreationRequest = { const siweAccountCreationRequest = {
address: siweMessage.address, address: siweMessage.address,
calendarQuery, calendarQuery,
deviceTokenUpdateRequest, deviceTokenUpdateRequest,
platformDetails, platformDetails,
socialProof, socialProof,
}; };
userID = await processSIWEAccountCreation( userID = await processSIWEAccountCreation(
▲ Show 20 Lines • Show All 99 Lines • Show Last 20 Lines
View Options

web/invite-links/manage/manage-invite-links-modal.css

Show First 20 Lines • Show All 526 Lines • ▼ Show 20 Lines tShape<SIWEAuthRequest>({
signature: t.String, signature: t.String,
message: t.String, message: t.String,
calendarQuery: entryQueryInputValidator, calendarQuery: entryQueryInputValidator,
deviceTokenUpdateRequest: t.maybe(deviceTokenUpdateRequestInputValidator), deviceTokenUpdateRequest: t.maybe(deviceTokenUpdateRequestInputValidator),
platformDetails: tPlatformDetails, platformDetails: tPlatformDetails,
watchedIDs: t.list(tID), watchedIDs: t.list(tID),
signedIdentityKeysBlob: t.maybe(signedIdentityKeysBlobValidator), signedIdentityKeysBlob: t.maybe(signedIdentityKeysBlobValidator),
initialNotificationsEncryptedMessage: t.maybe(t.String), initialNotificationsEncryptedMessage: t.maybe(t.String),
doNotRegister: t.maybe(t.Boolean),
}); });
async function siweAuthResponder( async function siweAuthResponder(
viewer: Viewer, viewer: Viewer,
request: SIWEAuthRequest, request: SIWEAuthRequest,
): Promise<LogInResponse> { ): Promise<LogInResponse> {
const { const {
message, message,
signature, signature,
deviceTokenUpdateRequest, deviceTokenUpdateRequest,
platformDetails, platformDetails,
signedIdentityKeysBlob, signedIdentityKeysBlob,
initialNotificationsEncryptedMessage, initialNotificationsEncryptedMessage,
doNotRegister,
} = request; } = request;
const calendarQuery = normalizeCalendarQuery(request.calendarQuery); const calendarQuery = normalizeCalendarQuery(request.calendarQuery);
// 1. Ensure that `message` is a well formed Comm SIWE Auth message. // 1. Ensure that `message` is a well formed Comm SIWE Auth message.
const siweMessage: SIWEMessage = new SiweMessage(message); const siweMessage: SIWEMessage = new SiweMessage(message);
if (!isValidSIWEMessage(siweMessage)) { if (!isValidSIWEMessage(siweMessage)) {
throw new ServerError('invalid_parameters'); throw new ServerError('invalid_parameters');
} }
▲ Show 20 Lines • Show All 72 Lines • ▼ Show 20 Lines): Promise<LogInResponse> {
const socialProof: SIWESocialProof = { const socialProof: SIWESocialProof = {
siweMessage: siweMessage.toMessage(), siweMessage: siweMessage.toMessage(),
siweMessageSignature: signature, siweMessageSignature: signature,
}; };
// 8. Create account with call to `processSIWEAccountCreation(...)` // 8. Create account with call to `processSIWEAccountCreation(...)`
// if address does not correspond to an existing user. // if address does not correspond to an existing user.
let userID = await fetchUserIDForEthereumAddress(siweMessage.address); let userID = await fetchUserIDForEthereumAddress(siweMessage.address);
if (!userID) { if (!userID && doNotRegister) {
throw new ServerError('account_does_not_exist');
} else if (!userID) {
const siweAccountCreationRequest = { const siweAccountCreationRequest = {
address: siweMessage.address, address: siweMessage.address,
calendarQuery, calendarQuery,
deviceTokenUpdateRequest, deviceTokenUpdateRequest,
platformDetails, platformDetails,
socialProof, socialProof,
}; };
userID = await processSIWEAccountCreation( userID = await processSIWEAccountCreation(
▲ Show 20 Lines • Show All 99 Lines • Show Last 20 Lines
View Options

web/modals/input.react.js

Loading...