github/filestash
4
0
Fork 0
mirror of https://github.com/mickael-kerjean/filestash.git synced 2024-04-21 12:32:08 +00:00
Code Issues Releases Wiki Activity

improvement (connection page): UI improvement, fixing errors and weirderies

Browse Source
This commit is contained in:
Mickael KERJEAN
2018-03-02 05:51:13 +11:00
parent 5326bb1188
commit 9d00dc705a
26 changed files with 423 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+3 -3
View File
@@ -1,12 +1,12 @@
server/public/js
server/public/index.html
server/public/index.html
node_modules/
babel_cache/
.DS_Store
\#*\#
.\#*
.\#*
*.log
*~
*.swp
*.swo
.tern-port
client/assets/bucket.svg
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 241.75 241.75" enable-background="new 0 0 241.75 241.75" width="512px" height="512px">
<g>
<path d="m211.875,124.513v-33.513c0-50.178-40.822-91-91-91s-91,40.822-91,91v33.513c-4,0.134-8,3.765-8,8.237v0.5c0,4.557 4.026,8.5 8.583,8.5h13.341l10.275,90.064c0.624,5.465 5.634,9.936 11.134,9.936h112c5.5,0 10.481-4.475 11.067-9.942l9.671-90.058h14.012c4.557,0 7.917-3.943 7.917-8.5v-0.5c0-4.473-3-8.104-8-8.237zm-91-107.513c40.804,0 74,33.196 74,74v1.75h-148v-1.75c0-40.804 33.196-74 74-74z" fill="#6F6F6F"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 676 B

client/assets/delete.svg
+43
View File
@@ -0,0 +1,43 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 482.428 482.429" style="enable-background:new 0 0 482.428 482.429;" xml:space="preserve">
<g>
<g>
<path d="M381.163,57.799h-75.094C302.323,25.316,274.686,0,241.214,0c-33.471,0-61.104,25.315-64.85,57.799h-75.098 c-30.39,0-55.111,24.728-55.111,55.117v2.828c0,23.223,14.46,43.1,34.83,51.199v260.369c0,30.39,24.724,55.117,55.112,55.117 h210.236c30.389,0,55.111-24.729,55.111-55.117V166.944c20.369-8.1,34.83-27.977,34.83-51.199v-2.828 C436.274,82.527,411.551,57.799,381.163,57.799z M241.214,26.139c19.037,0,34.927,13.645,38.443,31.66h-76.879 C206.293,39.783,222.184,26.139,241.214,26.139z M375.305,427.312c0,15.978-13,28.979-28.973,28.979H136.096 c-15.973,0-28.973-13.002-28.973-28.979V170.861h268.182V427.312z M410.135,115.744c0,15.978-13,28.979-28.973,28.979H101.266 c-15.973,0-28.973-13.001-28.973-28.979v-2.828c0-15.978,13-28.979,28.973-28.979h279.897c15.973,0,28.973,13.001,28.973,28.979 V115.744z" fill="#6F6F6F"/>
<path d="M171.144,422.863c7.218,0,13.069-5.853,13.069-13.068V262.641c0-7.216-5.852-13.07-13.069-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C158.074,417.012,163.926,422.863,171.144,422.863z" fill="#6F6F6F"/>
<path d="M241.214,422.863c7.218,0,13.07-5.853,13.07-13.068V262.641c0-7.216-5.854-13.07-13.07-13.07 c-7.217,0-13.069,5.854-13.069,13.07v147.154C228.145,417.012,233.996,422.863,241.214,422.863z" fill="#6F6F6F"/>
<path d="M311.284,422.863c7.217,0,13.068-5.853,13.068-13.068V262.641c0-7.216-5.852-13.07-13.068-13.07 c-7.219,0-13.07,5.854-13.07,13.07v147.154C298.213,417.012,304.067,422.863,311.284,422.863z" fill="#6F6F6F"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

client/assets/download.svg
+10
View File
@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512px" version="1.1" height="512px" viewBox="0 0 64 64" enable-background="new 0 0 64 64">
<g>
<g fill="#1D1D1B">
<path d="M64,41.733c0-1.345-1.089-2.435-2.435-2.435c-1.347,0-2.436,1.09-2.436,2.435v14.115H4.946V41.733 c0-1.345-1.089-2.435-2.437-2.435c-1.346,0-2.435,1.09-2.435,2.435v15.535c0,0.18,0.067,0.338,0.103,0.507 c-0.035,0.169-0.103,0.328-0.103,0.507c0,1.345,1.089,2.436,2.435,2.436h59.056c1.346,0,2.435-1.091,2.435-2.436 c0-0.179-0.064-0.338-0.102-0.507C63.936,57.606,64,57.448,64,57.269V41.733z" fill="#6F6F6F"/>
<path d="m32.19,2.967c-1.346,0-2.437,1.091-2.437,2.436v35.576l-10.605-10.607c-0.951-0.951-2.492-0.951-3.443,0s-0.951,2.493 0,3.444l14.764,14.764c0.475,0.476 1.099,0.713 1.722,0.713 0.622,0 1.245-0.238 1.722-0.713l14.764-14.764c0.951-0.951 0.951-2.493 0-3.444-0.952-0.951-2.493-0.951-3.443,0l-10.609,10.607v-35.576c0-1.345-1.089-2.436-2.435-2.436z" fill="#6F6F6F"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

client/assets/dropbox.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.9 KiB

client/assets/edit.svg
+9
View File
@@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 129 129" enable-background="new 0 0 129 129" width="512px" height="512px">
<g>
<g>
<path d="m119.2,114.3h-109.4c-2.3,0-4.1,1.9-4.1,4.1s1.9,4.1 4.1,4.1h109.5c2.3,0 4.1-1.9 4.1-4.1s-1.9-4.1-4.2-4.1z" fill="#6F6F6F"/>
<path d="m5.7,78l-.1,19.5c0,1.1 0.4,2.2 1.2,3 0.8,0.8 1.8,1.2 2.9,1.2l19.4-.1c1.1,0 2.1-0.4 2.9-1.2l67-67c1.6-1.6 1.6-4.2 0-5.9l-19.2-19.4c-1.6-1.6-4.2-1.6-5.9-1.77636e-15l-13.4,13.5-53.6,53.5c-0.7,0.8-1.2,1.8-1.2,2.9zm71.2-61.1l13.5,13.5-7.6,7.6-13.5-13.5 7.6-7.6zm-62.9,62.9l49.4-49.4 13.5,13.5-49.4,49.3-13.6,.1 .1-13.5z" fill="#6F6F6F"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 747 B

client/assets/error.svg
+37
View File
@@ -0,0 +1,37 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 51.976 51.976" style="enable-background:new 0 0 51.976 51.976;" xml:space="preserve" width="512px" height="512px">
<g>
<path d="M44.373,7.603c-10.137-10.137-26.632-10.138-36.77,0c-10.138,10.138-10.137,26.632,0,36.77s26.632,10.138,36.77,0 C54.51,34.235,54.51,17.74,44.373,7.603z M36.241,36.241c-0.781,0.781-2.047,0.781-2.828,0l-7.425-7.425l-7.778,7.778 c-0.781,0.781-2.047,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l7.778-7.778l-7.425-7.425c-0.781-0.781-0.781-2.048,0-2.828 c0.781-0.781,2.047-0.781,2.828,0l7.425,7.425l7.071-7.071c0.781-0.781,2.047-0.781,2.828,0c0.781,0.781,0.781,2.047,0,2.828 l-7.071,7.071l7.425,7.425C37.022,34.194,37.022,35.46,36.241,36.241z" fill="#6f6f6f"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

client/assets/file.svg
+4
View File
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.0" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<path style="color:#000000;block-progression:tb;text-transform:none;text-indent:0" d="m2.3501 1.0014c-0.19751 0.0382-0.35351 0.23331-0.35001 0.43742v13.123c0.000005 0.22905 0.20523 0.43745 0.43079 0.43746l11.139 0.001c0.22556-0.000006 0.43078-0.20841 0.43079-0.43746v-10.143c-0.004-0.06684-0.022-0.13284-0.054-0.19135l-3.3121-3.1989c-0.043-0.0164-0.088-0.0256-0.134-0.0274l-8.0699-0.001c-0.02684-0.0026-0.05393-0.0026-0.08077 0z" fill="#aaaaaa"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 730 B

client/assets/folder copy.svg
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.0" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<g fill-rule="evenodd" transform="matrix(.86667 0 0 .86667 -172.05 -864.43)" fill="#969696">
<path d="m200.2 999.72c-0.28913 0-0.53125 0.2421-0.53125 0.53117v12.784c0 0.2985 0.23264 0.5312 0.53125 0.5312h15.091c0.2986 0 0.53124-0.2327 0.53124-0.5312l0.0004-10.474c0-0.2889-0.24211-0.5338-0.53124-0.5338l-7.5457 0.0005-2.3076-2.3078z" fill-rule="evenodd" fill="#6f6f6f"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 662 B

client/assets/folder.svg
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.0" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<g fill-rule="evenodd" transform="matrix(.86667 0 0 .86667 -172.05 -864.43)" fill="#969696">
<path d="m200.2 999.72c-0.28913 0-0.53125 0.2421-0.53125 0.53117v12.784c0 0.2985 0.23264 0.5312 0.53125 0.5312h15.091c0.2986 0 0.53124-0.2327 0.53124-0.5312l0.0004-10.474c0-0.2889-0.24211-0.5338-0.53124-0.5338l-7.5457 0.0005-2.3076-2.3078z" fill-rule="evenodd" fill="#6f6f6f"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 662 B

client/assets/google-drive.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

client/assets/link.svg
+6
View File
@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.0" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<g fill-rule="evenodd" transform="matrix(.86667 0 0 .86667 -172.05 -864.43)" fill="#969696">
<path d="m200.2 999.72c-0.28913 0-0.53125 0.2421-0.53125 0.53117v12.784c0 0.2985 0.23264 0.5312 0.53125 0.5312h15.091c0.2986 0 0.53124-0.2327 0.53124-0.5312l0.0004-10.474c0-0.2889-0.24211-0.5338-0.53124-0.5338l-7.5457 0.0005-2.3076-2.3078z" fill-rule="evenodd" fill="#6f6f6f"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 662 B

client/assets/loader.svg
+1
View File
@@ -0,0 +1 @@
<?xml version="1.0" encoding="utf-8"?><svg width='120px' height='120px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><circle cx="50" cy="50" r="40" stroke="none" fill="none" stroke-width="10" stroke-linecap="round"></circle><circle cx="50" cy="50" r="40" stroke="#6f6f6f" fill="none" stroke-width="6" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"></animate><animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"></animate></circle></svg>
Side by Side

After

Width:  |  Height:  |  Size: 706 B

client/assets/loader_white.svg
+1
View File
@@ -0,0 +1 @@
<?xml version="1.0" encoding="utf-8"?><svg width='120px' height='120px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect><circle cx="50" cy="50" r="40" stroke="none" fill="none" stroke-width="10" stroke-linecap="round"></circle><circle cx="50" cy="50" r="40" stroke="#ffffff" fill="none" stroke-width="6" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"></animate><animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"></animate></circle></svg>
Side by Side

After

Width:  |  Height:  |  Size: 707 B

client/assets/pause.svg
+38
View File
@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 47.607 47.607" style="enable-background:new 0 0 47.607 47.607;" xml:space="preserve" width="512px" height="512px">
<g>
<path d="M17.991,40.976c0,3.662-2.969,6.631-6.631,6.631l0,0c-3.662,0-6.631-2.969-6.631-6.631V6.631C4.729,2.969,7.698,0,11.36,0 l0,0c3.662,0,6.631,2.969,6.631,6.631V40.976z" fill="#6F6F6F"/>
<path d="M42.877,40.976c0,3.662-2.969,6.631-6.631,6.631l0,0c-3.662,0-6.631-2.969-6.631-6.631V6.631 C29.616,2.969,32.585,0,36.246,0l0,0c3.662,0,6.631,2.969,6.631,6.631V40.976z" fill="#6F6F6F"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 932 B

client/assets/play.svg
+37
View File
@@ -0,0 +1,37 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 232.153 232.153" style="enable-background:new 0 0 232.153 232.153;" xml:space="preserve" width="512px" height="512px">
<g id="Play">
<path style="fill-rule:evenodd;clip-rule:evenodd;" d="M203.791,99.628L49.307,2.294c-4.567-2.719-10.238-2.266-14.521-2.266 c-17.132,0-17.056,13.227-17.056,16.578v198.94c0,2.833-0.075,16.579,17.056,16.579c4.283,0,9.955,0.451,14.521-2.267 l154.483-97.333c12.68-7.545,10.489-16.449,10.489-16.449S216.471,107.172,203.791,99.628z" fill="#6F6F6F"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 904 B

client/assets/power.svg
+39
View File
@@ -0,0 +1,39 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 489.888 489.888" style="enable-background:new 0 0 489.888 489.888;" xml:space="preserve" width="512px" height="512px">
<g>
<g>
<path d="M25.383,290.5c-7.2-77.5,25.9-147.7,80.8-192.3c21.4-17.4,53.4-2.5,53.4,25l0,0c0,10.1-4.8,19.4-12.6,25.7 c-38.9,31.7-62.3,81.7-56.6,136.9c7.4,71.9,65,130.1,136.8,138.1c93.7,10.5,173.3-62.9,173.3-154.5c0-48.6-22.5-92.1-57.6-120.6 c-7.8-6.3-12.5-15.6-12.5-25.6l0,0c0-27.2,31.5-42.6,52.7-25.6c50.2,40.5,82.4,102.4,82.4,171.8c0,126.9-107.8,229.2-236.7,219.9 C122.183,481.8,35.283,396.9,25.383,290.5z M244.883,0c-18,0-32.5,14.6-32.5,32.5v149.7c0,18,14.6,32.5,32.5,32.5 s32.5-14.6,32.5-32.5V32.5C277.383,14.6,262.883,0,244.883,0z" fill="#6f6f6f"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

client/assets/save.svg
+38
View File
@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 438.533 438.533" style="enable-background:new 0 0 438.533 438.533;" xml:space="preserve">
<g>
<path d="M432.823,121.049c-3.806-9.132-8.377-16.367-13.709-21.695l-79.941-79.942c-5.325-5.325-12.56-9.895-21.696-13.704 C308.346,1.903,299.969,0,292.357,0H27.409C19.798,0,13.325,2.663,7.995,7.993c-5.33,5.327-7.992,11.799-7.992,19.414v383.719 c0,7.617,2.662,14.089,7.992,19.417c5.33,5.325,11.803,7.991,19.414,7.991h383.718c7.618,0,14.089-2.666,19.417-7.991 c5.325-5.328,7.987-11.8,7.987-19.417V146.178C438.531,138.562,436.629,130.188,432.823,121.049z M182.725,45.677 c0-2.474,0.905-4.611,2.714-6.423c1.807-1.804,3.949-2.708,6.423-2.708h54.819c2.468,0,4.609,0.902,6.417,2.708 c1.813,1.812,2.717,3.949,2.717,6.423v91.362c0,2.478-0.91,4.618-2.717,6.427c-1.808,1.803-3.949,2.708-6.417,2.708h-54.819 c-2.474,0-4.617-0.902-6.423-2.708c-1.809-1.812-2.714-3.949-2.714-6.427V45.677z M328.906,401.991H109.633V292.355h219.273 V401.991z M402,401.991h-36.552h-0.007V283.218c0-7.617-2.663-14.085-7.991-19.417c-5.328-5.328-11.8-7.994-19.41-7.994H100.498 c-7.614,0-14.087,2.666-19.417,7.994c-5.327,5.328-7.992,11.8-7.992,19.417v118.773H36.544V36.542h36.544v118.771 c0,7.615,2.662,14.084,7.992,19.414c5.33,5.327,11.803,7.993,19.417,7.993h164.456c7.61,0,14.089-2.666,19.41-7.993 c5.325-5.327,7.994-11.799,7.994-19.414V36.542c2.854,0,6.563,0.95,11.136,2.853c4.572,1.902,7.806,3.805,9.709,5.708l80.232,80.23 c1.902,1.903,3.806,5.19,5.708,9.851c1.909,4.665,2.857,8.33,2.857,10.994V401.991z" fill="#FFFFFF"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

client/pages/connectpage.js
+42 -63
View File
@@ -17,9 +17,11 @@ export class ConnectPage extends React.Component {
remember_me: window.localStorage.hasOwnProperty('credentials') ? true : false,
loading: false,
error: null,
marginTop: this._marginTop()
doing_a_third_party_login: false
};
}
componentDidMount(){
// adapted from: https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
function getParam(name) {
const regex = new RegExp("[?&#]" + name.replace(/[\[\]]/g, "\\$&") + "(=([^&#]*)|&|#|$)");
@@ -31,76 +33,54 @@ export class ConnectPage extends React.Component {
// dropbox login
if(getParam('state') === 'dropbox'){
this.state.loading = true;
this.authenticate({bearer: getParam('access_token'), type: 'dropbox'});
this.setState({doing_a_third_party_login: true});
}
// google drive login
if(getParam('code')){
this.state.loading = true;
this.authenticate({code: getParam('code'), type: 'gdrive'});
this.setState({doing_a_third_party_login: true});
}
}
componentWillMount(){
window.onresize = () => {
this.setState({marginTop: this._marginTop()});
};
}
_marginTop(){
let size = Math.round(Math.abs((document.body.offsetHeight - 300) / 2));
return size > 150? 150 : size;
}
authenticate(params){
if(params.type === 'dropbox') return this.login_dropbox();
else if(params.type === 'gdrive') return this.login_google();
this.setState({loading: true});
Session.authenticate(params)
.then((ok) => {
this.setState({loading: false});
invalidate();
const path = params.path && /^\//.test(params.path)? /\/$/.test(params.path) ? params.path : params.path+'/' : '/';
this.props.history.push('/files'+path);
})
.catch(err => {
if(err && err.code === 'CANCELLED'){ return; }
this.setState({loading: false, error: err});
window.setTimeout(() => {
this.setState({error: null});
}, 1000);
window.setTimeout(() => this.setState({error: null}), 1000);
});
}
login_dropbox(e){
this.setState({loading: true});
Session.url('dropbox').then((url) => {
window.location.href = url;
}).catch((err) => {
if(err && err.code === 'CANCELLED'){ return; }
this.setState({loading: false, error: err});
window.setTimeout(() => {
this.setState({error: null});
}, 1000);
});
}
login_google(e){
this.setState({loading: true});
Session.url('gdrive').then((url) => {
window.location.href = url;
}).catch((err) => {
if(err && err.code === 'CANCELLED'){ return }
this.setState({loading: false, error: err});
window.setTimeout(() => {
this.setState({error: null});
}, 1000);
});
initiateAuthToThirdParty(source){
if(source === 'dropbox'){
this.setState({loading: true});
Session.url('dropbox').then((url) => {
window.location.href = url;
}).catch((err) => {
this.setState({loading: false, error: err});
window.setTimeout(() => this.setState({error: null}), 1000);
});
}else if(source === 'google'){
this.setState({loading: true});
Session.url('gdrive').then((url) => {
window.location.href = url;
}).catch((err) => {
this.setState({loading: false, error: err});
window.setTimeout(() => this.setState({error: null}), 1000);
});
}
}
onFormSubmit(data, credentials){
this.setState({credentials: credentials});
this.authenticate(data);
this.setState({credentials: credentials}, () => {
this.authenticate(data);
});
}
setRemember(state){
@@ -122,23 +102,22 @@ export class ConnectPage extends React.Component {
<Loader/>
</NgIf>
<ReactCSSTransitionGroup
transitionName="form"
transitionLeave={false}
transitionEnter={false}
transitionAppear={true} transitionAppearTimeout={500}
>
<NgIf key={"form"+this.state.loading} cond={this.state.loading === false}>
<Form
credentials={this.state.credentials}
onSubmit={this.onFormSubmit.bind(this)} />
<NgIf cond={this.state.loading === false}>
<ReactCSSTransitionGroup transitionName="form" transitionLeave={false} transitionEnter={false} transitionAppear={true} transitionAppearTimeout={500}>
<Form credentials={this.state.credentials}
onThirdPartyLogin={this.initiateAuthToThirdParty.bind(this)}
onSubmit={this.onFormSubmit.bind(this)} />
</ReactCSSTransitionGroup>
<ReactCSSTransitionGroup transitionName="remember" transitionLeave={false} transitionEnter={false} transitionAppear={true} transitionAppearTimeout={5000}>
<RememberMe state={this.state.remember_me} onChange={this.setRemember.bind(this)}/>
</NgIf>
</ReactCSSTransitionGroup>
<Credentials remember_me={this.state.remember_me}
onRememberMeChange={this.setRemember.bind(this)}
onCredentialsFound={this.setCredentials.bind(this)}
credentials={this.state.credentials} />
</ReactCSSTransitionGroup>
</NgIf>
<NgIf cond={this.state.doing_a_third_party_login === false}>
<Credentials remember_me={this.state.remember_me}
onRememberMeChange={this.setRemember.bind(this)}
onCredentialsFound={this.setCredentials.bind(this)}
credentials={this.state.credentials} />
</NgIf>
<Notification error={this.state.error && this.state.error.message} />
</Container>
</div>
client/pages/connectpage/credentials.js
+2 -2
View File
@@ -36,7 +36,7 @@ export class Credentials extends React.Component {
}
}
componentWillMount(){
componentDidMount(){
this.init();
if(this.state.key) this.onSubmit();
}
@@ -91,8 +91,8 @@ export class Credentials extends React.Component {
}
}else{
this.setState({error: 'Password can\'t be empty'});
window.setTimeout(() => this.setState({error: null}), 1500);
}
window.setTimeout(() => this.setState({error: null}), 1500);
}
render() {
client/pages/connectpage/form.js
+41 -23
View File
@@ -3,6 +3,8 @@ import { Container, Card, NgIf, Input, Button, Textarea, Loader, Notification, e
import { Session, invalidate, password } from '../../data';
import './form.scss';
import img_drive from '../../assets/google-drive.png';
import img_dropbox from '../../assets/dropbox.png';
export class Form extends React.Component {
constructor(props){
@@ -14,24 +16,14 @@ export class Form extends React.Component {
advanced_sftp: false,
advanced_webdav: false,
advanced_s3: false,
advanced_git: false
advanced_git: false,
dummy: true
};
}
_marginTop(){
let size = 300;
const $screen = document.querySelector('.login-form');
if($screen) size = $screen.offsetHeight;
size = Math.round((document.body.offsetHeight - size) / 2);
if(size < 0) return 0;
if(size > 150) return 150;
return size;
}
componentDidMount(){
this.publishState(this.props.credentials);
window.addEventListener('resize', this.rerender.bind(this));
}
componentWillReceiveProps(props){
@@ -40,6 +32,9 @@ export class Form extends React.Component {
}
}
componentWillUnmount(){
window.removeEventListener('resize', this.rerender.bind(this));
}
publishState(_credentials){
const pushDOM = (credentials) => {
@@ -102,10 +97,33 @@ export class Form extends React.Component {
this.props.onSubmit(auth_data, credentials);
}
redirect_dropbox(e){
this.props.onThirdPartyLogin('dropbox');
}
redirect_google(e){
this.props.onThirdPartyLogin('google');
}
onTypeChange(type){
this.setState({type: type}, () => this.publishState(this.props.credentials));
}
rerender(){
this.setState({dummy: !this.state.dummy});
}
_marginTop(){
let size = 300;
const $screen = document.querySelector('.login-form');
if($screen) size = $screen.offsetHeight;
size = Math.round((document.body.offsetHeight - size) / 2);
if(size < 0) return 0;
if(size > 150) return 150;
return size;
}
render() {
let className = (window.innerWidth < 600) ? 'scroll-x' : '';
return (
@@ -122,9 +140,9 @@ export class Form extends React.Component {
<div>
<form onSubmit={this.onSubmit.bind(this)} autoComplete="off" autoCapitalize="off" spellCheck="false" autoCorrect="off">
<NgIf cond={this.state.type === 'webdav'}>
<Input type="text" name="url" placeholder="Address*" ref={(input) => {this.state.refs.webdav_url = input; }} autoComplete="new-password" />
<Input type="text" name="username" placeholder="Username" ref={(input) => {this.state.refs.webdav_username = input; }} autoComplete="new-password" />
<Input type="password" name="password" placeholder="Password" ref={(input) => {this.state.refs.webdav_password = input; }} autoComplete="new-password" />
<Input type="text" name="url" placeholder="Address*" ref={(input) => { this.state.refs.webdav_url = input; }} autoComplete="new-password" />
<Input type="text" name="username" placeholder="Username" ref={(input) => { this.state.refs.webdav_username = input; }} autoComplete="new-password" />
<Input type="password" name="password" placeholder="Password" ref={(input) => { this.state.refs.webdav_password = input; }} autoComplete="new-password" />
<label>
<input checked={this.state.advanced_webdav} onChange={e => { this.setState({advanced_webdav: e.target.checked}); }} type="checkbox" autoComplete="new-password"/> Advanced
</label>
@@ -196,23 +214,23 @@ export class Form extends React.Component {
</NgIf>
<NgIf cond={this.state.type === 'dropbox'} className="third-party">
<a target="_blank" href={this.state.dropbox_url}>
<div onClick={this.onSubmit.bind(this)}>
<img src="/img/dropbox.png"/>
<div onClick={this.redirect_dropbox.bind(this)}>
<img src={img_dropbox} />
</div>
<Input type="hidden" name="type" value="dropbox"/>
<Button type="submit" theme="emphasis">LOGIN WITH DROPBOX</Button>
<Button type="button" onClick={this.redirect_dropbox.bind(this)} theme="emphasis">LOGIN WITH DROPBOX</Button>
</a>
</NgIf>
<NgIf cond={this.state.type === 'gdrive'} className="third-party">
<div onClick={this.onSubmit.bind(this)}>
<img src="/img/google-drive.png"/>
<div onClick={this.redirect_google.bind(this)}>
<img src={img_drive}/>
</div>
<Input type="hidden" name="type" value="gdrive"/>
<Button type="submit" theme="emphasis">LOGIN WITH GOOGLE</Button>
<Button type="button" onClick={this.redirect_google.bind(this)} theme="emphasis">LOGIN WITH GOOGLE</Button>
</NgIf>
</form>
</div>
</Card>
</Card>
);
}
}
client/pages/connectpage/form.scss
+20
View File
@@ -42,3 +42,23 @@
}
}
}
.component_page_connection_form.form-appear{
opacity: 0;
}
.component_page_connection_form.form-appear.form-appear-active{
opacity: 1;
transition: opacity 0.5s ease-out;
}
.component_rememberme.remember-appear{
opacity: 0;
transform: translateX(40px);
}
.component_rememberme.remember-appear.remember-appear-active{
opacity: 1;
transform: translateX(0px);
transition: all 0.3s ease-out;
transition-delay: 0.5s;
}
package-lock.json
Generated
+28
View File
@@ -11149,6 +11149,34 @@
"resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.0.tgz",
"integrity": "sha1-TTNA6AfTdzvamZH4MFrNzCpmXSo="
},
"url-loader": {
"version": "0.6.2",
"resolved": "https://registry.npmjs.org/url-loader/-/url-loader-0.6.2.tgz",
"integrity": "sha512-h3qf9TNn53BpuXTTcpC+UehiRrl0Cv45Yr/xWayApjw6G8Bg2dGke7rIwDQ39piciWCWrC+WiqLjOh3SUp9n0Q==",
"dev": true,
"requires": {
"loader-utils": "1.1.0",
"mime": "1.6.0",
"schema-utils": "0.3.0"
},
"dependencies": {
"mime": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
"dev": true
},
"schema-utils": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.3.0.tgz",
"integrity": "sha1-9YdyIs4+kx7a4DnxfrNxbnE3+M8=",
"dev": true,
"requires": {
"ajv": "5.5.2"
}
}
}
},
"url-parse": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.2.0.tgz",
package.json
+1
View File
@@ -79,6 +79,7 @@
"sass-loader": "^6.0.6",
"sass-variable-loader": "^0.1.2",
"style-loader": "^0.20.2",
"url-loader": "^0.6.2",
"webpack-bundle-analyzer": "^2.8.2",
"webpack-dev-server": "^2.4.5"
}
server/model/backend/dropbox.js
+1 -1
View File
@@ -43,7 +43,7 @@ module.exports = {
test: function(params){
return query(params, "https://api.dropboxapi.com/2/users/get_current_account", "POST")
.then((opts) => Promise.resolve(params))
.catch((err) => Promise.reject({message: err && err.message || err, code: "NOT_AUTHENTICATED"}))
.catch((err) => Promise.reject({message: 'Dropbox didn\'t gave us access to your account', code: "NOT_AUTHENTICATED"}))
},
cat: function(path, params){
return query_stream(params, "https://content.dropboxapi.com/2/files/download", "POST", null, {
webpack.config.js
+4
View File
@@ -28,6 +28,10 @@ let config = {
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(pdf|jpg|png|gif|svg|ico)$/,
loader: "url-loader?mimetype=image/png"
}
]
},