blob: 7e4b55da859ad7cd00d29f4b259166410bf5607b [file] [log] [blame]
// Copyright 2019 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import {LitElement, html, css} from 'lit-element';
import {store, connectStore} from 'reducers/base.js';
import * as userV0 from 'reducers/userV0.js';
import 'elements/chops/chops-button/chops-button.js';
import 'elements/chops/chops-dialog/chops-dialog.js';
import {SHARED_STYLES} from 'shared/shared-styles.js';
/**
* `<mr-click-throughs>`
*
* An element that displays help dialogs that the user is required
* to click through before they can participate in the community.
*
*/
export class MrClickThroughs extends connectStore(LitElement) {
/** @override */
constructor() {
super();
}
/** @override */
static get properties() {
return {
userDisplayName: {type: String},
prefs: {type: Object},
prefsLoaded: {type: Boolean},
};
}
/** @override */
static get styles() {
return [SHARED_STYLES, css`
:host {
--chops-dialog-max-width: 800px;
}
h2 {
margin-top: 0;
display: flex;
justify-content: space-between;
font-weight: normal;
border-bottom: 2px solid white;
font-size: var(--chops-large-font-size);
padding-bottom: 0.5em;
}
.edit-actions {
width: 100%;
margin: 0.5em 0;
text-align: right;
}
`];
}
/** @override */
render() {
return html`
<chops-dialog
id="privacyDialog"
?opened=${this._showPrivacyDialog}
forced
>
<h2>Email display settings</h2>
<p>There is a <a href="/hosting/settings">setting</a> to control how
your email address appears on comments and issues that you post.</p>
<p>Project members will always see your full email address. By
default, other users who visit the site will see an
abbreviated version of your email address.</p>
<div class="edit-actions">
<chops-button @click=${this.dismissPrivacyDialog}>
Got it
</chops-button>
</div>
</chops-dialog>
<chops-dialog
id="corpModeDialog"
?opened=${this._showCorpModeDialog}
forced
>
<h2>This site hosts public issues in public projects</h2>
<p>Unlike our internal issue tracker, this site makes most
issues public, unless the issue is labeled with a Restrict-View-*
label, such as Restrict-View-Google.</p>
<p>Components are not used for permissions. And, regardless of
restriction labels, the issue reporter, owner,
and Cc&apos;d users may always view the issue.</p>
${this.prefs.get('restrict_new_issues') ? html`
<p>Your account is a member of a user group that indicates that
you may have access to confidential information. To help prevent
leaks when working in public projects, the issue tracker UX has
been altered for you:</p>
<ul>
<li>When you open a new issue, the form will initially have a
Restrict-View-Google label. If you know that your issue does
not contain confidential information, please remove the label.</li>
<li>When you view public issues, a red banner is shown to remind
you that any comments or attachments you post will be public.</li>
</ul>
` : ''}
<div class="edit-actions">
<chops-button @click=${this.dismissCorpModeDialog}>
Got it
</chops-button>
</div>
</chops-dialog>
`;
}
/** @override */
stateChanged(state) {
this.prefs = userV0.prefs(state);
this.prefsLoaded = userV0.currentUser(state).prefsLoaded;
}
/**
* Checks whether the user should see a dialogue telling them about
* Monorail's privacy settings.
*/
get _showPrivacyDialog() {
if (!this.userDisplayName) return false;
if (!this.prefsLoaded) return false;
if (!this.prefs) return false;
if (this.prefs.get('privacy_click_through')) return false;
return true;
}
/**
* Computes whether the user should see the dialog telling them about corp mode.
*/
get _showCorpModeDialog() {
// TODO(jrobbins): Replace this with a API call that gets the project.
if (window.CS_env.projectIsRestricted) return false;
if (!this.userDisplayName) return false;
if (!this.prefsLoaded) return false;
if (!this.prefs) return false;
if (!this.prefs.get('public_issue_notice')) return false;
if (this.prefs.get('corp_mode_click_through')) return false;
return true;
}
/**
* Event handler for dismissing Monorail's privacy notice.
*/
dismissPrivacyDialog() {
this.dismissCue('privacy_click_through');
}
/**
* Event handler for dismissing corp mode.
*/
dismissCorpModeDialog() {
this.dismissCue('corp_mode_click_through');
}
/**
* Dispatches a Redux action to tell Monorail's backend that the user
* clicked through a particular cue.
* @param {string} pref The pref to set to true.
*/
dismissCue(pref) {
const newPrefs = [{name: pref, value: 'true'}];
store.dispatch(userV0.setPrefs(newPrefs, !!this.userDisplayName));
}
}
customElements.define('mr-click-throughs', MrClickThroughs);