mirror of
https://github.com/logto-io/logto.git
synced 2025-01-27 21:39:16 -05:00
feat(console): show get started guide on application creation success
This commit is contained in:
Charles Zhao
parent
3c0ff36817
commit
54c80383c6
18 changed files with 464 additions and 43 deletions
35
packages/console/src/assets/images/high-five.svg
Normal file
35
packages/console/src/assets/images/high-five.svg
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<svg width="786" height="203" viewBox="0 0 786 203" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M349.145 168.891C348.951 168.9 348.76 168.85 348.597 168.746C348.434 168.643 348.306 168.492 348.232 168.314C348.157 168.136 348.139 167.94 348.18 167.751C348.221 167.562 348.319 167.391 348.461 167.26C348.485 167.166 348.502 167.098 348.526 167.004C348.341 166.535 348.02 166.132 347.605 165.847C347.189 165.561 346.698 165.406 346.193 165.401C345.689 165.397 345.194 165.542 344.773 165.82C344.352 166.098 344.024 166.494 343.83 166.959C342.713 169.57 341.267 172.273 341.986 175.149C337.236 165.098 338.851 152.597 345.871 144.002C347.812 142.935 349.385 141.039 349.794 138.837C348.834 139.162 347.636 138.382 348.359 137.373C348.671 136.987 348.988 136.604 349.3 136.218C345.652 132.339 341.306 138.435 345.321 143.67C344.008 145.314 342.87 147.09 341.926 148.971C342.144 146.974 341.884 144.954 341.168 143.078C340.441 141.329 339.08 139.856 337.881 138.344C336.424 136.501 333.424 137.351 333.228 139.689C334.573 140.131 334.748 142.07 333.209 142.336C333.612 146.685 336.459 150.682 340.379 152.589C338.931 156.644 338.366 160.961 338.721 165.251C338.029 160.237 332.637 159.02 328.869 157.028C328.629 156.874 328.349 156.793 328.065 156.796C327.78 156.798 327.502 156.883 327.264 157.04C327.027 157.198 326.84 157.421 326.728 157.682C326.615 157.943 326.581 158.232 326.63 158.512C327.15 158.723 327.648 158.985 328.116 159.295C328.336 159.442 328.504 159.653 328.598 159.9C328.693 160.146 328.708 160.416 328.643 160.672C328.578 160.927 328.435 161.157 328.234 161.328C328.033 161.5 327.784 161.605 327.521 161.63C329.42 166.323 334.331 169.474 339.375 169.457C339.86 171.559 340.562 173.606 341.471 175.564H348.957C348.984 175.481 349.008 175.395 349.032 175.312C348.339 175.356 347.644 175.314 346.961 175.189C348.794 173.022 350.212 171.917 349.145 168.891L349.145 168.891Z" fill="#F2F2F2"/>
|
||||
<path d="M415.885 168.891C416.078 168.9 416.269 168.85 416.433 168.746C416.596 168.643 416.723 168.492 416.798 168.314C416.873 168.136 416.891 167.94 416.849 167.751C416.808 167.562 416.71 167.391 416.568 167.26C416.544 167.166 416.527 167.098 416.504 167.004C416.688 166.535 417.009 166.132 417.425 165.847C417.84 165.561 418.332 165.406 418.836 165.401C419.341 165.397 419.835 165.542 420.256 165.82C420.677 166.098 421.006 166.494 421.199 166.959C422.317 169.57 423.763 172.273 423.043 175.149C427.794 165.098 426.178 152.597 419.158 144.002C417.218 142.935 415.645 141.039 415.235 138.837C416.196 139.162 417.393 138.382 416.671 137.373C416.358 136.987 416.042 136.604 415.729 136.218C419.377 132.339 423.724 138.435 419.708 143.67C421.022 145.314 422.16 147.09 423.103 148.971C422.885 146.974 423.145 144.954 423.862 143.078C424.588 141.329 425.949 139.856 427.148 138.344C428.606 136.501 431.605 137.351 431.801 139.689C430.456 140.131 430.282 142.07 431.82 142.336C431.417 146.685 428.571 150.682 424.651 152.589C426.098 156.644 426.664 160.961 426.309 165.251C427.001 160.237 432.392 159.02 436.161 157.028C436.401 156.874 436.68 156.793 436.965 156.796C437.25 156.798 437.528 156.883 437.765 157.04C438.003 157.198 438.189 157.421 438.302 157.682C438.414 157.943 438.448 158.232 438.399 158.512C437.879 158.723 437.382 158.985 436.913 159.295C436.694 159.442 436.526 159.653 436.431 159.9C436.337 160.146 436.321 160.416 436.386 160.672C436.452 160.927 436.595 161.157 436.795 161.328C436.996 161.5 437.245 161.605 437.509 161.63C435.609 166.323 430.698 169.474 425.654 169.457C425.17 171.559 424.467 173.606 423.559 175.564H416.073C416.046 175.481 416.022 175.395 415.997 175.312C416.69 175.356 417.386 175.314 418.069 175.189C416.236 173.022 414.818 171.917 415.885 168.891L415.885 168.891Z" fill="#F2F2F2"/>
|
||||
<path d="M418.661 170.001L415.437 170.733L411.073 158.668L415.832 157.587L418.661 170.001Z" fill="#FFB6B6"/>
|
||||
<path d="M419.54 173.333L409.626 175.585L409.597 175.459C409.364 174.438 409.548 173.366 410.107 172.479C410.666 171.592 411.554 170.963 412.578 170.731L412.578 170.731L414.076 168.948L417.768 169.552L418.633 169.355L419.54 173.333Z" fill="#2F2E41"/>
|
||||
<path d="M470.668 111.189L472.44 113.976L462.518 122.127L459.902 118.014L470.668 111.189Z" fill="#FFB6B6"/>
|
||||
<path d="M473.517 109.245L478.968 117.813L478.859 117.882C477.973 118.444 476.9 118.631 475.876 118.403C474.851 118.175 473.96 117.55 473.397 116.665L473.397 116.665L471.212 115.854L470.544 112.18L470.068 111.432L473.517 109.245Z" fill="#2F2E41"/>
|
||||
<path d="M367.901 81.4L367.104 76.7926L379.21 71.3354L381.824 66.7146C381.74 66.3092 381.769 65.8883 381.91 65.4985C382.05 65.1087 382.295 64.7651 382.619 64.5058C382.942 64.2464 383.331 64.0814 383.742 64.0289C384.154 63.9764 384.572 64.0384 384.95 64.2082C385.329 64.378 385.653 64.6488 385.887 64.9909C386.121 65.333 386.255 65.7329 386.276 66.1466C386.296 66.5602 386.202 66.9714 386.003 67.3348C385.804 67.6983 385.508 67.9997 385.148 68.2059L380.848 74.8435L367.901 81.4Z" fill="#A0616A"/>
|
||||
<path d="M364.22 77.6335L369.672 74.8535L371.115 80.263L367.328 83.0651L364.22 77.6335Z" fill="#6C63FF"/>
|
||||
<path d="M351.987 169.582L355.284 169.582L356.852 156.89L351.987 156.89L351.987 169.582Z" fill="#A0616A"/>
|
||||
<path d="M356.381 169.878V167.647L355.514 167.7L351.986 167.909L351.17 167.959L350.546 175.43L350.512 175.831H352.853L352.928 175.433L353.268 173.625L354.146 175.433L354.338 175.831H360.543C360.913 175.829 361.266 175.681 361.527 175.42C361.788 175.159 361.935 174.806 361.936 174.437C362.198 173.216 357.038 170.576 356.381 169.878Z" fill="#2F2E41"/>
|
||||
<path d="M312.86 119.211L312.091 122.411L324.09 126.893L325.224 122.17L312.86 119.211Z" fill="#A0616A"/>
|
||||
<path d="M311.808 123.407L313.981 123.927L314.131 123.073L314.75 119.6L314.892 118.796L307.76 116.448L307.377 116.322L306.832 118.594L307.202 118.76L308.884 119.512L306.918 119.942L306.485 120.036L305.039 126.06C304.955 126.419 305.016 126.796 305.21 127.111C305.403 127.425 305.712 127.65 306.071 127.737C307.2 128.276 310.974 123.882 311.808 123.407Z" fill="#2F2E41"/>
|
||||
<path d="M357.084 87.437L352.841 85.457L344.38 95.6789L339.226 96.98C338.857 96.792 338.442 96.7096 338.029 96.7419C337.615 96.7742 337.219 96.9201 336.883 97.1633C336.547 97.4065 336.285 97.7376 336.126 98.1201C335.967 98.5026 335.917 98.9215 335.981 99.3306C336.046 99.7398 336.222 100.123 336.491 100.438C336.76 100.754 337.111 100.989 337.505 101.117C337.9 101.246 338.322 101.263 338.726 101.167C339.129 101.071 339.498 100.866 339.792 100.574L347.339 98.1796L357.084 87.437Z" fill="#A0616A"/>
|
||||
<path d="M381.105 121.435C370.561 121.435 358.443 109.753 347.722 115.303C315.26 132.107 319.728 103.989 310.402 93.531L310.708 92.918C320.998 102.129 333.846 109.623 347.862 114.59C360.529 119.079 373.29 121.159 384.762 120.61L384.782 121.347C383.571 121.406 382.345 121.435 381.105 121.435Z" fill="#F2F2F2"/>
|
||||
<path d="M386.298 34.7806C387.883 34.7806 389.168 33.4979 389.168 31.9155C389.168 30.3331 387.883 29.0503 386.298 29.0503C384.713 29.0503 383.428 30.3331 383.428 31.9155C383.428 33.4979 384.713 34.7806 386.298 34.7806Z" fill="#FF6584"/>
|
||||
<path opacity="0.3" d="M396.336 47.6163L412.668 0L394.735 47.0463C394.646 47.1579 394.585 47.2891 394.558 47.4289C394.53 47.5687 394.536 47.7131 394.575 47.8501C394.615 47.9871 394.686 48.1127 394.784 48.2167C394.881 48.3206 395.002 48.3997 395.137 48.4476C395.271 48.4955 395.415 48.5106 395.557 48.4918C395.698 48.4731 395.833 48.4209 395.951 48.3396C396.068 48.2583 396.164 48.1503 396.231 48.0245C396.298 47.8987 396.334 47.7588 396.336 47.6163H396.336Z" fill="#F0F0F0"/>
|
||||
<path d="M379.852 105.627C381.394 105.627 382.644 104.378 382.644 102.839C382.644 101.299 381.394 100.051 379.852 100.051C378.31 100.051 377.059 101.299 377.059 102.839C377.059 104.378 378.31 105.627 379.852 105.627Z" fill="#F2F2F2"/>
|
||||
<path d="M352.807 103.902C352.807 103.902 345.845 108.428 347.686 111.435C347.749 111.538 339.371 122.586 339.371 122.586L323.553 121.583L322.996 126.868L337.078 130.94C337.078 130.94 340.523 133.466 343.184 130.682C345.845 127.899 354.71 119.374 354.71 119.374L355.137 136.585L350.687 160.434L357.332 160.014L363.799 136.087L366.186 108.984L352.807 103.902Z" fill="#2F2E41"/>
|
||||
<path d="M357.765 76.7434L354.838 78.9581L351.501 86.0672L354.71 90.4173C354.71 90.4173 357.408 95.0866 353.088 99.6086C348.768 104.131 345.451 108.96 348.909 108.788C352.367 108.615 366.371 115.726 366.463 109.9C366.555 104.075 366.742 99.6086 366.742 99.6086L370.413 90.3122C370.413 90.3122 372.601 84.7663 371.065 83.1063C369.529 81.4462 367.473 79.3249 367.473 79.3249L363.733 75.5918H360.357L357.765 76.7434Z" fill="#6C63FF"/>
|
||||
<path d="M363.23 63.084C369.797 66.8147 364.406 76.6582 357.716 73.153C351.149 69.4224 356.54 59.5789 363.23 63.084Z" fill="#A0616A"/>
|
||||
<path d="M366.742 65.1526C366.281 65.7501 365.32 65.4699 363.437 65.8963C363.441 65.2592 363.368 64.624 363.218 64.0047C363.078 64.7715 362.771 65.4981 362.319 66.1335C360.684 66.3145 362.688 71.2725 361.851 74.9178C360.772 67.2274 358.504 69.2422 359.65 70.7676C360.383 71.7441 359.894 74.6736 357.693 73.2089C354.062 74.9318 348.89 66.3732 354.622 62.3594C354.52 60.1898 356.938 59.8471 358.427 60.5141C362.041 57.8267 366.17 61.2702 366.742 65.1526Z" fill="#2F2E41"/>
|
||||
<path d="M349.891 59.5411C348.429 68.5155 340.592 57.8907 336.907 66.7223C335.749 69.9206 337.736 72.2086 338.994 74.8634C339.281 77.0451 336.438 78.152 336.14 80.1602C336.057 84.7644 343.498 84.4826 345.578 81.5778C347.715 78.537 345.163 74.4572 346.448 71.1933C348.253 66.6618 355.596 66.6281 356.236 61.3561C354.997 59.5949 351.666 57.5777 349.891 59.5411Z" fill="#2F2E41"/>
|
||||
<path d="M355.814 60.4182C355.767 60.4383 355.719 60.4584 355.676 60.481H355.673C355.633 60.5011 355.593 60.5212 355.553 60.5439C355.547 60.5464 355.545 60.5489 355.54 60.5514C355.487 60.5012 355.434 60.4509 355.379 60.4006C355.364 60.4825 355.368 60.5665 355.389 60.6469L355.396 60.6771C355.447 60.7298 355.5 60.7801 355.555 60.8329C355.605 60.7952 355.653 60.755 355.704 60.7173C355.734 60.6922 355.764 60.667 355.797 60.6419C355.802 60.5765 355.809 60.5011 355.817 60.4182L355.814 60.4182ZM357.33 57.6235C356.207 57.3671 355.845 58.8324 355.736 59.5386C355.328 56.9751 353.632 57.7818 354.218 59.531C354.405 60.0489 354.699 60.5216 355.082 60.9183C355.135 60.9786 355.193 61.039 355.253 61.0993C355.185 61.4511 355.527 61.3607 355.991 61.0365C356.333 60.7936 356.649 60.5166 356.935 60.2096C357.859 59.242 358.579 57.9477 357.33 57.6235ZM357.365 59.0661C357.019 59.512 356.63 59.9236 356.205 60.2951C356.071 60.4157 355.935 60.5313 355.797 60.6419C355.794 60.6645 355.794 60.6846 355.792 60.7022C355.782 60.7266 355.77 60.7502 355.756 60.7726C355.615 61.0264 355.457 60.8882 355.396 60.6771C355.391 60.6695 355.384 60.662 355.379 60.6544C355.178 60.447 355.003 60.2157 354.858 59.9658C353.818 58.1663 355.492 56.9424 355.409 60.3026C355.394 60.3334 355.384 60.3665 355.379 60.4006C355.364 60.4825 355.368 60.5665 355.389 60.6469L355.396 60.6771C355.447 60.7298 355.5 60.7801 355.555 60.8329C355.605 60.7952 355.653 60.755 355.704 60.7173C355.734 60.6922 355.764 60.667 355.797 60.6419C355.802 60.5765 355.809 60.5011 355.817 60.4182V60.4157C355.882 59.7421 356.061 58.5308 356.391 58.2015C357.116 57.6461 358.055 58.2468 357.365 59.0661ZM355.814 60.4182C355.767 60.4383 355.719 60.4584 355.676 60.481H355.673C355.633 60.5011 355.593 60.5212 355.553 60.5439C355.547 60.5464 355.545 60.5489 355.54 60.5514C355.487 60.5012 355.434 60.4509 355.379 60.4006C355.364 60.4825 355.368 60.5665 355.389 60.6469L355.396 60.6771C355.447 60.7298 355.5 60.7801 355.555 60.8329C355.605 60.7952 355.653 60.755 355.704 60.7173C355.734 60.6922 355.764 60.667 355.797 60.6419C355.802 60.5765 355.809 60.5011 355.817 60.4182L355.814 60.4182Z" fill="#2F2E41"/>
|
||||
<path d="M416.515 109.897L414.089 116.211L402.711 138.617L412.709 164.682L417.869 163.322L413.616 138.617L425.818 123.817L440.308 133.628C440.308 133.628 446.734 138.637 449.179 133.889C451.624 129.141 467.443 119.042 467.443 119.042L463.529 114.874L445.312 123.385L432.739 105.718L416.515 109.897Z" fill="#2F2E41"/>
|
||||
<path d="M428.753 80.1112L424.761 75.8288L417.912 74.8882L409.52 80.7531L409.604 87.2449L413.753 102.542C413.753 102.542 412.172 113.532 416.586 113.422C421 113.312 423.406 111.115 425.203 111.562C427.001 112.01 434.643 113.913 435.127 111.919C435.611 109.926 438.185 111.353 438.072 109.467C437.959 107.582 431.104 93.9884 431.104 93.9884L432.808 80.394L428.753 80.1112Z" fill="#6C63FF"/>
|
||||
<path d="M454.034 60.3986C454.07 60.7537 454.027 61.1123 453.909 61.4492C453.791 61.7861 453.6 62.093 453.35 62.3484C453.1 62.6037 452.798 62.8013 452.463 62.9272C452.128 63.053 451.77 63.1041 451.414 63.0769L442.232 80.5092L439.767 76.7315L449.152 60.2791C449.237 59.6843 449.539 59.1415 449.998 58.7535C450.458 58.3655 451.044 58.1594 451.646 58.1741C452.248 58.1888 452.823 58.4234 453.263 58.8334C453.704 59.2434 453.978 59.8003 454.034 60.3986Z" fill="#FFB6B6"/>
|
||||
<path d="M425.128 83.3523C425.128 83.3523 424.764 86.4531 428.261 87.2208C431.758 87.9885 441.446 82.4622 443.034 81.6182C443.531 81.3539 444.206 80.0584 444.899 78.4034C445.21 77.6604 445.524 76.845 445.828 76.0178C446.003 75.5392 446.844 75.4086 447.01 74.9339C447.174 74.4618 446.663 73.6456 446.812 73.2007C447.52 71.0889 448.021 69.4135 448.021 69.4135L445.703 65.0674C442.462 66.7781 440.799 70.5462 439.577 74.8875L425.128 83.3523Z" fill="#6C63FF"/>
|
||||
<path d="M384.29 64.4018C384.344 64.7545 384.476 65.0911 384.674 65.3877C384.873 65.6844 385.135 65.9339 385.441 66.1187C385.747 66.3035 386.089 66.4191 386.445 66.4574C386.8 66.4957 387.16 66.4557 387.498 66.3403L400.758 80.924L402.198 76.6506L388.987 63.0664C388.755 62.5119 388.327 62.0616 387.785 61.8008C387.242 61.54 386.623 61.4869 386.044 61.6515C385.465 61.8161 384.967 62.187 384.644 62.6939C384.32 63.2008 384.194 63.8084 384.29 64.4018Z" fill="#FFB6B6"/>
|
||||
<path d="M418.03 79.4037C418.03 79.4037 419.16 82.3148 415.966 83.9317C412.773 85.5485 402.008 82.6185 400.259 82.1981C399.711 82.0665 398.733 80.9808 397.648 79.5515C397.161 78.9098 396.652 78.1988 396.151 77.4738C395.861 77.0543 395.014 77.1379 394.735 76.7197C394.457 76.3037 394.747 75.3859 394.491 74.9924C393.277 73.1245 392.371 71.6276 392.371 71.6276L393.526 66.8408C397.093 67.6873 399.647 70.9202 401.919 74.8178L418.03 79.4037Z" fill="#6C63FF"/>
|
||||
<path d="M421.473 73.7986C425.072 73.7986 427.989 70.886 427.989 67.2931C427.989 63.7002 425.072 60.7876 421.473 60.7876C417.874 60.7876 414.956 63.7002 414.956 67.2931C414.956 70.886 417.874 73.7986 421.473 73.7986Z" fill="#FFB6B6"/>
|
||||
<path d="M428.912 63.5684C428.226 62.5097 426.94 61.8042 425.693 62.0024C425.577 61.2079 425.245 60.4605 424.732 59.8414C424.22 59.2224 423.548 58.7554 422.788 58.4915C422.029 58.2275 421.211 58.1767 420.425 58.3444C419.638 58.5122 418.913 58.8921 418.328 59.4429C418.135 59.3077 417.911 59.2243 417.677 59.2009C417.443 59.1775 417.206 59.2149 416.991 59.3094C416.562 59.5042 416.188 59.8034 415.905 60.1796C415.189 61.0704 414.729 62.1383 414.573 63.2695C414.418 64.4007 414.572 65.553 415.02 66.6036C414.868 66.0505 415.423 65.5301 415.984 65.406C416.545 65.2819 417.133 65.3993 417.702 65.3185C418.431 65.2149 419.087 64.7927 419.817 64.6976C420.436 64.6574 421.058 64.7371 421.647 64.9323C422.235 65.1275 422.856 65.2107 423.475 65.1775C424.09 65.1046 424.882 67.43 424.871 69.0678C424.869 69.3782 424.933 69.7767 425.237 69.8426C425.611 69.9237 425.828 69.4081 426.184 69.2676C426.348 69.2207 426.524 69.2392 426.675 69.3192C426.826 69.3992 426.94 69.5346 426.992 69.6967C427.037 69.8615 427.042 70.0346 427.006 70.2017C426.971 70.3687 426.896 70.5248 426.787 70.657C426.568 70.9191 426.308 71.1441 426.018 71.3235L426.164 71.4453C426.303 71.5922 426.49 71.6861 426.691 71.711C426.892 71.736 427.095 71.6903 427.266 71.5819C427.602 71.3546 427.875 71.045 428.057 70.6827C428.745 69.6215 429.236 68.446 429.508 67.2118C429.738 65.9723 429.597 64.6271 428.912 63.5684Z" fill="#2F2E41"/>
|
||||
<path d="M477.122 89.2261C468.716 95.5815 451.992 93.5738 446.801 104.46C431.087 137.421 417.643 112.313 403.884 109.598L403.757 108.924C417.531 110.065 432.305 108.295 446.482 103.807C459.295 99.7509 470.725 93.7173 479.538 86.3652L480 86.9407C479.07 87.7174 478.11 88.4792 477.122 89.2261Z" fill="#F2F2F2"/>
|
||||
<path d="M441.584 175.556C441.383 176.148 327.083 176.148 326.867 175.557C327.067 174.964 441.367 174.964 441.584 175.556Z" fill="#CCCCCC"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 16 KiB |
24
packages/console/src/assets/images/tada.svg
Normal file
24
packages/console/src/assets/images/tada.svg
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2113_14561)">
|
||||
<path d="M7.75042 4.9922C7.67576 5.06686 7.61909 5.15686 7.57176 5.25553L7.56642 5.2502L0.0890901 22.0942L0.0964234 22.1015C-0.0422433 22.3702 0.189757 22.9169 0.66509 23.3929C1.14042 23.8682 1.68709 24.1002 1.95576 23.9615L1.96242 23.9682L18.8064 16.4902L18.8011 16.4842C18.8991 16.4375 18.9891 16.3809 19.0644 16.3049C20.1058 15.2635 18.4171 11.8869 15.2938 8.76286C12.1691 5.63886 8.79242 3.95086 7.75042 4.9922Z" fill="#DD2E44"/>
|
||||
<path d="M8.66642 8L0.27709 21.6707L0.0890901 22.094L0.0964234 22.1013C-0.0422433 22.37 0.189757 22.9167 0.66509 23.3927C0.819757 23.5473 0.980423 23.6647 1.13776 23.764L11.3331 11.3333L8.66642 8Z" fill="#EA596E"/>
|
||||
<path d="M15.3418 8.7107C18.4551 11.8254 20.1838 15.1454 19.2011 16.1267C18.2191 17.1094 14.8991 15.3814 11.7838 12.268C8.66977 9.15336 6.94177 5.83203 7.92377 4.85003C8.90643 3.86803 12.2264 5.59603 15.3418 8.7107Z" fill="#A0041E"/>
|
||||
<path d="M12.3932 9.07254C12.2606 9.17987 12.0872 9.23587 11.9039 9.21587C11.3252 9.1532 10.8386 8.95187 10.4979 8.63387C10.1372 8.29721 9.95923 7.8452 10.0079 7.39254C10.0932 6.59787 10.8906 5.86854 12.2499 6.0152C12.7786 6.07187 13.0146 5.90187 13.0226 5.82054C13.0319 5.73987 12.8379 5.52321 12.3092 5.46587C11.7306 5.40321 11.2439 5.20187 10.9026 4.88387C10.5419 4.5472 10.3632 4.09521 10.4126 3.64254C10.4992 2.84787 11.2959 2.11854 12.6539 2.26587C13.0392 2.30721 13.2426 2.22787 13.3286 2.17654C13.3972 2.13454 13.4246 2.09454 13.4272 2.07121C13.4352 1.99054 13.2439 1.77387 12.7139 1.71654C12.3479 1.67654 12.0826 1.34854 12.1232 0.981872C12.1626 0.615872 12.4899 0.351205 12.8572 0.391205C14.2152 0.537205 14.8392 1.41921 14.7532 2.21454C14.6666 3.01054 13.8699 3.73854 12.5106 3.59254C12.1252 3.55054 11.9239 3.63054 11.8372 3.68187C11.7686 3.7232 11.7406 3.76387 11.7379 3.78654C11.7292 3.86787 11.9219 4.08387 12.4519 4.1412C13.8099 4.28787 14.4339 5.16921 14.3479 5.96454C14.2619 6.7592 13.4652 7.48854 12.1066 7.34121C11.7212 7.29987 11.5186 7.37987 11.4319 7.43054C11.3626 7.47321 11.3359 7.51321 11.3332 7.53587C11.3246 7.61654 11.5172 7.83321 12.0466 7.89054C12.4119 7.93054 12.6779 8.2592 12.6372 8.62521C12.6186 8.80787 12.5259 8.96587 12.3932 9.07254Z" fill="#AA8DD8"/>
|
||||
<path d="M20.4411 15.2379C21.7564 14.8666 22.6638 15.4532 22.8798 16.2232C23.0958 16.9926 22.6278 17.9666 21.3131 18.3366C20.7998 18.4806 20.6458 18.7259 20.6664 18.8039C20.6891 18.8826 20.9498 19.0119 21.4618 18.8672C22.7764 18.4972 23.6838 19.0839 23.8998 19.8532C24.1171 20.6232 23.6478 21.5959 22.3324 21.9666C21.8198 22.1106 21.6651 22.3566 21.6878 22.4346C21.7098 22.5126 21.9698 22.6419 22.4824 22.4979C22.8358 22.3986 23.2051 22.6046 23.3044 22.9586C23.4031 23.3132 23.1971 23.6812 22.8424 23.7812C21.5284 24.1512 20.6204 23.5659 20.4031 22.7952C20.1871 22.0259 20.6558 21.0532 21.9718 20.6826C22.4851 20.5379 22.6391 20.2932 22.6164 20.2146C22.5951 20.1366 22.3351 20.0066 21.8231 20.1506C20.5071 20.5212 19.6004 19.9359 19.3838 19.1646C19.1671 18.3952 19.6358 17.4226 20.9511 17.0512C21.4631 16.9079 21.6171 16.6612 21.5958 16.5839C21.5731 16.5052 21.3138 16.3759 20.8011 16.5199C20.4464 16.6199 20.0791 16.4132 19.9791 16.0592C19.8798 15.7059 20.0864 15.3379 20.4411 15.2379Z" fill="#77B255"/>
|
||||
<path d="M15.3342 13.4401C15.1382 13.4401 14.9449 13.3541 14.8129 13.1901C14.5829 12.9021 14.6302 12.4828 14.9169 12.2528C15.0622 12.1361 18.5289 9.41345 23.4282 10.1141C23.7929 10.1661 24.0462 10.5034 23.9942 10.8681C23.9422 11.2321 23.6075 11.4881 23.2395 11.4334C18.9109 10.8188 15.7815 13.2695 15.7509 13.2941C15.6269 13.3928 15.4802 13.4401 15.3342 13.4401Z" fill="#AA8DD8"/>
|
||||
<path d="M3.83631 10.6667C3.77297 10.6667 3.70831 10.6574 3.64431 10.6387C3.29164 10.5327 3.09164 10.1614 3.19764 9.80873C3.95297 7.29339 4.63764 3.27939 3.79631 2.23273C3.70231 2.11406 3.56031 1.99739 3.23497 2.02206C2.60964 2.07006 2.66897 3.38939 2.66964 3.40273C2.69764 3.77006 2.42164 4.09006 2.05497 4.11739C1.68231 4.14006 1.36764 3.86939 1.34031 3.50206C1.27164 2.58273 1.55764 0.81206 3.13497 0.692727C3.83897 0.639394 4.42364 0.88406 4.83631 1.39739C6.41697 3.36473 4.81231 9.06806 4.47497 10.1921C4.38831 10.4807 4.12297 10.6667 3.83631 10.6667Z" fill="#77B255"/>
|
||||
<path d="M17 7.3335C17.5523 7.3335 18 6.88578 18 6.3335C18 5.78121 17.5523 5.3335 17 5.3335C16.4477 5.3335 16 5.78121 16 6.3335C16 6.88578 16.4477 7.3335 17 7.3335Z" fill="#5C913B"/>
|
||||
<path d="M1.33333 13.3332C2.06971 13.3332 2.66667 12.7362 2.66667 11.9998C2.66667 11.2635 2.06971 10.6665 1.33333 10.6665C0.596954 10.6665 0 11.2635 0 11.9998C0 12.7362 0.596954 13.3332 1.33333 13.3332Z" fill="#9266CC"/>
|
||||
<path d="M21.667 14C22.2193 14 22.667 13.5523 22.667 13C22.667 12.4477 22.2193 12 21.667 12C21.1147 12 20.667 12.4477 20.667 13C20.667 13.5523 21.1147 14 21.667 14Z" fill="#5C913B"/>
|
||||
<path d="M15.667 22C16.2193 22 16.667 21.5523 16.667 21C16.667 20.4477 16.2193 20 15.667 20C15.1147 20 14.667 20.4477 14.667 21C14.667 21.5523 15.1147 22 15.667 22Z" fill="#5C913B"/>
|
||||
<path d="M18.6663 4.00016C19.4027 4.00016 19.9997 3.40321 19.9997 2.66683C19.9997 1.93045 19.4027 1.3335 18.6663 1.3335C17.93 1.3335 17.333 1.93045 17.333 2.66683C17.333 3.40321 17.93 4.00016 18.6663 4.00016Z" fill="#FFCC4D"/>
|
||||
<path d="M21.667 6.6665C22.2193 6.6665 22.667 6.21879 22.667 5.6665C22.667 5.11422 22.2193 4.6665 21.667 4.6665C21.1147 4.6665 20.667 5.11422 20.667 5.6665C20.667 6.21879 21.1147 6.6665 21.667 6.6665Z" fill="#FFCC4D"/>
|
||||
<path d="M19.667 9.3335C20.2193 9.3335 20.667 8.88578 20.667 8.3335C20.667 7.78121 20.2193 7.3335 19.667 7.3335C19.1147 7.3335 18.667 7.78121 18.667 8.3335C18.667 8.88578 19.1147 9.3335 19.667 9.3335Z" fill="#FFCC4D"/>
|
||||
<path d="M5 16.6665C5.55228 16.6665 6 16.2188 6 15.6665C6 15.1142 5.55228 14.6665 5 14.6665C4.44772 14.6665 4 15.1142 4 15.6665C4 16.2188 4.44772 16.6665 5 16.6665Z" fill="#FFCC4D"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_2113_14561">
|
||||
<rect width="24" height="24" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
|
|
@ -43,5 +43,6 @@ $font-family: 'SF UI Text', 'SF Pro Display', sans-serif;
|
|||
--font-caption-bold: 600 14px/20px #{$font-family};
|
||||
--font-button: 500 14px/20px #{$font-family};
|
||||
--font-subhead-2: 500 14px/20px #{$font-family};
|
||||
--font-label-large: 500 20px/32px #{$font-family};
|
||||
--font-label-medium: 500 12px/16px #{$font-family};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { AdminConsoleKey } from '@logto/phrases';
|
||||
import React from 'react';
|
||||
import React, { ReactNode } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import * as styles from './index.module.scss';
|
||||
|
|
@ -9,15 +9,32 @@ type Props = {
|
|||
subtitle?: AdminConsoleKey;
|
||||
};
|
||||
|
||||
type RawProps = {
|
||||
title: ReactNode;
|
||||
subtitle?: ReactNode;
|
||||
};
|
||||
|
||||
/**
|
||||
* Do not use this component directly, unless you do not want to use translation.
|
||||
*/
|
||||
export const RawCardTitle = ({ title, subtitle }: RawProps) => (
|
||||
<div>
|
||||
<div className={styles.title}>{title}</div>
|
||||
{subtitle && <div className={styles.subtitle}>{subtitle}</div>}
|
||||
</div>
|
||||
);
|
||||
|
||||
/**
|
||||
* Always use this component to render CardTitle, with built-in i18n support.
|
||||
*/
|
||||
const CardTitle = ({ title, subtitle }: Props) => {
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||
const props: RawProps = {
|
||||
title: t(title),
|
||||
subtitle: subtitle ? t(subtitle) : undefined,
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.title}>{t(title)}</div>
|
||||
{subtitle && <div className={styles.subtitle}>{t(subtitle)}</div>}
|
||||
</div>
|
||||
);
|
||||
return <RawCardTitle {...props} />;
|
||||
};
|
||||
|
||||
export default CardTitle;
|
||||
|
|
|
|||
|
|
@ -9,21 +9,23 @@
|
|||
border-radius: 6px;
|
||||
font: var(--font-button);
|
||||
transition: background 0.2s ease-in-out;
|
||||
padding: 0;
|
||||
padding: _.unit(1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&:disabled {
|
||||
color: var(--color-neutral-80);
|
||||
> svg {
|
||||
fill: var(--color-component-caption);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid var(--color-overlay-12);
|
||||
&:disabled {
|
||||
> svg {
|
||||
fill: var(--color-neutral-80);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--color-neutral-90);
|
||||
background: var(--color-overlay-12);
|
||||
}
|
||||
|
||||
&:not(:disabled) {
|
||||
|
|
@ -31,21 +33,27 @@
|
|||
}
|
||||
|
||||
&:not(:disabled):hover {
|
||||
color: var(--color-primary-30);
|
||||
background: var(--color-overlay-8);
|
||||
}
|
||||
|
||||
&.small {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
> svg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&.medium {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
> svg {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&.large {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
> svg {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ const Check = () => (
|
|||
);
|
||||
|
||||
export type Props = {
|
||||
className?: string;
|
||||
value: string;
|
||||
title: string;
|
||||
name?: string;
|
||||
|
|
@ -25,7 +26,16 @@ export type Props = {
|
|||
tabIndex?: number;
|
||||
};
|
||||
|
||||
const Radio = ({ value, title, name, children, isChecked, onClick, tabIndex }: Props) => {
|
||||
const Radio = ({
|
||||
className,
|
||||
value,
|
||||
title,
|
||||
name,
|
||||
children,
|
||||
isChecked,
|
||||
onClick,
|
||||
tabIndex,
|
||||
}: Props) => {
|
||||
const handleKeyPress: KeyboardEventHandler<HTMLDivElement> = useCallback(
|
||||
(event) => {
|
||||
if ([' ', 'Enter'].includes(event.key)) {
|
||||
|
|
@ -38,7 +48,7 @@ const Radio = ({ value, title, name, children, isChecked, onClick, tabIndex }: P
|
|||
|
||||
return (
|
||||
<div
|
||||
className={classNames(styles.radio, isChecked && styles.checked)}
|
||||
className={classNames(styles.radio, className, isChecked && styles.checked)}
|
||||
tabIndex={tabIndex}
|
||||
onClick={onClick}
|
||||
onKeyPress={handleKeyPress}
|
||||
|
|
|
|||
3
packages/console/src/components/Spacer/index.module.scss
Normal file
3
packages/console/src/components/Spacer/index.module.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
9
packages/console/src/components/Spacer/index.tsx
Normal file
9
packages/console/src/components/Spacer/index.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import React from 'react';
|
||||
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
const Spacer = () => {
|
||||
return <div className={styles.spacer} />;
|
||||
};
|
||||
|
||||
export default Spacer;
|
||||
|
|
@ -2,17 +2,14 @@ import React, { SVGProps } from 'react';
|
|||
|
||||
const Close = (props: SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 18 18"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
d="M10.41 9L16.71 2.71C16.8983 2.52169 17.0041 2.2663 17.0041 2C17.0041 1.7337 16.8983 1.4783 16.71 1.29C16.5217 1.10169 16.2663 0.995907 16 0.995907C15.7337 0.995907 15.4783 1.10169 15.29 1.29L9 7.59L2.71 1.29C2.5217 1.10169 2.2663 0.995907 2 0.995907C1.7337 0.995907 1.4783 1.10169 1.29 1.29C1.1017 1.4783 0.995909 1.7337 0.995908 2C0.995908 2.2663 1.1017 2.52169 1.29 2.71L7.59 9L1.29 15.29C1.19627 15.383 1.12188 15.4936 1.07111 15.6154C1.02034 15.7373 0.994202 15.868 0.994202 16C0.994202 16.132 1.02034 16.2627 1.07111 16.3846C1.12188 16.5064 1.19627 16.617 1.29 16.71C1.38296 16.8037 1.49356 16.8781 1.61542 16.9289C1.73728 16.9797 1.86799 17.0058 2 17.0058C2.13201 17.0058 2.26272 16.9797 2.38458 16.9289C2.50644 16.8781 2.61704 16.8037 2.71 16.71L9 10.41L15.29 16.71C15.383 16.8037 15.4936 16.8781 15.6154 16.9289C15.7373 16.9797 15.868 17.0058 16 17.0058C16.132 17.0058 16.2627 16.9797 16.3846 16.9289C16.5064 16.8781 16.617 16.8037 16.71 16.71C16.8037 16.617 16.8781 16.5064 16.9289 16.3846C16.9797 16.2627 17.0058 16.132 17.0058 16C17.0058 15.868 16.9797 15.7373 16.9289 15.6154C16.8781 15.4936 16.8037 15.383 16.71 15.29L10.41 9Z"
|
||||
fill="#747778"
|
||||
/>
|
||||
<path d="M13.4099 12.0002L19.7099 5.71019C19.8982 5.52188 20.004 5.26649 20.004 5.00019C20.004 4.73388 19.8982 4.47849 19.7099 4.29019C19.5216 4.10188 19.2662 3.99609 18.9999 3.99609C18.7336 3.99609 18.4782 4.10188 18.2899 4.29019L11.9999 10.5902L5.70994 4.29019C5.52164 4.10188 5.26624 3.99609 4.99994 3.99609C4.73364 3.99609 4.47824 4.10188 4.28994 4.29019C4.10164 4.47849 3.99585 4.73388 3.99585 5.00019C3.99585 5.26649 4.10164 5.52188 4.28994 5.71019L10.5899 12.0002L4.28994 18.2902C4.19621 18.3831 4.12182 18.4937 4.07105 18.6156C4.02028 18.7375 3.99414 18.8682 3.99414 19.0002C3.99414 19.1322 4.02028 19.2629 4.07105 19.3848C4.12182 19.5066 4.19621 19.6172 4.28994 19.7102C4.3829 19.8039 4.4935 19.8783 4.61536 19.9291C4.73722 19.9798 4.86793 20.006 4.99994 20.006C5.13195 20.006 5.26266 19.9798 5.38452 19.9291C5.50638 19.8783 5.61698 19.8039 5.70994 19.7102L11.9999 13.4102L18.2899 19.7102C18.3829 19.8039 18.4935 19.8783 18.6154 19.9291C18.7372 19.9798 18.8679 20.006 18.9999 20.006C19.132 20.006 19.2627 19.9798 19.3845 19.9291C19.5064 19.8783 19.617 19.8039 19.7099 19.7102C19.8037 19.6172 19.8781 19.5066 19.9288 19.3848C19.9796 19.2629 20.0057 19.1322 20.0057 19.0002C20.0057 18.8682 19.9796 18.7375 19.9288 18.6156C19.8781 18.4937 19.8037 18.3831 19.7099 18.2902L13.4099 12.0002Z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import { Application, ApplicationType } from '@logto/schemas';
|
||||
import React from 'react';
|
||||
import { Application, ApplicationType, Setting } from '@logto/schemas';
|
||||
import React, { useState } from 'react';
|
||||
import { useController, useForm } from 'react-hook-form';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import Modal from 'react-modal';
|
||||
import useSWR from 'swr';
|
||||
|
||||
import Button from '@/components/Button';
|
||||
import Card from '@/components/Card';
|
||||
|
|
@ -10,10 +12,12 @@ import FormField from '@/components/FormField';
|
|||
import IconButton from '@/components/IconButton';
|
||||
import RadioGroup, { Radio } from '@/components/RadioGroup';
|
||||
import TextInput from '@/components/TextInput';
|
||||
import useApi from '@/hooks/use-api';
|
||||
import useApi, { RequestError } from '@/hooks/use-api';
|
||||
import Close from '@/icons/Close';
|
||||
import * as modalStyles from '@/scss/modal.module.scss';
|
||||
import { applicationTypeI18nKey } from '@/types/applications';
|
||||
|
||||
import GetStarted from '../GetStarted';
|
||||
import TypeDescription from '../TypeDescription';
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
|
|
@ -28,6 +32,8 @@ type Props = {
|
|||
};
|
||||
|
||||
const CreateForm = ({ onClose }: Props) => {
|
||||
const [createdApp, setCreatedApp] = useState<Application>();
|
||||
const [isQuickStartGuideOpen, setIsQuickStartGuideOpen] = useState(false);
|
||||
const {
|
||||
handleSubmit,
|
||||
control,
|
||||
|
|
@ -38,13 +44,26 @@ const CreateForm = ({ onClose }: Props) => {
|
|||
field: { onChange, value, name, ref },
|
||||
} = useController({ name: 'type', control, rules: { required: true } });
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||
const { data: setting } = useSWR<Setting, RequestError>('/api/settings');
|
||||
const api = useApi();
|
||||
|
||||
const isGetStartedSkipped = setting?.adminConsole.applicationSkipGetStarted;
|
||||
|
||||
const closeModal = () => {
|
||||
setIsQuickStartGuideOpen(false);
|
||||
onClose?.(createdApp);
|
||||
};
|
||||
|
||||
const onSubmit = handleSubmit(async (data) => {
|
||||
try {
|
||||
const createdApp = await api.post('/api/applications', { json: data }).json<Application>();
|
||||
setCreatedApp(createdApp);
|
||||
|
||||
onClose?.(createdApp);
|
||||
if (isGetStartedSkipped) {
|
||||
closeModal();
|
||||
} else {
|
||||
setIsQuickStartGuideOpen(true);
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
console.error(error);
|
||||
}
|
||||
|
|
@ -96,6 +115,11 @@ const CreateForm = ({ onClose }: Props) => {
|
|||
/>
|
||||
</div>
|
||||
</form>
|
||||
{!isGetStartedSkipped && createdApp && (
|
||||
<Modal isOpen={isQuickStartGuideOpen} className={modalStyles.fullScreen}>
|
||||
<GetStarted appName={createdApp.name} onClose={closeModal} />
|
||||
</Modal>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,98 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.quickStartGuide {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-main-background);
|
||||
height: 100vh;
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--color-on-primary);
|
||||
height: 80px;
|
||||
padding: 0 _.unit(17) 0 _.unit(5);
|
||||
|
||||
.titleWrapper {
|
||||
margin-left: _.unit(4);
|
||||
}
|
||||
|
||||
.title {
|
||||
font: var(--font-title-large);
|
||||
color: var(--color-component-text);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font: var(--font-body-2);
|
||||
color: var(--color-component-caption);
|
||||
}
|
||||
|
||||
button + button {
|
||||
margin-left: _.unit(4);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow-y: auto;
|
||||
padding: _.unit(6) 0 _.unit(20);
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 858px;
|
||||
padding: _.unit(6) _.unit(8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&.selector {
|
||||
display: block;
|
||||
padding: _.unit(8);
|
||||
margin-top: _.unit(4);
|
||||
|
||||
.radio {
|
||||
border-radius: _.unit(2);
|
||||
width: 240px;
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
.buttonWrapper {
|
||||
display: flex;
|
||||
margin-top: _.unit(8);
|
||||
}
|
||||
|
||||
&.folded {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 0 0 56px;
|
||||
background: var(--color-neutral-variant-90);
|
||||
border-radius: _.unit(2);
|
||||
padding: 0 _.unit(4);
|
||||
margin-top: 0;
|
||||
font: var(--font-body-2);
|
||||
color: var(--color-component-text);
|
||||
|
||||
img {
|
||||
margin-right: _.unit(3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card + .card {
|
||||
margin-top: _.unit(6);
|
||||
}
|
||||
|
||||
.index {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
color: var(--color-primary);
|
||||
background: var(--color-surface-5);
|
||||
font: var(--font-label-large);
|
||||
text-align: center;
|
||||
margin-right: _.unit(4);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
import classNames from 'classnames';
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import highFive from '@/assets/images/high-five.svg';
|
||||
import tada from '@/assets/images/tada.svg';
|
||||
import Button from '@/components/Button';
|
||||
import Card from '@/components/Card';
|
||||
import CardTitle from '@/components/CardTitle';
|
||||
import IconButton from '@/components/IconButton';
|
||||
import RadioGroup, { Radio } from '@/components/RadioGroup';
|
||||
import Spacer from '@/components/Spacer';
|
||||
import Close from '@/icons/Close';
|
||||
import { SupportedJavascriptLibraries } from '@/types/applications';
|
||||
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
type Props = {
|
||||
appName: string;
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
const GetStarted = ({ appName, onClose }: Props) => {
|
||||
const [isLibrarySelectorFolded, setIsLibrarySelectorFolded] = useState(false);
|
||||
const [libraryName, setLibraryName] = useState<string>(SupportedJavascriptLibraries.Angular);
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||
|
||||
const onClickFetchSampleProject = () => {
|
||||
window.open(
|
||||
`https://github.com/logto-io/js/tree/master/packages/${libraryName.toLowerCase()}-sample`,
|
||||
'_blank'
|
||||
);
|
||||
};
|
||||
|
||||
const librarySelector = useMemo(
|
||||
() => (
|
||||
<Card className={classNames(styles.card, styles.selector)}>
|
||||
<img src={highFive} alt="success" />
|
||||
<CardTitle
|
||||
title="applications.get_started.title"
|
||||
subtitle="applications.get_started.subtitle"
|
||||
/>
|
||||
<RadioGroup
|
||||
name="libraryName"
|
||||
value={libraryName}
|
||||
onChange={(value) => {
|
||||
setLibraryName(value);
|
||||
}}
|
||||
>
|
||||
{Object.values(SupportedJavascriptLibraries).map((library) => (
|
||||
<Radio key={library} className={styles.radio} title={library} value={library} />
|
||||
))}
|
||||
</RadioGroup>
|
||||
<div className={styles.buttonWrapper}>
|
||||
<Spacer />
|
||||
<Button
|
||||
type="primary"
|
||||
title="general.next"
|
||||
onClick={() => {
|
||||
setIsLibrarySelectorFolded(true);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
),
|
||||
[libraryName]
|
||||
);
|
||||
|
||||
const librarySelectorFolded = useMemo(
|
||||
() => (
|
||||
<div className={classNames(styles.card, styles.selector, styles.folded)}>
|
||||
<img src={tada} alt="Tada!" />
|
||||
<span>
|
||||
{t('applications.get_started.description_by_library', { library: libraryName })}
|
||||
</span>
|
||||
</div>
|
||||
),
|
||||
[libraryName, t]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={styles.quickStartGuide}>
|
||||
<div className={styles.header}>
|
||||
<IconButton size="large" onClick={onClose}>
|
||||
<Close />
|
||||
</IconButton>
|
||||
<div className={styles.titleWrapper}>
|
||||
<div className={styles.title}>{appName}</div>
|
||||
<div className={styles.subtitle}>{t('applications.get_started.header_description')}</div>
|
||||
</div>
|
||||
<Spacer />
|
||||
<Button type="plain" size="small" title="general.skip" onClick={onClose} />
|
||||
<Button
|
||||
type="outline"
|
||||
title="admin_console.applications.get_started.get_sample_file"
|
||||
onClick={onClickFetchSampleProject}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.content}>
|
||||
{isLibrarySelectorFolded ? librarySelectorFolded : librarySelector}
|
||||
{/* TO-DO: Dynamically render steps from markdown files */}
|
||||
<Card className={styles.card}>
|
||||
<div className={styles.index}>1</div>
|
||||
<CardTitle
|
||||
title="applications.get_started.title_step_1"
|
||||
subtitle="applications.get_started.subtitle_step_1"
|
||||
/>
|
||||
</Card>
|
||||
<Card className={styles.card}>
|
||||
<div className={styles.index}>2</div>
|
||||
<CardTitle
|
||||
title="applications.get_started.title_step_2"
|
||||
subtitle="applications.get_started.subtitle_step_2"
|
||||
/>
|
||||
</Card>
|
||||
<Card className={styles.card}>
|
||||
<div className={styles.index}>3</div>
|
||||
<CardTitle
|
||||
title="applications.get_started.title_step_3"
|
||||
subtitle="applications.get_started.subtitle_step_3"
|
||||
/>
|
||||
</Card>
|
||||
<Card className={styles.card}>
|
||||
<div className={styles.index}>4</div>
|
||||
<CardTitle
|
||||
title="applications.get_started.title_step_4"
|
||||
subtitle="applications.get_started.subtitle_step_4"
|
||||
/>
|
||||
</Card>
|
||||
<Card className={styles.card}>
|
||||
<div className={styles.index}>5</div>
|
||||
<CardTitle
|
||||
title="applications.get_started.title_step_5"
|
||||
subtitle="applications.get_started.subtitle_step_5"
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GetStarted;
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { Application, Setting } from '@logto/schemas';
|
||||
import { Application } from '@logto/schemas';
|
||||
import { conditional } from '@silverhand/essentials/lib/utilities/conditional.js';
|
||||
import React, { useState } from 'react';
|
||||
import { toast } from 'react-hot-toast';
|
||||
|
|
@ -24,7 +24,6 @@ const Applications = () => {
|
|||
const [isCreateFormOpen, setIsCreateFormOpen] = useState(false);
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||
const { data, error, mutate } = useSWR<Application[], RequestError>('/api/applications');
|
||||
const { data: setting } = useSWR<Setting, RequestError>('/api/settings');
|
||||
const isLoading = !data && !error;
|
||||
const navigate = useNavigate();
|
||||
|
||||
|
|
@ -51,12 +50,8 @@ const Applications = () => {
|
|||
if (createdApp) {
|
||||
void mutate(conditional(data && [...data, createdApp]));
|
||||
|
||||
if (setting?.adminConsole.applicationSkipGetStarted) {
|
||||
toast.success(t('applications.application_created', { name: createdApp.name }));
|
||||
navigate(`/applications/${createdApp.id}`);
|
||||
} else {
|
||||
navigate(`/applications/${createdApp.id}/get-started`);
|
||||
}
|
||||
toast.success(t('applications.application_created', { name: createdApp.name }));
|
||||
navigate(`/applications/${createdApp.id}`);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@
|
|||
--color-table-row-selected: rgba(25, 28, 29, 4%);
|
||||
--color-code-comment: #66bb6a;
|
||||
--color-surface-3: #e3dff5;
|
||||
--color-surface-5: #dfd9f5;
|
||||
--shadow-light-s2: 0 4px 12px rgba(0, 0, 0, 12%);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,3 +11,12 @@
|
|||
background: rgba(0, 0, 0, 40%);
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.fullScreen {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,3 +5,9 @@ export const applicationTypeI18nKey = Object.freeze({
|
|||
[ApplicationType.SPA]: 'applications.type.spa',
|
||||
[ApplicationType.Traditional]: 'applications.type.traditional',
|
||||
} as const);
|
||||
|
||||
export enum SupportedJavascriptLibraries {
|
||||
Angular = 'Angular',
|
||||
React = 'React',
|
||||
Vue = 'Vue',
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ const translation = {
|
|||
general: {
|
||||
placeholder: 'Placeholder',
|
||||
add_another: '+ Add Another',
|
||||
skip: 'Skip',
|
||||
next: 'Next',
|
||||
},
|
||||
sign_in: {
|
||||
action: 'Sign In',
|
||||
|
|
@ -75,11 +77,31 @@ const translation = {
|
|||
description: 'E.g.: Angular, React, Vue',
|
||||
},
|
||||
traditional: {
|
||||
title: 'Tranditional Web',
|
||||
title: 'Traditional Web',
|
||||
subtitle: 'Traditional web app using redirects.',
|
||||
description: 'E.g.: Node.js, Express, ASP.NET, Java, PHP',
|
||||
},
|
||||
},
|
||||
get_started: {
|
||||
header_description:
|
||||
'Follow a step by step guide to integrate your application or get a sample configured with your account settings',
|
||||
get_sample_file: 'Get a sample file',
|
||||
title: 'Congratulations! The application has been created successfully.',
|
||||
subtitle:
|
||||
'Now follow the steps below to finish your app settings. Please select the JS library to continue.',
|
||||
description_by_library:
|
||||
'This quickstart demonstrates how to add Logto to {{library}} application.',
|
||||
title_step_1: 'Install Logto SDK',
|
||||
subtitle_step_1: '3 options | lorem ipsum dolor sit amet',
|
||||
title_step_2: 'Initiate LogtoClient',
|
||||
subtitle_step_2: '1 step | lorem ipsum dolor sit amet',
|
||||
title_step_3: 'Sign in',
|
||||
subtitle_step_3: '1 step | lorem ipsum dolor sit amet',
|
||||
title_step_4: 'Sign out',
|
||||
subtitle_step_4: '1 step | lorem ipsum dolor sit amet',
|
||||
title_step_5: 'Further readings',
|
||||
subtitle_step_5: 'Tutorial and readings',
|
||||
},
|
||||
},
|
||||
application_details: {
|
||||
back_to_applications: 'Back to Applications',
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ const translation = {
|
|||
general: {
|
||||
placeholder: '占位符',
|
||||
add_another: '+ Add Another',
|
||||
skip: '跳过',
|
||||
next: '下一步',
|
||||
},
|
||||
sign_in: {
|
||||
action: '登录',
|
||||
|
|
@ -77,11 +79,29 @@ const translation = {
|
|||
description: 'E.g.: Angular, React, Vue',
|
||||
},
|
||||
traditional: {
|
||||
title: 'Tranditional Web',
|
||||
title: 'Traditional Web',
|
||||
subtitle: 'Traditional web app using redirects.',
|
||||
description: 'E.g.: Node.js, Express, ASP.NET, Java, PHP',
|
||||
},
|
||||
},
|
||||
get_started: {
|
||||
header_description:
|
||||
'参考如下教程，将 Logto 集成到您的应用中。您也可以点击右侧链接，获取我们为您准备好的示范工程。',
|
||||
get_sample_file: '获取示范工程',
|
||||
title: '恭喜！您的应用已成功创建。',
|
||||
subtitle: '请参考以下步骤完成您的应用设置。首先，请选择您要使用的 Javascript 框架：',
|
||||
description_by_library: '本教程向您演示如何在 {{library}} 应用中集成 Logto 登录功能',
|
||||
title_step_1: '安装 Logto SDK',
|
||||
subtitle_step_1: '3 options | lorem ipsum dolor sit amet',
|
||||
title_step_2: '初始化得到 LogtoClient 实例',
|
||||
subtitle_step_2: '1 step | lorem ipsum dolor sit amet',
|
||||
title_step_3: 'Sign in',
|
||||
subtitle_step_3: '1 step | lorem ipsum dolor sit amet',
|
||||
title_step_4: 'Sign out',
|
||||
subtitle_step_4: '1 step | lorem ipsum dolor sit amet',
|
||||
title_step_5: '延伸阅读',
|
||||
subtitle_step_5: 'Tutorial and readings',
|
||||
},
|
||||
},
|
||||
application_details: {
|
||||
back_to_applications: '返回应用集',
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue