Convert gr-http-password to lit element
Change-Id: Id088b8d8a95aff1bf9c713e872bae8a6f3ec1fa3
diff --git a/polygerrit-ui/app/elements/settings/gr-http-password/gr-http-password.ts b/polygerrit-ui/app/elements/settings/gr-http-password/gr-http-password.ts
index b018d33..d7e16db 100644
--- a/polygerrit-ui/app/elements/settings/gr-http-password/gr-http-password.ts
+++ b/polygerrit-ui/app/elements/settings/gr-http-password/gr-http-password.ts
@@ -14,17 +14,15 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-import '../../../styles/gr-form-styles';
import '../../shared/gr-button/gr-button';
-import {GrButton} from '../../shared/gr-button/gr-button';
import '../../shared/gr-copy-clipboard/gr-copy-clipboard';
import '../../shared/gr-overlay/gr-overlay';
-import '../../../styles/shared-styles';
-import {PolymerElement} from '@polymer/polymer/polymer-element';
-import {htmlTemplate} from './gr-http-password_html';
-import {property, customElement} from '@polymer/decorators';
import {GrOverlay} from '../../shared/gr-overlay/gr-overlay';
import {appContext} from '../../../services/app-context';
+import {formStyles} from '../../../styles/gr-form-styles';
+import {sharedStyles} from '../../../styles/shared-styles';
+import {GrLitElement} from '../../lit/gr-lit-element';
+import {css, customElement, html, property, query} from 'lit-element';
declare global {
interface HTMLElementTagNameMap {
@@ -32,18 +30,10 @@
}
}
-export interface GrHttpPassword {
- $: {
- generatedPasswordOverlay: GrOverlay;
- generateButton: GrButton;
- };
-}
-
@customElement('gr-http-password')
-export class GrHttpPassword extends PolymerElement {
- static get template() {
- return htmlTemplate;
- }
+export class GrHttpPassword extends GrLitElement {
+ @query('#generatedPasswordOverlay')
+ generatedPasswordOverlay?: GrOverlay;
@property({type: String})
_username?: string;
@@ -86,16 +76,100 @@
return Promise.all(promises);
}
+ static get styles() {
+ return [
+ sharedStyles,
+ formStyles,
+ css`
+ .password {
+ font-family: var(--monospace-font-family);
+ font-size: var(--font-size-mono);
+ line-height: var(--line-height-mono);
+ }
+ #generatedPasswordOverlay {
+ padding: var(--spacing-xxl);
+ width: 50em;
+ }
+ #generatedPasswordDisplay {
+ margin: var(--spacing-l) 0;
+ }
+ #generatedPasswordDisplay .title {
+ width: unset;
+ }
+ #generatedPasswordDisplay .value {
+ font-family: var(--monospace-font-family);
+ font-size: var(--font-size-mono);
+ line-height: var(--line-height-mono);
+ }
+ #passwordWarning {
+ font-style: italic;
+ text-align: center;
+ }
+ .closeButton {
+ bottom: 2em;
+ position: absolute;
+ right: 2em;
+ }
+ `,
+ ];
+ }
+
+ render() {
+ return html` <div class="gr-form-styles">
+ <div ?hidden=${this._passwordUrl}>
+ <section>
+ <span class="title">Username</span>
+ <span class="value">${this._username ?? ''}</span>
+ </section>
+ <gr-button id="generateButton" @click=${this._handleGenerateTap}
+ >Generate new password</gr-button
+ >
+ </div>
+ <span ?hidden=${!this._passwordUrl}>
+ <a href="${this._passwordUrl}" target="_blank" rel="noopener">
+ Obtain password</a
+ >
+ (opens in a new tab)
+ </span>
+ </div>
+ <gr-overlay
+ id="generatedPasswordOverlay"
+ @iron-overlay-closed=${this._generatedPasswordOverlayClosed}
+ with-backdrop=""
+ >
+ <div class="gr-form-styles">
+ <section id="generatedPasswordDisplay">
+ <span class="title">New Password:</span>
+ <span class="value">${this._generatedPassword}</span>
+ <gr-copy-clipboard
+ hasTooltip=""
+ buttonTitle="Copy password to clipboard"
+ hideInput=""
+ .text="${this._generatedPassword}"
+ >
+ </gr-copy-clipboard>
+ </section>
+ <section id="passwordWarning">
+ This password will not be displayed again.<br />
+ If you lose it, you will need to generate a new one.
+ </section>
+ <gr-button link="" class="closeButton" @click=${this._closeOverlay}
+ >Close</gr-button
+ >
+ </div>
+ </gr-overlay>`;
+ }
+
_handleGenerateTap() {
this._generatedPassword = 'Generating...';
- this.$.generatedPasswordOverlay.open();
+ this.generatedPasswordOverlay?.open();
this.restApiService.generateAccountHttpPassword().then(newPassword => {
this._generatedPassword = newPassword;
});
}
_closeOverlay() {
- this.$.generatedPasswordOverlay.close();
+ this.generatedPasswordOverlay?.close();
}
_generatedPasswordOverlayClosed() {
diff --git a/polygerrit-ui/app/elements/settings/gr-http-password/gr-http-password_html.ts b/polygerrit-ui/app/elements/settings/gr-http-password/gr-http-password_html.ts
deleted file mode 100644
index 811b85c..0000000
--- a/polygerrit-ui/app/elements/settings/gr-http-password/gr-http-password_html.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * @license
- * Copyright (C) 2020 The Android Open Source Project
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import {html} from '@polymer/polymer/lib/utils/html-tag';
-
-export const htmlTemplate = html`
- <style include="shared-styles">
- .password {
- font-family: var(--monospace-font-family);
- font-size: var(--font-size-mono);
- line-height: var(--line-height-mono);
- }
- #generatedPasswordOverlay {
- padding: var(--spacing-xxl);
- width: 50em;
- }
- #generatedPasswordDisplay {
- margin: var(--spacing-l) 0;
- }
- #generatedPasswordDisplay .title {
- width: unset;
- }
- #generatedPasswordDisplay .value {
- font-family: var(--monospace-font-family);
- font-size: var(--font-size-mono);
- line-height: var(--line-height-mono);
- }
- #passwordWarning {
- font-style: italic;
- text-align: center;
- }
- .closeButton {
- bottom: 2em;
- position: absolute;
- right: 2em;
- }
- </style>
- <style include="gr-form-styles">
- /* Workaround for empty style block - see https://github.com/Polymer/tools/issues/408 */
- </style>
- <div class="gr-form-styles">
- <div hidden$="[[_passwordUrl]]">
- <section>
- <span class="title">Username</span>
- <span class="value">[[_username]]</span>
- </section>
- <gr-button id="generateButton" on-click="_handleGenerateTap"
- >Generate new password</gr-button
- >
- </div>
- <span hidden$="[[!_passwordUrl]]">
- <a href$="[[_passwordUrl]]" target="_blank" rel="noopener">
- Obtain password</a
- >
- (opens in a new tab)
- </span>
- </div>
- <gr-overlay
- id="generatedPasswordOverlay"
- on-iron-overlay-closed="_generatedPasswordOverlayClosed"
- with-backdrop=""
- >
- <div class="gr-form-styles">
- <section id="generatedPasswordDisplay">
- <span class="title">New Password:</span>
- <span class="value">[[_generatedPassword]]</span>
- <gr-copy-clipboard
- hasTooltip=""
- buttonTitle="Copy password to clipboard"
- hideInput=""
- text="[[_generatedPassword]]"
- >
- </gr-copy-clipboard>
- </section>
- <section id="passwordWarning">
- This password will not be displayed again.<br />
- If you lose it, you will need to generate a new one.
- </section>
- <gr-button link="" class="closeButton" on-click="_closeOverlay"
- >Close</gr-button
- >
- </div>
- </gr-overlay>
-`;
diff --git a/polygerrit-ui/app/elements/settings/gr-http-password/gr-http-password_test.ts b/polygerrit-ui/app/elements/settings/gr-http-password/gr-http-password_test.ts
index 16ea501..004f18f 100644
--- a/polygerrit-ui/app/elements/settings/gr-http-password/gr-http-password_test.ts
+++ b/polygerrit-ui/app/elements/settings/gr-http-password/gr-http-password_test.ts
@@ -25,6 +25,8 @@
createServerInfo,
} from '../../../test/test-data-generators';
import {AccountDetailInfo, ServerInfo} from '../../../types/common';
+import {queryAndAssert} from '../../../test/test-utils';
+import {GrButton} from '../../shared/gr-button/gr-button';
const basicFixture = fixtureFromElement('gr-http-password');
@@ -47,7 +49,7 @@
});
test('generate password', () => {
- const button = element.$.generateButton;
+ const button = queryAndAssert<GrButton>(element, '#generateButton');
const nextPassword = 'the new password';
let generateResolve: (value: string | PromiseLike<string>) => void;
const generateStub = stubRestApi('generateAccountHttpPassword').callsFake(
