@@ -14,6 +14,8 @@ import "./coll-info";
14
14
import "./coll-index" ;
15
15
import "./recordembed" ;
16
16
17
+ import { BtrixClient } from "./upload" ;
18
+
17
19
import wrRec from "../../assets/recLogo.svg" ;
18
20
import wrLogo from "../../assets/awp-logo.svg" ;
19
21
import prettyBytes from "pretty-bytes" ;
@@ -39,14 +41,32 @@ class ArchiveWebApp extends ReplayWebApp
39
41
this . colls = [ ] ;
40
42
this . autorun = false ;
41
43
44
+ this . settingsError = "" ;
45
+
46
+ this . settingsTab = localStorage . getItem ( "settingsTab" ) || "ipfs" ;
47
+
42
48
try {
43
49
const res = localStorage . getItem ( "ipfsOpts" ) ;
44
50
this . ipfsOpts = JSON . parse ( res ) ;
45
51
} catch ( e ) {
46
52
// ignore empty
47
53
}
48
54
49
- this . ipfsOpts = this . ipfsOpts || { daemonUrl : "" , message : "" , useCustom : false , gatewayUrl : DEFAULT_GATEWAY_URL } ;
55
+ this . ipfsOpts = this . ipfsOpts || {
56
+ daemonUrl : "" ,
57
+ message : "" ,
58
+ useCustom : false ,
59
+ autoDetect : false ,
60
+ gatewayUrl : DEFAULT_GATEWAY_URL
61
+ } ;
62
+
63
+ try {
64
+ const res = localStorage . getItem ( "btrixOpts" ) ;
65
+ this . btrixOpts = JSON . parse ( res ) ;
66
+ BtrixClient . login ( this . btrixOpts ) . then ( client => this . btrixOpts . client = client ) ;
67
+ } catch ( e ) {
68
+ this . btrixOpts = null ;
69
+ }
50
70
51
71
getLocalOption ( "autorunBehaviors" ) . then ( ( res ) => this . autorun = res === "1" ) ;
52
72
@@ -81,10 +101,15 @@ class ArchiveWebApp extends ReplayWebApp
81
101
download : { type : Object } ,
82
102
83
103
ipfsOpts : { type : Object } ,
104
+ btrixOpts : { type : Object } ,
105
+
106
+ uploadCollOpts : { type : Object } ,
84
107
85
108
showSettings : { type : Boolean } ,
109
+ settingsTab : { type : String } ,
110
+ settingsError : { type : String } ,
86
111
87
- showIpfsShareFailed : { type : Boolean }
112
+ showIpfsShareFailed : { type : Boolean } ,
88
113
} ;
89
114
}
90
115
@@ -324,11 +349,12 @@ class ArchiveWebApp extends ReplayWebApp
324
349
< wr-rec-coll-index
325
350
dateName ="Date Created "
326
351
headerName ="Current Web Captures "
327
- .ipfsOpts =${ this . ipfsOpts }
352
+ .shareOpts =${ { ipfsOpts : this . ipfsOpts , btrixOpts : this . btrixOpts } }
328
353
@show-start =${ this . onShowStart }
329
354
@show-import=${ this . onShowImport }
330
355
@colls-updated=${ this . onCollsLoaded }
331
356
@ipfs-share-failed=${ ( ) => this . showIpfsShareFailed = true }
357
+ @do-upload=${ ( e ) => this . uploadCollOpts = e . detail }
332
358
style="overflow: visible"
333
359
>
334
360
</ wr-rec-coll-index >
@@ -343,6 +369,7 @@ class ArchiveWebApp extends ReplayWebApp
343
369
${ this . showDownloadProgress && this . download ? this . renderDownloadModal ( ) : "" }
344
370
${ this . showSettings ? this . renderSettingsModal ( ) : "" }
345
371
${ this . showIpfsShareFailed ? this . renderIPFSShareFailedModal ( ) : "" }
372
+ ${ this . uploadCollOpts && this . btrixOpts ? this . renderBtrixUploadModal ( ) : "" }
346
373
${ super . render ( ) } ` ;
347
374
}
348
375
@@ -355,7 +382,7 @@ class ArchiveWebApp extends ReplayWebApp
355
382
.loadInfo ="${ this . getLoadInfo ( this . sourceUrl ) } "
356
383
.appLogo ="${ this . mainLogo } "
357
384
.autoUpdateInterval =${ this . embed || this . showDownloadProgress ? 0 : 10 }
358
- .ipfsOpts =${ this . ipfsOpts }
385
+ .shareOpts =${ { ipfsOpts : this . ipfsOpts , btrixOpts : this . btrixOpts } }
359
386
swName=${ this . swName }
360
387
embed="${ this . embed } "
361
388
sourceUrl="${ this . sourceUrl } "
@@ -366,6 +393,7 @@ class ArchiveWebApp extends ReplayWebApp
366
393
@coll-loaded=${ this . onCollLoaded }
367
394
@show-start=${ this . onShowStart }
368
395
@show-import=${ this . onShowImport }
396
+ @do-upload=${ ( e ) => this . uploadCollOpts = e . detail }
369
397
@about-show=${ ( ) => this . showAbout = true } > </ wr-rec-coll > ` ;
370
398
}
371
399
@@ -467,6 +495,15 @@ class ArchiveWebApp extends ReplayWebApp
467
495
</ wr-modal ` ;
468
496
}
469
497
498
+ renderBtrixUploadModal ( ) {
499
+ return html `
500
+ < wr-btrix-upload
501
+ .btrixOpts =${ this . btrixOpts }
502
+ .uploadColl =${ this . uploadCollOpts }
503
+ >
504
+ </ wr-btrix-upload > ` ;
505
+ }
506
+
470
507
renderDownloadModal ( ) {
471
508
const renderDLStatus = ( ) => {
472
509
switch ( this . download . state ) {
@@ -604,27 +641,85 @@ class ArchiveWebApp extends ReplayWebApp
604
641
605
642
renderSettingsModal ( ) {
606
643
return html `
607
- < wr-modal @modal-closed ="${ ( ) => this . showSettings = false } " title ="Settings ">
608
- < form class ="is-flex is-flex-direction-column " @submit ="${ this . onSaveSettings } ">
609
- < div class ="field has-addons ">
610
- < p class ="control is-expanded ">
611
- IPFS Daemon URL (leave blank to auto-detect IPFS):
612
- < input class ="input " type ="url "
613
- name ="ipfsDaemonUrl " id ="ipfsDaemonUrl " value ="${ this . ipfsOpts . daemonUrl } "
614
- placeholder ="Set IPFS Daemon URL or set blank to auto-detect IPFS ">
615
- </ p >
616
- </ div >
617
- < div class ="field has-addons ">
618
- < p class ="control is-expanded ">
619
- IPFS Gateway URL:
620
- < input class ="input " type ="url "
621
- name ="ipfsGatewayUrl " id ="ipfsGatewayUrl " value ="${ this . ipfsOpts . gatewayUrl } "
622
- placeholder ="${ DEFAULT_GATEWAY_URL } ">
623
- </ p >
624
- </ div >
625
- < div class ="has-text-centered ">
644
+ < wr-modal @modal-closed ="${ this . onCancelSettings } " title ="Settings ">
645
+ < div class ="tabs mb-3 ">
646
+ < ul >
647
+ < li class ="${ this . settingsTab === "ipfs" ? "is-active" : "" } ">
648
+ < a @click =${ ( ) => this . settingsTab = "ipfs" } > IPFS</ a >
649
+ </ li >
650
+ < li class ="${ this . settingsTab === "browsertrix" ? "is-active" : "" } ">
651
+ < a @click =${ ( ) => this . settingsTab = "browsertrix" } > Browsertrix Cloud</ a >
652
+ </ li >
653
+ </ ul >
654
+ </ div >
655
+
656
+ < form class ="is-flex is-flex-direction-column is-size-7 " @submit ="${ this . onSaveSettings } ">
657
+
658
+ ${ this . settingsTab === "ipfs" ? html `
659
+ < p class ="is-size-6 mb-3 "> Configure IPFS settings for sharing archives to IPFS.</ p >
660
+ < fieldset >
661
+ < div class ="field ">
662
+ < input name ="ipfsAutoDetect " id ="ipfsAutoDetect " class ="checkbox is-small " type ="checkbox " ?checked ="${ this . ipfsOpts . autoDetect } "> < span class ="ml-1 "> Auto-Detect IPFS</ span >
663
+ </ div >
664
+ < div class ="field has-addons ">
665
+ < p class ="is-expanded ">
666
+ IPFS Daemon URL (leave blank to auto-detect IPFS):
667
+ < input class ="input is-small " type ="url "
668
+ name ="ipfsDaemonUrl " id ="ipfsDaemonUrl " value ="${ this . ipfsOpts . daemonUrl } "
669
+ placeholder ="Set IPFS Daemon URL or set blank to auto-detect IPFS ">
670
+ </ p >
671
+ </ div >
672
+ < div class ="field has-addons ">
673
+ < p class ="is-expanded ">
674
+ IPFS Gateway URL:
675
+ < input class ="input is-small " type ="url "
676
+ name ="ipfsGatewayUrl " id ="ipfsGatewayUrl " value ="${ this . ipfsOpts . gatewayUrl } "
677
+ placeholder ="${ DEFAULT_GATEWAY_URL } ">
678
+ </ p >
679
+ </ div >
680
+ </ fieldset > ` : "" }
681
+
682
+ ${ this . settingsTab === "browsertrix" ? html `
683
+ < p class ="is-size-6 mb-3 "> Configure your credentials to upload archives to Browsertrix Cloud.</ p >
684
+ < fieldset >
685
+ < div class ="field has-addons ">
686
+ < p class ="is-expanded ">
687
+ Browsertrix Cloud URL:
688
+ < input class ="input is-small " type ="url "
689
+ name ="btrixUrl " id ="btrixUrl " value ="${ this . btrixOpts && this . btrixOpts . url } "
690
+ placeholder ="https://... ">
691
+ </ p >
692
+ </ div >
693
+ < div class ="field has-addons ">
694
+ < p class ="is-expanded ">
695
+ Username
696
+ < input class ="input is-small " type ="text "
697
+ name ="btrixUsername " id ="btrixUsername " value ="${ this . btrixOpts && this . btrixOpts . username } "
698
+ placeholder ="Username ">
699
+ </ p >
700
+ </ div >
701
+ < div class ="field has-addons ">
702
+ < p class ="is-expanded ">
703
+ Password
704
+ < input class ="input is-small " type ="password "
705
+ name ="btrixPassword " id ="btrixPassword " value ="${ this . btrixOpts && this . btrixOpts . password } "
706
+ placeholder ="Password ">
707
+ </ p >
708
+ </ div >
709
+ < div class ="field has-addons ">
710
+ < p class ="is-expanded ">
711
+ Organization Name (Optional)
712
+ < input class ="input is-small " type ="text "
713
+ name ="btrixOrgName " id ="btrixOrgName " value ="${ this . btrixOpts && this . btrixOpts . orgName } "
714
+ placeholder ="Organization (optional) ">
715
+ </ p >
716
+ </ div >
717
+ </ fieldset >
718
+ ` : "" }
719
+ < div class ="has-text-centered has-text-danger "> ${ this . settingsError } </ div >
720
+ < div class ="has-text-centered mt-4 ">
626
721
< button class ="button is-primary " type ="submit "> Save</ button >
627
- < button class ="button " type ="button " @click ="${ ( ) => this . showSettings = false } "> Close </ button >
722
+ < button class ="button " type ="button " @click ="${ this . onCancelSettings } "> Cancel </ button >
628
723
</ div >
629
724
</ form >
630
725
</ wr-modal >
@@ -746,35 +841,72 @@ class ArchiveWebApp extends ReplayWebApp
746
841
747
842
async onSaveSettings ( event ) {
748
843
event . preventDefault ( ) ;
749
- this . showSettings = false ;
750
-
844
+
845
+ // IPFS settings
751
846
const daemonUrlText = this . renderRoot . querySelector ( "#ipfsDaemonUrl" ) ;
752
847
const gatewayUrlText = this . renderRoot . querySelector ( "#ipfsGatewayUrl" ) ;
848
+ const autodetectCheck = this . renderRoot . querySelector ( "#ipfsAutoDetect" ) ;
753
849
754
- if ( ! daemonUrlText || ! gatewayUrlText ) {
755
- return ;
756
- }
850
+ if ( daemonUrlText && gatewayUrlText ) {
851
+ const daemonUrl = daemonUrlText . value ;
852
+ const gatewayUrl = gatewayUrlText . value ;
853
+ const autoDetect = autodetectCheck && autodetectCheck . checked ;
757
854
758
- const daemonUrl = daemonUrlText . value ;
759
- const gatewayUrl = gatewayUrlText . value ;
855
+ this . ipfsOpts = {
856
+ daemonUrl, useCustom : ! ! daemonUrl , gatewayUrl,
857
+ autoDetect
858
+ } ;
760
859
761
- //const method = "POST" ;
860
+ await this . checkIPFS ( ) ;
762
861
763
- //const body = JSON.stringify({daemonUrl});
862
+ localStorage . setItem ( "ipfsOpts" , JSON . stringify ( this . ipfsOpts ) ) ;
863
+ }
764
864
765
- //const resp = await fetch(`${apiPrefix}/ipfs/daemonUrl`, {method, body});
865
+ // Browsertrix Settings
866
+ const btrixUrl = this . renderRoot . querySelector ( "#btrixUrl" ) ;
867
+ const btrixUsername = this . renderRoot . querySelector ( "#btrixUsername" ) ;
868
+ const btrixPassword = this . renderRoot . querySelector ( "#btrixPassword" ) ;
869
+ const btrixOrgName = this . renderRoot . querySelector ( "#btrixOrgName" ) ;
870
+
871
+ if ( btrixUrl && btrixUsername && btrixPassword ) {
872
+ const url = btrixUrl . value ;
873
+ const username = btrixUsername . value ;
874
+ const password = btrixPassword . value ;
875
+ const orgName = btrixOrgName && btrixOrgName . value || "" ;
876
+
877
+ if ( url && username && password ) {
878
+ const btrixOpts = { url, username, password, orgName } ;
879
+
880
+ let client ;
881
+
882
+ try {
883
+ client = await BtrixClient . login ( btrixOpts ) ;
884
+ this . settingsError = "" ;
885
+ } catch ( e ) {
886
+ this . settingsError = "Unable to log in to Browsertrix Cloud. Check your credentials." ;
887
+ return false ;
888
+ }
766
889
767
- this . ipfsOpts = {
768
- daemonUrl, useCustom : ! ! daemonUrl , gatewayUrl
769
- } ;
890
+ localStorage . setItem ( "btrixOpts" , JSON . stringify ( btrixOpts ) ) ;
891
+ this . btrixOpts = { ...btrixOpts , client} ;
892
+ } else {
893
+ this . btrixOpts = null ;
894
+ localStorage . removeItem ( "btrixOpts" ) ;
895
+ }
896
+ }
770
897
771
- await this . checkIPFS ( ) ;
898
+ localStorage . setItem ( "settingsTab" , this . settingsTab ) ;
772
899
773
- localStorage . setItem ( "ipfsOpts" , JSON . stringify ( this . ipfsOpts ) ) ;
900
+ this . showSettings = false ;
774
901
775
902
return false ;
776
903
}
777
904
905
+ async onCancelSettings ( ) {
906
+ this . settingsError = null ;
907
+ this . showSettings = false ;
908
+ }
909
+
778
910
async checkIPFS ( ) {
779
911
const ipfsOpts = this . ipfsOpts ;
780
912
@@ -785,7 +917,7 @@ class ArchiveWebApp extends ReplayWebApp
785
917
return ;
786
918
}
787
919
788
- if ( ! ipfsOpts . daemonUrl ) {
920
+ if ( ! ipfsOpts . daemonUrl && ipfsOpts . autoDetect ) {
789
921
// eslint-disable-next-line no-undef
790
922
const autoipfs = await createAutoIpfs ( { web3StorageToken : __WEB3_STORAGE_TOKEN__ } ) ;
791
923
0 commit comments