summaryrefslogtreecommitdiff
path: root/src/popup/js/pages/Index.tsx
blob: fa874ccab66a397e2944330b9b7488223a23693a (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import * as React from 'react';
import { GetKeybaseUserForDomainEvent, GetKeybaseUserForDomainResponse } from "../../../common/GetKeybaseUserForDomainEvent";

import { Row } from "../components/Row";
import { GetUsersAwaitingConsentEvent, GetUsersAwaitingConsentResponse, AllowUserEvent, DeniedUserEvent } from '../../../common/GetUsersAwaitingConsentEvent';

interface ToolbarProps {
}

interface ToolbarState {
    domain: string,
    keybaseUsers: string[],
    trustedUsers: string[],
    barredUsers: string[],
    needsApproval: string[]
}

export class Index extends React.Component<ToolbarProps, ToolbarState> {
    constructor(props: any) {
        super(props);
        this.state = {
            domain: "",
            keybaseUsers: [],
            trustedUsers: [],
            barredUsers: [],
            needsApproval: []
        };
    }

    async componentDidMount() {
        // Get the active tab and store it in component state.
        const [ activeTab ] = await browser.tabs.query({ active: true });

        const domain = new URL(activeTab.url).hostname;

        this.setState({ domain });

        await this.updateUsers();
    }

    async updateUsers() {
        const [ activeTab ] = await browser.tabs.query({ active: true });

        await browser.tabs.sendMessage(activeTab.id, new GetKeybaseUserForDomainEvent(this.state.domain))
            .then((res: GetKeybaseUserForDomainResponse) => {
                this.setState({
                    keybaseUsers: res.keybaseUsers,
                    trustedUsers: res.trusted,
                    barredUsers: res.barred,
                    needsApproval: res.pending
                });
            });
    }

    approve = async (user: string) => {
        const [ activeTab ] = await browser.tabs.query({ active: true });
        browser.tabs.sendMessage(activeTab.id, new AllowUserEvent(this.state.domain, user))
            .then(this.updateUsers.bind(this));
    }

    deny = async (user: string) => {
        const [ activeTab ] = await browser.tabs.query({ active: true });
        browser.tabs.sendMessage(activeTab.id, new DeniedUserEvent(this.state.domain, user))
            .then(this.updateUsers.bind(this));
    }

    render() {
        return <div className="container">
            <Row header="Trusted Keybase Users">
                <ul>
                    { this.state.trustedUsers.map((u) => <li>
                        { u }&nbsp;
                        <a href="#" onClick={ e => this.deny(u) } style={{ color: '#F44336' }}>deny</a>
                    </li>) }
                </ul>
            </Row>
            <Row header="Barred Keybase Users">
                <ul>
                    { this.state.barredUsers.map((u) => <li>
                        { u }&nbsp;
                        <a href="#" onClick={ e => this.approve(u) } style={{ color: '#4CAF50' }}>approve</a>
                    </li>) }
                </ul>
            </Row>
            <Row header="Needs Approval">
                <ul>
                    { this.state.needsApproval.map((u) => <li>
                        { u }&nbsp;
                        <a href="#" onClick={ e => this.approve(u) } style={{ color: '#4CAF50' }}>approve</a>&nbsp;
                        <a href="#" onClick={ e => this.deny(u) } style={{ color: '#F44336' }}>deny</a>
                    </li>) }
                </ul>
            </Row>

        </div>;
    }
}