add sign up page
This commit is contained in:
MaysWind
@@ -1,5 +1,5 @@
|
||||
<?xml version="1.0"?>
|
||||
<svg width="240" height="240" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<svg width="120" height="240" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<g class="layer">
|
||||
<title>Layer 1</title>
|
||||
<g id="OBJECTS">
|
||||
@@ -73,81 +73,81 @@
|
||||
<g id="svg_106">
|
||||
<g id="svg_107">
|
||||
<g id="svg_108">
|
||||
<path d="m128.3,141.244l-2.689,64.307l-4.824,-0.362c0,0 -5.422,-36.369 -4.115,-54.575l11.628,-9.37z" fill="#EDBC9C" id="svg_109"/>
|
||||
<path d="m61.3,141.244l-2.689,64.307l-4.824,-0.362c0,0 -5.422,-36.369 -4.115,-54.575l11.628,-9.37z" fill="#EDBC9C" id="svg_109"/>
|
||||
<g id="svg_110">
|
||||
<path d="m130.882,214.201c0,0 6.033,2.309 6.64,4.92l-13.121,0l-2.064,-4.069l-1.397,4.069l-1.412,0c0,0 -1.324,-10.555 1.259,-13.931l10.095,9.011z" fill="#20202A" id="svg_111"/>
|
||||
<path d="m125.7,203.276l-0.089,2.275l5.837,9.767c0,0 -6.44,1.208 -8.852,-3.375c-2.412,-4.583 -1.809,-6.754 -1.809,-6.754l-0.33,-2.194l5.243,0.281z" fill="#EDBC9C" id="svg_112"/>
|
||||
<path d="m63.882,214.201c0,0 6.033,2.309 6.64,4.92l-13.121,0l-2.064,-4.069l-1.397,4.069l-1.412,0c0,0 -1.324,-10.555 1.259,-13.931l10.095,9.011z" fill="#20202A" id="svg_111"/>
|
||||
<path d="m58.7,203.276l-0.089,2.275l5.837,9.767c0,0 -6.44,1.208 -8.852,-3.375c-2.412,-4.583 -1.809,-6.754 -1.809,-6.754l-0.33,-2.194l5.243,0.281z" fill="#EDBC9C" id="svg_112"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="svg_113">
|
||||
<path d="m114.796,141.244l-2.689,64.307l-4.824,-0.362c0,0 -5.422,-36.369 -4.114,-54.575l11.627,-9.37z" fill="#EDBC9C" id="svg_114"/>
|
||||
<path d="m47.796,141.244l-2.689,64.307l-4.824,-0.362c0,0 -5.422,-36.369 -4.114,-54.575l11.627,-9.37z" fill="#EDBC9C" id="svg_114"/>
|
||||
<g id="svg_115">
|
||||
<path d="m117.378,214.201c0,0 6.033,2.309 6.64,4.92l-13.121,0l-2.065,-4.069l-1.397,4.069l-1.412,0c0,0 -1.324,-10.555 1.259,-13.931l10.096,9.011z" fill="#20202A" id="svg_116"/>
|
||||
<path d="m112.196,203.276l-0.089,2.275l5.837,9.767c0,0 -6.44,1.208 -8.852,-3.375c-2.412,-4.583 -1.809,-6.754 -1.809,-6.754l-0.33,-2.194l5.243,0.281z" fill="#EDBC9C" id="svg_117"/>
|
||||
<path d="m50.378,214.201c0,0 6.033,2.309 6.64,4.92l-13.121,0l-2.065,-4.069l-1.397,4.069l-1.412,0c0,0 -1.324,-10.555 1.259,-13.931l10.096,9.011z" fill="#20202A" id="svg_116"/>
|
||||
<path d="m45.196,203.276l-0.089,2.275l5.837,9.767c0,0 -6.44,1.208 -8.852,-3.375c-2.412,-4.583 -1.809,-6.754 -1.809,-6.754l-0.33,-2.194l5.243,0.281z" fill="#EDBC9C" id="svg_117"/>
|
||||
</g>
|
||||
</g>
|
||||
<path d="m104.759,96.171c0,0 -6.725,1.185 -10.812,43.664l-1.451,16.827c0,0 5.437,-1.917 14.885,2.343c9.449,4.26 30.029,-4.686 30.029,-4.686s-1.349,-39.087 -10.452,-59.906l-22.199,1.758z" fill="#C4B6A7" id="svg_118"/>
|
||||
<path d="m37.759,96.171c0,0 -6.725,1.185 -10.812,43.664l-1.451,16.827c0,0 5.437,-1.917 14.885,2.343c9.449,4.26 30.029,-4.686 30.029,-4.686s-1.349,-39.087 -10.452,-59.906l-22.199,1.758z" fill="#C4B6A7" id="svg_118"/>
|
||||
</g>
|
||||
<g id="svg_119">
|
||||
<path d="m103.29,33.629c0,0 0.423,6.627 -1.553,10.145c-1.976,3.518 -3.479,4.967 -4.006,8.788c0,0 16.576,4.945 33.177,-0.558l-6.522,-18.376l-21.096,0l0,0.001z" fill="#412424" id="svg_120"/>
|
||||
<path d="m124.354,26.041c0,0 -15.531,-4.207 -19.923,3.58c-3.187,5.65 0.578,15.881 7.856,18.764c6.932,2.746 4.965,-19.842 4.965,-19.842l7.102,-2.502z" fill="#412424" id="svg_121"/>
|
||||
<path d="m122.874,40.087c-0.157,1.865 1.227,3.504 3.092,3.661c1.865,0.157 3.504,-1.227 3.661,-3.092c0.157,-1.865 -1.227,-3.504 -3.092,-3.661c-1.865,-0.158 -3.504,1.227 -3.661,3.092z" fill="#DEA888" id="svg_122"/>
|
||||
<path d="m121.352,49.556l-0.576,7.363c-0.197,2.586 -1.896,3.847 -4.44,3.633l0,0c-2.172,-0.183 -4.117,-1.476 -4.205,-3.653l1.464,-11.544l7.757,4.201z" fill="#EDBC9C" id="svg_123"/>
|
||||
<polygon fill="#DEA888" id="svg_124" points="120.94700622558594,54.875 112.44700622558594,47.135986328125 121.42599487304688,48.803009033203125 "/>
|
||||
<path d="m119.092,50.715l0,0c4.354,0.077 8,-3.3 8.182,-6.853l0.379,-8.387c0.228,-4.454 -3.118,-8.286 -7.562,-8.66l0,0c-4.549,-0.383 -9.346,2.927 -9.729,7.476l-0.231,6.749c-0.18,5.218 3.756,9.236 8.961,9.675z" fill="#EDBC9C" id="svg_125"/>
|
||||
<path d="m115.166,30.423c1.575,3.798 -3.21,9.62 -3.21,9.62l-5.761,-6.925c-0.001,0 7.856,-5.383 8.971,-2.695z" fill="#412424" id="svg_126"/>
|
||||
<path d="m36.29,33.629c0,0 0.423,6.627 -1.553,10.145c-1.976,3.518 -3.479,4.967 -4.006,8.788c0,0 16.576,4.945 33.177,-0.558l-6.522,-18.376l-21.096,0l0,0.001z" fill="#412424" id="svg_120"/>
|
||||
<path d="m57.354,26.041c0,0 -15.531,-4.207 -19.923,3.58c-3.187,5.65 0.578,15.881 7.856,18.764c6.932,2.746 4.965,-19.842 4.965,-19.842l7.102,-2.502z" fill="#412424" id="svg_121"/>
|
||||
<path d="m55.874,40.087c-0.157,1.865 1.227,3.504 3.092,3.661c1.865,0.157 3.504,-1.227 3.661,-3.092c0.157,-1.865 -1.227,-3.504 -3.092,-3.661c-1.865,-0.158 -3.504,1.227 -3.661,3.092z" fill="#DEA888" id="svg_122"/>
|
||||
<path d="m54.352,49.556l-0.576,7.363c-0.197,2.586 -1.896,3.847 -4.44,3.633l0,0c-2.172,-0.183 -4.117,-1.476 -4.205,-3.653l1.464,-11.544l7.757,4.201z" fill="#EDBC9C" id="svg_123"/>
|
||||
<polygon fill="#DEA888" id="svg_124" points="53.94700622558594,54.875 45.44700622558594,47.135986328125 54.425994873046875,48.803009033203125 "/>
|
||||
<path d="m52.092,50.715l0,0c4.354,0.077 8,-3.3 8.182,-6.853l0.379,-8.387c0.228,-4.454 -3.118,-8.286 -7.562,-8.66l0,0c-4.549,-0.383 -9.346,2.927 -9.729,7.476l-0.231,6.749c-0.18,5.218 3.756,9.236 8.961,9.675z" fill="#EDBC9C" id="svg_125"/>
|
||||
<path d="m48.166,30.423c1.575,3.798 -3.21,9.62 -3.21,9.62l-5.761,-6.925c-0.001,0 7.856,-5.383 8.971,-2.695z" fill="#412424" id="svg_126"/>
|
||||
<g id="svg_127">
|
||||
<path d="m106.079,40.019c-0.157,1.865 1.227,3.504 3.092,3.662c1.865,0.157 3.504,-1.227 3.661,-3.092c0.157,-1.865 -1.227,-3.504 -3.092,-3.661c-1.864,-0.159 -3.503,1.226 -3.661,3.091z" fill="#EDBC9C" id="svg_128"/>
|
||||
<path d="m110.552,41.407c0,0 0.206,-2.448 -2.167,-2.26" fill="none" id="svg_129" stroke="#1F2326" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.5387"/>
|
||||
<path d="m39.079,40.019c-0.157,1.865 1.227,3.504 3.092,3.662c1.865,0.157 3.504,-1.227 3.661,-3.092c0.157,-1.865 -1.227,-3.504 -3.092,-3.661c-1.864,-0.159 -3.503,1.226 -3.661,3.091z" fill="#EDBC9C" id="svg_128"/>
|
||||
<path d="m43.552,41.407c0,0 0.206,-2.448 -2.167,-2.26" fill="none" id="svg_129" stroke="#1F2326" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.5387"/>
|
||||
</g>
|
||||
<g id="svg_130">
|
||||
<polyline fill="none" id="svg_131" points="122.81500244140625,41.614990234375 122.968994140625,43.125 121.83299255371094,43.170989990234375 " stroke="#1F2326" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.5387"/>
|
||||
<path d="m117.628,35.968c0,0 1.881,-0.164 1.902,0.627c0,0 0,0.535 -1.641,0.646c-1.641,0.11 -2.068,-0.013 -2.219,-0.516c-0.152,-0.503 1.076,-0.75 1.958,-0.757z" fill="#1F2326" id="svg_132"/>
|
||||
<path d="m125.494,36.176c0,0 -1.553,-0.162 -1.678,0.581c0,0 -0.073,0.503 1.287,0.613c1.36,0.11 1.802,-0.069 1.929,-0.475c0.144,-0.46 -0.8,-0.709 -1.538,-0.719z" fill="#1F2326" id="svg_133"/>
|
||||
<path d="m124.385,39.954c-0.013,0.45 0.33,0.826 0.766,0.84c0.436,0.014 0.8,-0.34 0.813,-0.79c0.013,-0.45 -0.329,-0.826 -0.766,-0.84c-0.436,-0.014 -0.8,0.34 -0.813,0.79z" fill="#1F2326" id="svg_134"/>
|
||||
<path d="m117.465,39.732c-0.013,0.45 0.329,0.826 0.766,0.84c0.436,0.014 0.8,-0.34 0.813,-0.79c0.013,-0.45 -0.329,-0.826 -0.766,-0.84c-0.435,-0.014 -0.799,0.34 -0.813,0.79z" fill="#1F2326" id="svg_135"/>
|
||||
<path d="m123.815,44.735l-5.726,0c0,0 0.905,1.788 3.263,1.779c2.148,-0.007 2.463,-1.779 2.463,-1.779z" fill="#FFFFFF" id="svg_136"/>
|
||||
<polyline fill="none" id="svg_131" points="55.81500244140625,41.614990234375 55.968994140625,43.125 54.83299255371094,43.170989990234375 " stroke="#1F2326" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="0.5387"/>
|
||||
<path d="m50.628,35.968c0,0 1.881,-0.164 1.902,0.627c0,0 0,0.535 -1.641,0.646c-1.641,0.11 -2.068,-0.013 -2.219,-0.516c-0.152,-0.503 1.076,-0.75 1.958,-0.757z" fill="#1F2326" id="svg_132"/>
|
||||
<path d="m58.494,36.176c0,0 -1.553,-0.162 -1.678,0.581c0,0 -0.073,0.503 1.287,0.613c1.36,0.11 1.802,-0.069 1.929,-0.475c0.144,-0.46 -0.8,-0.709 -1.538,-0.719z" fill="#1F2326" id="svg_133"/>
|
||||
<path d="m57.385,39.954c-0.013,0.45 0.33,0.826 0.766,0.84c0.436,0.014 0.8,-0.34 0.813,-0.79c0.013,-0.45 -0.329,-0.826 -0.766,-0.84c-0.436,-0.014 -0.8,0.34 -0.813,0.79z" fill="#1F2326" id="svg_134"/>
|
||||
<path d="m50.465,39.732c-0.013,0.45 0.329,0.826 0.766,0.84c0.436,0.014 0.8,-0.34 0.813,-0.79c0.013,-0.45 -0.329,-0.826 -0.766,-0.84c-0.435,-0.014 -0.799,0.34 -0.813,0.79z" fill="#1F2326" id="svg_135"/>
|
||||
<path d="m56.815,44.735l-5.726,0c0,0 0.905,1.788 3.263,1.779c2.148,-0.007 2.463,-1.779 2.463,-1.779z" fill="#FFFFFF" id="svg_136"/>
|
||||
</g>
|
||||
<path d="m114.205,30.423c0,0 3.424,5.851 14.408,3.798c0,0 2.67,-5.993 -4.259,-8.18c-6.93,-2.188 -14.898,1.508 -14.898,1.508l0,4.927l4.749,-2.053z" fill="#412424" id="svg_137"/>
|
||||
<path d="m47.205,30.423c0,0 3.424,5.851 14.408,3.798c0,0 2.67,-5.993 -4.259,-8.18c-6.93,-2.188 -14.898,1.508 -14.898,1.508l0,4.927l4.749,-2.053z" fill="#412424" id="svg_137"/>
|
||||
</g>
|
||||
<g id="svg_138">
|
||||
<g id="svg_139">
|
||||
<path d="m123.454,58.018c0,0 9.821,2.329 11.553,15.317l-6.3,5.391l-5.253,-20.708z" fill="#808DFF" id="svg_140"/>
|
||||
<path d="m56.454,58.018c0,0 9.821,2.329 11.553,15.317l-6.3,5.391l-5.253,-20.708z" fill="#808DFF" id="svg_140"/>
|
||||
<g id="svg_141">
|
||||
<path d="m139.006,94.803c-0.177,-0.291 -0.064,2.104 -0.172,1.78c0,0 -2.925,-4.972 -7.25,-15.385c-1.106,-2.664 0.385,-10.814 3.26,-11.041c2.111,-0.167 4.618,3.77 5.121,5.827l5.243,13.186l-6.202,5.633z" fill="#EDBC9C" id="svg_142"/>
|
||||
<path d="m140.62,90.323l20.437,-11.019l1.882,2.079l-16.512,16.377c-2.398,2.406 -6.473,1.593 -7.765,-1.548l0,0c-0.895,-2.177 -0.063,-4.681 1.958,-5.889z" fill="#EDBC9C" id="svg_143"/>
|
||||
<path d="m168.709,78.454c1.374,1.815 0.663,4.668 -1.588,6.371c-2.251,1.703 -5.189,1.612 -6.563,-0.203c-1.374,-1.815 -0.663,-4.668 1.588,-6.371c2.251,-1.703 5.189,-1.612 6.563,0.203z" fill="#EDBC9C" id="svg_144"/>
|
||||
<path d="m72.006,94.803c-0.177,-0.291 -0.064,2.104 -0.172,1.78c0,0 -2.925,-4.972 -7.25,-15.385c-1.106,-2.664 0.385,-10.814 3.26,-11.041c2.111,-0.167 4.618,3.77 5.121,5.827l5.243,13.186l-6.202,5.633z" fill="#EDBC9C" id="svg_142"/>
|
||||
<path d="m73.62,90.323l20.437,-11.019l1.882,2.079l-16.512,16.377c-2.398,2.406 -6.473,1.593 -7.765,-1.548l0,0c-0.895,-2.177 -0.063,-4.681 1.958,-5.889z" fill="#EDBC9C" id="svg_143"/>
|
||||
<path d="m101.709,78.454c1.374,1.815 0.663,4.668 -1.588,6.371c-2.251,1.703 -5.189,1.612 -6.563,-0.203c-1.374,-1.815 -0.663,-4.668 1.588,-6.371c2.251,-1.703 5.189,-1.612 6.563,0.203z" fill="#EDBC9C" id="svg_144"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="svg_145">
|
||||
<g id="svg_146">
|
||||
<g id="svg_147">
|
||||
<path d="m103.26,97.764c0.829,0.016 25.04,-0.28 25.04,-0.28l-1.802,-35.76l-17.901,3.048l-5.337,32.992z" fill="#FFFFFF" id="svg_148"/>
|
||||
<path d="m108.597,57.649l7.183,-1.259l5.305,0.957l4.102,8.332c0,0 1.227,3.814 -5.311,4.419c-6.538,0.605 -11.078,-3.995 -12.167,-6.84c-1.09,-2.846 0.888,-5.609 0.888,-5.609z" fill="#EDBC9C" id="svg_149"/>
|
||||
<path d="m36.26,97.764c0.829,0.016 25.04,-0.28 25.04,-0.28l-1.802,-35.76l-17.901,3.048l-5.337,32.992z" fill="#FFFFFF" id="svg_148"/>
|
||||
<path d="m41.597,57.649l7.183,-1.259l5.305,0.957l4.102,8.332c0,0 1.227,3.814 -5.311,4.419c-6.538,0.605 -11.078,-3.995 -12.167,-6.84c-1.09,-2.846 0.888,-5.609 0.888,-5.609z" fill="#EDBC9C" id="svg_149"/>
|
||||
</g>
|
||||
<g id="svg_150">
|
||||
<path d="m121.085,57.347c0,0 5.376,11.324 4.043,23.017c-1.332,11.694 5.31,24.05 5.31,24.05l0,-32.265c0,0 -0.07,-13.466 -9.353,-14.802z" fill="#808DFF" id="svg_151"/>
|
||||
<path d="m129.766,67.107c0,0 2.192,5.383 0.673,14.431" fill="none" id="svg_152" stroke="#5F73E8" stroke-miterlimit="10" stroke-width="0.764"/>
|
||||
<path d="m54.085,57.347c0,0 5.376,11.324 4.043,23.017c-1.332,11.694 5.31,24.05 5.31,24.05l0,-32.265c0,0 -0.07,-13.466 -9.353,-14.802z" fill="#808DFF" id="svg_151"/>
|
||||
<path d="m62.766,67.107c0,0 2.192,5.383 0.673,14.431" fill="none" id="svg_152" stroke="#5F73E8" stroke-miterlimit="10" stroke-width="0.764"/>
|
||||
</g>
|
||||
<path d="m108.597,57.649c0,0 16.376,20.229 -9.038,48.331l2.684,-46.65l6.354,-1.681z" fill="#808DFF" id="svg_153"/>
|
||||
<path d="m41.597,57.649c0,0 16.376,20.229 -9.038,48.331l2.684,-46.65l6.354,-1.681z" fill="#808DFF" id="svg_153"/>
|
||||
</g>
|
||||
<g id="svg_154">
|
||||
<g id="svg_155">
|
||||
<g id="svg_156">
|
||||
<path d="m102.286,59.315c0,0 -12.081,2.553 -12.675,26.91l14.457,-1.365l1.98,-19.807l-3.762,-5.738z" fill="#808DFF" id="svg_157"/>
|
||||
<path d="m103.679,90.803c0,0 3.15,-3.086 0.389,-5.944c0,0 -10.297,-1.601 -16.298,2.167c0,0 -2.512,4.286 0.698,6.608c0,0.001 4.326,-2.831 15.211,-2.831z" fill="#9CABFF" id="svg_158"/>
|
||||
<line fill="none" id="svg_159" stroke="#5F73E8" stroke-miterlimit="10" stroke-width="0.764" x1="104.068" x2="106.46" y1="84.86" y2="70.101"/>
|
||||
<path d="m35.286,59.315c0,0 -12.081,2.553 -12.675,26.91l14.457,-1.365l1.98,-19.807l-3.762,-5.738z" fill="#808DFF" id="svg_157"/>
|
||||
<path d="m36.679,90.803c0,0 3.15,-3.086 0.389,-5.944c0,0 -10.297,-1.601 -16.298,2.167c0,0 -2.512,4.286 0.698,6.608c0,0.001 4.326,-2.831 15.211,-2.831z" fill="#9CABFF" id="svg_158"/>
|
||||
<line fill="none" id="svg_159" stroke="#5F73E8" stroke-miterlimit="10" stroke-width="0.764" x1="37.068" x2="39.46" y1="84.86" y2="70.101"/>
|
||||
</g>
|
||||
<g id="svg_160">
|
||||
<path d="m103.679,90.803l22.472,2.831l-1.249,4.419l-30.375,0.75c-3.043,0.075 -5.654,-2.153 -6.059,-5.169l0,0c0,0.001 6.728,-4.835 15.211,-2.831z" fill="#EDBC9C" id="svg_161"/>
|
||||
<path d="m135.003,95.927c-0.117,2.805 -3.031,4.961 -6.508,4.816c-3.478,-0.145 -6.202,-2.536 -6.085,-5.341c0.117,-2.805 3.031,-4.961 6.508,-4.816c3.478,0.145 6.202,2.536 6.085,5.341z" fill="#EDBC9C" id="svg_162"/>
|
||||
<path d="m36.679,90.803l22.472,2.831l-1.249,4.419l-30.375,0.75c-3.043,0.075 -5.654,-2.153 -6.059,-5.169l0,0c0,0.001 6.728,-4.835 15.211,-2.831z" fill="#EDBC9C" id="svg_161"/>
|
||||
<path d="m68.003,95.927c-0.117,2.805 -3.031,4.961 -6.508,4.816c-3.478,-0.145 -6.202,-2.536 -6.085,-5.341c0.117,-2.805 3.031,-4.961 6.508,-4.816c3.478,0.145 6.202,2.536 6.085,5.341z" fill="#EDBC9C" id="svg_162"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="svg_163">
|
||||
<path d="m104.285,93.313l23.99,0l0,-2.707l-23.99,0c-0.747,0 -1.353,0.606 -1.353,1.354l0,0c0,0.747 0.605,1.353 1.353,1.353z" fill="#1C2123" id="svg_164"/>
|
||||
<path d="m37.285,93.313l23.99,0l0,-2.707l-23.99,0c-0.747,0 -1.353,0.606 -1.353,1.354l0,0c0,0.747 0.605,1.353 1.353,1.353z" fill="#1C2123" id="svg_164"/>
|
||||
<g id="svg_165">
|
||||
<path d="m125.117,93.313l34.442,0c1.831,0 3.438,-1.221 3.928,-2.984l6.199,-22.27c0.548,-1.969 -0.933,-3.918 -2.976,-3.918l-31.85,0c-1.222,0 -2.291,0.824 -2.601,2.006l-7.142,27.166z" fill="#2E353A" id="svg_166"/>
|
||||
<path d="m145.798,79.973c0,1.661 1.347,3.007 3.008,3.007s3.007,-1.346 3.007,-3.007c0,-1.661 -1.346,-3.007 -3.007,-3.007s-3.008,1.346 -3.008,3.007z" fill="#FFFFFF" id="svg_167"/>
|
||||
<path d="m58.117,93.313l34.442,0c1.831,0 3.438,-1.221 3.928,-2.984l6.199,-22.27c0.548,-1.969 -0.933,-3.918 -2.976,-3.918l-31.85,0c-1.222,0 -2.291,0.824 -2.601,2.006l-7.142,27.166z" fill="#2E353A" id="svg_166"/>
|
||||
<path d="m78.798,79.973c0,1.661 1.347,3.007 3.008,3.007s3.007,-1.346 3.007,-3.007c0,-1.661 -1.346,-3.007 -3.007,-3.007s-3.008,1.346 -3.008,3.007z" fill="#FFFFFF" id="svg_167"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<i class="item-icon" :class="icon" :style="style">
|
||||
<slot></slot>
|
||||
</i>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import iconConstatns from '@/consts/icon.js';
|
||||
import colorConstatns from '@/consts/color.js';
|
||||
import { isNumber } from '@/lib/common.js';
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'iconType',
|
||||
'iconId',
|
||||
'color',
|
||||
'defaultColor',
|
||||
'additionalColorAttr'
|
||||
],
|
||||
computed: {
|
||||
icon() {
|
||||
if (this.iconType === 'account') {
|
||||
return this.getAccountIcon(this.iconId);
|
||||
} else if (this.iconType === 'category') {
|
||||
return this.getCategoryIcon(this.iconId);
|
||||
} else if (this.iconType === 'fixed') {
|
||||
return this.iconId;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
},
|
||||
style() {
|
||||
let defaultColor = 'var(--default-icon-color)';
|
||||
|
||||
if (this.defaultColor) {
|
||||
defaultColor = this.defaultColor;
|
||||
}
|
||||
|
||||
if (this.iconType === 'account') {
|
||||
return this.getAccountIconStyle(this.color, defaultColor, this.additionalColorAttr);
|
||||
} else if (this.iconType === 'category') {
|
||||
return this.getCategoryIconStyle(this.color, defaultColor, this.additionalColorAttr);
|
||||
} else {
|
||||
return this.getDefaultIconStyle(this.color, defaultColor, this.additionalColorAttr);
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getAccountIcon(iconId) {
|
||||
if (isNumber(iconId)) {
|
||||
iconId = iconId.toString();
|
||||
}
|
||||
|
||||
if (!iconConstatns.allAccountIcons[iconId]) {
|
||||
return iconConstatns.defaultAccountIcon.icon;
|
||||
}
|
||||
|
||||
return iconConstatns.allAccountIcons[iconId].icon;
|
||||
},
|
||||
getCategoryIcon(iconId) {
|
||||
if (isNumber(iconId)) {
|
||||
iconId = iconId.toString();
|
||||
}
|
||||
|
||||
if (!iconConstatns.allCategoryIcons[iconId]) {
|
||||
return iconConstatns.defaultCategoryIcon.icon;
|
||||
}
|
||||
|
||||
return iconConstatns.allCategoryIcons[iconId].icon;
|
||||
},
|
||||
getAccountIconStyle(color, defaultColor, additionalColorAttr) {
|
||||
if (color && color !== colorConstatns.defaultAccountColor) {
|
||||
color = '#' + color;
|
||||
} else {
|
||||
color = defaultColor;
|
||||
}
|
||||
|
||||
const ret = {
|
||||
color: color
|
||||
};
|
||||
|
||||
if (additionalColorAttr) {
|
||||
ret[additionalColorAttr] = color;
|
||||
}
|
||||
|
||||
return ret;
|
||||
},
|
||||
getCategoryIconStyle(color, defaultColor, additionalColorAttr) {
|
||||
if (color && color !== colorConstatns.defaultCategoryColor) {
|
||||
color = '#' + color;
|
||||
} else {
|
||||
color = defaultColor;
|
||||
}
|
||||
|
||||
const ret = {
|
||||
color: color
|
||||
};
|
||||
|
||||
if (additionalColorAttr) {
|
||||
ret[additionalColorAttr] = color;
|
||||
}
|
||||
|
||||
return ret;
|
||||
},
|
||||
getDefaultIconStyle(color, defaultColor, additionalColorAttr) {
|
||||
if (color && color !== colorConstatns.defaultColor) {
|
||||
color = '#' + color;
|
||||
} else {
|
||||
color = defaultColor;
|
||||
}
|
||||
|
||||
const ret = {
|
||||
color: color
|
||||
};
|
||||
|
||||
if (additionalColorAttr) {
|
||||
ret[additionalColorAttr] = color;
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.item-icon {
|
||||
font-size: var(--ebk-icon-font-size);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
background-size: 100% auto;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
font-style: normal;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="d-flex" :style="`min-width: ${minWidth}px`" v-if="minWidth"></div>
|
||||
<v-slide-group class="slide-group-with-stepper mb-10 hidden-xs" show-arrows>
|
||||
<v-slide-group-item :key="idx" v-for="(step, idx) in steps">
|
||||
<div class="cursor-pointer mx-1"
|
||||
:class="{ 'slide-group-step-active': isStepActive(step), 'slide-group-step-completed': isStepCompleted(idx) }"
|
||||
@click="changeStep(step)">
|
||||
<div class="d-flex align-center gap-x-2">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<div class="d-flex align-center justify-center" style="block-size: 24px; inline-size: 24px;">
|
||||
<div class="slide-group-stepper-indicator"></div>
|
||||
</div>
|
||||
<h4 class="text-h4 step-number">{{ `0${idx + 1}` }}</h4>
|
||||
</div>
|
||||
<div style="line-height: 0;">
|
||||
<h6 class="text-sm font-weight-medium step-title">{{ step.title }}</h6>
|
||||
<span class="text-xs step-subtitle">{{ step.subTitle }}</span>
|
||||
</div>
|
||||
<div class="slide-group-stepper-link-line" v-if="idx < steps.length - 1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</v-slide-group-item>
|
||||
</v-slide-group>
|
||||
<v-slide-group class="slide-group-with-stepper mb-3 hidden-sm-and-up" direction="vertical">
|
||||
<v-slide-group-item :key="idx" v-for="(step, idx) in steps">
|
||||
<div class="cursor-pointer mx-1 mb-3"
|
||||
:class="{ 'slide-group-step-active': isStepActive(step), 'slide-group-step-completed': isStepCompleted(idx) }"
|
||||
@click="changeStep(step)">
|
||||
<div class="d-flex align-center gap-x-2">
|
||||
<div class="d-flex align-center gap-2">
|
||||
<div class="d-flex align-center justify-center" style="block-size: 24px; inline-size: 24px;">
|
||||
<div class="slide-group-stepper-indicator"></div>
|
||||
</div>
|
||||
<h4 class="text-h4 step-number">{{ `0${idx + 1}` }}</h4>
|
||||
</div>
|
||||
<div style="line-height: 0;">
|
||||
<h6 class="text-sm font-weight-medium step-title">{{ step.title }}</h6>
|
||||
<span class="text-xs step-subtitle">{{ step.subTitle }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-slide-group-item>
|
||||
</v-slide-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'steps',
|
||||
'currentStep',
|
||||
'minWidth'
|
||||
],
|
||||
emits: [
|
||||
'step:change'
|
||||
],
|
||||
methods: {
|
||||
changeStep(step) {
|
||||
this.$emit('step:change', step.name);
|
||||
},
|
||||
isStepActive(step) {
|
||||
return this.currentStep === step.name;
|
||||
},
|
||||
isStepCompleted(stepIndex) {
|
||||
for (let i = 0; i < this.steps.length; i++) {
|
||||
if (this.steps[i].name === this.currentStep) {
|
||||
return stepIndex < i;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.slide-group-with-stepper .v-slide-group__content .slide-group-stepper-link-line {
|
||||
background-color: rgb(var(--v-theme-primary));
|
||||
border-radius: 0.1875rem;
|
||||
block-size: .1875rem;
|
||||
inline-size: 3.75rem;
|
||||
opacity: var(--v-activated-opacity);
|
||||
}
|
||||
|
||||
.slide-group-with-stepper .v-slide-group__content .slide-group-stepper-indicator {
|
||||
background-color: rgb(var(--v-theme-surface));
|
||||
border: 0.3125rem solid rgb(var(--v-theme-primary));
|
||||
border-radius: 50%;
|
||||
block-size: 1.25rem;
|
||||
inline-size: 1.25rem;
|
||||
opacity: var(--v-activated-opacity);
|
||||
}
|
||||
|
||||
.slide-group-with-stepper .v-slide-group__content .slide-group-step-completed .slide-group-stepper-indicator,
|
||||
.slide-group-with-stepper .v-slide-group__content .slide-group-step-active .slide-group-stepper-indicator,
|
||||
.slide-group-with-stepper .v-slide-group__content .slide-group-step-completed .slide-group-stepper-link-line {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
@@ -12,6 +12,7 @@ import { VCard, VCardActions, VCardItem, VCardSubtitle, VCardText, VCardTitle }
|
||||
import { VChip } from 'vuetify/components/VChip';
|
||||
import { VDialog } from 'vuetify/components/VDialog';
|
||||
import { VDivider } from 'vuetify/components/VDivider';
|
||||
import { VExpansionPanel, VExpansionPanelText, VExpansionPanelTitle, VExpansionPanels } from 'vuetify/components/VExpansionPanel';
|
||||
import { VForm } from 'vuetify/components/VForm';
|
||||
import { VContainer, VCol, VRow, VSpacer } from 'vuetify/components/VGrid';
|
||||
import { VIcon } from 'vuetify/components/VIcon';
|
||||
@@ -26,6 +27,7 @@ import { VProgressCircular } from 'vuetify/components/VProgressCircular';
|
||||
import { VProgressLinear } from 'vuetify/components/VProgressLinear';
|
||||
import { VSelect } from 'vuetify/components/VSelect';
|
||||
import { VSheet } from 'vuetify/components/VSheet';
|
||||
import { VSlideGroup, VSlideGroupItem } from 'vuetify/components/VSlideGroup';
|
||||
import { VSnackbar } from 'vuetify/components/VSnackbar';
|
||||
import { VSwitch } from 'vuetify/components/VSwitch';
|
||||
import { VTabs, VTab } from 'vuetify/components/VTabs';
|
||||
@@ -58,7 +60,9 @@ import {
|
||||
|
||||
import PinCodeInput from '@/components/common/PinCodeInput.vue';
|
||||
|
||||
import ItemIcon from '@/components/desktop/ItemIcon.vue';
|
||||
import AmountInput from '@/components/desktop/AmountInput.vue';
|
||||
import StepsBar from '@/components/desktop/StepsBar.vue';
|
||||
import ConfirmDialog from '@/components/desktop/ConfirmDialog.vue';
|
||||
import SnackBar from '@/components/desktop/SnackBar.vue';
|
||||
|
||||
@@ -68,6 +72,7 @@ import '@/styles/desktop/template/layout/index.scss';
|
||||
import '@/styles/desktop/template/layout/component/index.scss';
|
||||
import '@/styles/desktop/template/layout/_default-layout.scss';
|
||||
import '@/styles/desktop/global.scss';
|
||||
import '@/styles/desktop/font-size.scss';
|
||||
|
||||
import App from './DesktopApp.vue';
|
||||
|
||||
@@ -90,6 +95,10 @@ const vuetify = createVuetify({
|
||||
VChip,
|
||||
VDialog,
|
||||
VDivider,
|
||||
VExpansionPanel,
|
||||
VExpansionPanelText,
|
||||
VExpansionPanelTitle,
|
||||
VExpansionPanels,
|
||||
VForm,
|
||||
VContainer,
|
||||
VCol,
|
||||
@@ -115,6 +124,8 @@ const vuetify = createVuetify({
|
||||
VProgressLinear,
|
||||
VSelect,
|
||||
VSheet,
|
||||
VSlideGroup,
|
||||
VSlideGroupItem,
|
||||
VSnackbar,
|
||||
VSwitch,
|
||||
VTabs,
|
||||
@@ -334,7 +345,9 @@ app.component('VueDatePicker', VueDatePicker);
|
||||
|
||||
app.component('PinCodeInput', PinCodeInput);
|
||||
|
||||
app.component('ItemIcon', ItemIcon);
|
||||
app.component('AmountInput', AmountInput);
|
||||
app.component('StepsBar', StepsBar);
|
||||
app.component('ConfirmDialog', ConfirmDialog);
|
||||
app.component('SnackBar', SnackBar);
|
||||
|
||||
|
||||
@@ -711,6 +711,8 @@ export default {
|
||||
'Default': 'Default',
|
||||
'Done': 'Done',
|
||||
'Continue': 'Continue',
|
||||
'Previous': 'Previous',
|
||||
'Next': 'Next',
|
||||
'Status': 'Status',
|
||||
'Enable': 'Enable',
|
||||
'Enabled': 'Enabled',
|
||||
@@ -996,8 +998,13 @@ export default {
|
||||
'Transaction Edit Page': 'Transaction Edit Page',
|
||||
'Automatically Add Geolocation': 'Automatically Add Geolocation',
|
||||
'Enable Animation': 'Enable Animation',
|
||||
'Basic Information': 'Basic Information',
|
||||
'User Information': 'User Information',
|
||||
'Enter Your Basic Information': 'Enter Your Basic Information',
|
||||
'Use preset transaction categories': 'Use preset transaction categories',
|
||||
'Use Preset Transaction Categories': 'Use Preset Transaction Categories',
|
||||
'Preset Categories': 'Preset Categories',
|
||||
'Set Whether You Use The Preset Transaction Categories': 'Set Whether You Use The Preset Transaction Categories',
|
||||
'You have been successfully registered': 'You have been successfully registered',
|
||||
'You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.': 'You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.',
|
||||
'Unable to sign up': 'Unable to sign up',
|
||||
|
||||
@@ -711,6 +711,8 @@ export default {
|
||||
'Default': '默认',
|
||||
'Done': '完成',
|
||||
'Continue': '继续',
|
||||
'Previous': '上一步',
|
||||
'Next': '下一步',
|
||||
'Status': '状态',
|
||||
'Enable': '启用',
|
||||
'Enabled': '启用',
|
||||
@@ -996,8 +998,13 @@ export default {
|
||||
'Transaction Edit Page': '交易编辑页面',
|
||||
'Automatically Add Geolocation': '自动添加地理位置',
|
||||
'Enable Animation': '启用动画',
|
||||
'Basic Information': '基本信息',
|
||||
'User Information': '用户信息',
|
||||
'Enter Your Basic Information': '输入您的基本信息',
|
||||
'Use preset transaction categories': '使用预设交易分类',
|
||||
'Use Preset Transaction Categories': '使用预设交易分类',
|
||||
'Preset Categories': '预设分类',
|
||||
'Set Whether You Use The Preset Transaction Categories': '设置是否使用预设交易分类',
|
||||
'You have been successfully registered': '注册成功',
|
||||
'You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.': '注册成功，但是添加预设分类时出错。您可以随时在设置页面中重新添加预设分类。',
|
||||
'Unable to sign up': '无法注册',
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
:root {
|
||||
--ebk-icon-font-size: 28px;
|
||||
}
|
||||
@@ -11,6 +11,12 @@
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.text-right-sm {
|
||||
text-align: right !important;
|
||||
}
|
||||
}
|
||||
|
||||
/** custom class **/
|
||||
.pin-codes-input {
|
||||
--ebk-pin-code-input-height: 56px;
|
||||
|
||||
@@ -1,13 +1,525 @@
|
||||
<template>
|
||||
<div class="auth-wrapper d-flex align-center justify-center pa-4">
|
||||
<div class="layout-wrapper">
|
||||
<router-link class="d-inline" to="/">
|
||||
<div class="auth-logo d-flex align-start gap-x-3">
|
||||
<img alt="logo" class="login-page-logo" src="/img/ezbookkeeping-192.png" />
|
||||
<h1 class="font-weight-medium leading-normal text-2xl">{{ $t('global.app.title') }}</h1>
|
||||
</div>
|
||||
</router-link>
|
||||
<v-row no-gutters class="auth-wrapper">
|
||||
<v-col cols="12" md="4" class="d-none d-md-flex align-center justify-center position-relative">
|
||||
<div class="d-flex auth-img-footer" v-if="currentTheme !== 'dark'">
|
||||
<v-img src="/img/desktop/background.svg"/>
|
||||
</div>
|
||||
<div class="d-flex auth-img-footer" v-if="currentTheme === 'dark'">
|
||||
<v-img src="/img/desktop/background-dark.svg"/>
|
||||
</div>
|
||||
<div class="d-flex align-center justify-center w-100 pt-10">
|
||||
<v-img max-width="320px" src="/img/desktop/people2.svg"/>
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="12" md="8" class="auth-card d-flex align-center justify-center pa-10">
|
||||
<v-card variant="flat" class="mt-12 mt-sm-0 pt-sm-12 pt-md-0">
|
||||
<StepsBar min-width="700" :steps="[
|
||||
{
|
||||
'name': 'basicSetting',
|
||||
'title': $t('User Information'),
|
||||
'subTitle': $t('Basic Information')
|
||||
},
|
||||
{
|
||||
'name': 'presetCategories',
|
||||
'title': $t('Transaction Categories'),
|
||||
'subTitle': $t('Preset Categories')
|
||||
}
|
||||
]" :current-step="currentStep" @step:change="switchToTab" />
|
||||
|
||||
<v-window class="mt-5 disable-tab-transition" style="max-width: 700px" v-model="currentStep">
|
||||
<v-form>
|
||||
<v-window-item value="basicSetting">
|
||||
<h5 class="text-h5 mb-1">{{ $t('Basic Information') }}</h5>
|
||||
<p class="text-sm mb-5">{{ $t('Enter Your Basic Information') }}</p>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
clearable
|
||||
:disabled="submitting"
|
||||
:label="$t('Username')"
|
||||
:placeholder="$t('Your username')"
|
||||
v-model="user.username"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
type="text"
|
||||
autocomplete="nickname"
|
||||
clearable
|
||||
:disabled="submitting"
|
||||
:label="$t('Nickname')"
|
||||
:placeholder="$t('Your nickname')"
|
||||
v-model="user.nickname"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<v-text-field
|
||||
type="email"
|
||||
autocomplete="email"
|
||||
clearable
|
||||
:disabled="submitting"
|
||||
:label="$t('E-mail')"
|
||||
:placeholder="$t('Your email address')"
|
||||
v-model="user.email"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
autocomplete="new-password"
|
||||
clearable
|
||||
:disabled="submitting"
|
||||
:label="$t('Password')"
|
||||
:placeholder="$t('Your password, at least 6 characters')"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? icons.eyeSlash : icons.eye"
|
||||
v-model="user.password"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
autocomplete="new-password"
|
||||
clearable
|
||||
:disabled="submitting"
|
||||
:label="$t('Confirmation Password')"
|
||||
:placeholder="$t('Re-enter the password')"
|
||||
:type="isConfirmPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isConfirmPasswordVisible ? icons.eyeSlash : icons.eye"
|
||||
v-model="user.confirmPassword"
|
||||
@click:append-inner="isConfirmPasswordVisible = !isConfirmPasswordVisible"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" md="12">
|
||||
<v-select
|
||||
item-title="displayName"
|
||||
item-value="code"
|
||||
:disabled="submitting"
|
||||
:label="$t('Language')"
|
||||
:placeholder="$t('Language')"
|
||||
:items="allLanguages"
|
||||
v-model="currentLocale"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-autocomplete
|
||||
item-title="displayName"
|
||||
item-value="code"
|
||||
:disabled="submitting"
|
||||
:label="$t('Default Currency')"
|
||||
:placeholder="$t('Default Currency')"
|
||||
:items="allCurrencies"
|
||||
:no-data-text="$t('No results')"
|
||||
v-model="user.defaultCurrency"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-select
|
||||
item-title="displayName"
|
||||
item-value="type"
|
||||
:disabled="submitting"
|
||||
:label="$t('First Day of Week')"
|
||||
:placeholder="$t('First Day of Week')"
|
||||
:items="allWeekDays"
|
||||
v-model="user.firstDayOfWeek"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-window-item>
|
||||
|
||||
<v-window-item value="presetCategories" class="signup-preset-categories">
|
||||
<h5 class="text-h5 mb-1">{{ $t('Preset Categories') }}</h5>
|
||||
<p class="text-sm mb-5">{{ $t('Set Whether You Use The Preset Transaction Categories') }}</p>
|
||||
|
||||
<v-row class="mb-5">
|
||||
<v-col cols="12" sm="6">
|
||||
<v-switch inset :label="$t('Use Preset Transaction Categories')"
|
||||
v-model="usePresetCategories"/>
|
||||
</v-col>
|
||||
<v-col cols="12" sm="6" class="text-right-sm">
|
||||
<v-menu location="bottom">
|
||||
<template #activator="{ props }">
|
||||
<v-btn variant="text" v-bind="props">{{ currentLanguageName }}</v-btn>
|
||||
</template>
|
||||
<v-list>
|
||||
<v-list-item v-for="lang in allLanguages" :key="lang.code">
|
||||
<v-list-item-title
|
||||
class="cursor-pointer"
|
||||
@click="currentLocale = lang.code">
|
||||
{{ lang.displayName }}
|
||||
</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<div class="overflow-y-auto px-3" :class="{ 'disabled': !usePresetCategories }" style="max-height: 323px">
|
||||
<v-row :key="categoryType" v-for="(categories, categoryType) in presetCategories">
|
||||
<v-col cols="12" md="12">
|
||||
<h4 class="mb-3">{{ getCategoryTypeName(categoryType) }}</h4>
|
||||
|
||||
<v-expansion-panels variant="accordion" multiple>
|
||||
<v-expansion-panel :key="idx" v-for="(category, idx) in categories">
|
||||
<v-expansion-panel-title class="py-0">
|
||||
<ItemIcon icon-type="category" :icon-id="category.categoryIconId" :color="category.color"></ItemIcon>
|
||||
<span class="ml-3">{{ $t('category.' + category.name) }}</span>
|
||||
</v-expansion-panel-title>
|
||||
<v-expansion-panel-text v-if="category.subCategories.length">
|
||||
<v-list rounded density="comfortable" class="pa-0">
|
||||
<template :key="subIdx"
|
||||
v-for="(subCategory, subIdx) in category.subCategories">
|
||||
<v-list-item>
|
||||
<template #prepend>
|
||||
<ItemIcon icon-type="category" :icon-id="subCategory.categoryIconId" :color="subCategory.color"></ItemIcon>
|
||||
</template>
|
||||
<span class="ml-3">{{ $t('category.' + subCategory.name) }}</span>
|
||||
</v-list-item>
|
||||
<v-divider v-if="subIdx !== category.subCategories.length - 1"/>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-window-item>
|
||||
</v-form>
|
||||
</v-window>
|
||||
|
||||
<div class="d-flex justify-sm-space-between gap-4 flex-wrap justify-center mt-5">
|
||||
<v-btn :color="currentStep === 'basicSetting' ? 'default' : 'primary'"
|
||||
:disabled="currentStep === 'basicSetting'"
|
||||
:prepend-icon="icons.previous"
|
||||
@click="switchToPreviousTab">{{ $t('Previous') }}</v-btn>
|
||||
<v-btn :color="currentStep === 'presetCategories' ? 'secondary' : 'primary'"
|
||||
:disabled="currentStep === 'presetCategories'"
|
||||
:append-icon="icons.next"
|
||||
@click="switchToNextTab"
|
||||
v-if="currentStep !== 'presetCategories'">{{ $t('Next') }}</v-btn>
|
||||
<v-btn color="expense"
|
||||
:disabled="submitting"
|
||||
:append-icon="icons.submit"
|
||||
@click="submit"
|
||||
v-if="currentStep === 'presetCategories'">{{ $t('Submit') }}</v-btn>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<snack-bar ref="snackbar" />
|
||||
|
||||
<v-overlay class="justify-center align-center" :persistent="true" v-model="submitting">
|
||||
<v-progress-circular indeterminate></v-progress-circular>
|
||||
</v-overlay>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
created() {
|
||||
import { useTheme } from 'vuetify';
|
||||
|
||||
import { mapStores } from 'pinia';
|
||||
import { useRootStore } from '@/stores/index.js';
|
||||
import { useSettingsStore } from '@/stores/setting.js';
|
||||
import { useTransactionCategoriesStore } from '@/stores/transactionCategory.js';
|
||||
import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
|
||||
|
||||
import categoryConstants from '@/consts/category.js';
|
||||
import { getNameByKeyValue, copyArrayTo } from '@/lib/common.js';
|
||||
|
||||
import {
|
||||
mdiArrowLeft,
|
||||
mdiArrowRight,
|
||||
mdiCheck,
|
||||
mdiEyeOffOutline,
|
||||
mdiEyeOutline
|
||||
} from '@mdi/js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const self = this;
|
||||
const settingsStore = useSettingsStore();
|
||||
|
||||
return {
|
||||
user: {
|
||||
username: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
email: '',
|
||||
nickname: '',
|
||||
language: self.$i18n.locale,
|
||||
defaultCurrency: settingsStore.localeDefaultSettings.currency,
|
||||
firstDayOfWeek: settingsStore.localeDefaultSettings.firstDayOfWeek,
|
||||
},
|
||||
currentStep: 'basicSetting',
|
||||
isPasswordVisible: false,
|
||||
isConfirmPasswordVisible: false,
|
||||
submitting: false,
|
||||
presetCategories: {
|
||||
[categoryConstants.allCategoryTypes.Income]: copyArrayTo(categoryConstants.defaultIncomeCategories, []),
|
||||
[categoryConstants.allCategoryTypes.Expense]: copyArrayTo(categoryConstants.defaultExpenseCategories, []),
|
||||
[categoryConstants.allCategoryTypes.Transfer]: copyArrayTo(categoryConstants.defaultTransferCategories, [])
|
||||
},
|
||||
usePresetCategories: false,
|
||||
icons: {
|
||||
previous: mdiArrowLeft,
|
||||
next: mdiArrowRight,
|
||||
submit: mdiCheck,
|
||||
eye: mdiEyeOutline,
|
||||
eyeSlash: mdiEyeOffOutline
|
||||
}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapStores(useRootStore, useSettingsStore, useTransactionCategoriesStore, useExchangeRatesStore),
|
||||
allLanguages() {
|
||||
return this.$locale.getAllLanguageInfoArray(false);
|
||||
},
|
||||
allCurrencies() {
|
||||
return this.$locale.getAllCurrencies();
|
||||
},
|
||||
allWeekDays() {
|
||||
return this.$locale.getAllWeekDays();
|
||||
},
|
||||
currentLocale: {
|
||||
get: function () {
|
||||
return this.$i18n.locale;
|
||||
},
|
||||
set: function (value) {
|
||||
const isCurrencyDefault = this.user.defaultCurrency === this.settingsStore.localeDefaultSettings.currency;
|
||||
const isFirstWeekDayDefault = this.user.firstDayOfWeek === this.settingsStore.localeDefaultSettings.firstDayOfWeek;
|
||||
|
||||
this.user.language = value;
|
||||
|
||||
const localeDefaultSettings = this.$locale.setLanguage(value);
|
||||
this.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
|
||||
if (isCurrencyDefault) {
|
||||
this.user.defaultCurrency = this.settingsStore.localeDefaultSettings.currency;
|
||||
}
|
||||
|
||||
if (isFirstWeekDayDefault) {
|
||||
this.user.firstDayOfWeek = this.settingsStore.localeDefaultSettings.firstDayOfWeek;
|
||||
}
|
||||
}
|
||||
},
|
||||
currentTheme: {
|
||||
get: function () {
|
||||
return this.globalTheme.global.name.value;
|
||||
}
|
||||
},
|
||||
currentLanguageName() {
|
||||
const languageInfo = this.$locale.getLanguageInfo(this.currentLocale);
|
||||
|
||||
if (!languageInfo) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return languageInfo.displayName;
|
||||
},
|
||||
currentDayOfWeekName() {
|
||||
return getNameByKeyValue(this.allWeekDays, this.user.firstDayOfWeek, 'type', 'displayName');
|
||||
},
|
||||
inputIsEmpty() {
|
||||
return !!this.inputEmptyProblemMessage;
|
||||
},
|
||||
inputIsInvalid() {
|
||||
return !!this.inputInvalidProblemMessage;
|
||||
},
|
||||
inputEmptyProblemMessage() {
|
||||
if (!this.user.username) {
|
||||
return 'Username cannot be empty';
|
||||
} else if (!this.user.nickname) {
|
||||
return 'Nickname cannot be empty';
|
||||
} else if (!this.user.email) {
|
||||
return 'Email address cannot be empty';
|
||||
} else if (!this.user.password) {
|
||||
return 'Password cannot be empty';
|
||||
} else if (!this.user.confirmPassword) {
|
||||
return 'Confirmation password cannot be empty';
|
||||
} else if (!this.user.defaultCurrency) {
|
||||
return 'Default currency cannot be empty';
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
inputInvalidProblemMessage() {
|
||||
if (this.user.password && this.user.confirmPassword && this.user.password !== this.user.confirmPassword) {
|
||||
return 'Password and confirmation password do not match';
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
const theme = useTheme();
|
||||
|
||||
return {
|
||||
globalTheme: theme
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
switchToTab(tabName) {
|
||||
if (tabName === 'basicSetting') {
|
||||
this.currentStep = 'basicSetting';
|
||||
} else if (tabName === 'presetCategories') {
|
||||
const problemMessage = this.inputEmptyProblemMessage || this.inputInvalidProblemMessage;
|
||||
|
||||
if (problemMessage) {
|
||||
this.$refs.snackbar.showMessage(problemMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
this.currentStep = 'presetCategories';
|
||||
}
|
||||
},
|
||||
switchToPreviousTab() {
|
||||
this.switchToTab('basicSetting');
|
||||
},
|
||||
switchToNextTab() {
|
||||
this.switchToTab('presetCategories');
|
||||
},
|
||||
submit() {
|
||||
const self = this;
|
||||
const router = self.f7router;
|
||||
|
||||
const problemMessage = self.inputEmptyProblemMessage || self.inputInvalidProblemMessage;
|
||||
|
||||
if (problemMessage) {
|
||||
self.$refs.snackbar.showMessage(problemMessage);
|
||||
return;
|
||||
}
|
||||
|
||||
self.submitting = true;
|
||||
|
||||
const allCategories = [];
|
||||
|
||||
if (self.usePresetCategories) {
|
||||
for (let categoryType in self.presetCategories) {
|
||||
if (!Object.prototype.hasOwnProperty.call(self.presetCategories, categoryType)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const categories = self.presetCategories[categoryType];
|
||||
|
||||
for (let j = 0; j < categories.length; j++) {
|
||||
const category = categories[j];
|
||||
const submitCategory = {
|
||||
name: self.$t('category.' + category.name),
|
||||
type: parseInt(categoryType),
|
||||
icon: category.categoryIconId,
|
||||
color: category.color,
|
||||
subCategories: []
|
||||
}
|
||||
|
||||
for (let k = 0; k < category.subCategories.length; k++) {
|
||||
const subCategory = category.subCategories[k];
|
||||
submitCategory.subCategories.push({
|
||||
name: self.$t('category.' + subCategory.name),
|
||||
type: parseInt(categoryType),
|
||||
icon: subCategory.categoryIconId,
|
||||
color: subCategory.color
|
||||
});
|
||||
}
|
||||
|
||||
allCategories.push(submitCategory);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
self.rootStore.register({
|
||||
user: self.user
|
||||
}).then(response => {
|
||||
if (!self.$user.isUserLogined()) {
|
||||
self.submitting = false;
|
||||
|
||||
if (self.usePresetCategories) {
|
||||
self.$refs.snackbar.showMessage('You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.');
|
||||
} else {
|
||||
self.$refs.snackbar.showMessage('You have been successfully registered');
|
||||
}
|
||||
|
||||
this.$router.replace('/');
|
||||
return;
|
||||
}
|
||||
|
||||
if (response.user) {
|
||||
const localeDefaultSettings = self.$locale.setLanguage(response.user.language);
|
||||
self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
|
||||
}
|
||||
|
||||
if (self.settingsStore.appSettings.autoUpdateExchangeRatesData) {
|
||||
self.exchangeRatesStore.getLatestExchangeRates({ silent: true, force: false });
|
||||
}
|
||||
|
||||
if (!self.usePresetCategories) {
|
||||
self.submitting = false;
|
||||
|
||||
self.$refs.snackbar.showMessage('You have been successfully registered');
|
||||
this.$router.replace('/');
|
||||
return;
|
||||
}
|
||||
|
||||
self.transactionCategoriesStore.addCategories({
|
||||
categories: allCategories
|
||||
}).then(() => {
|
||||
self.submitting = false;
|
||||
|
||||
self.$refs.snackbar.showMessage('You have been successfully registered');
|
||||
router.navigate('/');
|
||||
}).catch(() => {
|
||||
self.submitting = false;
|
||||
|
||||
self.$refs.snackbar.showMessage('You have been successfully registered, but something wrong with adding preset categories. You can re-add preset categories in settings page anytime.');
|
||||
this.$router.replace('/');
|
||||
});
|
||||
}).catch(error => {
|
||||
self.submitting = false;
|
||||
|
||||
if (!error.processed) {
|
||||
self.$refs.snackbar.showError(error);
|
||||
}
|
||||
});
|
||||
},
|
||||
getCategoryTypeName(categoryType) {
|
||||
switch (categoryType) {
|
||||
case categoryConstants.allCategoryTypes.Income.toString():
|
||||
return this.$t('Income Categories');
|
||||
case categoryConstants.allCategoryTypes.Expense.toString():
|
||||
return this.$t('Expense Categories');
|
||||
case categoryConstants.allCategoryTypes.Transfer.toString():
|
||||
return this.$t('Transfer Categories');
|
||||
default:
|
||||
return this.$t('Transaction Categories');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.signup-preset-categories .v-expansion-panel-text__wrapper {
|
||||
padding: 0 0 0 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user