antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

login, signup, logout redesign

Browse Source
This commit is contained in:
Anton 2023-08-19 00:01:33 +02:00
parent 2fa78bc4ff
commit caea879aab
6 changed files with 103 additions and 326 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

271
dependencygraph.svg
View File

@ -1,271 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.43.0 (0)
-->
<!-- Title: dependency&#45;cruiser output Pages: 1 -->
<svg width="581pt" height="378pt"
viewBox="0.00 0.00 581.00 378.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 374)">
<title>dependency&#45;cruiser output</title>
<polygon fill="white" stroke="transparent" points="-4,4 -4,-374 577,-374 577,4 -4,4"/>
<g id="clust1" class="cluster">
<title>cluster_src</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M20,-8C20,-8 553,-8 553,-8 559,-8 565,-14 565,-20 565,-20 565,-350 565,-350 565,-356 559,-362 553,-362 553,-362 20,-362 20,-362 14,-362 8,-356 8,-350 8,-350 8,-20 8,-20 8,-14 14,-8 20,-8"/>
<text text-anchor="middle" x="286.5" y="-350.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">src</text>
</g>
<g id="clust2" class="cluster">
<title>cluster_src/Components</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M94,-16C94,-16 533.5,-16 533.5,-16 539.5,-16 545.5,-22 545.5,-28 545.5,-28 545.5,-178 545.5,-178 545.5,-184 539.5,-190 533.5,-190 533.5,-190 94,-190 94,-190 88,-190 82,-184 82,-178 82,-178 82,-28 82,-28 82,-22 88,-16 94,-16"/>
<text text-anchor="middle" x="313.75" y="-178.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Components</text>
</g>
<g id="clust3" class="cluster">
<title>cluster_src/Components/Map</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M102,-24C102,-24 525.5,-24 525.5,-24 531.5,-24 537.5,-30 537.5,-36 537.5,-36 537.5,-152 537.5,-152 537.5,-158 531.5,-164 525.5,-164 525.5,-164 102,-164 102,-164 96,-164 90,-158 90,-152 90,-152 90,-36 90,-36 90,-30 96,-24 102,-24"/>
<text text-anchor="middle" x="313.75" y="-152.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Map</text>
</g>
<g id="clust4" class="cluster">
<title>cluster_src/Utils</title>
<path fill="#ffffff" stroke="black" stroke-width="2" d="M440,-198C440,-198 545,-198 545,-198 551,-198 557,-204 557,-210 557,-210 557,-298 557,-298 557,-304 551,-310 545,-310 545,-310 440,-310 440,-310 434,-310 428,-304 428,-298 428,-298 428,-210 428,-210 428,-204 434,-198 440,-198"/>
<text text-anchor="middle" x="492.5" y="-298.8" font-family="Helvetica,sans-Serif" font-weight="bold" font-size="9.00">Utils</text>
</g>
<!-- src/Components/Map/AddButton.tsx -->
<g id="node1" class="node">
<title>src/Components/Map/AddButton.tsx</title>
<g id="a_node1"><a xlink:href="src/Components/Map/AddButton.tsx" xlink:title="AddButton.tsx">
<path fill="#bbfeff" stroke="black" d="M404,-108C404,-108 334,-108 334,-108 331,-108 328,-105 328,-102 328,-102 328,-96 328,-96 328,-93 331,-90 334,-90 334,-90 404,-90 404,-90 407,-90 410,-93 410,-96 410,-96 410,-102 410,-102 410,-105 407,-108 404,-108"/>
<text text-anchor="start" x="336" y="-96.8" font-family="Helvetica,sans-Serif" font-size="9.00">AddButton.tsx</text>
</a>
</g>
</g>
<!-- src/Utils/DynamicHeroIcon.tsx -->
<g id="node2" class="node">
<title>src/Utils/DynamicHeroIcon.tsx</title>
<g id="a_node2"><a xlink:href="src/Utils/DynamicHeroIcon.tsx" xlink:title="DynamicHeroIcon.tsx">
<path fill="#bbfeff" stroke="black" d="M543,-254C543,-254 442,-254 442,-254 439,-254 436,-251 436,-248 436,-248 436,-242 436,-242 436,-239 439,-236 442,-236 442,-236 543,-236 543,-236 546,-236 549,-239 549,-242 549,-242 549,-248 549,-248 549,-251 546,-254 543,-254"/>
<text text-anchor="start" x="444" y="-242.8" font-family="Helvetica,sans-Serif" font-size="9.00">DynamicHeroIcon.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Map/AddButton.tsx&#45;&gt;src/Utils/DynamicHeroIcon.tsx -->
<g id="edge1" class="edge">
<title>src/Components/Map/AddButton.tsx&#45;&gt;src/Utils/DynamicHeroIcon.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M410.01,-105.88C413.83,-107.95 417.28,-110.6 420,-114 436.13,-134.19 411.28,-210.3 428,-230 428.85,-231 429.76,-231.95 430.71,-232.83"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="429.81,-234.79 435.83,-236.81 432.38,-231.47 429.81,-234.79"/>
</g>
<!-- src/Components/Map/Layer.tsx -->
<g id="node3" class="node">
<title>src/Components/Map/Layer.tsx</title>
<g id="a_node3"><a xlink:href="src/Components/Map/Layer.tsx" xlink:title="Layer.tsx">
<path fill="#bbfeff" stroke="black" d="M287,-86C287,-86 242,-86 242,-86 239,-86 236,-83 236,-80 236,-80 236,-74 236,-74 236,-71 239,-68 242,-68 242,-68 287,-68 287,-68 290,-68 293,-71 293,-74 293,-74 293,-80 293,-80 293,-83 290,-86 287,-86"/>
<text text-anchor="start" x="244" y="-74.8" font-family="Helvetica,sans-Serif" font-size="9.00">Layer.tsx</text>
</a>
</g>
</g>
<!-- src/Utils/MarkerIconFactory.ts -->
<g id="node4" class="node">
<title>src/Utils/MarkerIconFactory.ts</title>
<g id="a_node4"><a xlink:href="src/Utils/MarkerIconFactory.ts" xlink:title="MarkerIconFactory.ts">
<path fill="#ddfeff" stroke="black" d="M541.5,-284C541.5,-284 443.5,-284 443.5,-284 440.5,-284 437.5,-281 437.5,-278 437.5,-278 437.5,-272 437.5,-272 437.5,-269 440.5,-266 443.5,-266 443.5,-266 541.5,-266 541.5,-266 544.5,-266 547.5,-269 547.5,-272 547.5,-272 547.5,-278 547.5,-278 547.5,-281 544.5,-284 541.5,-284"/>
<text text-anchor="start" x="445.5" y="-272.8" font-family="Helvetica,sans-Serif" font-size="9.00">MarkerIconFactory.ts</text>
</a>
</g>
</g>
<!-- src/Components/Map/Layer.tsx&#45;&gt;src/Utils/MarkerIconFactory.ts -->
<g id="edge2" class="edge">
<title>src/Components/Map/Layer.tsx&#45;&gt;src/Utils/MarkerIconFactory.ts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M277.82,-86.28C286.32,-93.19 297.43,-103.24 305,-114 313.37,-125.88 306.77,-134.78 318,-144 353.85,-173.42 389.36,-131.18 420,-166 433.85,-181.74 414.31,-244.13 428,-260 429.33,-261.54 430.79,-262.94 432.35,-264.22"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="431.19,-265.96 437.32,-267.65 433.57,-262.51 431.19,-265.96"/>
</g>
<!-- src/Components/Map/Popup.tsx -->
<g id="node5" class="node">
<title>src/Components/Map/Popup.tsx</title>
<g id="a_node5"><a xlink:href="src/Components/Map/Popup.tsx" xlink:title="Popup.tsx">
<path fill="#bbfeff" stroke="black" d="M394,-64C394,-64 344,-64 344,-64 341,-64 338,-61 338,-58 338,-58 338,-52 338,-52 338,-49 341,-46 344,-46 344,-46 394,-46 394,-46 397,-46 400,-49 400,-52 400,-52 400,-58 400,-58 400,-61 397,-64 394,-64"/>
<text text-anchor="start" x="346" y="-52.8" font-family="Helvetica,sans-Serif" font-size="9.00">Popup.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/Popup.tsx -->
<g id="edge3" class="edge">
<title>src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/Popup.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M293.24,-71.05C305.06,-68.51 319.01,-65.51 331.64,-62.8"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="332.29,-64.81 337.72,-61.5 331.41,-60.71 332.29,-64.81"/>
</g>
<!-- src/Components/Map/useItems.tsx -->
<g id="node6" class="node">
<title>src/Components/Map/useItems.tsx</title>
<g id="a_node6"><a xlink:href="src/Components/Map/useItems.tsx" xlink:title="useItems.tsx">
<path fill="#bbfeff" stroke="black" d="M523.5,-86C523.5,-86 461.5,-86 461.5,-86 458.5,-86 455.5,-83 455.5,-80 455.5,-80 455.5,-74 455.5,-74 455.5,-71 458.5,-68 461.5,-68 461.5,-68 523.5,-68 523.5,-68 526.5,-68 529.5,-71 529.5,-74 529.5,-74 529.5,-80 529.5,-80 529.5,-83 526.5,-86 523.5,-86"/>
<text text-anchor="start" x="463.5" y="-74.8" font-family="Helvetica,sans-Serif" font-size="9.00">useItems.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/useItems.tsx -->
<g id="edge4" class="edge">
<title>src/Components/Map/Layer.tsx&#45;&gt;src/Components/Map/useItems.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M274.57,-67.91C284.33,-58.83 300.78,-45.46 318,-40 361.21,-26.3 375.95,-29.28 420,-40 439.42,-44.73 459.46,-55.72 473.36,-64.5"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="472.38,-66.37 478.56,-67.86 474.66,-62.84 472.38,-66.37"/>
</g>
<!-- src/Utils/ReplaceURLs.ts -->
<g id="node10" class="node">
<title>src/Utils/ReplaceURLs.ts</title>
<g id="a_node10"><a xlink:href="src/Utils/ReplaceURLs.ts" xlink:title="ReplaceURLs.ts">
<path fill="#ddfeff" stroke="black" d="M529.5,-224C529.5,-224 455.5,-224 455.5,-224 452.5,-224 449.5,-221 449.5,-218 449.5,-218 449.5,-212 449.5,-212 449.5,-209 452.5,-206 455.5,-206 455.5,-206 529.5,-206 529.5,-206 532.5,-206 535.5,-209 535.5,-212 535.5,-212 535.5,-218 535.5,-218 535.5,-221 532.5,-224 529.5,-224"/>
<text text-anchor="start" x="457.5" y="-212.8" font-family="Helvetica,sans-Serif" font-size="9.00">ReplaceURLs.ts</text>
</a>
</g>
</g>
<!-- src/Components/Map/Popup.tsx&#45;&gt;src/Utils/ReplaceURLs.ts -->
<g id="edge8" class="edge">
<title>src/Components/Map/Popup.tsx&#45;&gt;src/Utils/ReplaceURLs.ts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M395.73,-64.11C404.87,-68.66 414.31,-75.13 420,-84 440.02,-115.19 409.91,-134.65 428,-167 436.75,-182.65 452.95,-194.77 466.79,-202.92"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="465.9,-204.82 472.16,-205.95 467.97,-201.17 465.9,-204.82"/>
</g>
<!-- src/Components/Map/NewItemPopup.tsx -->
<g id="node7" class="node">
<title>src/Components/Map/NewItemPopup.tsx</title>
<g id="a_node7"><a xlink:href="src/Components/Map/NewItemPopup.tsx" xlink:title="NewItemPopup.tsx">
<path fill="#bbfeff" stroke="black" d="M414,-138C414,-138 324,-138 324,-138 321,-138 318,-135 318,-132 318,-132 318,-126 318,-126 318,-123 321,-120 324,-120 324,-120 414,-120 414,-120 417,-120 420,-123 420,-126 420,-126 420,-132 420,-132 420,-135 417,-138 414,-138"/>
<text text-anchor="start" x="326" y="-126.8" font-family="Helvetica,sans-Serif" font-size="9.00">NewItemPopup.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Map/NewItemPopup.tsx&#45;&gt;src/Components/Map/useItems.tsx -->
<g id="edge6" class="edge">
<title>src/Components/Map/NewItemPopup.tsx&#45;&gt;src/Components/Map/useItems.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M403.38,-119.93C408.99,-118.14 414.71,-116.14 420,-114 437.61,-106.87 456.69,-96.88 470.7,-89.08"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="471.8,-90.87 476,-86.1 469.74,-87.21 471.8,-90.87"/>
</g>
<!-- src/types.ts -->
<g id="node8" class="node">
<title>src/types.ts</title>
<g id="a_node8"><a xlink:href="src/types.ts" xlink:title="types.ts">
<path fill="#ddfeff" stroke="black" d="M513.5,-336C513.5,-336 471.5,-336 471.5,-336 468.5,-336 465.5,-333 465.5,-330 465.5,-330 465.5,-324 465.5,-324 465.5,-321 468.5,-318 471.5,-318 471.5,-318 513.5,-318 513.5,-318 516.5,-318 519.5,-321 519.5,-324 519.5,-324 519.5,-330 519.5,-330 519.5,-333 516.5,-336 513.5,-336"/>
<text text-anchor="start" x="474" y="-324.8" font-family="Helvetica,sans-Serif" font-size="9.00">types.ts</text>
</a>
</g>
</g>
<!-- src/Components/Map/NewItemPopup.tsx&#45;&gt;src/types.ts -->
<g id="edge5" class="edge">
<title>src/Components/Map/NewItemPopup.tsx&#45;&gt;src/types.ts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M416.25,-138.22C417.61,-139.35 418.87,-140.61 420,-142 431.98,-156.77 415.74,-298.46 428,-313 435.68,-322.12 447.83,-326.09 459.45,-327.62"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="459.28,-329.71 465.46,-328.21 459.69,-325.53 459.28,-329.71"/>
</g>
<!-- src/Components/Map/UtopiaMap.tsx -->
<g id="node9" class="node">
<title>src/Components/Map/UtopiaMap.tsx</title>
<g id="a_node9"><a xlink:href="src/Components/Map/UtopiaMap.tsx" xlink:title="UtopiaMap.tsx">
<path fill="#bbfeff" stroke="black" d="M299,-138C299,-138 230,-138 230,-138 227,-138 224,-135 224,-132 224,-132 224,-126 224,-126 224,-123 227,-120 230,-120 230,-120 299,-120 299,-120 302,-120 305,-123 305,-126 305,-126 305,-132 305,-132 305,-135 302,-138 299,-138"/>
<text text-anchor="start" x="232" y="-126.8" font-family="Helvetica,sans-Serif" font-size="9.00">UtopiaMap.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Map/NewItemPopup.tsx&#45;&gt;src/Components/Map/UtopiaMap.tsx -->
<g id="edge7" class="edge">
<title>src/Components/Map/NewItemPopup.tsx&#45;&gt;src/Components/Map/UtopiaMap.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M317.84,-133.5C317.71,-133.5 317.58,-133.5 317.44,-133.5"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="311.15,-131.35 305.13,-133.4 311.11,-135.55 311.15,-131.35"/>
<polyline fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="311.13,-133.45 314.13,-133.47 "/>
<ellipse fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" cx="316.53" cy="-133.49" rx="2.4" ry="2.4"/>
</g>
<!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/AddButton.tsx -->
<g id="edge13" class="edge">
<title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/AddButton.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M296.25,-120C307.2,-116.8 319.64,-113.15 331.05,-109.81"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="331.75,-111.8 336.91,-108.1 330.57,-107.77 331.75,-111.8"/>
</g>
<!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/useItems.tsx -->
<g id="edge15" class="edge">
<title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/useItems.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M274.8,-119.7C287.04,-107.68 308.17,-87.86 318,-84 340.98,-74.97 405.58,-74.63 449.13,-75.56"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="449.09,-77.65 455.13,-75.69 449.18,-73.46 449.09,-77.65"/>
</g>
<!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/NewItemPopup.tsx -->
<g id="edge14" class="edge">
<title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/Components/Map/NewItemPopup.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M305.13,-124.6C305.26,-124.6 305.39,-124.6 305.52,-124.6"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="311.86,-126.65 317.84,-124.5 311.83,-122.45 311.86,-126.65"/>
<polyline fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="311.84,-124.55 308.84,-124.57 "/>
<ellipse fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" cx="306.44" cy="-124.59" rx="2.4" ry="2.4"/>
</g>
<!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/types.ts -->
<g id="edge12" class="edge">
<title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/types.ts</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M279.79,-138.24C290.12,-144.65 304.56,-153.06 318,-159 361.58,-178.26 390.71,-154.42 420,-192 436.56,-213.26 410.44,-292.56 428,-313 435.64,-321.89 447.52,-325.87 458.95,-327.46"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="459.03,-329.58 465.22,-328.12 459.47,-325.4 459.03,-329.58"/>
</g>
<!-- src/index.css -->
<g id="node12" class="node">
<title>src/index.css</title>
<g id="a_node12"><a xlink:href="src/index.css" xlink:title="index.css">
<path fill="#ffffcc" stroke="black" d="M392.5,-216C392.5,-216 345.5,-216 345.5,-216 342.5,-216 339.5,-213 339.5,-210 339.5,-210 339.5,-204 339.5,-204 339.5,-201 342.5,-198 345.5,-198 345.5,-198 392.5,-198 392.5,-198 395.5,-198 398.5,-201 398.5,-204 398.5,-204 398.5,-210 398.5,-210 398.5,-213 395.5,-216 392.5,-216"/>
<text text-anchor="start" x="347.5" y="-204.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.css</text>
</a>
</g>
</g>
<!-- src/Components/Map/UtopiaMap.tsx&#45;&gt;src/index.css -->
<g id="edge11" class="edge">
<title>src/Components/Map/UtopiaMap.tsx&#45;&gt;src/index.css</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M272.45,-138.21C281.77,-150.04 299.3,-170.66 318,-184 324.08,-188.34 331.1,-192.17 337.93,-195.4"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="337.26,-197.4 343.59,-197.97 339,-193.58 337.26,-197.4"/>
</g>
<!-- src/Components/Map/UtopiaMap.stories.tsx -->
<g id="node11" class="node">
<title>src/Components/Map/UtopiaMap.stories.tsx</title>
<g id="a_node11"><a xlink:href="src/Components/Map/UtopiaMap.stories.tsx" xlink:title="UtopiaMap.stories.tsx">
<path fill="#bbfeff" stroke="black" d="M205,-108C205,-108 104,-108 104,-108 101,-108 98,-105 98,-102 98,-102 98,-96 98,-96 98,-93 101,-90 104,-90 104,-90 205,-90 205,-90 208,-90 211,-93 211,-96 211,-96 211,-102 211,-102 211,-105 208,-108 205,-108"/>
<text text-anchor="start" x="106" y="-96.8" font-family="Helvetica,sans-Serif" font-size="9.00">UtopiaMap.stories.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Map/UtopiaMap.stories.tsx&#45;&gt;src/Components/Map/Layer.tsx -->
<g id="edge9" class="edge">
<title>src/Components/Map/UtopiaMap.stories.tsx&#45;&gt;src/Components/Map/Layer.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M199.74,-89.99C209.77,-87.94 220.27,-85.81 229.79,-83.87"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="230.43,-85.88 235.89,-82.62 229.59,-81.76 230.43,-85.88"/>
</g>
<!-- src/Components/Map/UtopiaMap.stories.tsx&#45;&gt;src/Components/Map/UtopiaMap.tsx -->
<g id="edge10" class="edge">
<title>src/Components/Map/UtopiaMap.stories.tsx&#45;&gt;src/Components/Map/UtopiaMap.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M189.27,-108.04C196.45,-109.99 203.98,-112.05 211,-114 215.92,-115.37 221.1,-116.83 226.21,-118.27"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="225.8,-120.34 232.15,-119.96 226.95,-116.3 225.8,-120.34"/>
</g>
<!-- src/Components/Map/index.tsx -->
<g id="node13" class="node">
<title>src/Components/Map/index.tsx</title>
<g id="a_node13"><a xlink:href="src/Components/Map/index.tsx" xlink:title="index.tsx">
<path fill="#bbfeff" stroke="black" d="M177.5,-138C177.5,-138 131.5,-138 131.5,-138 128.5,-138 125.5,-135 125.5,-132 125.5,-132 125.5,-126 125.5,-126 125.5,-123 128.5,-120 131.5,-120 131.5,-120 177.5,-120 177.5,-120 180.5,-120 183.5,-123 183.5,-126 183.5,-126 183.5,-132 183.5,-132 183.5,-135 180.5,-138 177.5,-138"/>
<text text-anchor="start" x="133.5" y="-126.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
</a>
</g>
</g>
<!-- src/Components/Map/index.tsx&#45;&gt;src/Components/Map/UtopiaMap.tsx -->
<g id="edge16" class="edge">
<title>src/Components/Map/index.tsx&#45;&gt;src/Components/Map/UtopiaMap.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M183.59,-129C194.03,-129 206.15,-129 217.75,-129"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="217.76,-131.1 223.76,-129 217.76,-126.9 217.76,-131.1"/>
</g>
<!-- src/index.tsx -->
<g id="node14" class="node">
<title>src/index.tsx</title>
<g id="a_node14"><a xlink:href="src/index.tsx" xlink:title="index.tsx">
<path fill="#bbfeff" stroke="black" d="M68,-112C68,-112 22,-112 22,-112 19,-112 16,-109 16,-106 16,-106 16,-100 16,-100 16,-97 19,-94 22,-94 22,-94 68,-94 68,-94 71,-94 74,-97 74,-100 74,-100 74,-106 74,-106 74,-109 71,-112 68,-112"/>
<text text-anchor="start" x="24" y="-100.8" font-family="Helvetica,sans-Serif" font-size="9.00">index.tsx</text>
</a>
</g>
</g>
<!-- src/index.tsx&#45;&gt;src/Components/Map/Layer.tsx -->
<g id="edge18" class="edge">
<title>src/index.tsx&#45;&gt;src/Components/Map/Layer.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M59.76,-93.87C66.23,-90.08 74.22,-86.09 82,-84 132.1,-70.56 192.75,-71.5 229.71,-73.89"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="229.75,-76 235.88,-74.32 230.04,-71.81 229.75,-76"/>
</g>
<!-- src/index.tsx&#45;&gt;src/Components/Map/index.tsx -->
<g id="edge17" class="edge">
<title>src/index.tsx&#45;&gt;src/Components/Map/index.tsx</title>
<path fill="none" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" d="M74.23,-111.89C76.85,-112.63 79.47,-113.35 82,-114 94.03,-117.09 107.32,-120.01 119.14,-122.44"/>
<polygon fill="#000000" fill-opacity="0.200000" stroke="#000000" stroke-width="2" stroke-opacity="0.200000" points="118.88,-124.53 125.18,-123.67 119.72,-120.42 118.88,-124.53"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

135
src/Components/AppShell/NavBar.tsx
View File

@ -4,42 +4,70 @@ import { Link } from "react-router-dom";
import { toast } from "react-toastify";
import QuestionMarkIcon from '@heroicons/react/24/outline/QuestionMarkCircleIcon'
import * as React from "react";
import DialogModal from "./DialogModal";
export default function NavBar({ appName, useAuth }: { appName: string, useAuth: any }) {
const [signupOpen, setSignupOpen] = useState(false);
const [loginOpen, setLoginOpen] = useState(false);
export default function NavBar({appName, useAuth} : {appName: string, useAuth : any}) {
const [email, setEmail] = useState<string>("");
const [userName, setUserName] = useState<string>("");
const [password, setPassword] = useState<string>("");
const { isAuthenticated, user, login, register, loading, logout, token } = useAuth();
const onRegister = () => {
toast.promise(
register({ email: email, password: password}, userName),
const onRegister = async () => {
await toast.promise(
register({ email: email, password: password }, userName),
{
success: {
render({data}){
render({ data }) {
return `Hi ${data?.first_name}`
},
// other options
icon: "✌️",
},
error: 'Error'
error: 'Error',
pending: '123 ...'
});
setSignupOpen(false);
}
const onLogin = () => {
toast.promise(
const onLogin = async () => {
await toast.promise(
login({ email: email, password: password }),
{
success: {
render({data}){
render({ data }) {
return `Hi ${data?.first_name}`
},
// other options
icon: "✌️",
},
error: 'Error'
error: 'Error',
pending: '123 ...'
});
setLoginOpen(false);
}
const onLogout = () => {
toast.promise(
logout(),
{
success: {
render() {
return `Bye bye`
},
// other options
icon: "👋",
},
error: 'Error',
pending: '123 ...'
});
}
@ -54,21 +82,21 @@ export default function NavBar({appName, useAuth} : {appName: string, useAuth :
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="tw-inline-block tw-w-5 tw-h-5 tw-stroke-current"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
<div className="tw-flex-1 tw-mr-2">
<div className="tw-flex-1 tw-truncate tw-grid tw-grid-flow-col tw-max-w-52">
<Link className="tw-btn tw-btn-ghost tw-px-2 tw-normal-case tw-text-xl tw-flex-1 tw-truncate" to={"/"}><p className="tw-truncate">{appName}</p></Link>
<button className="tw-btn tw-px-2 tw-btn-ghost" onClick={() => window.my_modal_3.showModal()}><QuestionMarkIcon className="tw-h-5 tw-w-5"/></button>
<div className="tw-flex-1 tw-truncate tw-grid tw-grid-flow-col tw-max-w-52">
<Link className="tw-btn tw-btn-ghost tw-px-2 tw-normal-case tw-text-xl tw-flex-1 tw-truncate" to={"/"}><p className="tw-truncate">{appName}</p></Link>
<button className="tw-btn tw-px-2 tw-btn-ghost" onClick={() => window.my_modal_3.showModal()}><QuestionMarkIcon className="tw-h-5 tw-w-5" /></button>
</div>
</div>
</div>
{isAuthenticated ?
<div className="tw-flex-none">
{user.avatar ? <div className="tw-avatar">
<div className="tw-w-10 tw-rounded-full">
<img src={"https://map.api.free-planet-earth.org/assets/"+user?.avatar+"?access_token="+token} />
</div>
<img src={"https://map.api.free-planet-earth.org/assets/" + user?.avatar + "?access_token=" + token} />
</div>
</div> : <></>}
<div className='tw-ml-2 tw-mr-2'>{user?.first_name}</div>
<div className="tw-dropdown tw-dropdown-end">
@ -77,49 +105,62 @@ export default function NavBar({appName, useAuth} : {appName: string, useAuth :
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
</svg>
</label>
<ul tabIndex={0} className="tw-menu tw-menu-compact tw-dropdown-content tw-mt-3 tw-p-2 tw-shadow tw-bg-base-100 tw-rounded-box tw-w-52 !tw-z-[1000]">
<ul tabIndex={0} className="tw-menu tw-menu-compact tw-dropdown-content tw-mt-3 tw-p-2 tw-shadow tw-bg-base-100 tw-rounded-box tw-w-52 !tw-z-[1500]">
<li><Link to={"/settings"}>Settings</Link></li>
<li><a onClick={() => { logout() }}>Logout</a></li>
<li><a onClick={() => { onLogout() }}>Logout</a></li>
</ul>
</div>
</div>
:
:
<div>
<div className="tw-dropdown tw-dropdown-end tw-mr-2">
<label tabIndex={0} className="tw-btn tw-btn-ghost">
<div className="tw-hidden md:tw-flex">
<div onClick={() => setLoginOpen(true)} className="tw-btn tw-btn-ghost tw-mr-2">
Login
</label>
<div tabIndex={0} className="tw-mt-3 tw-card tw-card-compact tw-dropdown-content tw-w-72 tw-bg-base-100 tw-shadow !tw-z-[1000]">
<div className="tw-card-body">
<input type="email" placeholder="E-Mail" value={email} onChange={e => setEmail(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" />
<input type="password" placeholder="Password" onChange={e => setPassword(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" />
<div className="tw-card-actions">
<button className={loading ? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary' : 'tw-btn tw-btn-primary tw-btn-block'} onClick={() => onLogin()}>{loading ? <span className="tw-loading tw-loading-spinner"></span> : 'Login'}</button>
</div>
</div>
</div>
</div>
<div className="tw-dropdown tw-dropdown-end tw-mr-2">
<label tabIndex={0} className="tw-btn tw-btn-ghost">
<div onClick={() => setSignupOpen(true)} className="tw-btn tw-btn-ghost tw-mr-2">
Sign Up
</label>
<div tabIndex={0} className="tw-mt-3 tw-card tw-card-compact tw-dropdown-content tw-w-72 tw-bg-base-100 tw-shadow !tw-z-[1000]">
<div className="tw-card-body">
<input type="text" placeholder="Name" value={userName} onChange={e => setUserName(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" />
<input type="email" placeholder="E-Mail" value={email} onChange={e => setEmail(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" />
<input type="password" placeholder="Password" onChange={e => setPassword(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" />
<div className="tw-card-actions">
<button className={loading ? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary' : 'tw-btn tw-btn-primary tw-btn-block'} onClick={() => onRegister()}>{loading ? <span className="tw-loading tw-loading-spinner"></span> : 'Sign Up'}</button>
</div>
</div>
</div>
</div>
</div>
<div className="tw-dropdown tw-dropdown-end">
<label tabIndex={1} className="tw-btn tw-btn-ghost md:tw-hidden">
<svg xmlns="http://www.w3.org/2000/svg" className="tw-h-5 tw-w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
</svg>
</label>
<ul tabIndex={1} className="tw-menu tw-menu-compact tw-dropdown-content tw-mt-3 tw-p-2 tw-shadow tw-bg-base-100 tw-rounded-box tw-w-52 !tw-z-[1500]">
<li><a onClick={() => setLoginOpen(true)}>Login</a></li>
<li><a onClick={() => setSignupOpen(true)}>Sign In</a></li>
</ul>
</div>
</div>
}
</div>
<DialogModal
title="Login"
isOpened={loginOpen}
onClose={() => setLoginOpen(false)}>
<input type="email" placeholder="E-Mail" value={email} onChange={e => setEmail(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" />
<input type="password" placeholder="Password" onChange={e => setPassword(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" />
<div className="tw-card-actions">
<button className={loading ? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary' : 'tw-btn tw-btn-primary tw-btn-block'} onClick={() => onLogin()}>{loading ? <span className="tw-loading tw-loading-spinner"></span> : 'Login'}</button>
</div>
</DialogModal>
<DialogModal
title="Sign Up"
isOpened={signupOpen}
onClose={() => setSignupOpen(false)}>
<input type="text" placeholder="Name" value={userName} onChange={e => setUserName(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" />
<input type="email" placeholder="E-Mail" value={email} onChange={e => setEmail(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" />
<input type="password" placeholder="Password" onChange={e => setPassword(e.target.value)} className="tw-input tw-input-bordered tw-w-full tw-max-w-xs" />
<div className="tw-card-actions">
<button className={loading ? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary' : 'tw-btn tw-btn-primary tw-btn-block'} onClick={() => onRegister()}>{loading ? <span className="tw-loading tw-loading-spinner"></span> : 'Sign Up'}</button>
</div>
</DialogModal>
</>
)
}

4
src/Components/Auth/index.tsx
View File

@ -1 +1,3 @@
export {AuthProvider, useAuth} from "./useAuth"
export {AuthProvider, useAuth} from "./useAuth"
export {LoginPage} from "./LoginPage"
export {SignupPage} from "./SignupPage"

14
src/Components/Auth/useAuth.tsx
View File

@ -52,12 +52,16 @@ export const AuthProvider = ({ userApi, children }: AuthProviderProps) => {
async function loadUser(): Promise<UserItem | undefined> {
try {
const me = await userApi.getUser();
setUser(me as UserItem);
const token = await userApi.getToken();
const token = await userApi.getToken();
setToken(token);
setLoading(false);
return me as UserItem;
if(token){
const me = await userApi.getUser();
setUser(me as UserItem);
setLoading(false);
return me as UserItem;
}
else return undefined;
} catch (error) {
setLoading(false)
return undefined;

2
src/Components/Templates/CardPage.tsx
View File

@ -15,7 +15,7 @@ export function CardPage({title,children} : {
<div className="tw-text-sm tw-breadcrumbs">
<ul>
<li><Link to={'/'} >Home</Link></li>
<li>FAQ</li>
<li>{title}</li>
</ul>
</div>
<TitleCard title={title} topMargin="mt-2">

3
src/index.tsx
View File

@ -1,6 +1,6 @@
export { UtopiaMap, Layer, Tags, Item, Tag } from './Components/Map/index';
export {AppShell, Content, SideBar} from "./Components/AppShell"
export {AuthProvider, useAuth} from "./Components/Auth"
export {AuthProvider, useAuth, LoginPage, SignupPage} from "./Components/Auth"
export {Settings} from './Components/Profile'
export {Quests, Modal} from './Components/Gaming'
export {TitleCard, CardPage} from './Components/Templates'
@ -10,5 +10,6 @@ import "./index.css"
declare global {
interface Window {
my_modal_3: any;
sign_up_modal: any;
}
}