blob: 8b142f025b24b33fc2f045c05a86706bddb92faf [file] [log] [blame]
Copybara854996b2021-09-07 19:36:02 +00001// Copyright 2019 The Chromium Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import {LitElement, html, css} from 'lit-element';
6import {store, connectStore} from 'reducers/base.js';
7import * as userV0 from 'reducers/userV0.js';
8import 'elements/chops/chops-button/chops-button.js';
9import 'elements/chops/chops-dialog/chops-dialog.js';
10import {SHARED_STYLES} from 'shared/shared-styles.js';
11
12/**
13 * `<mr-click-throughs>`
14 *
15 * An element that displays help dialogs that the user is required
16 * to click through before they can participate in the community.
17 *
18 */
19export class MrClickThroughs extends connectStore(LitElement) {
20 /** @override */
21 constructor() {
22 super();
23 }
24
25 /** @override */
26 static get properties() {
27 return {
28 userDisplayName: {type: String},
29 prefs: {type: Object},
30 prefsLoaded: {type: Boolean},
31 };
32 }
33
34 /** @override */
35 static get styles() {
36 return [SHARED_STYLES, css`
37 :host {
38 --chops-dialog-max-width: 800px;
39 }
40 h2 {
41 margin-top: 0;
42 display: flex;
43 justify-content: space-between;
44 font-weight: normal;
45 border-bottom: 2px solid white;
46 font-size: var(--chops-large-font-size);
47 padding-bottom: 0.5em;
48 }
49 .edit-actions {
50 width: 100%;
51 margin: 0.5em 0;
52 text-align: right;
53 }
54 `];
55 }
56
57 /** @override */
58 render() {
59 return html`
60 <chops-dialog
61 id="privacyDialog"
62 ?opened=${this._showPrivacyDialog}
63 forced
64 >
65 <h2>Email display settings</h2>
66
67 <p>There is a <a href="/hosting/settings">setting</a> to control how
68 your email address appears on comments and issues that you post.</p>
69
70 <p>Project members will always see your full email address. By
71 default, other users who visit the site will see an
72 abbreviated version of your email address.</p>
73
74 <p>If you do not wish your email address to be shared, there
75 are other ways to <a
76 href="http://www.chromium.org/getting-involved">get
77 involved</a> in the community. To report a problem when using
78 the Chrome browser, you may use the "Report an issue..." item
79 on the "Help" menu.</p>
80
81
82 <div class="edit-actions">
83 <chops-button @click=${this.dismissPrivacyDialog}>
84 Got it
85 </chops-button>
86 </div>
87 </chops-dialog>
88
89 <chops-dialog
90 id="corpModeDialog"
91 ?opened=${this._showCorpModeDialog}
92 forced
93 >
94 <h2>This site hosts public issues in public projects</h2>
95
96 <p>Unlike our internal issue tracker, this site makes most
97 issues public, unless the issue is labeled with a Restrict-View-*
98 label, such as Restrict-View-Google.</p>
99
100 <p>Components are not used for permissions. And, regardless of
101 restriction labels, the issue reporter, owner,
102 and Cc&apos;d users may always view the issue.</p>
103
104 ${this.prefs.get('restrict_new_issues') ? html`
105 <p>Your account is a member of a user group that indicates that
106 you may have access to confidential information. To help prevent
107 leaks when working in public projects, the issue tracker UX has
108 been altered for you:</p>
109
110 <ul>
111 <li>When you open a new issue, the form will initially have a
112 Restrict-View-Google label. If you know that your issue does
113 not contain confidential information, please remove the label.</li>
114 <li>When you view public issues, a red banner is shown to remind
115 you that any comments or attachments you post will be public.</li>
116 </ul>
117 ` : ''}
118
119 <div class="edit-actions">
120 <chops-button @click=${this.dismissCorpModeDialog}>
121 Got it
122 </chops-button>
123 </div>
124 </chops-dialog>
125 `;
126 }
127
128 /** @override */
129 stateChanged(state) {
130 this.prefs = userV0.prefs(state);
131 this.prefsLoaded = userV0.currentUser(state).prefsLoaded;
132 }
133
134 /**
135 * Checks whether the user should see a dialogue telling them about
136 * Monorail's privacy settings.
137 */
138 get _showPrivacyDialog() {
139 if (!this.userDisplayName) return false;
140 if (!this.prefsLoaded) return false;
141 if (!this.prefs) return false;
142 if (this.prefs.get('privacy_click_through')) return false;
143 return true;
144 }
145
146 /**
147 * Computes whether the user should see the dialog telling them about corp mode.
148 */
149 get _showCorpModeDialog() {
150 // TODO(jrobbins): Replace this with a API call that gets the project.
151 if (window.CS_env.projectIsRestricted) return false;
152 if (!this.userDisplayName) return false;
153 if (!this.prefsLoaded) return false;
154 if (!this.prefs) return false;
155 if (!this.prefs.get('public_issue_notice')) return false;
156 if (this.prefs.get('corp_mode_click_through')) return false;
157 return true;
158 }
159
160 /**
161 * Event handler for dismissing Monorail's privacy notice.
162 */
163 dismissPrivacyDialog() {
164 this.dismissCue('privacy_click_through');
165 }
166
167 /**
168 * Event handler for dismissing corp mode.
169 */
170 dismissCorpModeDialog() {
171 this.dismissCue('corp_mode_click_through');
172 }
173
174 /**
175 * Dispatches a Redux action to tell Monorail's backend that the user
176 * clicked through a particular cue.
177 * @param {string} pref The pref to set to true.
178 */
179 dismissCue(pref) {
180 const newPrefs = [{name: pref, value: 'true'}];
181 store.dispatch(userV0.setPrefs(newPrefs, !!this.userDisplayName));
182 }
183}
184
185customElements.define('mr-click-throughs', MrClickThroughs);