extends react.Component { 432 | constructor(props: P) { 433 | super(props); 434 | } 435 | 436 | public render(): any { // eslint-disable-line class-methods-use-this 437 | throw new Error('Not implemented.'); 438 | } 439 | } 440 | 441 | // The ParamInput area handles the input field of a single parameter to an endpoint. 442 | interface SingleParamInputProps { 443 | key: string; 444 | handler: ValueHandler; 445 | param: Parameter 446 | } 447 | 448 | /* Input component for single parameter. 449 | */ 450 | class SingleParamInput extends ParamInput { 451 | constructor(props: SingleParamInputProps) { 452 | super(props); 453 | } 454 | 455 | // When the field is edited, its value is parsed and the state is updated. 456 | handleEdit = (event: Event) => { 457 | let valueToReturn: any = null; 458 | // special case: the target isn't an HTMLInputElement 459 | if (this.props.param.name === '__file__') { 460 | const fileTarget: FileElement = event.target; 461 | if (fileTarget.files.length > 0) valueToReturn = fileTarget.files[0]; 462 | } else { 463 | const target: HTMLInputElement = event.target; 464 | /* If valueToReturn is left as null, it signals an optional value that should be 465 | deleted from the dict of param values. 466 | */ 467 | if (target.value !== '' || !this.props.param.optional) { 468 | valueToReturn = this.props.param.getValue(target.value); 469 | } 470 | } 471 | this.props.handler.updateValue(valueToReturn); 472 | this.props.handler.update(); 473 | }; 474 | 475 | public render() { 476 | return this.props.param.asReact({ onChange: this.handleEdit }, this.props.key); 477 | } 478 | } 479 | 480 | /* Some parameters are structs of other parameters, e.g. in upload_session/finish. In the input 481 | field, structs are treated as just a list of parameters. This means we currently can't really 482 | signal optional structs to the user. Moreover, nested structs are currently not possible. 483 | */ 484 | interface StructParamInputProps { 485 | key: string; 486 | handler: StructValueHandler; 487 | param: utils.StructParam; 488 | } 489 | class StructParamInput extends ParamInput { 490 | constructor(props: StructParamInputProps) { 491 | super(props); 492 | this.state = { display: !props.param.optional }; 493 | } 494 | 495 | add = () => { 496 | this.props.handler.add(); 497 | this.setState({ display: true }); 498 | }; 499 | 500 | reset = () => { 501 | this.props.handler.reset(); 502 | this.setState({ display: false }); 503 | }; 504 | 505 | public render() { 506 | return ce('tr', null, 507 | this.props.param.getNameColumn(), 508 | ce('td', null, 509 | ce('table', null, 510 | ce('tbody', null, this.renderItems())))); 511 | } 512 | 513 | renderItems = (): react.DetailedReactHTMLElement[] => { 514 | const ret: react.DetailedReactHTMLElement[] = []; 515 | 516 | if (this.state.display || !this.props.param.optional) { 517 | for (const p of this.props.param.fields) { 518 | const input = ParamClassChooser.getParamInput(p, { 519 | key: `${this.props.key}_${this.props.param.name}_${p.name}`, 520 | handler: this.props.handler.getChildHandler(p), 521 | param: p, 522 | }); 523 | 524 | ret.push(input); 525 | } 526 | } 527 | 528 | if (this.props.param.optional) { 529 | const button = this.state.display 530 | ? ce('button', { onClick: this.reset }, 'Clear') 531 | : ce('button', { onClick: this.add }, 'Add'); 532 | 533 | ret.push(ce('tr', { className: 'struct-param-actions' }, 534 | ce('td', null, button))); 535 | } 536 | 537 | return ret; 538 | } 539 | } 540 | 541 | interface UnionParamInputProps { 542 | key: string; 543 | handler: UnionValueHandler; 544 | param: utils.UnionParam; 545 | } 546 | class UnionParamInput extends ParamInput { 547 | constructor(props: UnionParamInputProps) { 548 | super(props); 549 | } 550 | 551 | getParam = (): StructParam => { 552 | const tag: string = this.props.handler.getTag(); 553 | let fields: Parameter[] = null; 554 | if (tag == null) { 555 | fields = []; 556 | } else { 557 | const param: Parameter = this.props.param.fields.filter((t) => t.name == tag)[0]; 558 | 559 | if (param instanceof StructParam) { 560 | fields = (param).fields; 561 | } else if (param instanceof VoidParam) { 562 | fields = []; 563 | } else { 564 | fields = [param]; 565 | } 566 | } 567 | 568 | return new StructParam(this.props.param.name, false, fields); 569 | }; 570 | 571 | public render() { 572 | const selectParamProps: SingleParamInputProps = { 573 | key: `${this.props.key}_selector`, 574 | handler: this.props.handler.getTagHandler(), 575 | param: this.props.param.getSelectorParam(this.props.handler.getTag()), 576 | }; 577 | 578 | const param = this.getParam(); 579 | 580 | if (param.fields.length == 0) { 581 | return ce(SingleParamInput, selectParamProps); 582 | } 583 | 584 | const structParam = new StructParamInput({ 585 | key: `${this.props.key}_${param.name}`, 586 | handler: this.props.handler, 587 | param, 588 | }); 589 | 590 | return ce('tr', null, 591 | this.props.param.getNameColumn(), 592 | ce('td', null, 593 | ce('table', null, 594 | ce('tbody', null, [ce(SingleParamInput, selectParamProps)].concat(structParam.renderItems()))))); 595 | } 596 | } 597 | 598 | interface ListParamInputProps { 599 | key: string; 600 | handler: ListValueHandler; 601 | param: utils.ListParam; 602 | } 603 | class ListParamInput extends ParamInput { 604 | constructor(props: ListParamInputProps) { 605 | super(props); 606 | this.state = { count: 0 }; 607 | } 608 | 609 | addItem = (): void => { 610 | this.props.handler.addItem(); 611 | this.setState({ count: this.state.count + 1 }); 612 | }; 613 | 614 | reset = (): void => { 615 | this.props.handler.reset(); 616 | this.setState({ count: 0 }); 617 | }; 618 | 619 | public render() { 620 | return ce('tr', null, 621 | this.props.param.getNameColumn(), 622 | ce('td', null, 623 | ce('table', null, 624 | ce('tbody', null, this.renderItems())))); 625 | } 626 | 627 | renderItems = (): react.DetailedReactHTMLElement[] => { 628 | const ret: react.DetailedReactHTMLElement[] = []; 629 | for (let i = 0; i < this.state.count; i++) { 630 | const param: Parameter = this.props.param.createItem(i); 631 | const item: react.DetailedReactHTMLElement = ParamClassChooser 632 | .getParamInput(param, { 633 | key: `${this.props.key}_${this.props.param.name}_${i.toString()}`, 634 | handler: this.props.handler.getChildHandler(param), 635 | param, 636 | }); 637 | 638 | ret.push(item); 639 | } 640 | 641 | ret.push(ce('tr', { className: 'list-param-actions' }, 642 | ce('td', null, 643 | ce('button', { onClick: this.addItem }, 'Add'), 644 | ce('button', { onClick: this.reset }, 'Clear')))); 645 | 646 | return ret; 647 | } 648 | } 649 | 650 | // Picks the correct React class for a parameter, depending on whether it's a struct. 651 | class ParamClassChooser { 652 | public static getParamInput(param: Parameter, props: any): any { 653 | if (param instanceof utils.UnionParam) { 654 | return ce(UnionParamInput, props); 655 | } 656 | if (param instanceof utils.StructParam) { 657 | return ce(StructParamInput, props); 658 | } 659 | if (param instanceof utils.ListParam) { 660 | return ce(ListParamInput, props); 661 | } 662 | 663 | return ce(SingleParamInput, props); 664 | } 665 | } 666 | 667 | /* The code view section of the API Explorer. This component manages a selector which chooses what 668 | format to display the code in, as well as the div that contains the code view itself. 669 | */ 670 | interface CodeAreaProps { 671 | ept: Endpoint; 672 | paramVals: Dict; 673 | headerVals: Header[], 674 | __file__: File, 675 | token: string 676 | } 677 | class CodeArea extends react.Component { 678 | constructor(props: CodeAreaProps) { 679 | super(props); 680 | this.state = { formatter: codeview.formats.curl }; 681 | } 682 | 683 | changeFormat = (event: react.FormEvent) => { 684 | const newFormat = (event.target).value; 685 | this.setState({ formatter: codeview.formats[newFormat] }); 686 | }; 687 | 688 | public render() { 689 | return ce('span', { id: 'code-area' }, 690 | ce('p', null, 'View request as ', codeview.getSelector(this.changeFormat)), 691 | ce('span', null, codeview.render(this.state.formatter, this.props.ept, this.props.token, 692 | this.props.paramVals, this.props.headerVals, this.props.__file__))); 693 | } 694 | } 695 | 696 | /* A component handling all the main user-input areas of the document: the token area, the 697 | parameter areas, and the code view. Because of this, it holds a lot of state: the token and 698 | whether to show or hide it; the paramVals and file that are passed to the code viewer or 699 | submitted; and any error messages. 700 | */ 701 | interface RequestAreaProps { 702 | currEpt: Endpoint; 703 | APICaller: (paramsData: string, ept: Endpoint, token: string, 704 | headers: Header[], responseFn: apicalls.Callback, file: File) => void; 705 | inProgress: boolean 706 | } 707 | class RequestArea extends react.Component { 708 | constructor(props: RequestAreaProps) { 709 | super(props); 710 | this.state = { 711 | paramVals: utils.initialValues(this.props.currEpt), 712 | headerVals: [], 713 | fileVals: { file: null }, // a signal that no file has been chosen 714 | errMsg: null, 715 | showToken: true, 716 | showCode: false, 717 | showHeaders: false, 718 | }; 719 | } 720 | 721 | updateParamValues = (paramVals: Dict, fileVals: Dict) => { 722 | this.setState({ paramVals, fileVals }); 723 | this.forceUpdate(); 724 | }; 725 | 726 | updateHeaderValues = (headerVals: Header[]) => { 727 | this.setState({ headerVals }); 728 | this.forceUpdate(); 729 | }; 730 | 731 | updateTokenValue = (tokenValue: string) => { 732 | // This is called only to trigger live update. Use utils.getToken 733 | // to get latest token. 734 | utils.putToken(tokenValue); 735 | this.forceUpdate(); 736 | }; 737 | 738 | /* Called when a new endpoint is chosen or the user updates the token. If a new endpoint is 739 | chosen, we should initialize its parameter values; if a new token is chosen, any error 740 | message about the token no longer applies. 741 | */ 742 | componentWillReceiveProps = (newProps: RequestAreaProps) => { 743 | if (newProps.currEpt !== this.props.currEpt) { 744 | this.updateParamValues(utils.initialValues(newProps.currEpt), { file: null }); 745 | } 746 | 747 | this.setState({ errMsg: null }); 748 | }; 749 | 750 | /* Submits a call to the API. This function handles the display logic (e.g. whether or not to 751 | display an error message for a missing token), and the APICaller prop actually sends the 752 | request. 753 | */ 754 | submit = () => { 755 | const token = utils.getToken(); 756 | const { currEpt } = this.props; 757 | const authType = currEpt.getAuthType(); 758 | 759 | if (authType == utils.AuthType.App) { 760 | this.setState({ 761 | errMsg: 'Error: Making API call for app auth endpoint is not supported. Please run the code using credential of your own app.', 762 | }); 763 | } else if (authType != utils.AuthType.None && (token == null || token === '')) { 764 | this.setState({ 765 | errMsg: 'Error: missing token. Please enter a token above or click the "Get Token" button.', 766 | }); 767 | } else { 768 | this.setState({ errMsg: null }); 769 | const responseFn = apicalls.chooseCallback(currEpt.getEndpointKind(), 770 | utils.getDownloadName(currEpt, this.state.paramVals)); 771 | this.props.APICaller(JSON.stringify(this.state.paramVals), currEpt, 772 | token, this.state.headerVals, responseFn, this.state.fileVals.file); 773 | } 774 | }; 775 | 776 | // Toggles whether the token is hidden, or visible on the screen. 777 | showOrHide = () => this.setState({ showToken: !this.state.showToken }); 778 | 779 | // Toggles whether code block is visible. 780 | showOrHideCode = () => this.setState({ showCode: !this.state.showCode }); 781 | 782 | // Toggles whether header block is visible. 783 | showOrHideHeaders = () => this.setState({ showHeaders: !this.state.showHeaders }); 784 | 785 | // Update client id when app permission change. 786 | updateClientId = (e: react.FormEvent): void => { 787 | const { value } = (e.target); 788 | for (const id in clientIdMap) { 789 | if (clientIdMap[id] == value) { 790 | utils.putClientId(id); 791 | return; 792 | } 793 | } 794 | }; 795 | 796 | public render() { 797 | let errMsg: any = []; 798 | 799 | if (this.state.errMsg != null) { 800 | errMsg = [ce('span', { style: { color: 'red' } }, this.state.errMsg)]; 801 | } 802 | 803 | const name = this.props.currEpt.name.replace('/', '-'); 804 | const documentation = `${developerPage}/documentation/http/documentation#${this.props.currEpt.ns}-${name}`; 805 | const handler = new RootValueHandler(this.state.paramVals, 806 | this.state.fileVals, this.updateParamValues); 807 | const headerHandler = new RequestHeaderRootHandler(this.state.headerVals, 808 | this.updateHeaderValues); 809 | 810 | return ce('span', { id: 'request-area' }, 811 | ce('table', { className: 'page-table' }, 812 | ce('tbody', null, 813 | utils.getAuthType() == utils.AuthType.Team 814 | ? ce(AppPermissionInput, { handler: this.updateClientId }) 815 | : null, 816 | ce(TokenInput, { 817 | toggleShow: this.showOrHide, 818 | showToken: this.state.showToken, 819 | callback: this.updateTokenValue, 820 | }), 821 | ce('tr', null, 822 | tableText('Request'), 823 | ce('td', null, 824 | ce('div', { className: 'align-right' }, 825 | ce('a', { href: documentation }, 826 | 'Documentation')), 827 | ce('table', { id: 'parameter-list' }, 828 | ce('tbody', null, 829 | this.props.currEpt.params.map( 830 | (param: Parameter) => ParamClassChooser.getParamInput(param, { 831 | key: this.props.currEpt.name + param.name, 832 | handler: handler.getChildHandler(param), 833 | param, 834 | }), 835 | ))), 836 | ce('div', null, 837 | ce('button', { onClick: this.showOrHideHeaders }, this.state.showHeaders ? 'Hide Headers' : 'Show Headers'), 838 | ce('button', { onClick: this.showOrHideCode }, this.state.showCode ? 'Hide Code' : 'Show Code'), 839 | ce('button', { onClick: this.submit, disabled: this.props.inProgress }, 'Submit Call'), 840 | ce('img', { 841 | src: 'https://www.dropbox.com/static/images/icons/ajax-loading-small.gif', 842 | hidden: !this.props.inProgress, 843 | style: { position: 'relative', top: '2px', left: '10px' }, 844 | }), 845 | errMsg))), 846 | ce('tr', this.state.showHeaders ? null : displayNone, 847 | tableText('Headers'), 848 | ce('td', null, 849 | ce('div', { id: 'request-headers' }, 850 | ce(RequestHeaderArea, { handler: headerHandler })))), 851 | ce('tr', this.state.showCode ? null : displayNone, 852 | tableText('Code'), 853 | ce('td', null, 854 | ce('div', { id: 'request-container' }, 855 | ce(CodeArea, { 856 | ept: this.props.currEpt, 857 | paramVals: this.state.paramVals, 858 | headerVals: this.state.headerVals, 859 | __file__: this.state.fileVals.file, 860 | token: this.state.showToken ? utils.getToken() : '', 861 | }))))))); 862 | } 863 | } 864 | 865 | interface RequestHeaderAreaProps { 866 | handler: RequestHeaderRootHandler 867 | } 868 | 869 | class RequestHeaderArea extends react.Component { 870 | constructor(props: RequestHeaderAreaProps) { 871 | super(props); 872 | } 873 | 874 | public render() { 875 | const { handler } = this.props; 876 | 877 | return ce('span', { id: 'request-header-area' }, 878 | ce('div', null, ce('button', { onClick: handler.add }, 'Add Header')), 879 | ce('table', null, 880 | ce('tbody', null, 881 | handler.getHeaders().map( 882 | (header: Header) => ce(RequestHeaderInput, { 883 | header, 884 | handler: new RequestHeaderHandler(handler), 885 | }), 886 | )))); 887 | } 888 | } 889 | 890 | class RequestHeaderRootHandler { 891 | headers: Header[]; 892 | 893 | callBack: (headers: Header[]) => void; 894 | 895 | constructor(headers: Header[], callback: (headers: Header[]) => void) { 896 | this.headers = headers; 897 | this.callBack = callback; 898 | } 899 | 900 | remove = (header: Header): void => { 901 | const index = this.headers.indexOf(header); 902 | this.headers.splice(index, 1); 903 | this.callBack(this.headers); 904 | }; 905 | 906 | add = (): void => { 907 | this.headers.push(new Header()); 908 | this.callBack(this.headers); 909 | }; 910 | 911 | update = (): void => { 912 | this.callBack(this.headers); 913 | }; 914 | 915 | getHeaders = (): Header[] => this.headers 916 | } 917 | 918 | class RequestHeaderHandler { 919 | parentHandler: RequestHeaderRootHandler; 920 | 921 | constructor(parentHandler: RequestHeaderRootHandler) { 922 | this.parentHandler = parentHandler; 923 | } 924 | 925 | onChange = (header: Header, removed: boolean) => { 926 | if (removed) { 927 | this.parentHandler.remove(header); 928 | } else { 929 | this.parentHandler.update(); 930 | } 931 | }; 932 | } 933 | 934 | interface RequestHeaderInputProps { 935 | header: Header, 936 | handler: RequestHeaderHandler 937 | } 938 | 939 | class RequestHeaderInput extends react.Component { 940 | constructor(props: RequestHeaderInputProps) { 941 | super(props); 942 | } 943 | 944 | public render() { 945 | return this.props.header.asReact(this.props.handler.onChange); 946 | } 947 | } 948 | 949 | /* A small component governing an endpoint on the sidebar, to bold it when it's selected and 950 | handle the logic when it is clicked. 951 | */ 952 | interface EndpointChoiceProps { 953 | key: string; 954 | ept: Endpoint; 955 | handleClick: (ept: Endpoint) => void; 956 | isSelected: boolean 957 | } 958 | class EndpointChoice extends react.Component { 959 | constructor(props: EndpointChoiceProps) { super(props); } 960 | 961 | onClick = () => this.props.handleClick(this.props.ept); 962 | 963 | public render() { 964 | return (this.props.isSelected) 965 | ? ce('li', null, ce('b', null, this.props.ept.name), ce('br', null)) 966 | : ce('li', null, ce('a', { onClick: this.onClick }, this.props.ept.name), ce('br', null)); 967 | } 968 | } 969 | 970 | /* The EndpointSelector component governs the list of endpoints on the sidebar, and propagates the 971 | information of which one is currently selected. 972 | */ 973 | interface EndpointSelectorProps { 974 | eptChanged: (ept: Endpoint) => void; 975 | currEpt: Endpoint 976 | } 977 | class EndpointSelector extends react.Component { 978 | constructor(props: EndpointSelectorProps) { super(props); } 979 | 980 | filter = (ept: Endpoint): boolean => { 981 | if (ept.params.length > 0 && ept.params.indexOf(null) >= 0) { 982 | // Skip not implemented endpoints. 983 | return true; 984 | } 985 | 986 | const eptAuthType = ept.getAuthType() == utils.AuthType.Team 987 | ? utils.AuthType.Team 988 | : utils.AuthType.User; 989 | 990 | if (eptAuthType != utils.getAuthType()) { 991 | // Skip endpoints with different auth type. 992 | return true; 993 | } 994 | 995 | return false; 996 | }; 997 | 998 | // Renders the logo and the list of endpoints 999 | public render() { 1000 | const groups: {[ns: string]: Endpoint[]} = {}; 1001 | const namespaces: string[] = []; 1002 | 1003 | endpoints.endpointList.forEach((ept: Endpoint) => { 1004 | if (this.filter(ept)) { 1005 | return; 1006 | } 1007 | 1008 | if (groups[ept.ns] == undefined) { 1009 | groups[ept.ns] = [ept]; 1010 | namespaces.push(ept.ns); 1011 | } else { 1012 | groups[ept.ns].push(ept); 1013 | } 1014 | }); 1015 | 1016 | return ce('div', { id: 'sidebar' }, 1017 | ce('p', { style: { marginLeft: '35px', marginTop: '12px' } }, 1018 | ce('a', { onClick: () => window.location.href = developerPage }, 1019 | ce('img', { 1020 | src: 'https://cfl.dropboxstatic.com/static/images/logo_catalog/blue_dropbox_glyph_m1-vflZvZxbS.png', 1021 | width: 36, 1022 | className: 'home-icon', 1023 | }))), 1024 | ce('div', { id: 'endpoint-list' }, 1025 | namespaces.sort().map((ns: string) => ce('div', null, 1026 | ce('li', null, ns), 1027 | groups[ns].map((ept: Endpoint) => ce(EndpointChoice, { 1028 | key: ept.name, 1029 | ept, 1030 | handleClick: this.props.eptChanged, 1031 | isSelected: this.props.currEpt == ept, 1032 | })))))); 1033 | } 1034 | } 1035 | 1036 | /* The React component for resposne area). 1037 | */ 1038 | interface ResponseAreaProps { 1039 | hide: boolean; 1040 | responseText: string; 1041 | downloadButton: any; 1042 | } 1043 | class ResponseArea extends react.Component { 1044 | constructor(props: ResponseAreaProps) { 1045 | super(props); 1046 | } 1047 | 1048 | public render() { 1049 | return ce('span', { id: 'response-area' }, 1050 | ce('table', { className: 'page-table' }, 1051 | ce('tbody', this.props.hide ? displayNone : null, 1052 | ce('tr', null, 1053 | tableText('Response'), 1054 | ce('td', null, 1055 | ce('div', { id: 'response-container' }, 1056 | ce(utils.Highlight, { className: 'json', children: null }, this.props.responseText)), 1057 | ce('div', null, this.props.downloadButton)))))); 1058 | } 1059 | } 1060 | 1061 | /* The top-level React component for the API Explorer (except text-based pages, such as the intro 1062 | page and the error pages). 1063 | */ 1064 | interface APIExplorerProps { 1065 | initEpt: Endpoint 1066 | } 1067 | class APIExplorer extends react.Component { 1068 | constructor(props: APIExplorerProps) { 1069 | super(props); 1070 | this.state = { 1071 | ept: this.props.initEpt, 1072 | downloadURL: '', 1073 | responseText: '', 1074 | inProgress: false, 1075 | }; 1076 | } 1077 | 1078 | componentWillReceiveProps = (newProps: APIExplorerProps) => this.setState({ 1079 | ept: newProps.initEpt, 1080 | downloadURL: '', 1081 | responseText: '', 1082 | }); 1083 | 1084 | APICaller = (paramsData: string, endpt: Endpoint, token: string, 1085 | headers: Header[], responseFn: apicalls.Callback, file: File) => { 1086 | this.setState({ inProgress: true }); 1087 | 1088 | const responseFn_wrapper: apicalls.Callback = (component: any, resp: XMLHttpRequest) => { 1089 | this.setState({ inProgress: false }); 1090 | responseFn(component, resp); 1091 | }; 1092 | 1093 | apicalls.APIWrapper(paramsData, endpt, token, headers, responseFn_wrapper, this, file); 1094 | }; 1095 | 1096 | public render() { 1097 | // This button pops up only on download 1098 | const downloadButton = (this.state.downloadURL !== '') 1099 | ? ce('a', { 1100 | href: this.state.downloadURL, 1101 | download: this.state.downloadFilename, 1102 | }, ce('button', null, `Download ${this.state.downloadFilename}`)) 1103 | : null; 1104 | 1105 | const props: MainPageProps = { 1106 | currEpt: this.state.ept, 1107 | header: ce('span', null, `Dropbox API Explorer • ${this.state.ept.name}`), 1108 | messages: [ 1109 | ce(RequestArea, { 1110 | currEpt: this.state.ept, 1111 | APICaller: this.APICaller, 1112 | inProgress: this.state.inProgress, 1113 | }), 1114 | ce(ResponseArea, { 1115 | hide: this.state.inProgress || this.state.responseText == '', 1116 | responseText: this.state.responseText, 1117 | downloadButton, 1118 | }), 1119 | ], 1120 | }; 1121 | 1122 | return ce(MainPage, props); 1123 | } 1124 | } 1125 | 1126 | /* This class renders the main page which contains endpoint selector 1127 | sidebar and main content page. 1128 | */ 1129 | interface MainPageProps { 1130 | currEpt: Endpoint; 1131 | header: react.ReactElement; 1132 | messages: react.ReactElement[]; 1133 | } 1134 | class MainPage extends react.Component { 1135 | constructor(props: MainPageProps) { super(props); } 1136 | 1137 | getAuthSwitch = (): react.DetailedReactHTMLElement => { 1138 | if (utils.getAuthType() == utils.AuthType.User) { 1139 | return ce('a', { id: 'auth-switch', href: `${utils.currentURL()}team/` }, 'Switch to Business endpoints'); 1140 | } 1141 | 1142 | return ce('a', { id: 'auth-switch', href: '../' }, 'Switch to User endpoints'); 1143 | }; 1144 | 1145 | public render() { 1146 | return ce('span', null, 1147 | ce(EndpointSelector, { 1148 | eptChanged: (endpt: Endpoint) => window.location.hash = `#${endpt.getFullName()}`, 1149 | currEpt: this.props.currEpt, 1150 | }), 1151 | ce('h1', { id: 'header' }, this.props.header, this.getAuthSwitch()), 1152 | ce('div', { id: 'page-content' }, 1153 | this.props.messages)); 1154 | } 1155 | } 1156 | 1157 | /* This class renders a text page (the intro page and error messages). Then, each page is an 1158 | instance of TextPage. 1159 | */ 1160 | interface TextPageProps { 1161 | message: react.DetailedReactHTMLElement; 1162 | } 1163 | class TextPage extends react.Component { 1164 | constructor(props: TextPageProps) { super(props); } 1165 | 1166 | public render() { 1167 | return ce(MainPage, { 1168 | currEpt: new Endpoint('', '', null), 1169 | header: ce('span', null, 'Dropbox API Explorer'), 1170 | messages: [this.props.message], 1171 | }); 1172 | } 1173 | } 1174 | 1175 | // Introductory page, which people see when they first open the webpage 1176 | const introPage: react.ReactElement = ce(TextPage, { 1177 | message: 1178 | ce('span', null, 1179 | ce('p', null, 'Welcome to the Dropbox API Explorer!'), 1180 | ce('p', null, 1181 | 'This API Explorer is a tool to help you learn about the ', 1182 | ce('a', { href: developerPage }, 'Dropbox API v2'), 1183 | ' and test your own examples. For each endpoint, you\'ll be able to submit an API call ', 1184 | 'with your own parameters and see the code for that call, as well as the API response.'), 1185 | ce('p', null, 1186 | 'Click on an endpoint on your left to get started, or check out ', 1187 | ce('a', { href: `${developerPage}/documentation` }, 1188 | 'the documentation'), 1189 | ' for more information on the API.')), 1190 | }); 1191 | 1192 | /* The endpoint name (supplied via the URL's hash) doesn't correspond to any actual endpoint. Right 1193 | now, this can only happen if the user edits the URL hash. 1194 | React sanitizes its inputs, so displaying the hash below is safe. 1195 | */ 1196 | const endpointNotFound: react.ReactElement = ce(TextPage, { 1197 | message: 1198 | ce('span', null, 1199 | ce('p', null, 'Welcome to the Dropbox API Explorer!'), 1200 | ce('p', null, 1201 | 'Unfortunately, there doesn\'t seem to be an endpoint called ', 1202 | ce('b', null, window.location.hash.substr(1)), 1203 | '. Try clicking on an endpoint on the left instead.'), 1204 | ce('p', null, 'If you think you received this message in error, please get in contact with us.')), 1205 | }); 1206 | 1207 | /* Error when the state parameter of the hash isn't what was expected, which could be due to an 1208 | XSRF attack. 1209 | */ 1210 | const stateError: react.ReactElement = ce(TextPage, { 1211 | message: 1212 | ce('span', null, 1213 | ce('p', null, ''), 1214 | ce('p', null, 1215 | 'Unfortunately, there was a problem retrieving your OAuth2 token; please try again. ', 1216 | 'If this error persists, you may be using an insecure network.'), 1217 | ce('p', null, 'If you think you received this message in error, please get in contact with us.')), 1218 | }); 1219 | 1220 | /* The hash of the URL determines which page to render; no hash renders the intro page, and 1221 | 'auth_error!' (the ! chosen so it's less likely to have a name clash) renders the stateError 1222 | page when the state parameter isn't what was expected. 1223 | */ 1224 | const renderGivenHash = (hash: string): void => { 1225 | if (hash === '' || hash === undefined) { 1226 | reactDom.render(introPage, document.body); 1227 | } else if (hash === 'xkcd') { 1228 | window.location.href = 'https://xkcd.com/1481/'; 1229 | } else if (hash === 'auth_error!') { 1230 | reactDom.render(stateError, document.body); 1231 | } else { 1232 | const currEpt = utils.getEndpoint(endpoints.endpointList, decodeURIComponent(hash)); 1233 | if (currEpt === null) { 1234 | reactDom.render(endpointNotFound, document.body); 1235 | } else { 1236 | reactDom.render(ce(APIExplorer, { initEpt: currEpt }), document.body); 1237 | } 1238 | } 1239 | }; 1240 | 1241 | const checkCsrf = (state: string): string => { 1242 | if (state === null) return null; 1243 | const div = state.indexOf('!'); 1244 | if (div < 0) return null; 1245 | const csrfToken = state.substring(div + 1); 1246 | if (!utils.checkCsrfToken(csrfToken)) return null; 1247 | return state.substring(0, div); // The part before the CSRF token. 1248 | }; 1249 | 1250 | /* Things that need to be initialized at the start. 1251 | 1. Set up the listener for hash changes. 1252 | 2. Process the initial hash. This only occurs when the user goes through token flow, which 1253 | redirects the page back to the API Explorer website, but with a hash that contains the 1254 | token and some extra state (to check against XSRF attacks). 1255 | */ 1256 | const main = (): void => { 1257 | window.onhashchange = (e: any) => { 1258 | // first one works everywhere but IE, second one works everywhere but Firefox 40 1259 | renderGivenHash(e.newURL ? e.newURL.split('#')[1] : window.location.hash.slice(1)); 1260 | }; 1261 | 1262 | const hashes = utils.getHashDict(); 1263 | if ('state' in hashes) { // completing token flow, and checking the state is OK 1264 | const state = checkCsrf(hashes.state); 1265 | if (state === null) { 1266 | window.location.hash = '#auth_error!'; 1267 | } else { 1268 | utils.putToken(hashes.access_token); 1269 | window.location.href = `${utils.currentURL()}#${state}`; 1270 | } 1271 | } else if ('__ept__' in hashes) { // no token, but an endpoint selected 1272 | renderGivenHash(hashes.__ept__); 1273 | } else { // no endpoint selected: render the intro page 1274 | reactDom.render(introPage, document.body); 1275 | } 1276 | }; 1277 | 1278 | main(); 1279 | --------------------------------------------------------------------------------