Page MenuHomePhabricator
Differential D5829

[web] Terms of Use & Privacy modal
ClosedPublic
Actions

Authored by kamil on Dec 6 2022, 6:37 AM.
Tags
None
Referenced Files
F5095216: D5829.id19319.diff
Sun, Mar 30, 4:36 PM
Unknown Object (File)
Mon, Mar 17, 10:40 AM
Unknown Object (File)
Mon, Mar 17, 10:40 AM
Unknown Object (File)
Mon, Mar 17, 10:40 AM
Unknown Object (File)
Mon, Mar 17, 10:40 AM
Unknown Object (File)
Mon, Mar 17, 10:40 AM
Unknown Object (File)
Mon, Mar 17, 10:39 AM
Unknown Object (File)
Mon, Mar 17, 10:30 AM
View All Files
Subscribers
ashoat

Details

Reviewers
tomek
atul
ashoat
Commits
rCOMM654dbdeec554: [web] Terms of Use & Privacy modal
Summary

Modal showing Terms of Use and Privacy Policy acknowledgment.

Design:

Screenshot 2022-12-15 at 12.39.38.png (413×671 px, 30 KB)

Example after server error

Test Plan
  1. I accept should update the value on keyserver DB
  2. User should not be able to close the modal using any method

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

kamil created this revision.Dec 6 2022, 6:37 AM
kamil held this revision as a draft.
Herald added a subscriber: ashoat. · View Herald TranscriptDec 6 2022, 6:37 AM
kamil added a parent revision: D5828: [lib] client function to call server and acknowledge policy.Dec 6 2022, 6:38 AM
kamil edited the summary of this revision. (Show Details)Dec 6 2022, 6:43 AM
kamil edited the test plan for this revision. (Show Details)
Harbormaster completed remote builds in B14009: Diff 19182.Dec 6 2022, 6:50 AM
kamil added a child revision: D5830: [web] policy acknowledgment handler.Dec 6 2022, 6:54 AM
kamil edited the test plan for this revision. (Show Details)Dec 6 2022, 7:01 AM
kamil published this revision for review.Dec 6 2022, 8:09 AM
tomek requested changes to this revision.Dec 9 2022, 10:26 AM
tomek added inline comments.
web/modals/terms-and-privacy-modal.css
11 ↗(On Diff #19182)

We can use a shorthand but keeping as is also makes sense as it is more readable

22 ↗(On Diff #19182)

We have a constant for this

web/modals/terms-and-privacy-modal.react.js
38 ↗(On Diff #19182)

We have SetState<T> type and if we used that in acknowledgePolicy definition, we could simplify it here

42–47 ↗(On Diff #19182)

It looks like the modal jumps a little bit after clicking the button. It might be caused by the difference in button size - you can check https://github.com/CommE2E/comm/blob/master/web/settings/relationship/add-users-list.react.js#L220-L227 which is an example of avoiding button size change. Maybe that will help.

53 ↗(On Diff #19182)

We should use callback / a function defined outside the component

This revision now requires changes to proceed.Dec 9 2022, 10:26 AM
kamil edited parent revisions, added: D5860: [web] refactor modal API to return modal key; removed: D5828: [lib] client function to call server and acknowledge policy.Dec 13 2022, 6:56 AM
kamil updated this revision to Diff 19319.Dec 13 2022, 7:07 AM
kamil edited the test plan for this revision. (Show Details)

improve code, fix modal jumping

Harbormaster completed remote builds in B14119: Diff 19319.Dec 13 2022, 7:19 AM
kamil edited the summary of this revision. (Show Details)Dec 13 2022, 8:21 AM
tomek accepted this revision.Dec 14 2022, 4:40 AM
tomek added a reviewer: ashoat.

Looks great! Adding @ashoat because this diff adds new copy.

web/modals/terms-and-privacy-modal.css
1–5 ↗(On Diff #19319)

Maybe we should set a line height for the text. It feels like space between lines is a really small and doesn't match https://linear.app/comm/issue/ENG-2350#comment-5f0d2120

ashoat accepted this revision.Dec 14 2022, 7:01 AM

On second thought, I think we should revise the copy to:

We recently updated our Terms of Service & Privacy Policy. In order to continue using Comm, we're asking you to read through, acknowledge, and accept the updated policies.

This revision is now accepted and ready to land.Dec 14 2022, 7:01 AM
ashoat added a comment.Dec 14 2022, 7:01 AM

Please update copy before landing!

kamil updated this revision to Diff 19373.Dec 15 2022, 3:43 AM

update copy, add line height

kamil edited the summary of this revision. (Show Details)Dec 15 2022, 3:43 AM
Harbormaster completed remote builds in B14165: Diff 19373.Dec 15 2022, 3:53 AM
kamil updated this revision to Diff 19381.Dec 15 2022, 5:58 AM

update href

Harbormaster completed remote builds in B14173: Diff 19381.Dec 15 2022, 6:10 AM
Closed by commit rCOMM654dbdeec554: [web] Terms of Use & Privacy modal (authored by kamil). · Explain WhyDec 15 2022, 6:16 AM
This revision was automatically updated to reflect the committed changes.
kamil added a commit: rCOMM654dbdeec554: [web] Terms of Use & Privacy modal.

Revision Contents
Changeset List

Diff 19387

View Options

web/modals/modal.css

Show All 35 Linespub enum ReportType {
#[default] #[default]
ErrorReport = 0, ErrorReport = 0,
ThreadInconsistency = 1, ThreadInconsistency = 1,
EntryInconsistency = 2, EntryInconsistency = 2,
MediaMission = 3, MediaMission = 3,
UserInconsistency = 4, UserInconsistency = 4,
} }
impl ReportType {
pub fn is_error(&self) -> bool {
matches!(self, Self::ErrorReport)
}
pub fn is_media_mission(&self) -> bool {
matches!(self, Self::MediaMission)
}
pub fn is_inconsistency(&self) -> bool {
matches!(
self,
ReportType::ThreadInconsistency
| ReportType::EntryInconsistency
| ReportType::UserInconsistency
)
}
}
/// Report platform /// Report platform
#[derive(Clone, Debug, Serialize, Deserialize, Display)] #[derive(Clone, Debug, Serialize, Deserialize, Display)]
#[serde(rename_all = "lowercase")] #[serde(rename_all = "lowercase")]
pub enum ReportPlatform { pub enum ReportPlatform {
Android, Android,
IOS, IOS,
Web, Web,
Windows, Windows,
MacOS, MacOS,
} }
#[derive(Debug, Serialize, Deserialize)] #[derive(Debug, Serialize, Deserialize)]
#[serde(rename_all = "camelCase")] #[serde(rename_all = "camelCase")]
pub struct PlatformDetails { pub struct PlatformDetails {
pub platform: ReportPlatform, pub platform: ReportPlatform,
code_version: Option<u16>, pub code_version: Option<u16>,
state_version: Option<u16>, pub state_version: Option<u16>,
} }
/// Input report payload - this is the JSON we receive from clients /// Input report payload - this is the JSON we receive from clients
#[derive(Debug, Deserialize)] #[derive(Debug, Deserialize)]
#[serde(rename_all = "camelCase")] #[serde(rename_all = "camelCase")]
#[serde(remote = "Self")] // we delegate to our custom validation trait #[serde(remote = "Self")] // we delegate to our custom validation trait
pub struct ReportInput { pub struct ReportInput {
pub platform_details: PlatformDetails, pub platform_details: PlatformDetails,
▲ Show 20 Lines • Show All 49 Lines • Show Last 20 Lines
View Options

web/modals/modal.react.js

Show All 35 Linespub enum ReportType {
#[default] #[default]
ErrorReport = 0, ErrorReport = 0,
ThreadInconsistency = 1, ThreadInconsistency = 1,
EntryInconsistency = 2, EntryInconsistency = 2,
MediaMission = 3, MediaMission = 3,
UserInconsistency = 4, UserInconsistency = 4,
} }
impl ReportType {
pub fn is_error(&self) -> bool {
matches!(self, Self::ErrorReport)
}
pub fn is_media_mission(&self) -> bool {
matches!(self, Self::MediaMission)
}
pub fn is_inconsistency(&self) -> bool {
matches!(
self,
ReportType::ThreadInconsistency
| ReportType::EntryInconsistency
| ReportType::UserInconsistency
)
}
}
/// Report platform /// Report platform
#[derive(Clone, Debug, Serialize, Deserialize, Display)] #[derive(Clone, Debug, Serialize, Deserialize, Display)]
#[serde(rename_all = "lowercase")] #[serde(rename_all = "lowercase")]
pub enum ReportPlatform { pub enum ReportPlatform {
Android, Android,
IOS, IOS,
Web, Web,
Windows, Windows,
MacOS, MacOS,
} }
#[derive(Debug, Serialize, Deserialize)] #[derive(Debug, Serialize, Deserialize)]
#[serde(rename_all = "camelCase")] #[serde(rename_all = "camelCase")]
pub struct PlatformDetails { pub struct PlatformDetails {
pub platform: ReportPlatform, pub platform: ReportPlatform,
code_version: Option<u16>, pub code_version: Option<u16>,
state_version: Option<u16>, pub state_version: Option<u16>,
} }
/// Input report payload - this is the JSON we receive from clients /// Input report payload - this is the JSON we receive from clients
#[derive(Debug, Deserialize)] #[derive(Debug, Deserialize)]
#[serde(rename_all = "camelCase")] #[serde(rename_all = "camelCase")]
#[serde(remote = "Self")] // we delegate to our custom validation trait #[serde(remote = "Self")] // we delegate to our custom validation trait
pub struct ReportInput { pub struct ReportInput {
pub platform_details: PlatformDetails, pub platform_details: PlatformDetails,
▲ Show 20 Lines • Show All 49 Lines • Show Last 20 Lines
View Options

web/modals/terms-and-privacy-modal.css

Show All 35 Linespub enum ReportType {
#[default] #[default]
ErrorReport = 0, ErrorReport = 0,
ThreadInconsistency = 1, ThreadInconsistency = 1,
EntryInconsistency = 2, EntryInconsistency = 2,
MediaMission = 3, MediaMission = 3,
UserInconsistency = 4, UserInconsistency = 4,
} }
impl ReportType {
pub fn is_error(&self) -> bool {
matches!(self, Self::ErrorReport)
}
pub fn is_media_mission(&self) -> bool {
matches!(self, Self::MediaMission)
}
pub fn is_inconsistency(&self) -> bool {
matches!(
self,
ReportType::ThreadInconsistency
| ReportType::EntryInconsistency
| ReportType::UserInconsistency
)
}
}
/// Report platform /// Report platform
#[derive(Clone, Debug, Serialize, Deserialize, Display)] #[derive(Clone, Debug, Serialize, Deserialize, Display)]
#[serde(rename_all = "lowercase")] #[serde(rename_all = "lowercase")]
pub enum ReportPlatform { pub enum ReportPlatform {
Android, Android,
IOS, IOS,
Web, Web,
Windows, Windows,
MacOS, MacOS,
} }
#[derive(Debug, Serialize, Deserialize)] #[derive(Debug, Serialize, Deserialize)]
#[serde(rename_all = "camelCase")] #[serde(rename_all = "camelCase")]
pub struct PlatformDetails { pub struct PlatformDetails {
pub platform: ReportPlatform, pub platform: ReportPlatform,
code_version: Option<u16>, pub code_version: Option<u16>,
state_version: Option<u16>, pub state_version: Option<u16>,
} }
/// Input report payload - this is the JSON we receive from clients /// Input report payload - this is the JSON we receive from clients
#[derive(Debug, Deserialize)] #[derive(Debug, Deserialize)]
#[serde(rename_all = "camelCase")] #[serde(rename_all = "camelCase")]
#[serde(remote = "Self")] // we delegate to our custom validation trait #[serde(remote = "Self")] // we delegate to our custom validation trait
pub struct ReportInput { pub struct ReportInput {
pub platform_details: PlatformDetails, pub platform_details: PlatformDetails,
▲ Show 20 Lines • Show All 49 Lines • Show Last 20 Lines
View Options

web/modals/terms-and-privacy-modal.react.js

Show All 35 Linespub enum ReportType {
#[default] #[default]
ErrorReport = 0, ErrorReport = 0,
ThreadInconsistency = 1, ThreadInconsistency = 1,
EntryInconsistency = 2, EntryInconsistency = 2,
MediaMission = 3, MediaMission = 3,
UserInconsistency = 4, UserInconsistency = 4,
} }
impl ReportType {
pub fn is_error(&self) -> bool {
matches!(self, Self::ErrorReport)
}
pub fn is_media_mission(&self) -> bool {
matches!(self, Self::MediaMission)
}
pub fn is_inconsistency(&self) -> bool {
matches!(
self,
ReportType::ThreadInconsistency
| ReportType::EntryInconsistency
| ReportType::UserInconsistency
)
}
}
/// Report platform /// Report platform
#[derive(Clone, Debug, Serialize, Deserialize, Display)] #[derive(Clone, Debug, Serialize, Deserialize, Display)]
#[serde(rename_all = "lowercase")] #[serde(rename_all = "lowercase")]
pub enum ReportPlatform { pub enum ReportPlatform {
Android, Android,
IOS, IOS,
Web, Web,
Windows, Windows,
MacOS, MacOS,
} }
#[derive(Debug, Serialize, Deserialize)] #[derive(Debug, Serialize, Deserialize)]
#[serde(rename_all = "camelCase")] #[serde(rename_all = "camelCase")]
pub struct PlatformDetails { pub struct PlatformDetails {
pub platform: ReportPlatform, pub platform: ReportPlatform,
code_version: Option<u16>, pub code_version: Option<u16>,
state_version: Option<u16>, pub state_version: Option<u16>,
} }
/// Input report payload - this is the JSON we receive from clients /// Input report payload - this is the JSON we receive from clients
#[derive(Debug, Deserialize)] #[derive(Debug, Deserialize)]
#[serde(rename_all = "camelCase")] #[serde(rename_all = "camelCase")]
#[serde(remote = "Self")] // we delegate to our custom validation trait #[serde(remote = "Self")] // we delegate to our custom validation trait
pub struct ReportInput { pub struct ReportInput {
pub platform_details: PlatformDetails, pub platform_details: PlatformDetails,
▲ Show 20 Lines • Show All 49 Lines • Show Last 20 Lines
View Options

web/theme.css

Show All 35 Linespub enum ReportType {
#[default] #[default]
ErrorReport = 0, ErrorReport = 0,
ThreadInconsistency = 1, ThreadInconsistency = 1,
EntryInconsistency = 2, EntryInconsistency = 2,
MediaMission = 3, MediaMission = 3,
UserInconsistency = 4, UserInconsistency = 4,
} }
impl ReportType {
pub fn is_error(&self) -> bool {
matches!(self, Self::ErrorReport)
}
pub fn is_media_mission(&self) -> bool {
matches!(self, Self::MediaMission)
}
pub fn is_inconsistency(&self) -> bool {
matches!(
self,
ReportType::ThreadInconsistency
| ReportType::EntryInconsistency
| ReportType::UserInconsistency
)
}
}
/// Report platform /// Report platform
#[derive(Clone, Debug, Serialize, Deserialize, Display)] #[derive(Clone, Debug, Serialize, Deserialize, Display)]
#[serde(rename_all = "lowercase")] #[serde(rename_all = "lowercase")]
pub enum ReportPlatform { pub enum ReportPlatform {
Android, Android,
IOS, IOS,
Web, Web,
Windows, Windows,
MacOS, MacOS,
} }
#[derive(Debug, Serialize, Deserialize)] #[derive(Debug, Serialize, Deserialize)]
#[serde(rename_all = "camelCase")] #[serde(rename_all = "camelCase")]
pub struct PlatformDetails { pub struct PlatformDetails {
pub platform: ReportPlatform, pub platform: ReportPlatform,
code_version: Option<u16>, pub code_version: Option<u16>,
state_version: Option<u16>, pub state_version: Option<u16>,
} }
/// Input report payload - this is the JSON we receive from clients /// Input report payload - this is the JSON we receive from clients
#[derive(Debug, Deserialize)] #[derive(Debug, Deserialize)]
#[serde(rename_all = "camelCase")] #[serde(rename_all = "camelCase")]
#[serde(remote = "Self")] // we delegate to our custom validation trait #[serde(remote = "Self")] // we delegate to our custom validation trait
pub struct ReportInput { pub struct ReportInput {
pub platform_details: PlatformDetails, pub platform_details: PlatformDetails,
▲ Show 20 Lines • Show All 49 Lines • Show Last 20 Lines