mirror of
https://github.com/logto-io/logto.git
synced 2025-01-06 20:40:08 -05:00
refactor(console): welcome state of the sie page (#3188)
This commit is contained in:
parent
720d1ecb33
commit
794e270dc5
13 changed files with 194 additions and 186 deletions
packages
console/src
assets/images
pages/SignInExperience
phrases/src/locales
de/translation/admin-console
en/translation/admin-console
fr/translation/admin-console
ko/translation/admin-console
pt-br/translation/admin-console
pt-pt/translation/admin-console
tr-tr/translation/admin-console
zh-cn/translation/admin-console
|
@ -1,26 +1,24 @@
|
|||
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="24" y="136" width="128" height="96" rx="16" fill="#5B5F81"/>
|
||||
<g style="mix-blend-mode:multiply" opacity="0.24">
|
||||
<rect x="24" y="136" width="128" height="96" rx="16" fill="white"/>
|
||||
</g>
|
||||
<path d="M24 152C24 143.163 31.1634 136 40 136H136C144.837 136 152 143.163 152 152V156H24V152Z" fill="#8185AB"/>
|
||||
<path d="M40 179C40 177.343 41.3431 176 43 176H85C86.6569 176 88 177.343 88 179C88 180.657 86.6569 182 85 182H43C41.3431 182 40 180.657 40 179Z" fill="#787893"/>
|
||||
<path d="M40 193C40 191.343 41.3431 190 43 190H117C118.657 190 120 191.343 120 193C120 194.657 118.657 196 117 196H43C41.3431 196 40 194.657 40 193Z" fill="#787893"/>
|
||||
<path d="M40 207C40 205.343 41.3431 204 43 204H53C54.6569 204 56 205.343 56 207C56 208.657 54.6569 210 53 210H43C41.3431 210 40 208.657 40 207Z" fill="#787893"/>
|
||||
<rect x="24" y="136" width="128" height="96" rx="12" fill="#47464E"/>
|
||||
<path d="M24 152C24 143.163 31.1634 136 40 136H136C144.837 136 152 143.163 152 152V156H24V152Z" fill="#5F5D67"/>
|
||||
<path d="M40 179C40 177.343 41.3431 176 43 176H85C86.6569 176 88 177.343 88 179C88 180.657 86.6569 182 85 182H43C41.3431 182 40 180.657 40 179Z" fill="#F7F8F8" fill-opacity="0.12"/>
|
||||
<path d="M40 193C40 191.343 41.3431 190 43 190H117C118.657 190 120 191.343 120 193C120 194.657 118.657 196 117 196H43C41.3431 196 40 194.657 40 193Z" fill="#F7F8F8" fill-opacity="0.12"/>
|
||||
<path d="M40 207C40 205.343 41.3431 204 43 204H53C54.6569 204 56 205.343 56 207C56 208.657 54.6569 210 53 210H43C41.3431 210 40 208.657 40 207Z" fill="#F7F8F8" fill-opacity="0.12"/>
|
||||
<circle cx="39" cy="146" r="3" fill="#FA9F94"/>
|
||||
<circle cx="49" cy="146" r="3" fill="#FDCF90"/>
|
||||
<circle cx="59" cy="146" r="3" fill="#E5E1EC"/>
|
||||
<rect x="85" y="54" width="86" height="176" rx="14" fill="#C1B2EA" stroke="#7964C3" stroke-width="4"/>
|
||||
<rect x="85" y="54" width="86" height="176" rx="14" fill="#C1B2EA" stroke="#7958FF" stroke-width="4"/>
|
||||
<path d="M91 72V207C91 215.284 97.7157 222 106 222H110M165 69V94M165 172V144.5" stroke="#AA9BD9" stroke-linecap="round"/>
|
||||
<path d="M110.5 56H146.5V58C146.5 61.3137 143.814 64 140.5 64H116.5C113.186 64 110.5 61.3137 110.5 58V56Z" fill="#775BC1"/>
|
||||
<path d="M110.5 56H146.5V58C146.5 61.3137 143.814 64 140.5 64H116.5C113.186 64 110.5 61.3137 110.5 58V56Z" fill="#7958FF"/>
|
||||
<circle cx="128" cy="212" r="8.125" stroke="#F0EBFF" stroke-width="3.75"/>
|
||||
<rect x="102.5" y="110.5" width="107" height="25" rx="7.5" fill="#5D34F2" fill-opacity="0.16"/>
|
||||
<rect x="118" y="119" width="8" height="8" rx="2" fill="#E6DEFF"/>
|
||||
<rect x="132" y="119" width="8" height="8" rx="2" fill="#E6DEFF"/>
|
||||
<rect x="146" y="119" width="8" height="8" rx="2" fill="#E6DEFF"/>
|
||||
<rect x="160" y="119" width="8" height="8" rx="2" fill="#E6DEFF"/>
|
||||
<rect x="174" y="119" width="8" height="8" rx="2" fill="#9882D0"/>
|
||||
<rect x="188" y="119" width="8" height="8" rx="2" fill="#9882D0"/>
|
||||
<rect x="174" y="119" width="8" height="8" rx="2" fill="#947DFF"/>
|
||||
<rect x="188" y="119" width="8" height="8" rx="2" fill="#947DFF"/>
|
||||
<rect x="102.5" y="110.5" width="107" height="25" rx="7.5" stroke="#CBBBF4"/>
|
||||
<path d="M192 232C194.213 232 196.385 231.82 198.5 231.475C200.205 231.196 201.874 230.809 203.5 230.322M181 153.532C184.495 152.534 188.185 152 192 152C214.091 152 232 169.909 232 192C232 197.496 230.892 202.733 228.886 207.5C227.768 210.158 226.37 212.671 224.73 215C223.598 216.608 222.351 218.129 221 219.55C220.014 220.588 218.973 221.573 217.881 222.5C216.649 223.546 215.353 224.519 214 225.412M158.923 169.5C157.945 170.936 157.057 172.439 156.269 174C153.538 179.41 152 185.526 152 192C152 201.87 155.575 210.905 161.5 217.881C163.158 219.833 165 221.624 167 223.227" stroke="#AF9EFF" stroke-linecap="round"/>
|
||||
<circle opacity="0.2" cx="192" cy="192" r="30" fill="#E5E5E5"/>
|
||||
|
@ -30,15 +28,13 @@
|
|||
<path fill-rule="evenodd" clip-rule="evenodd" d="M192 222V192H162C162 208.569 175.431 222 192 222Z" fill="#FCCCF1"/>
|
||||
<rect x="116" y="76" width="24" height="24" rx="8" fill="#F0EBFF"/>
|
||||
<circle cx="128" cy="83" r="4" fill="#F2CE41"/>
|
||||
<path d="M122 92C122 89.7909 123.791 88 126 88H130C132.209 88 134 89.7909 134 92V94C134 95.1046 133.105 96 132 96H124C122.895 96 122 95.1046 122 94V92Z" fill="#775BC1"/>
|
||||
<rect x="32.0156" y="38.7031" width="8" height="8" transform="rotate(24.4506 32.0156 38.7031)" fill="#8185AB"/>
|
||||
<rect x="91.3594" y="24.5709" width="8" height="8" transform="rotate(-40.65 91.3594 24.5709)" fill="#736A8D"/>
|
||||
<rect x="220.613" y="89.5157" width="8" height="8" transform="rotate(30.813 220.613 89.5157)" fill="#5B5F81"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M212.957 21.1043C212.957 21.0467 213.004 21 213.062 21H214.939C214.997 21 215.043 21.0467 215.043 21.1043V24.4087L217.905 22.7565C217.955 22.7277 218.019 22.7448 218.047 22.7947L218.986 24.4207C219.015 24.4706 218.998 24.5344 218.948 24.5632L216.086 26.2154L218.948 27.8675C218.998 27.8964 219.015 27.9601 218.986 28.01L218.047 29.636C218.018 29.6859 217.955 29.703 217.905 29.6742L215.043 28.0222V31.3264C215.043 31.384 214.997 31.4307 214.939 31.4307H213.062C213.004 31.4307 212.957 31.384 212.957 31.3264V28.022L210.095 29.6742C210.046 29.703 209.982 29.6859 209.953 29.636L209.014 28.01C208.985 27.9601 209.002 27.8964 209.052 27.8675L211.914 26.2154L209.052 24.5632C209.002 24.5344 208.985 24.4706 209.014 24.4207L209.953 22.7947C209.982 22.7448 210.045 22.7277 210.095 22.7565L212.957 24.4089V21.1043Z" fill="#4E5075"/>
|
||||
<path d="M198.969 48.912C199.026 48.8892 199.086 48.9369 199.078 48.9979L197.784 57.8646C197.776 57.9255 197.704 57.954 197.656 57.9158L190.623 52.3627C190.575 52.3245 190.586 52.2483 190.643 52.2255L198.969 48.912Z" fill="#71AB74"/>
|
||||
<path d="M35.7451 83.0107L36.7284 85.6627C37.2715 87.1273 38.8991 87.8744 40.3638 87.3313V87.3313C41.8284 86.7883 43.456 87.5353 43.9991 89V89C44.5422 90.4647 46.1698 91.2117 47.6344 90.6687V90.6687C49.0991 90.1256 50.7267 90.8727 51.2697 92.3373L52.2531 94.9893" stroke="#655D82" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M205.425 72.4582L208.253 72.4914C209.815 72.5098 211.096 71.2585 211.115 69.6965V69.6965C211.133 68.1345 212.414 66.8832 213.976 66.9015V66.9015C215.538 66.9199 216.819 65.6686 216.838 64.1066L216.871 61.2784" stroke="#6E5AA4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M71.5964 34.3086L72.1129 31.5277C72.3982 29.9919 71.3844 28.5156 69.8486 28.2303V28.2303C68.3127 27.9451 67.2989 26.4688 67.5842 24.933V24.933C67.8694 23.3971 66.8557 21.9208 65.3198 21.6356L62.539 21.1191" stroke="#80A181" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M122 92C122 89.7909 123.791 88 126 88H130C132.209 88 134 89.7909 134 92V94C134 95.1046 133.105 96 132 96H124C122.895 96 122 95.1046 122 94V92Z" fill="#7958FF"/>
|
||||
<rect x="107" y="144" width="42" height="4" rx="2" fill="#AF9FDB"/>
|
||||
<rect x="107" y="152" width="24" height="4" rx="2" fill="#AF9FDB"/>
|
||||
<rect x="111.359" y="17.5742" width="8" height="8" rx="2" transform="rotate(-40.65 111.359 17.5742)" fill="#928F9A"/>
|
||||
<rect x="220.613" y="89.5166" width="8" height="8" rx="2" transform="rotate(30.813 220.613 89.5166)" fill="#928F9A"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M212.957 21.1053C212.957 21.0477 213.003 21.001 213.061 21.001H214.939C214.996 21.001 215.043 21.0477 215.043 21.1053V24.4096L217.904 22.7575C217.954 22.7287 218.018 22.7458 218.047 22.7956L218.986 24.4216C219.014 24.4715 218.997 24.5353 218.947 24.5641L216.086 26.2163L218.947 27.8685C218.997 27.8973 219.014 27.9611 218.986 28.011L218.047 29.637C218.018 29.6869 217.954 29.704 217.904 29.6752L215.043 28.0231V31.3274C215.043 31.385 214.996 31.4317 214.939 31.4317H213.061C213.003 31.4317 212.957 31.385 212.957 31.3274V28.0229L210.095 29.6752C210.045 29.704 209.981 29.6869 209.952 29.637L209.014 28.011C208.985 27.9611 209.002 27.8973 209.052 27.8685L211.913 26.2163L209.052 24.5641C209.002 24.5353 208.985 24.4715 209.014 24.4216L209.952 22.7956C209.981 22.7458 210.045 22.7287 210.095 22.7575L212.957 24.4098V21.1053Z" fill="#928F9A"/>
|
||||
<path d="M21.7456 93.0117L22.7289 95.6637C23.272 97.1284 24.8996 97.8755 26.3643 97.3324V97.3324C27.8289 96.7893 29.4565 97.5364 29.9996 99.001V99.001C30.5427 100.466 32.1702 101.213 33.6349 100.67V100.67C35.0996 100.127 36.7271 100.874 37.2702 102.338L38.2535 104.99" stroke="#928F9A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M205.424 72.4588L208.252 72.4921C209.814 72.5105 211.095 71.2591 211.114 69.6971V69.6971C211.132 68.1351 212.413 66.8838 213.975 66.9022V66.9022C215.537 66.9206 216.818 65.6692 216.837 64.1072L216.87 61.279" stroke="#928F9A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M71.5957 34.3093L72.1122 31.5284C72.3975 29.9926 71.3837 28.5163 69.8478 28.2311V28.2311C68.312 27.9458 67.2982 26.4695 67.5835 24.9337V24.9337C67.8687 23.3979 66.8549 21.9216 65.3191 21.6363L62.5382 21.1198" stroke="#5C5F60" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
|
Before (image error) Size: 5.9 KiB After (image error) Size: 5.6 KiB |
|
@ -1,49 +1,40 @@
|
|||
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="24" y="136" width="128" height="96" rx="16" fill="#E5E1EC"/>
|
||||
<g style="mix-blend-mode:multiply" opacity="0.24">
|
||||
<rect x="24" y="136" width="128" height="96" rx="16" fill="white"/>
|
||||
</g>
|
||||
<path d="M24 152C24 143.163 31.1634 136 40 136H136C144.837 136 152 143.163 152 152V160H24V152Z" fill="#ADAAB4"/>
|
||||
<path d="M40 179C40 177.343 41.3431 176 43 176H85C86.6569 176 88 177.343 88 179C88 180.657 86.6569 182 85 182H43C41.3431 182 40 180.657 40 179Z" fill="#C9C5D0"/>
|
||||
<path d="M40 193C40 191.343 41.3431 190 43 190H117C118.657 190 120 191.343 120 193C120 194.657 118.657 196 117 196H43C41.3431 196 40 194.657 40 193Z" fill="#ADAAB4"/>
|
||||
<path d="M40 207C40 205.343 41.3431 204 43 204H53C54.6569 204 56 205.343 56 207C56 208.657 54.6569 210 53 210H43C41.3431 210 40 208.657 40 207Z" fill="#ADAAB4"/>
|
||||
<circle cx="44" cy="148" r="4" fill="#C9C5D0"/>
|
||||
<circle cx="56" cy="148" r="4" fill="#C9C5D0"/>
|
||||
<circle cx="68" cy="148" r="4" fill="#E5E1EC"/>
|
||||
<rect x="83" y="52" width="90" height="180" rx="16" fill="url(#paint0_linear_3406_135138)"/>
|
||||
<path d="M91 62V207C91 215.284 97.7157 222 106 222H110M165 62V94M165 172V144.5" stroke="#E6DEFF" stroke-linecap="round"/>
|
||||
<path d="M105.5 52H150.5V56.5C150.5 60.6421 147.142 64 143 64H113C108.858 64 105.5 60.6421 105.5 56.5V52Z" fill="#2D009D"/>
|
||||
<circle cx="128" cy="213.25" r="9.375" stroke="#FFF480" stroke-width="3.75"/>
|
||||
<rect x="102.5" y="110.5" width="107" height="25" rx="7.5" fill="#5D34F2" fill-opacity="0.16"/>
|
||||
<rect x="118" y="119" width="8" height="8" rx="2" fill="#E6DEFF"/>
|
||||
<rect x="132" y="119" width="8" height="8" rx="2" fill="#E6DEFF"/>
|
||||
<rect x="146" y="119" width="8" height="8" rx="2" fill="#E6DEFF"/>
|
||||
<rect x="160" y="119" width="8" height="8" rx="2" fill="#E6DEFF"/>
|
||||
<rect x="174" y="119" width="8" height="8" rx="2" fill="#7958FF"/>
|
||||
<rect x="188" y="119" width="8" height="8" rx="2" fill="#7958FF"/>
|
||||
<rect x="102.5" y="110.5" width="107" height="25" rx="7.5" stroke="white"/>
|
||||
<path d="M192 232C194.213 232 196.385 231.82 198.5 231.475C200.205 231.196 201.874 230.809 203.5 230.322M181 153.532C184.495 152.534 188.185 152 192 152C214.091 152 232 169.909 232 192C232 197.496 230.892 202.733 228.886 207.5C227.768 210.158 226.37 212.671 224.73 215C223.598 216.608 222.351 218.129 221 219.55C220.014 220.588 218.973 221.573 217.881 222.5C216.649 223.546 215.353 224.519 214 225.412M158.923 169.5C157.945 170.936 157.057 172.439 156.269 174C153.538 179.41 152 185.526 152 192C152 201.87 155.575 210.905 161.5 217.881C163.158 219.833 165 221.624 167 223.227" stroke="black" stroke-linecap="round"/>
|
||||
<rect x="24" y="136" width="128" height="96" rx="12" fill="#F7F8F8"/>
|
||||
<rect x="24" y="136" width="128" height="96" rx="12" fill="#78767F" fill-opacity="0.02"/>
|
||||
<rect x="24" y="136" width="128" height="96" rx="12" fill="#5D34F2" fill-opacity="0.08"/>
|
||||
<path d="M24 148C24 141.373 29.3726 136 36 136H140C146.627 136 152 141.373 152 148V152H24V148Z" fill="#AF9EFF"/>
|
||||
<path d="M40 179C40 177.343 41.3431 176 43 176H85C86.6569 176 88 177.343 88 179C88 180.657 86.6569 182 85 182H43C41.3431 182 40 180.657 40 179Z" fill="#CABEFF"/>
|
||||
<path d="M40 193C40 191.343 41.3431 190 43 190H117C118.657 190 120 191.343 120 193C120 194.657 118.657 196 117 196H43C41.3431 196 40 194.657 40 193Z" fill="#CABEFF"/>
|
||||
<path d="M40 207C40 205.343 41.3431 204 43 204H53C54.6569 204 56 205.343 56 207C56 208.657 54.6569 210 53 210H43C41.3431 210 40 208.657 40 207Z" fill="#CABEFF"/>
|
||||
<circle cx="39" cy="144" r="3" fill="#FA9F94"/>
|
||||
<circle cx="49" cy="144" r="3" fill="#FDCF90"/>
|
||||
<circle cx="59" cy="144" r="3" fill="#E6DEFF"/>
|
||||
<rect x="85" y="54" width="86" height="176" rx="14" fill="#CABEFF" stroke="#7958FF" stroke-width="4"/>
|
||||
<path d="M91 82V207C91 215.284 97.7157 222 106 222H110M165 62V94M165 172V144.5" stroke="#CBBEF3" stroke-linecap="round"/>
|
||||
<path d="M110.5 56H146.5V58C146.5 61.3137 143.814 64 140.5 64H116.5C113.186 64 110.5 61.3137 110.5 58V56Z" fill="#7958FF"/>
|
||||
<circle cx="128" cy="212" r="8.125" stroke="#E6DEFF" stroke-width="3.75"/>
|
||||
<rect x="118" y="119" width="8" height="8" rx="2" fill="#F5EEFF"/>
|
||||
<rect x="132" y="119" width="8" height="8" rx="2" fill="#F5EEFF"/>
|
||||
<rect x="146" y="119" width="8" height="8" rx="2" fill="#F5EEFF"/>
|
||||
<rect x="160" y="119" width="8" height="8" rx="2" fill="#F5EEFF"/>
|
||||
<rect x="174" y="119" width="8" height="8" rx="2" fill="#947DFF"/>
|
||||
<rect x="188" y="119" width="8" height="8" rx="2" fill="#947DFF"/>
|
||||
<rect x="102.5" y="110.5" width="107" height="25" rx="7.5" fill="#5D34F2" fill-opacity="0.16" stroke="#D4C4FF"/>
|
||||
<rect x="116" y="76" width="24" height="24" rx="8" fill="#FBF9FF"/>
|
||||
<circle cx="128" cy="83" r="4" fill="#FDCF90"/>
|
||||
<path d="M122 92C122 89.7909 123.791 88 126 88H130C132.209 88 134 89.7909 134 92V94C134 95.1046 133.105 96 132 96H124C122.895 96 122 95.1046 122 94V92Z" fill="#7958FF"/>
|
||||
<path d="M192 232C194.213 232 196.385 231.82 198.5 231.475C200.205 231.196 201.874 230.809 203.5 230.322M181 153.532C184.495 152.534 188.185 152 192 152C214.091 152 232 169.909 232 192C232 197.496 230.892 202.733 228.886 207.5C227.768 210.158 226.37 212.671 224.73 215C223.598 216.608 222.351 218.129 221 219.55C220.014 220.588 218.973 221.573 217.881 222.5C216.649 223.546 215.353 224.519 214 225.412M158.923 169.5C157.945 170.936 157.057 172.439 156.269 174C153.538 179.41 152 185.526 152 192C152 201.87 155.575 210.905 161.5 217.881C163.158 219.833 165 221.624 167 223.227" stroke="#AF9EFF" stroke-linecap="round"/>
|
||||
<circle opacity="0.2" cx="192" cy="192" r="30" fill="#E5E5E5"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M192 162V192H162C162 175.431 175.431 162 192 162Z" fill="#FF897A"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M192 162V192H162C162 175.431 175.431 162 192 162Z" fill="#FDCF90"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M192 222V192H222C222 208.569 208.569 222 192 222Z" fill="#947DFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M192 162V192H222C222 175.431 208.569 162 192 162Z" fill="#FFB95A"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M192 222V192H162C162 208.569 175.431 222 192 222Z" fill="#83DA85"/>
|
||||
<rect x="116" y="76" width="24" height="24" rx="8" fill="#F4E560"/>
|
||||
<circle cx="128" cy="83" r="4" fill="#F07EFF"/>
|
||||
<path d="M122 92C122 89.7909 123.791 88 126 88H130C132.209 88 134 89.7909 134 92V96H122V92Z" fill="#2D009D"/>
|
||||
<rect x="32.0156" y="38.7031" width="8" height="8" transform="rotate(24.4506 32.0156 38.7031)" fill="#FFD5FF"/>
|
||||
<rect x="91.3594" y="24.5709" width="8" height="8" transform="rotate(-40.65 91.3594 24.5709)" fill="#C4C4C4"/>
|
||||
<rect x="220.613" y="89.5156" width="8" height="8" transform="rotate(30.813 220.613 89.5156)" fill="#F4E560"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M212.957 21.1043C212.957 21.0467 213.004 21 213.062 21H214.939C214.997 21 215.043 21.0467 215.043 21.1043V24.4086L217.905 22.7565C217.955 22.7277 218.019 22.7448 218.047 22.7947L218.986 24.4207C219.015 24.4706 218.998 24.5343 218.948 24.5632L216.086 26.2154L218.948 27.8675C218.998 27.8963 219.015 27.9601 218.986 28.01L218.047 29.636C218.018 29.6859 217.955 29.703 217.905 29.6742L215.043 28.0222V31.3264C215.043 31.384 214.997 31.4307 214.939 31.4307H213.062C213.004 31.4307 212.957 31.384 212.957 31.3264V28.0219L210.095 29.6742C210.046 29.703 209.982 29.6859 209.953 29.636L209.014 28.01C208.985 27.9601 209.002 27.8963 209.052 27.8675L211.914 26.2154L209.052 24.5632C209.002 24.5343 208.985 24.4706 209.014 24.4207L209.953 22.7947C209.982 22.7448 210.045 22.7277 210.095 22.7565L212.957 24.4089V21.1043Z" fill="#E5E1EC"/>
|
||||
<path d="M198.969 48.912C199.026 48.8892 199.086 48.9369 199.078 48.9979L197.784 57.8645C197.776 57.9255 197.704 57.954 197.656 57.9158L190.623 52.3626C190.575 52.3245 190.586 52.2483 190.643 52.2255L198.969 48.912Z" fill="#68BE6C"/>
|
||||
<path d="M24.1641 96.3035L26.0188 98.4388C27.0432 99.6182 28.8297 99.7438 30.009 98.7194V98.7194C31.1883 97.695 32.9748 97.8207 33.9991 99V99C35.0235 100.179 36.81 100.305 37.9893 99.2806V99.2806C39.1686 98.2562 40.9551 98.3818 41.9794 99.5612L43.8342 101.697" stroke="#CABEFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M60.7969 59.7954L61.8084 62.4368C62.367 63.8956 64.0025 64.6253 65.4612 64.0667V64.0667C66.92 63.508 68.5555 64.2378 69.1141 65.6965V65.6965C69.6728 67.1553 71.3082 67.8851 72.767 67.3264V67.3264C74.2258 66.7678 75.8612 67.4975 76.4199 68.9563L77.4314 71.5977" stroke="#AF9EFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M217.85 71.567L220.53 72.4716C222.01 72.9712 223.615 72.1764 224.115 70.6964V70.6964C224.614 69.2164 226.219 68.4216 227.699 68.9212V68.9212C229.179 69.4208 230.784 68.626 231.284 67.1459L232.188 64.4661" stroke="#FFD5FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M71.5964 34.3086L72.1129 31.5277C72.3982 29.9919 71.3844 28.5156 69.8486 28.2303V28.2303C68.3127 27.9451 67.2989 26.4688 67.5842 24.933V24.933C67.8694 23.3971 66.8557 21.9208 65.3198 21.6356L62.539 21.1191" stroke="#FFF06A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_3406_135138" x1="57.5" y1="169" x2="182.122" y2="136.815" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#492EF3"/>
|
||||
<stop offset="1" stop-color="#CF69FF"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M192 162V192H222C222 175.431 208.569 162 192 162Z" fill="#CABEFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M192 222V192H162C162 208.569 175.431 222 192 222Z" fill="#E6DEFF"/>
|
||||
<rect x="111.359" y="17.5708" width="8" height="8" rx="2" transform="rotate(-40.65 111.359 17.5708)" fill="#E4E4E4"/>
|
||||
<rect x="220.613" y="89.5156" width="8" height="8" rx="2" transform="rotate(30.813 220.613 89.5156)" fill="#E6DEFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M212.957 21.1043C212.957 21.0467 213.004 21 213.062 21H214.939C214.997 21 215.043 21.0467 215.043 21.1043V24.4086L217.905 22.7565C217.955 22.7277 218.019 22.7448 218.047 22.7947L218.986 24.4207C219.015 24.4705 218.998 24.5343 218.948 24.5631L216.086 26.2154L218.948 27.8675C218.998 27.8963 219.015 27.9601 218.986 28.01L218.047 29.636C218.018 29.6859 217.955 29.703 217.905 29.6742L215.043 28.0221V31.3264C215.043 31.384 214.997 31.4307 214.939 31.4307H213.062C213.004 31.4307 212.957 31.384 212.957 31.3264V28.0219L210.095 29.6742C210.045 29.703 209.982 29.6859 209.953 29.636L209.014 28.01C208.985 27.9601 209.002 27.8963 209.052 27.8675L211.914 26.2154L209.052 24.5631C209.002 24.5343 208.985 24.4705 209.014 24.4207L209.953 22.7947C209.982 22.7448 210.045 22.7277 210.095 22.7565L212.957 24.4088V21.1043Z" fill="#E5E1EC"/>
|
||||
<path d="M35.7461 83.0107L36.7294 85.6627C37.2725 87.1274 38.9001 87.8745 40.3647 87.3314V87.3314C41.8294 86.7883 43.457 87.5354 44.0001 89.0001V89.0001C44.5431 90.4647 46.1707 91.2118 47.6354 90.6687V90.6687C49.1 90.1257 50.7276 90.8727 51.2707 92.3374L52.254 94.9894" stroke="#E4E1E9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M205.424 72.4583L208.253 72.4916C209.815 72.51 211.096 71.2586 211.114 69.6966V69.6966C211.132 68.1347 212.414 66.8833 213.976 66.9017V66.9017C215.538 66.9201 216.819 65.6687 216.837 64.1067L216.87 61.2785" stroke="#C1AEF6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M71.5962 34.3083L72.1127 31.5274C72.3979 29.9916 71.3841 28.5153 69.8483 28.2301V28.2301C68.3125 27.9448 67.2987 26.4685 67.5839 24.9327V24.9327C67.8692 23.3969 66.8554 21.9206 65.3196 21.6353L62.5387 21.1188" stroke="#E5DFFD" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="107" y="144" width="42" height="6" rx="3" fill="#947DFF"/>
|
||||
<rect x="107" y="158" width="24" height="6" rx="3" fill="#947DFF"/>
|
||||
</svg>
|
||||
|
|
Before (image error) Size: 6.2 KiB After (image error) Size: 5.5 KiB |
|
@ -1,36 +1,35 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
min-height: 528px;
|
||||
padding-bottom: _.unit(6);
|
||||
}
|
||||
|
||||
.welcome {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cardTitle {
|
||||
flex-shrink: 0;
|
||||
.content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: _.unit(4);
|
||||
.wrapper {
|
||||
margin-left: _.unit(6);
|
||||
}
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-bottom: _.unit(5);
|
||||
}
|
||||
.title {
|
||||
font: var(--font-label-2);
|
||||
}
|
||||
|
||||
.text {
|
||||
font: var(--font-body-2);
|
||||
max-width: 410px;
|
||||
text-align: center;
|
||||
}
|
||||
.description {
|
||||
font: var(--font-body-2);
|
||||
color: var(--color-text-secondary);
|
||||
max-width: 350px;
|
||||
margin-bottom: _.unit(6);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,8 +5,6 @@ import { useTranslation } from 'react-i18next';
|
|||
import WelcomeImageDark from '@/assets/images/sign-in-experience-welcome-dark.svg';
|
||||
import WelcomeImage from '@/assets/images/sign-in-experience-welcome.svg';
|
||||
import Button from '@/components/Button';
|
||||
import Card from '@/components/Card';
|
||||
import CardTitle from '@/components/CardTitle';
|
||||
import { useTheme } from '@/hooks/use-theme';
|
||||
|
||||
import GuideModal from './GuideModal';
|
||||
|
@ -23,15 +21,15 @@ const Welcome = ({ mutate }: Props) => {
|
|||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Card className={styles.welcome}>
|
||||
<CardTitle
|
||||
title="sign_in_exp.title"
|
||||
subtitle="sign_in_exp.description"
|
||||
className={styles.cardTitle}
|
||||
/>
|
||||
<div className={styles.content}>
|
||||
{theme === AppearanceMode.LightMode ? <WelcomeImage /> : <WelcomeImageDark />}
|
||||
<div className={styles.text}>{t('sign_in_exp.welcome.title')}</div>
|
||||
<div className={styles.content}>
|
||||
{theme === AppearanceMode.LightMode ? (
|
||||
<WelcomeImage className={styles.icon} />
|
||||
) : (
|
||||
<WelcomeImageDark className={styles.icon} />
|
||||
)}
|
||||
<div className={styles.wrapper}>
|
||||
<div className={styles.title}>{t('sign_in_exp.welcome.title')}</div>
|
||||
<div className={styles.description}>{t('sign_in_exp.welcome.description')}</div>
|
||||
<Button
|
||||
title="sign_in_exp.welcome.get_started"
|
||||
type="primary"
|
||||
|
@ -40,7 +38,7 @@ const Welcome = ({ mutate }: Props) => {
|
|||
}}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<GuideModal
|
||||
isOpen={isOpen}
|
||||
onClose={() => {
|
||||
|
|
|
@ -12,6 +12,7 @@ import ConfirmModal from '@/components/ConfirmModal';
|
|||
import SubmitFormChangesActionBar from '@/components/SubmitFormChangesActionBar';
|
||||
import TabNav, { TabNavItem } from '@/components/TabNav';
|
||||
import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
|
||||
import { isCloud } from '@/consts/cloud';
|
||||
import { SignInExperiencePage } from '@/consts/page-tabs';
|
||||
import type { RequestError } from '@/hooks/use-api';
|
||||
import useApi from '@/hooks/use-api';
|
||||
|
@ -40,7 +41,18 @@ const SignInExperience = () => {
|
|||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||
const { tab } = useParams();
|
||||
const { data, error, mutate } = useSWR<SignInExperienceType, RequestError>('api/sign-in-exp');
|
||||
const { configs, error: configsError, updateConfigs, mutate: mutateConfigs } = useConfigs();
|
||||
const isLoadingSignInExperience = !data && !error;
|
||||
|
||||
const {
|
||||
configs,
|
||||
error: configsError,
|
||||
updateConfigs,
|
||||
isLoading: isLoadingConfig,
|
||||
mutate: mutateConfigs,
|
||||
} = useConfigs();
|
||||
|
||||
const shouldDisplayWelcome = !isCloud && !configs?.signInExperienceCustomized;
|
||||
|
||||
const { error: languageError, isLoading: isLoadingLanguages } = useUiLanguages();
|
||||
const [dataToCompare, setDataToCompare] = useState<SignInExperienceType>();
|
||||
|
||||
|
@ -100,11 +112,11 @@ const SignInExperience = () => {
|
|||
await saveData();
|
||||
});
|
||||
|
||||
if ((!configs && !configsError) || (!data && !error) || isLoadingLanguages) {
|
||||
if (isLoadingSignInExperience || isLoadingConfig || isLoadingLanguages) {
|
||||
return <Skeleton />;
|
||||
}
|
||||
|
||||
if (!configs && configsError) {
|
||||
if (configsError) {
|
||||
return <div>{configsError.body?.message ?? configsError.message}</div>;
|
||||
}
|
||||
|
||||
|
@ -112,17 +124,6 @@ const SignInExperience = () => {
|
|||
return <div>{languageError.body?.message ?? languageError.message}</div>;
|
||||
}
|
||||
|
||||
if (!configs?.signInExperienceCustomized) {
|
||||
return (
|
||||
<Welcome
|
||||
mutate={() => {
|
||||
void mutateConfigs();
|
||||
void mutate();
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<CardTitle
|
||||
|
@ -130,66 +131,79 @@ const SignInExperience = () => {
|
|||
subtitle="sign_in_exp.description"
|
||||
className={styles.cardTitle}
|
||||
/>
|
||||
<TabNav className={styles.tabs}>
|
||||
<TabNavItem
|
||||
href={`/sign-in-experience/${SignInExperiencePage.BrandingTab}`}
|
||||
errorCount={getBrandingErrorCount(errors)}
|
||||
>
|
||||
{t('sign_in_exp.tabs.branding')}
|
||||
</TabNavItem>
|
||||
<TabNavItem
|
||||
href={`/sign-in-experience/${SignInExperiencePage.SignUpAndSignInTab}`}
|
||||
errorCount={getSignUpAndSignInErrorCount(errors, formData)}
|
||||
>
|
||||
{t('sign_in_exp.tabs.sign_up_and_sign_in')}
|
||||
</TabNavItem>
|
||||
<TabNavItem
|
||||
href={`/sign-in-experience/${SignInExperiencePage.OthersTab}`}
|
||||
errorCount={getOthersErrorCount(errors)}
|
||||
>
|
||||
{t('sign_in_exp.tabs.others')}
|
||||
</TabNavItem>
|
||||
</TabNav>
|
||||
{!data && error && <div>{`error occurred: ${error.body?.message ?? error.message}`}</div>}
|
||||
{data && defaultFormData && (
|
||||
<div className={styles.content}>
|
||||
<div className={classNames(styles.contentTop, isDirty && styles.withSubmitActionBar)}>
|
||||
<FormProvider {...methods}>
|
||||
<form className={styles.form}>
|
||||
<Branding isActive={tab === SignInExperiencePage.BrandingTab} />
|
||||
<SignUpAndSignIn isActive={tab === SignInExperiencePage.SignUpAndSignInTab} />
|
||||
<Others isActive={tab === SignInExperiencePage.OthersTab} />
|
||||
</form>
|
||||
</FormProvider>
|
||||
{formData.id && (
|
||||
<Preview signInExperience={previewConfigs} className={styles.preview} />
|
||||
)}
|
||||
</div>
|
||||
<SubmitFormChangesActionBar
|
||||
isOpen={isDirty}
|
||||
isSubmitting={isSubmitting}
|
||||
onDiscard={reset}
|
||||
onSubmit={onSubmit}
|
||||
{shouldDisplayWelcome ? (
|
||||
<Welcome
|
||||
mutate={() => {
|
||||
void mutateConfigs();
|
||||
void mutate();
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<TabNav className={styles.tabs}>
|
||||
<TabNavItem
|
||||
href={`/sign-in-experience/${SignInExperiencePage.BrandingTab}`}
|
||||
errorCount={getBrandingErrorCount(errors)}
|
||||
>
|
||||
{t('sign_in_exp.tabs.branding')}
|
||||
</TabNavItem>
|
||||
<TabNavItem
|
||||
href={`/sign-in-experience/${SignInExperiencePage.SignUpAndSignInTab}`}
|
||||
errorCount={getSignUpAndSignInErrorCount(errors, formData)}
|
||||
>
|
||||
{t('sign_in_exp.tabs.sign_up_and_sign_in')}
|
||||
</TabNavItem>
|
||||
<TabNavItem
|
||||
href={`/sign-in-experience/${SignInExperiencePage.OthersTab}`}
|
||||
errorCount={getOthersErrorCount(errors)}
|
||||
>
|
||||
{t('sign_in_exp.tabs.others')}
|
||||
</TabNavItem>
|
||||
</TabNav>
|
||||
{!data && error && <div>{`error occurred: ${error.body?.message ?? error.message}`}</div>}
|
||||
{data && defaultFormData && (
|
||||
<div className={styles.content}>
|
||||
<div className={classNames(styles.contentTop, isDirty && styles.withSubmitActionBar)}>
|
||||
<FormProvider {...methods}>
|
||||
<form className={styles.form}>
|
||||
<Branding isActive={tab === SignInExperiencePage.BrandingTab} />
|
||||
<SignUpAndSignIn isActive={tab === SignInExperiencePage.SignUpAndSignInTab} />
|
||||
<Others isActive={tab === SignInExperiencePage.OthersTab} />
|
||||
</form>
|
||||
</FormProvider>
|
||||
{formData.id && (
|
||||
<Preview signInExperience={previewConfigs} className={styles.preview} />
|
||||
)}
|
||||
</div>
|
||||
<SubmitFormChangesActionBar
|
||||
isOpen={isDirty}
|
||||
isSubmitting={isSubmitting}
|
||||
onDiscard={reset}
|
||||
onSubmit={onSubmit}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{data && (
|
||||
<ConfirmModal
|
||||
isOpen={Boolean(dataToCompare)}
|
||||
onCancel={() => {
|
||||
setDataToCompare(undefined);
|
||||
}}
|
||||
onConfirm={async () => {
|
||||
await saveData();
|
||||
}}
|
||||
>
|
||||
{dataToCompare && (
|
||||
<SignUpAndSignInChangePreview before={data} after={dataToCompare} />
|
||||
)}
|
||||
</ConfirmModal>
|
||||
)}
|
||||
<UnsavedChangesAlertModal
|
||||
hasUnsavedChanges={isDirty}
|
||||
parentPath="/console/sign-in-experience"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{data && (
|
||||
<ConfirmModal
|
||||
isOpen={Boolean(dataToCompare)}
|
||||
onCancel={() => {
|
||||
setDataToCompare(undefined);
|
||||
}}
|
||||
onConfirm={async () => {
|
||||
await saveData();
|
||||
}}
|
||||
>
|
||||
{dataToCompare && <SignUpAndSignInChangePreview before={data} after={dataToCompare} />}
|
||||
</ConfirmModal>
|
||||
)}
|
||||
<UnsavedChangesAlertModal
|
||||
hasUnsavedChanges={isDirty}
|
||||
parentPath="/console/sign-in-experience"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -9,8 +9,9 @@ const sign_in_exp = {
|
|||
others: 'Andere',
|
||||
},
|
||||
welcome: {
|
||||
title:
|
||||
'Dies ist das erste Mal, dass du deine Anmeldeoberfläche anpasst. Diese Anleitung hilft dir, alle notwendigen Einstellungen vorzunehmen und schnell loszulegen.',
|
||||
title: 'Customize sign-in experience', // UNTRANSLATED
|
||||
description:
|
||||
'Get started fast with your first sign-in setup. This guide walks you through all the necessary settings.', // UNTRANSLATED
|
||||
get_started: 'Erste Schritte',
|
||||
apply_remind:
|
||||
'Bitte beachte, dass die Anmeldeoberfläche für alle Anwendungen unter diesem Konto gilt.',
|
||||
|
|
|
@ -7,8 +7,9 @@ const sign_in_exp = {
|
|||
others: 'Others',
|
||||
},
|
||||
welcome: {
|
||||
title:
|
||||
'This is the first time you define sign-in experience. This guide will help you go through all necessary settings and quickly get started.',
|
||||
title: 'Customize sign-in experience',
|
||||
description:
|
||||
'Get started fast with your first sign-in setup. This guide walks you through all the necessary settings.',
|
||||
get_started: 'Get Started',
|
||||
apply_remind:
|
||||
'Please note that sign-in experience will apply to all applications under this account.',
|
||||
|
|
|
@ -8,8 +8,9 @@ const sign_in_exp = {
|
|||
others: 'Autres',
|
||||
},
|
||||
welcome: {
|
||||
title:
|
||||
"C'est la première fois que vous définissez l'expérience de connexion. Ce guide vous aidera à passer par tous les paramètres nécessaires et à démarrer rapidement.",
|
||||
title: 'Customize sign-in experience', // UNTRANSLATED
|
||||
description:
|
||||
'Get started fast with your first sign-in setup. This guide walks you through all the necessary settings.', // UNTRANSLATED
|
||||
get_started: 'Commencez',
|
||||
apply_remind:
|
||||
"Veuillez noter que l'expérience de connexion s'appliquera à toutes les applications sous ce compte.",
|
||||
|
|
|
@ -7,7 +7,9 @@ const sign_in_exp = {
|
|||
others: '기타',
|
||||
},
|
||||
welcome: {
|
||||
title: '가이드를 따라, 필수 설정을 빠르게 수정해 보세요.',
|
||||
title: 'Customize sign-in experience', // UNTRANSLATED
|
||||
description:
|
||||
'Get started fast with your first sign-in setup. This guide walks you through all the necessary settings.', // UNTRANSLATED
|
||||
get_started: '시작하기',
|
||||
apply_remind: '이 계정이 관리하는 모든 앱의 로그인 경험이 수정되는 것을 주의해 주세요.',
|
||||
},
|
||||
|
|
|
@ -8,8 +8,9 @@ const sign_in_exp = {
|
|||
others: 'Outros',
|
||||
},
|
||||
welcome: {
|
||||
title:
|
||||
'Esta é a primeira vez que você define a experiência de login. Este guia irá ajudá-lo a passar por todas as configurações necessárias e começar rapidamente.',
|
||||
title: 'Customize sign-in experience', // UNTRANSLATED
|
||||
description:
|
||||
'Get started fast with your first sign-in setup. This guide walks you through all the necessary settings.', // UNTRANSLATED
|
||||
get_started: 'Iniciar',
|
||||
apply_remind:
|
||||
'Observe que a experiência de login será aplicada a todos os aplicativos nesta conta.',
|
||||
|
|
|
@ -8,8 +8,9 @@ const sign_in_exp = {
|
|||
others: 'Outros',
|
||||
},
|
||||
welcome: {
|
||||
title:
|
||||
'Esta é a primeira vez que define a experiência de login. Este guia irá ajudá-lo a passar por todas as configurações necessárias e começar rapidamente.',
|
||||
title: 'Customize sign-in experience', // UNTRANSLATED
|
||||
description:
|
||||
'Get started fast with your first sign-in setup. This guide walks you through all the necessary settings.', // UNTRANSLATED
|
||||
get_started: 'Começar',
|
||||
apply_remind: 'Observe que a experiência de login será aplicada a todos os apps nesta conta.',
|
||||
},
|
||||
|
|
|
@ -8,8 +8,9 @@ const sign_in_exp = {
|
|||
others: 'Diğerleri',
|
||||
},
|
||||
welcome: {
|
||||
title:
|
||||
'Bu oturum açma deneyimini ilk kez tanımlıyorsunuz. Bu kılavuz, gerekli tüm ayarları yapmanıza ve hızlı bir şekilde başlamanıza yardımcı olacaktır.',
|
||||
title: 'Customize sign-in experience', // UNTRANSLATED
|
||||
description:
|
||||
'Get started fast with your first sign-in setup. This guide walks you through all the necessary settings.', // UNTRANSLATED
|
||||
get_started: 'Başla',
|
||||
apply_remind:
|
||||
'Lütfen oturum açma deneyiminin bu hesap altındaki tüm uygulamalar için geçerli olacağını unutmayınız.',
|
||||
|
|
|
@ -7,7 +7,9 @@ const sign_in_exp = {
|
|||
others: '其它',
|
||||
},
|
||||
welcome: {
|
||||
title: '这是你首次定义登录体验。跟随引导,完成登录体验的必要设置项。',
|
||||
title: 'Customize sign-in experience', // UNTRANSLATED
|
||||
description:
|
||||
'Get started fast with your first sign-in setup. This guide walks you through all the necessary settings.', // UNTRANSLATED
|
||||
get_started: '开始',
|
||||
apply_remind: '请注意,登录体验将会应用到当前帐户下的所有应用。',
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue