summaryrefslogtreecommitdiffhomepage
path: root/app/components/Account.js
diff options
context:
space:
mode:
authorAndrej Mihajlov <and@mullvad.net>2018-07-18 15:07:37 +0200
committerAndrej Mihajlov <and@mullvad.net>2018-08-15 17:39:38 +0200
commit71592249b2dd669b6f24f37bfb7b0f4e43b74998 (patch)
treea6097dc7e5d94d06e99c65fdfe160e824395f50c /app/components/Account.js
parente84e87f4ce5a8c242f756566cdc6fb59a45f7bea (diff)
downloadmullvadvpn-71592249b2dd669b6f24f37bfb7b0f4e43b74998.tar.xz
mullvadvpn-71592249b2dd669b6f24f37bfb7b0f4e43b74998.zip
Add workspaces
Diffstat (limited to 'app/components/Account.js')
-rw-r--r--app/components/Account.js159
1 files changed, 0 insertions, 159 deletions
diff --git a/app/components/Account.js b/app/components/Account.js
deleted file mode 100644
index 41aea6d894..0000000000
--- a/app/components/Account.js
+++ /dev/null
@@ -1,159 +0,0 @@
-// @flow
-
-import moment from 'moment';
-import * as React from 'react';
-import { Component, Text, View } from 'reactxp';
-import * as AppButton from './AppButton';
-import { Layout, Container } from './Layout';
-import NavigationBar, { BackBarItem } from './NavigationBar';
-import SettingsHeader, { HeaderTitle } from './SettingsHeader';
-import styles from './AccountStyles';
-import Img from './Img';
-import { formatAccount } from '../lib/formatters';
-import WindowStateObserver from '../lib/window-state-observer';
-
-import type { AccountToken } from '../lib/daemon-rpc';
-
-type Props = {
- accountToken: AccountToken,
- accountExpiry: string,
- expiryLocale: string,
- updateAccountExpiry: () => Promise<void>,
- onLogout: () => void,
- onClose: () => void,
- onCopyAccountToken: () => void,
- onBuyMore: () => void,
-};
-
-type State = {
- isRefreshingExpiry: boolean,
- showAccountTokenCopiedMessage: boolean,
-};
-
-export default class Account extends Component<Props, State> {
- state = {
- isRefreshingExpiry: false,
- showAccountTokenCopiedMessage: false,
- };
-
- _isMounted = false;
- _copyTimer: ?TimeoutID;
- _windowStateObserver = new WindowStateObserver();
-
- componentDidMount() {
- this._isMounted = true;
- this._refreshAccountExpiry();
-
- this._windowStateObserver.onShow = () => {
- this._refreshAccountExpiry();
- };
- }
-
- componentWillUnmount() {
- this._isMounted = false;
-
- if (this._copyTimer) {
- clearTimeout(this._copyTimer);
- }
-
- this._windowStateObserver.dispose();
- }
-
- onAccountTokenClick() {
- if (this._copyTimer) {
- clearTimeout(this._copyTimer);
- }
- this._copyTimer = setTimeout(
- () => this.setState({ showAccountTokenCopiedMessage: false }),
- 3000,
- );
- this.setState({ showAccountTokenCopiedMessage: true });
- this.props.onCopyAccountToken();
- }
-
- render() {
- const expiry = moment(this.props.accountExpiry);
- const isOutOfTime = expiry.isSameOrBefore(moment());
- const formattedAccountToken = formatAccount(this.props.accountToken || '');
- const formattedExpiry = expiry.toDate().toLocaleString(this.props.expiryLocale, {
- day: 'numeric',
- month: 'long',
- year: 'numeric',
- hour: 'numeric',
- minute: 'numeric',
- });
-
- return (
- <Layout>
- <Container>
- <View style={styles.account}>
- <NavigationBar>
- <BackBarItem action={this.props.onClose} title={'Settings'} />
- </NavigationBar>
-
- <View style={styles.account__container}>
- <SettingsHeader>
- <HeaderTitle>Account</HeaderTitle>
- </SettingsHeader>
-
- <View style={styles.account__content}>
- <View style={styles.account__main}>
- <View style={styles.account__row}>
- <Text style={styles.account__row_label}>Account ID</Text>
- <Text
- style={styles.account__row_value}
- onPress={this.onAccountTokenClick.bind(this)}>
- {this.state.showAccountTokenCopiedMessage
- ? 'COPIED TO CLIPBOARD!'
- : formattedAccountToken}
- </Text>
- </View>
-
- <View style={styles.account__row}>
- <Text style={styles.account__row_label}>Paid until</Text>
- {isOutOfTime ? (
- <Text style={styles.account__out_of_time} testName="account__out_of_time">
- {'OUT OF TIME'}
- </Text>
- ) : (
- <Text style={styles.account__row_value}>{formattedExpiry}</Text>
- )}
- </View>
-
- <View style={styles.account__footer}>
- <AppButton.GreenButton
- style={styles.account__buy_button}
- onPress={this.props.onBuyMore}
- text="Buy more credit"
- icon="icon-extLink"
- testName="account__buymore">
- <AppButton.Label>Buy more credit</AppButton.Label>
- <Img source="icon-extLink" height={16} width={16} />
- </AppButton.GreenButton>
- <AppButton.RedButton onPress={this.props.onLogout} testName="account__logout">
- {'Log out'}
- </AppButton.RedButton>
- </View>
- </View>
- </View>
- </View>
- </View>
- </Container>
- </Layout>
- );
- }
-
- async _refreshAccountExpiry() {
- this.setState({ isRefreshingExpiry: true });
-
- try {
- await this.props.updateAccountExpiry();
- } catch (e) {
- // TODO: Report the error to user
- }
-
- if (this._isMounted) {
- this.setState({ isRefreshingExpiry: false });
- }
- }
-}