@sowell/quasar-app-extension-auth 0.2.8 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sowell/quasar-app-extension-auth",
-  "version": "0.2.8",
+  "version": "0.3.2",
   "description": "A Quasar app extension to manage Authentication",
   "main": "src/index.js",
   "repository": "https://github.com/sowell-ai/quasar.extension.auth",
@@ -39,9 +39,9 @@
   },
   "dependencies": {
     "axios": "^0.21.1",
+    "buffer": "^6.0.3",
     "qs": "^6.10.1",
     "validator": "^13.6.0",
-    "vue-i18n": "^9.1.0",
     "vue-router": "^4.0.0",
     "vuex": "4.0"
   }

package/src/assets/Sowell.svg

@@ -0,0 +1,3 @@
+<svg width="147" height="39" viewBox="0 0 147 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M146.921 8.3658C147.353 4.3797 146.009 1.07531 143.754 0.346262C141.146 -0.496405 138.243 1.25521 136.204 5.16556C132.419 12.4371 131.144 20.2578 131.252 28.3152C131.291 31.0894 128.732 33.9015 125.967 33.9109C123.869 33.9204 122.545 32.2067 123.369 30.4266C123.731 29.6408 124.369 28.978 124.859 28.2395C129.183 21.7633 132.939 15.0409 133.145 7.116C133.213 4.42704 133.184 1.2268 129.703 0.374666C126.242 -0.468001 124.369 2.04106 122.79 4.5596C122.437 5.11822 122.153 5.71472 121.868 6.31121C118.623 13.1946 117.27 20.4945 117.534 27.9649C117.652 31.1368 115.848 32.2161 113.642 33.305C111.161 34.5264 108.611 35.2081 106.121 32.9168C108.268 31.8563 110.376 31.0705 112.171 29.8491C114.808 28.0501 115.622 24.4049 114.299 21.9526C113.004 19.5667 109.984 18.9418 106.503 19.8318C103.895 20.4945 101.12 20.5892 97.9137 20.9963C98.5118 18.6198 98.9824 17.0671 99.2668 15.4764C99.5512 13.8668 99.7669 12.2288 99.7963 10.6003C99.8845 6.32068 98.198 3.85895 95.0112 3.38555C91.1479 2.80799 87.7748 5.03301 86.7159 9.03804C85.2745 14.4633 86.3825 19.2069 91.3636 22.9468C90.1772 24.8972 89.1966 26.8666 87.8631 28.5898C86.2844 30.6349 84.7646 33.5511 81.5876 32.7179C78.3714 31.8847 78.4205 28.675 78.4695 26.1092C78.5872 19.7939 79.0774 13.4881 79.2147 7.18228C79.2343 6.15025 78.8127 3.81161 76.126 3.85895C73.4393 3.9063 73.2138 7.48526 72.9981 8.21431C71.0958 14.4728 69.4583 20.8354 67.1148 26.9329C66.2323 29.2337 63.3888 32.7463 61.9179 32.538C58.5645 32.0741 58.692 28.2111 58.7312 25.4843C58.8096 19.5004 59.4176 13.526 59.545 7.53261C59.5646 6.36802 59.0155 4.05779 56.8289 4.05779C54.0638 4.05779 53.3872 6.55738 53.3284 7.41899C52.946 12.8442 52.6126 20.0874 52.24 25.721C50.3573 26.9234 48.4453 27.056 46.5136 27.0654C46.6117 21.5644 43.3661 19.7371 40.1891 19.3773C36.8749 19.008 34.1588 20.2105 32.1781 22.748C30.0209 25.5127 29.3933 28.6656 30.0895 32.0457C30.7367 35.1891 32.4821 37.5088 35.8453 38.2284C39.3949 38.9859 42.7974 38.0485 44.3368 34.924C45.1212 33.3428 46.0037 30.7675 46.0037 30.7675C46.0037 30.7675 48.3472 31.1273 50.5731 30.5024C51.9066 30.1237 53.1323 29.3851 53.1323 29.3851C53.1323 29.3851 53.799 31.7143 54.1717 32.7369C56.6132 39.3551 62.1827 40.444 67.1736 35.2365C68.164 34.2044 69.0171 33.0209 69.7525 31.7995C70.8213 30.0195 71.7332 28.1448 72.8706 25.9955C73.4295 28.4667 73.7531 30.5308 74.3708 32.5002C76.3417 38.7776 81.2444 40.4913 86.5295 36.3253C89.5202 33.9583 92.1971 30.9001 94.0993 27.6619C95.8251 24.7268 97.5312 24.0546 100.64 25.3801C99.7767 29.565 98.9726 34.0814 103.424 36.8366C108.876 40.2167 114.024 38.2189 118.731 34.8862C122.917 39.7149 125.781 39.7244 132.478 35.0376C136.174 38.6829 139.94 39.4687 143.175 37.1964C144.999 35.9087 145.892 34.3559 144.205 32.2067C143.695 32.3866 143.244 32.4623 142.891 32.6801C141.214 33.731 139.449 34.7536 137.694 33.0588C135.723 31.1462 137.655 29.6881 138.645 28.2111C142.744 22.1041 146.117 15.732 146.921 8.3658ZM39.7479 33.4281C39.2086 33.9488 37.0514 33.7689 36.3454 33.144C33.6391 30.758 35.1589 25.2286 38.3751 24.0262C38.0613 25.8819 38.6104 27.7756 41.1206 29.2431C41.6109 30.6634 40.6402 32.5664 39.7479 33.4281ZM93.4522 18.8944C90.0791 15.7983 90.236 12.8916 90.9126 10.0322C91.0989 9.24634 91.8147 7.80718 93.1384 8.04389C94.4719 8.28059 94.6386 9.57773 94.5994 10.2973C94.4425 12.9295 93.9326 15.5332 93.4522 18.8944ZM105.346 25.5316C106.003 23.8273 108.268 22.5207 109.847 23.2498C111.426 23.9788 110.239 26.2891 109.033 27.4726C107.827 28.6561 104.964 29.8586 104.964 29.8586C104.964 29.8586 104.532 27.643 105.346 25.5316ZM127.987 4.39864C131.487 4.43651 126.683 17.8813 123.045 23.9599C123.31 17.1144 125.202 4.36077 127.987 4.39864ZM136.733 24.0072C135.88 20.4283 138.9 4.38917 141.685 4.43651C144.47 4.47439 140.401 17.9097 136.733 24.0072ZM18.7447 37.916C23.6474 36.7324 26.4713 33.7878 26.8341 29.7639C27.2165 25.5884 25.4221 22.9847 20.5096 20.7596C17.8524 19.5572 15.0872 18.5536 12.479 17.2564C9.93938 15.9972 8.90001 13.9047 10.0178 11.2347C10.9886 8.90549 15.3324 7.76931 19.1271 8.49836C22.1864 9.08538 23.1179 10.7423 22.9022 13.6585C22.8237 14.6621 24.1671 15.7604 24.873 16.8114C25.9811 15.9593 27.7166 15.2965 28.0794 14.2077C29.4816 9.98486 27.5107 6.15025 23.01 4.92886C20.0488 4.12406 16.7444 3.97257 13.6654 4.22821C8.25285 4.68268 4.51698 8.01548 3.81099 12.2856C3.04617 16.8304 5.2622 20.0969 10.8219 22.5586C13.3909 23.6948 16.058 24.6511 18.5485 25.9198C20.843 27.0938 21.7255 29.0538 20.4802 31.4303C19.2251 33.8352 14.4107 34.7441 9.86094 33.8068C6.67418 33.1535 6.10546 31.3167 6.28196 28.5235C6.34079 27.6525 5.03667 25.9861 4.26204 25.9387C3.26189 25.8725 1.66361 26.8098 1.19295 27.7282C-0.385727 30.8243 1.17333 35.2081 4.51698 36.7135C7.01737 37.8402 9.86094 38.2758 11.9495 38.8628C14.7342 38.4935 16.7836 38.3894 18.7447 37.916Z" fill="#40C4FF"/>
+</svg>

package/src/assets/mailbox.svg

@@ -0,0 +1,35 @@
+<svg width="175" height="150" viewBox="0 0 175 150" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_221_6096)">
+<path d="M51.4291 148.435C54.2384 146.058 55.9448 142.303 55.4973 138.648C55.0498 134.992 52.2781 131.632 48.6828 130.856C45.0875 130.079 40.9891 132.228 39.8971 135.745C39.2961 128.965 38.6036 121.901 35.0036 116.127C31.7439 110.899 26.0981 107.158 19.9793 106.489C13.8605 105.82 7.4182 108.347 3.60212 113.183C-0.21395 118.019 -1.1483 125.049 1.52438 130.601C3.49325 134.691 7.1206 137.735 10.9212 140.211C23.2021 148.145 37.9316 151.372 52.3993 149.297" fill="#BCC3C7"/>
+<path d="M9.65288 108.488C14.7017 112.605 19.3334 117.21 23.481 122.237C29.9721 130.076 35.2248 138.865 39.056 148.298C39.3365 148.986 38.2205 149.286 37.9431 148.605C35.5068 142.641 32.4925 136.931 28.9436 131.555C23.4094 123.159 16.6293 115.656 8.83682 109.305C8.26067 108.835 9.08148 108.022 9.65288 108.488V108.488Z" fill="white"/>
+<path d="M53.3695 148.435C50.5602 146.058 48.8538 142.303 49.3013 138.648C49.7488 134.992 52.5205 131.632 56.1158 130.856C59.7111 130.079 63.8095 132.228 64.9015 135.745C65.5025 128.965 66.195 121.901 69.795 116.127C73.0547 110.899 78.7005 107.158 84.8193 106.489C90.9381 105.82 97.3804 108.347 101.196 113.183C105.013 118.019 105.947 125.049 103.274 130.601C101.305 134.691 97.678 137.735 93.8775 140.211C81.5965 148.145 66.8671 151.372 52.3993 149.297" fill="#BCC3C7"/>
+<path d="M95.1457 108.488C90.0969 112.605 85.4652 117.21 81.3175 122.237C74.8265 130.076 69.5738 138.865 65.7426 148.298C65.4621 148.986 66.5781 149.286 66.8554 148.605C73.124 133.275 83.1312 119.763 95.9618 109.305C96.5379 108.835 95.7171 108.022 95.1457 108.488V108.488Z" fill="white"/>
+<path d="M61.706 67.4772C66.9031 67.4772 71.1162 63.2586 71.1162 58.0547C71.1162 52.8508 66.9031 48.6322 61.706 48.6322C56.5088 48.6322 52.2957 52.8508 52.2957 58.0547C52.2957 63.2586 56.5088 67.4772 61.706 67.4772Z" fill="#BCC3C7"/>
+<path d="M32.6916 25.5737H97.5256V29.1255H40.9683C37.6429 29.1255 34.3501 29.7813 31.2779 31.0555C28.2056 32.3297 25.4141 34.1974 23.0627 36.5518C20.7113 38.9063 18.8461 41.7014 17.5736 44.7776C16.301 47.8539 15.646 51.1509 15.646 54.4806V94.8328H8.55176C8.23818 94.8328 7.93744 94.708 7.7157 94.486C7.49397 94.264 7.36939 93.9629 7.36938 93.6489V50.9289C7.36938 47.5992 8.02436 44.3021 9.29692 41.2259C10.5695 38.1496 12.4347 35.3545 14.7861 33.0001C17.1375 30.6456 19.929 28.778 23.0012 27.5038C26.0735 26.2295 29.3663 25.5737 32.6916 25.5737Z" fill="white"/>
+<path d="M45.1621 148.632V94.6809H60.947V148.632C60.9466 148.995 60.8026 149.343 60.5465 149.599C60.2904 149.855 59.9432 150 59.581 150H46.5281C46.166 150 45.8187 149.855 45.5627 149.599C45.3066 149.343 45.1625 148.995 45.1621 148.632Z" fill="#152F3B"/>
+<path d="M4.03027 93.6171V49.7464C4.03815 42.7625 6.81238 36.0668 11.7443 31.1285C16.6763 26.1901 23.3632 23.4122 30.3381 23.4043H97.2221V95.1368H5.54805C5.14566 95.1364 4.75987 94.9761 4.47533 94.6912C4.19079 94.4063 4.03073 94.02 4.03027 93.6171ZM96.615 24.0122H30.3381C23.5242 24.0199 16.9916 26.7337 12.1734 31.5581C7.3553 36.3825 4.64509 42.9236 4.63739 49.7464V93.6171C4.63765 93.8588 4.73368 94.0906 4.90441 94.2616C5.07513 94.4325 5.30661 94.5287 5.54805 94.5289H96.615V24.0122Z" fill="#152F3B"/>
+<path d="M61.7059 62.9179C60.2573 62.9163 58.8684 62.3394 57.8441 61.3137C56.8197 60.288 56.2435 58.8973 56.2419 57.4468V18.2371C56.2416 17.9953 56.1456 17.7635 55.9749 17.5926C55.8042 17.4216 55.5727 17.3255 55.3312 17.3252H34.0823C33.6799 17.3248 33.2941 17.1645 33.0096 16.8796C32.725 16.5947 32.565 16.2084 32.5645 15.8055V1.51976C32.565 1.11684 32.725 0.730549 33.0096 0.44564C33.2941 0.160732 33.6799 0.000466577 34.0823 0H65.6522C66.0546 0.000460958 66.4403 0.160726 66.7249 0.445636C67.0094 0.730545 67.1695 1.11683 67.1699 1.51976V57.4468C67.1683 58.8973 66.5921 60.288 65.5678 61.3137C64.5434 62.3394 63.1546 62.9163 61.7059 62.9179Z" fill="#40C4FF"/>
+<path d="M99.6505 22.7963C104.23 22.7867 108.625 24.599 111.87 27.8345C115.115 31.07 116.944 35.4637 116.953 40.049V89.9912H150.952C152.317 89.9883 153.628 90.5288 154.596 91.4938C155.564 92.4588 156.109 93.7692 156.112 95.1367H82.3478V40.049C82.3574 35.4637 84.1857 31.07 87.4306 27.8345C90.6755 24.599 95.0711 22.7867 99.6505 22.7963Z" fill="#152F3B"/>
+<path d="M95.4984 51.2364L99.0812 66.0558L169.167 49.0675L165.584 34.2481C165.541 34.0669 165.452 33.8995 165.327 33.7617C165.202 33.6238 165.044 33.5197 164.868 33.4593C164.738 33.4135 164.601 33.3928 164.463 33.3983L123.951 12.3946C123.713 12.2733 123.441 12.2408 123.181 12.3032C122.922 12.3656 122.694 12.5187 122.537 12.7348L103.013 39.9974L95.6521 50.2779C95.6387 50.2959 95.6294 50.3165 95.6247 50.3385C95.6201 50.3604 95.6202 50.3831 95.6251 50.405C95.4753 50.6546 95.4297 50.9534 95.4984 51.2364Z" fill="white"/>
+<path d="M95.6251 50.405C95.6285 50.4243 95.6358 50.4427 95.6464 50.4591C95.657 50.4756 95.6707 50.4898 95.6867 50.501C95.7058 50.514 95.7272 50.5231 95.7498 50.5275C95.7725 50.532 95.7958 50.5318 95.8183 50.527C95.8549 50.5172 95.887 50.4949 95.909 50.464L95.9343 50.4289L96.3175 49.8923L103.278 40.1767L122.797 12.9204C122.908 12.7659 123.071 12.6566 123.256 12.6122C123.441 12.5678 123.636 12.5913 123.805 12.6784L164.004 33.5193L164.364 33.7068C164.379 33.7129 164.394 33.7182 164.409 33.7225C164.436 33.7175 164.464 33.7149 164.492 33.7146C164.529 33.7019 164.561 33.6753 164.579 33.6402C164.589 33.6217 164.595 33.6014 164.597 33.5806C164.599 33.5597 164.597 33.5387 164.591 33.5187C164.585 33.4987 164.575 33.4801 164.561 33.464C164.548 33.4479 164.532 33.4345 164.513 33.4248L164.463 33.3983L123.951 12.3946C123.713 12.2733 123.441 12.2408 123.181 12.3032C122.922 12.3656 122.694 12.5187 122.537 12.7348L103.013 39.9974L95.6521 50.2779C95.6387 50.2959 95.6294 50.3165 95.6248 50.3385C95.6201 50.3604 95.6202 50.3831 95.6251 50.405Z" fill="#152F3B"/>
+<path d="M116.674 51.9161L118.234 52.0894L129.812 53.3737L137.488 54.2246L137.942 54.275L147.519 46.7842L147.886 46.4973L150.149 44.7282L158.197 38.4345L158.245 37.9925L161.108 12.1219C161.147 11.7657 161.043 11.4085 160.82 11.1286C160.596 10.8488 160.271 10.6691 159.915 10.629L121.711 6.39143C121.355 6.35253 120.998 6.45637 120.719 6.68021C120.44 6.90406 120.26 7.22966 120.22 7.58572L118.201 25.8342L117.081 35.9515L116.08 45.0027L115.615 49.2061L115.48 50.4236C115.441 50.78 115.545 51.1372 115.769 51.4169C115.993 51.6967 116.318 51.8762 116.674 51.9161Z" fill="#BCC3C7"/>
+<path d="M127.173 29.2395L143.721 31.0747L149.59 31.7254C149.849 31.7541 150.112 31.7315 150.362 31.6588C150.612 31.586 150.846 31.4646 151.049 31.3015C151.253 31.1383 151.422 30.9367 151.548 30.708C151.674 30.4792 151.753 30.228 151.782 29.9686C151.811 29.7091 151.788 29.4465 151.715 29.1958C151.643 28.9452 151.521 28.7112 151.358 28.5075C151.196 28.3037 150.994 28.134 150.766 28.0082C150.537 27.8824 150.286 27.8028 150.027 27.7741L142.728 26.9646L127.611 25.2862C127.087 25.2283 126.562 25.3809 126.151 25.7104C125.74 26.04 125.477 26.5195 125.419 27.0435C125.361 27.5676 125.513 28.0933 125.842 28.5051C126.17 28.9169 126.649 29.181 127.173 29.2395Z" fill="white"/>
+<path d="M126.23 36.5695C126.273 36.5771 126.316 36.5848 126.359 36.589L145.57 38.72L148.777 39.0765C149.301 39.1344 149.826 38.9818 150.237 38.6522C150.648 38.3225 150.912 37.8428 150.969 37.3186C151.027 36.7945 150.875 36.2687 150.546 35.857C150.216 35.4454 149.737 35.1816 149.214 35.1236L144.576 34.6098L129.359 32.9214L126.798 32.6373C126.286 32.5801 125.771 32.7245 125.364 33.0401C124.956 33.3557 124.687 33.8176 124.613 34.3283C124.539 34.839 124.667 35.3583 124.969 35.7766C125.271 36.1948 125.723 36.4792 126.23 36.5695V36.5695Z" fill="white"/>
+<path d="M124.056 43.0692C124.213 43.3309 124.429 43.5527 124.686 43.7175C124.943 43.8822 125.234 43.9855 125.537 44.0191L133.411 44.8923L147.435 46.448L147.438 46.4472L147.886 46.4972L150.148 44.7282C150.162 44.5938 150.163 44.4583 150.149 44.3239C150.101 43.8727 149.901 43.4512 149.582 43.1294C149.262 42.8075 148.843 42.6044 148.392 42.5538L146.444 42.337L138.717 41.4808L133.156 40.8633L125.974 40.0663C125.606 40.0255 125.234 40.0886 124.9 40.2485C124.566 40.4083 124.283 40.6586 124.083 40.971C123.884 41.2834 123.775 41.6454 123.771 42.0162C123.766 42.387 123.865 42.7517 124.056 43.0692L124.056 43.0692Z" fill="white"/>
+<path d="M135.115 20.2794L139.233 20.7361L141.052 20.9383L143.799 21.2428C144.322 21.3007 144.848 21.1481 145.259 20.8185C145.67 20.4888 145.933 20.0091 145.991 19.4849C146.049 18.9607 145.897 18.435 145.567 18.0233C145.238 17.6117 144.759 17.3478 144.236 17.2899L135.554 16.3277C135.031 16.2695 134.506 16.4218 134.095 16.7511C133.683 17.0805 133.42 17.5599 133.362 18.084C133.303 18.608 133.455 19.1337 133.784 19.5454C134.113 19.9572 134.592 20.2212 135.115 20.2794V20.2794Z" fill="white"/>
+<path d="M101.447 31.2863L106.467 52.0504L114.845 53.6456L122.595 55.123L130.911 56.7073L133.568 57.2136C133.724 57.2431 133.884 57.239 134.037 57.2017C134.191 57.1644 134.335 57.0947 134.46 56.9973L136.592 55.3303L137.942 54.275L147.519 46.7842L141.429 21.5946C141.369 21.344 141.238 21.1161 141.052 20.9384C140.888 20.7811 140.688 20.6675 140.469 20.6082C140.25 20.5488 140.02 20.5456 139.8 20.5988L102.441 29.6543C102.093 29.7389 101.793 29.9582 101.607 30.2642C101.42 30.5702 101.363 30.9378 101.447 31.2863Z" fill="#40C4FF"/>
+<path d="M112.957 47.8048C113.082 48.317 113.404 48.7589 113.853 49.0335C114.303 49.308 114.843 49.3928 115.354 49.2692L137.275 43.9557C137.787 43.831 138.228 43.5083 138.502 43.0584C138.776 42.6085 138.861 42.0681 138.738 41.5557C138.732 41.5303 138.725 41.5053 138.717 41.4808C138.577 40.9867 138.251 40.5662 137.808 40.3071C137.365 40.0481 136.84 39.9708 136.341 40.0913L114.42 45.4049C113.908 45.5293 113.467 45.8519 113.193 46.3019C112.919 46.7519 112.834 47.2924 112.957 47.8048Z" fill="white"/>
+<path d="M114.845 53.6455L122.595 55.123L139.013 51.1435C139.525 51.0194 139.967 50.6969 140.241 50.2468C140.515 49.7967 140.6 49.256 140.476 48.7435C140.352 48.2311 140.03 47.7889 139.58 47.5143C139.131 47.2396 138.591 47.155 138.079 47.2791L116.158 52.5927C115.7 52.7028 115.296 52.9736 115.02 53.356C114.954 53.4474 114.895 53.5443 114.845 53.6455Z" fill="white"/>
+<path d="M130.911 56.7074L133.568 57.2137C133.724 57.2431 133.884 57.239 134.037 57.2017C134.191 57.1644 134.335 57.0948 134.46 56.9974L136.592 55.3303L130.911 56.7074Z" fill="white"/>
+<path d="M117.374 36.6707C117.499 37.1829 117.821 37.6248 118.27 37.8993C118.72 38.1739 119.259 38.2587 119.771 38.1351L128.262 36.077C128.773 35.9523 129.214 35.6296 129.489 35.1798C129.763 34.7299 129.847 34.1895 129.724 33.6771C129.658 33.4018 129.533 33.144 129.359 32.9214C129.124 32.6205 128.807 32.3937 128.447 32.268C128.087 32.1424 127.698 32.1231 127.328 32.2127L118.837 34.2707C118.325 34.3948 117.884 34.7174 117.609 35.1675C117.335 35.6175 117.251 36.1582 117.374 36.6707V36.6707Z" fill="white"/>
+<path d="M122.595 55.1229L130.912 56.7076L133.568 57.2141C133.723 57.2432 133.883 57.2389 134.037 57.2017C134.191 57.1644 134.335 57.095 134.46 56.9979L136.593 55.3305L135.844 55.5119L134.264 56.7463C134.175 56.8156 134.072 56.8652 133.962 56.8918C133.852 56.9184 133.738 56.9215 133.627 56.9007L131.66 56.5261L123.343 54.9414L122.595 55.1229ZM147.437 46.4484L147.518 46.7833L147.887 46.4961L147.437 46.4484ZM122.595 55.1229L130.912 56.7076L133.568 57.2141C133.723 57.2432 133.883 57.2389 134.037 57.2017C134.191 57.1644 134.335 57.095 134.46 56.9979L136.593 55.3305L135.844 55.5119L134.264 56.7463C134.175 56.8156 134.072 56.8652 133.962 56.8918C133.852 56.9184 133.738 56.9215 133.627 56.9007L131.66 56.5261L123.343 54.9414L122.595 55.1229ZM122.595 55.1229L130.912 56.7076L133.568 57.2141C133.723 57.2432 133.883 57.2389 134.037 57.2017C134.191 57.1644 134.335 57.095 134.46 56.9979L136.593 55.3305L135.844 55.5119L134.264 56.7463C134.175 56.8156 134.072 56.8652 133.962 56.8918C133.852 56.9184 133.738 56.9215 133.627 56.9007L131.66 56.5261L123.343 54.9414L122.595 55.1229ZM95.4984 51.2363L104.883 90.054C104.953 90.3408 105.133 90.5883 105.385 90.7421C105.637 90.8958 105.939 90.9433 106.225 90.8742L174.149 74.4098C174.436 74.34 174.683 74.1594 174.837 73.9074C174.99 73.6554 175.038 73.3526 174.969 73.0657L165.584 34.248C165.541 34.0668 165.452 33.8995 165.327 33.7616C165.202 33.6237 165.044 33.5197 164.868 33.4592C164.738 33.4135 164.601 33.3928 164.463 33.3982C164.303 33.4028 164.146 33.4443 164.004 33.5193C163.938 33.5504 163.876 33.5888 163.819 33.6339L158.245 37.9925L150.149 44.3248L147.437 46.4461L147.437 46.4484L147.435 46.449L137.489 54.2234L135.844 55.5119L134.264 56.7462C134.175 56.8156 134.072 56.8652 133.962 56.8918C133.852 56.9184 133.738 56.9215 133.627 56.9007L131.66 56.5261L123.343 54.9414L115.019 53.3561L96.7872 49.8821C96.6318 49.8512 96.4715 49.8547 96.3175 49.8922C96.1102 49.9429 95.9218 50.0522 95.7747 50.2071C95.7184 50.2679 95.6683 50.3342 95.6251 50.4049C95.4753 50.6546 95.4297 50.9533 95.4984 51.2363ZM122.595 55.1229L130.912 56.7076L133.568 57.2141C133.723 57.2432 133.883 57.2389 134.037 57.2017C134.191 57.1644 134.335 57.095 134.46 56.9979L136.593 55.3305L135.844 55.5119L134.264 56.7463C134.175 56.8156 134.072 56.8652 133.962 56.8918C133.852 56.9184 133.738 56.9215 133.627 56.9007L131.66 56.5261L123.343 54.9414L122.595 55.1229ZM122.595 55.1229L130.912 56.7076L133.568 57.2141C133.723 57.2432 133.883 57.2389 134.037 57.2017C134.191 57.1644 134.335 57.095 134.46 56.9979L136.593 55.3305L135.844 55.5119L134.264 56.7463C134.175 56.8156 134.072 56.8652 133.962 56.8918C133.852 56.9184 133.738 56.9215 133.627 56.9007L131.66 56.5261L123.343 54.9414L122.595 55.1229ZM122.595 55.1229L130.912 56.7076L133.568 57.2141C133.723 57.2432 133.883 57.2389 134.037 57.2017C134.191 57.1644 134.335 57.095 134.46 56.9979L136.593 55.3305L135.844 55.5119L134.264 56.7463C134.175 56.8156 134.072 56.8652 133.962 56.8918C133.852 56.9184 133.738 56.9215 133.627 56.9007L131.66 56.5261L123.343 54.9414L122.595 55.1229Z" fill="white"/>
+<path d="M122.595 55.1229L130.912 56.7076L133.568 57.2141C133.723 57.2431 133.883 57.2389 134.037 57.2017C134.191 57.1644 134.335 57.0949 134.46 56.9979L136.593 55.3305L135.844 55.5119L134.264 56.7462C134.175 56.8156 134.072 56.8652 133.962 56.8918C133.852 56.9184 133.738 56.9214 133.627 56.9007L131.66 56.5261L123.343 54.9414L122.595 55.1229ZM147.437 46.4484L147.518 46.7833L147.887 46.4961L147.437 46.4484ZM122.595 55.1229L130.912 56.7076L133.568 57.2141C133.723 57.2431 133.883 57.2389 134.037 57.2017C134.191 57.1644 134.335 57.0949 134.46 56.9979L136.593 55.3305L135.844 55.5119L134.264 56.7462C134.175 56.8156 134.072 56.8652 133.962 56.8918C133.852 56.9184 133.738 56.9214 133.627 56.9007L131.66 56.5261L123.343 54.9414L122.595 55.1229ZM122.595 55.1229L130.912 56.7076L133.568 57.2141C133.723 57.2431 133.883 57.2389 134.037 57.2017C134.191 57.1644 134.335 57.0949 134.46 56.9979L136.593 55.3305L135.844 55.5119L134.264 56.7462C134.175 56.8156 134.072 56.8652 133.962 56.8918C133.852 56.9184 133.738 56.9214 133.627 56.9007L131.66 56.5261L123.343 54.9414L122.595 55.1229ZM95.9343 50.4289L95.9755 50.4599C95.9824 50.4485 95.9944 50.4384 96.0036 50.4265C96.0955 50.3307 96.2098 50.2592 96.3362 50.2185C96.4625 50.1777 96.597 50.169 96.7276 50.1931L114.846 53.6442L122.595 55.1229L130.912 56.7075L133.568 57.2141C133.723 57.2431 133.883 57.2389 134.037 57.2016C134.191 57.1644 134.335 57.0949 134.46 56.9979L136.593 55.3304L135.844 55.5119L134.264 56.7462C134.175 56.8156 134.072 56.8652 133.962 56.8918C133.852 56.9184 133.738 56.9214 133.627 56.9007L131.66 56.5261L123.343 54.9414L115.019 53.3561L96.7872 49.882C96.6318 49.8512 96.4715 49.8547 96.3175 49.8922L95.9343 50.4289ZM95.4984 51.2363L104.883 90.054C104.953 90.3408 105.133 90.5883 105.385 90.7421C105.637 90.8958 105.939 90.9433 106.225 90.8742L174.149 74.4097C174.436 74.34 174.683 74.1594 174.837 73.9074C174.99 73.6554 175.038 73.3526 174.969 73.0657L165.584 34.248C165.541 34.0668 165.452 33.8995 165.327 33.7616C165.202 33.6237 165.044 33.5197 164.868 33.4592C164.738 33.4135 164.601 33.3928 164.463 33.3982C164.303 33.4028 164.146 33.4443 164.004 33.5193C163.938 33.5504 163.876 33.5888 163.819 33.6339L158.245 37.9925L150.149 44.3248L147.437 46.4461L147.437 46.4484L147.435 46.449L137.489 54.2234L135.844 55.5119L134.264 56.7462C134.175 56.8156 134.072 56.8652 133.962 56.8918C133.852 56.9184 133.738 56.9215 133.627 56.9007L131.66 56.5261L123.343 54.9414L115.019 53.3561L96.7872 49.882C96.6318 49.8512 96.4715 49.8547 96.3175 49.8922C96.1102 49.9429 95.9218 50.0522 95.7747 50.2071C95.7184 50.2679 95.6683 50.3342 95.6251 50.4049C95.4753 50.6546 95.4297 50.9533 95.4984 51.2363ZM95.8079 51.1613C95.7802 51.0469 95.7784 50.9277 95.8027 50.8125C95.8269 50.6973 95.8766 50.589 95.948 50.4955C95.9545 50.4817 95.9639 50.4696 95.9755 50.4599C95.9824 50.4485 95.9944 50.4384 96.0036 50.4265C96.0955 50.3307 96.2098 50.2592 96.3362 50.2185C96.4625 50.1777 96.597 50.169 96.7276 50.1932L114.846 53.6442L122.595 55.1229L130.912 56.7076L133.568 57.2141C133.723 57.2431 133.883 57.2389 134.037 57.2017C134.191 57.1644 134.335 57.0949 134.46 56.9979L136.593 55.3305L137.942 54.2751L147.518 46.7833L147.887 46.4961L150.147 44.7279L158.197 38.4332L164.017 33.8826C164.105 33.8135 164.207 33.7641 164.316 33.7376C164.347 33.7302 164.378 33.7251 164.409 33.7224C164.436 33.7175 164.464 33.7148 164.491 33.7145C164.584 33.7136 164.677 33.7287 164.765 33.7592C164.89 33.8029 165.003 33.8773 165.092 33.9757C165.182 34.0741 165.245 34.1933 165.277 34.3224L174.661 73.1401C174.686 73.2418 174.691 73.3474 174.674 73.4509C174.658 73.5543 174.622 73.6535 174.568 73.7429C174.513 73.8323 174.442 73.91 174.357 73.9716C174.273 74.0333 174.177 74.0777 174.075 74.1022L106.151 90.5666C105.946 90.6159 105.73 90.5817 105.55 90.4715C105.371 90.3613 105.242 90.1841 105.193 89.979L95.8079 51.1613ZM122.595 55.1229L130.912 56.7076L133.568 57.2141C133.723 57.2431 133.883 57.2389 134.037 57.2017C134.191 57.1644 134.335 57.0949 134.46 56.9979L136.593 55.3305L135.844 55.5119L134.264 56.7463C134.175 56.8156 134.072 56.8652 133.962 56.8918C133.852 56.9184 133.738 56.9215 133.627 56.9007L131.66 56.5261L123.343 54.9414L122.595 55.1229ZM122.595 55.1229L130.912 56.7076L133.568 57.2141C133.723 57.2431 133.883 57.2389 134.037 57.2017C134.191 57.1644 134.335 57.0949 134.46 56.9979L136.593 55.3305L135.844 55.5119L134.264 56.7463C134.175 56.8156 134.072 56.8652 133.962 56.8918C133.852 56.9184 133.738 56.9215 133.627 56.9007L131.66 56.5261L123.343 54.9414L122.595 55.1229ZM122.595 55.1229L130.912 56.7076L133.568 57.2141C133.723 57.2431 133.883 57.2389 134.037 57.2017C134.191 57.1644 134.335 57.0949 134.46 56.9979L136.593 55.3305L135.844 55.5119L134.264 56.7463C134.175 56.8156 134.072 56.8652 133.962 56.8918C133.852 56.9184 133.738 56.9215 133.627 56.9007L131.66 56.5261L123.343 54.9414L122.595 55.1229Z" fill="#152F3B"/>
+<path d="M156.446 66.7835C156.293 66.1474 156.399 65.4765 156.739 64.918C157.079 64.3595 157.627 63.959 158.262 63.8043L166.835 61.7263C167.469 61.5749 168.138 61.6814 168.694 62.0225C169.25 62.3637 169.648 62.9116 169.802 63.5462C169.955 64.1809 169.851 64.8506 169.512 65.4086C169.174 65.9666 168.628 66.3674 167.995 66.5233L159.422 68.6013C158.786 68.7545 158.116 68.6492 157.559 68.3084C157.001 67.9676 156.601 67.4192 156.446 66.7835Z" fill="#40C4FF"/>
+<path d="M61.7059 59.5744C62.8795 59.5744 63.8308 58.6218 63.8308 57.4468C63.8308 56.2717 62.8795 55.3191 61.7059 55.3191C60.5324 55.3191 59.5811 56.2717 59.5811 57.4468C59.5811 58.6218 60.5324 59.5744 61.7059 59.5744Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_221_6096">
+<rect width="175" height="150" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/success.svg

@@ -1,6 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 62 62">
-  <g id="noun_validation_1683882" transform="translate(0.1 -0.4)">
-    <circle id="Ellipse_89" data-name="Ellipse 89" cx="31" cy="31" r="31" transform="translate(-0.1 0.4)" fill="#dff2d6"/>
-    <path id="Tracé_724" data-name="Tracé 724" d="M36.165,13.221a1.189,1.189,0,0,0-1.868.311L21.84,31.906l-8.253-8.253a1.169,1.169,0,0,0-1.868.156,1.667,1.667,0,0,0,.156,2.18l9.5,9.342h0c.156.156.156.156.311.156a.152.152,0,0,1,.156.156c.156,0,.311.156.623.156h0c.156,0,.467,0,.467-.156l.156-.156c.156,0,.156-.156.311-.156h0L36.632,15.713A2.752,2.752,0,0,0,36.165,13.221Z" transform="translate(6.399 6.953)" fill="#3b9843"/>
-  </g>
-</svg>
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M70 40.2334V43.3334C69.9915 58.0956 60.2743 71.0941 46.1178 75.2797C31.9614 79.4653 16.738 73.8411 8.70317 61.4569C0.668373 49.0728 1.7362 32.8788 11.3276 21.6569C20.9189 10.435 36.749 6.85845 50.2333 12.8667" stroke="#45D67F" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M73.3333 13.3334L36.6666 50L26.6666 40" stroke="#45D67F" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/boot/router-guards.ts

@@ -2,6 +2,7 @@
 import prompts from "app/quasar.extensions.json";
 import { boot } from "quasar/wrappers";
 import { BootInterface } from "../interfaces";
+import { LocalStorage } from "quasar";
 
 export default boot(({ router, store }: BootInterface) => {
   const {
@@ -9,7 +10,12 @@ export default boot(({ router, store }: BootInterface) => {
   } = prompts;
 
   router.beforeEach((to, from, next) => {
+    const auth = JSON.parse(LocalStorage.getItem("vuex") || "{}");
+
     let isValid = store.getters["token/getIsValid"];
+    if (store.getters["token/getRaw"] === "") {
+      if (auth) store.dispatch("token/updateRaw", auth?.token?.raw);
+    }
     let token = store.getters["token/getRaw"];
     if (
       (!isValid ||

package/src/components/dialogs/Message.vue

@@ -1,29 +1,48 @@
 <template>
-  <q-card style="min-width: 350px; border-radius: 30px">
-    <q-toolbar>
-      <q-space />
-      <q-btn
-        class="q-pt-md"
-        flat
-        dense
-        color="primary"
-        icon="close"
-        v-close-popup
+  <q-card style="max-width: 343px; border-radius: 10px; background: #f4f5f6">
+    <q-card-section class="text-center q-mt-lg">
+      <img
+        v-if="sendEmailSuccess && !passwordUpdated"
+        src="../../assets/mailbox.svg"
+        style="width: 175px; height: 150px"
+      />
+      <img
+        v-if="passwordUpdated"
+        src="../../assets/success.svg"
+        style="width: 100px; height: 80px"
+      />
+      <img
+        v-if="!sendEmailSuccess && !passwordUpdated"
+        src="../../assets/error.svg"
+        style="width: 100px; height: 80px"
       />
-    </q-toolbar>
-    <q-card-section class="text-center">
-      <img v-if="sendEmailSuccess" src="../../assets/success.svg" />
-      <img v-else src="../../assets/error.svg" />
     </q-card-section>
 
     <q-card-section class="q-pt-none q-pl-lg q-pr-lg">
       <div
-        class="text-subtitle1 q-mt-sm text-center"
-        style="font-size: 14px; font-weigth: 300; line-height: 20px"
+        class="text-subtitle1 q-mt-sm q-mb-md text-center text-dark"
+        style="font-size: 24px; font-weight: 600"
+        data-cy="resetErrorMessage"
+      >
+        {{
+          sendEmailSuccess
+            ? $t("auth.emailVerification")
+            : !passwordUpdated
+            ? $t("auth.loginFailed")
+            : $t("auth.passwordChanged")
+        }}
+      </div>
+      <div
         data-cy="resetMessage"
+        class="text-subtitle1 q-mt-sm text-center"
+        style="font-size: 16px; font-weight: 400"
       >
         {{
-          sendEmailSuccess ? $t("auth.emailSent") : $t("auth.emailNotRecognize")
+          sendEmailSuccess
+            ? $t("auth.emailSent")
+            : !passwordUpdated
+            ? $t("auth.emailNotRecognize")
+            : $t("auth.passwordUpdated")
         }}
       </div>
       <div
@@ -36,18 +55,29 @@
     </q-card-section>
     <q-card-actions class="q-ml-lg q-mr-lg q-mb-lg">
       <q-btn
-        v-if="!sendEmailSuccess"
+        v-if="!sendEmailSuccess && !passwordUpdated"
         data-cy="submit-login"
-        rounded
         :label="$t('auth.reSend')"
         color="primary"
         padding="10px 5px 10px 5px"
         :loading="loading"
         no-caps
+        unelevated
         type="submit"
-        @click="reSendEmail"
+        @click="retypeEmail"
         class="full-width"
       />
+      <q-btn
+        class="q-mt-md full-width"
+        unelevated
+        style="background: #fff"
+        flat
+        @click="passwordUpdated ? $emit('goToLoginPage') : ''"
+        no-caps
+        :label="$t('auth.close')"
+        color="dark"
+        v-close-popup
+      />
     </q-card-actions>
   </q-card>
 </template>
@@ -69,13 +99,16 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
+    passwordUpdated: {
+      type: Boolean,
+    },
   },
-  emit: ["resetPassword"],
+  emit: ["retypeEmail", "goToLoginPage"],
   setup(props: any, { emit }: any) {
-    const reSendEmail = () => {
-      emit("reSendEmail");
+    const retypeEmail = () => {
+      emit("retypeEmail");
     };
-    return { reSendEmail };
+    return { retypeEmail };
   },
 });
 </script>

package/src/components/dialogs/SendEmail.vue

@@ -1,60 +1,84 @@
 <template>
-  <q-card style="min-width: 350px; border-radius: 30px">
-    <q-toolbar>
-      <q-space />
-      <q-btn
-        class="q-pt-md"
-        flat
-        dense
-        color="primary"
-        icon="close"
-        v-close-popup
-      />
-    </q-toolbar>
-    <q-card-section>
-      <p
-        class="resetPasswordTitle text-center"
-        style="font-size: 20px; font-weigth: 600"
-      >
-        {{ $t("auth.tapEmail") }}
-      </p>
-    </q-card-section>
+  <q-card
+    class="row justify-center full-height q-pl-sm q-pr-sm"
+    style="background: #f4f5f6"
+  >
+    <q-page class="column" style="max-width: 447px">
+      <q-card-section>
+        <q-btn
+          class="q-pt-md"
+          flat
+          dense
+          size="10px"
+          icon="arrow_back_ios_new"
+          v-close-popup
+        />
+      </q-card-section>
+      <q-card-section class="">
+        <div
+          class="q-mb-sm"
+          style="font-size: 34px; font-weight: 600; line-height: 40px"
+        >
+          {{ $t("auth.forgottenPassword") }}
+        </div>
+        <div
+          class="text-subtitle1 q-mt-sm q-mb-lg"
+          style="font-size: 16px; font-weight: 400; line-height: 20px"
+        >
+          {{ $t("auth.resetText") }}
+        </div>
+      </q-card-section>
 
-    <q-card-section class="q-pt-none q-pl-lg q-pr-lg">
-      <q-input
-        v-model="email"
-        dense
-        outlined
-        data-cy="emailReset"
-        :placeholder="$t('auth.email')"
-        autofocus
-      />
-      <div
-        class="text-subtitle1 q-mt-sm"
-        style="font-size: 13px; font-weigth: 300; line-height: 20px"
-      >
-        {{ $t("auth.resetText") }}
-      </div>
-    </q-card-section>
-
-    <q-card-actions align="center" class="q-ml-lg q-mr-lg q-mb-lg">
-      <q-btn
-        rounded
-        color="primary"
-        data-cy="sendEmails"
-        no-caps
-        :label="$t('common.reset')"
-        class="btn-min full-width"
-        @click="sendEmail"
-        v-close-popup
-      />
-    </q-card-actions>
+      <q-card-section class="q-pt-none">
+        <div>
+          <div>
+            <div
+              class="q-ml-xs q-mb-xs"
+              style="font-size: 14px; font-weight: 600"
+            >
+              {{ $t("auth.email") }}
+            </div>
+          </div>
+          <q-input
+            v-model="email"
+            dense
+            borderless
+            bg-color="white"
+            data-cy="emailReset"
+            autofocus
+          >
+            <template #prepend>
+              <q-icon :name="ionMailOutline" />
+            </template>
+          </q-input>
+        </div>
+      </q-card-section>
+      <q-space class="mobile" />
+      <q-card-actions class="q-ml-lg q-mr-lg q-mb-lg row justify-center">
+        <q-btn
+          color="primary"
+          :icon="ionPaperPlaneOutline"
+          style="max-width: 330px"
+          data-cy="sendEmails"
+          no-caps
+          unelevated
+          :label="$t('common.reset')"
+          class="btn-min full-width"
+          @click="sendEmail"
+          v-close-popup
+        />
+      </q-card-actions>
+    </q-page>
   </q-card>
 </template>
 
 <script lang="ts">
 // @ts-ignore
 import { defineComponent, ref } from "vue";
+import {
+  ionMailOutline,
+  ionPaperPlaneOutline,
+} from "@quasar/extras/ionicons-v5";
 
 export default defineComponent({
   emit: ["resetPassword"],
@@ -63,7 +87,19 @@ export default defineComponent({
     const sendEmail = () => {
       emit("resetPassword", email.value);
     };
-    return { sendEmail, email };
+    return {
+      sendEmail,
+      email,
+      ionMailOutline,
+      ionPaperPlaneOutline,
+    };
   },
 });
 </script>
+<style scoped>
+@media screen and (min-width: 450px) {
+  .mobile {
+    display: none;
+  }
+}
+</style>

package/src/components/pages/Auth.vue

@@ -1,59 +1,100 @@
 <template>
   <q-layout>
     <q-page class="column justify-center items-center">
-      <div class="q-pa-xl">
-        <div class="column justify-ceter">
-          <img src="../../assets/Logo.svg" class="q-mb-sm" />
-          <div class="text-subtitle1 text-center head" style="font-weight: 600">
+      <div class="q-pa-lg">
+        <div class="column justify-center items-center">
+          <div class="row justify-center">
+            <img
+              src="../../assets/Logo.svg"
+              class="q-mb-sm q-mr-md"
+              style="width: 27px; height: 47px"
+            />
+            <img
+              src="../../assets/Sowell.svg"
+              class="q-mb-sm"
+              style="width: 146px; height: 38px"
+            />
+          </div>
+          <div
+            class="text-subtitle1 text-center head q-mt-xl"
+            style="font-weight: 600; font-size: 34px"
+          >
             {{ $t("auth.title") }}
           </div>
-          <div class="q-mt-xl q-mb-lg text-subtitle1" style="font-size: 14px">
+          <div
+            class="q-mt-lg q-mb-xl text-subtitle1 text-center"
+            style="font-size: 16px"
+          >
             {{ $t("auth.loginHelp") }}
           </div>
         </div>
         <q-form @submit="onSubmit">
-          <q-input
-            data-cy="email"
-            v-model.trim="email"
-            type="email"
-            :label="$t('auth.email')"
-            :rules="validations['email']"
-            lazy-rules
-            dense
-            :input-style="{ fontSize: '14px', fontWeight: '500' }"
-          />
-          <q-input
-            data-cy="password"
-            v-model="password"
-            :type="showPassword ? 'text' : 'password'"
-            :label="$t('auth.password')"
-            :rules="validations['password']"
-            lazy-rules
-            dense
-            :input-style="{ fontSize: '14px', fontWeight: '600' }"
-          >
-            <template #append>
-              <q-icon
-                :name="showPassword ? 'visibility' : 'visibility_off'"
-                class="cursor-pointer"
-                @click="showPassword = !showPassword"
-              />
-            </template>
-          </q-input>
+          <div>
+            <div
+              class="q-ml-xs q-mb-xs"
+              style="font-size: 14px; font-weight: 600"
+            >
+              {{ $t("auth.email") }}
+            </div>
+            <q-input
+              data-cy="email"
+              v-model.trim="email"
+              type="email"
+              borderless
+              :rules="validations['email']"
+              lazy-rules
+              dense
+              :input-style="{ fontSize: '14px', fontWeight: '500' }"
+            >
+              <template #prepend>
+                <q-icon :name="ionMailOutline" />
+              </template>
+            </q-input>
+          </div>
+          <div>
+            <div
+              class="q-ml-xs q-mb-xs"
+              style="font-size: 14px; font-weight: 600"
+            >
+              {{ $t("auth.password") }}
+            </div>
+            <q-input
+              data-cy="password"
+              v-model="password"
+              :type="showPassword ? 'text' : 'password'"
+              :rules="validations['password']"
+              lazy-rules
+              borderless
+              dense
+              :input-style="{ fontSize: '14px', fontWeight: '600' }"
+            >
+              <template #prepend>
+                <q-icon :name="ionLockClosedOutline" />
+              </template>
+              <template #append>
+                <q-icon
+                  :name="showPassword ? ionEyeOutline : ionEyeOffOutline"
+                  class="cursor-pointer q-mr-sm"
+                  @click="showPassword = !showPassword"
+                />
+              </template>
+            </q-input>
+          </div>
+
           <div
-            class="q-mb-xl"
+            class="q-mb-lg q-mt-xl text-primary"
             @click="forgottenPassword = true"
             data-cy="forgot-password"
-            style="color: #40c4ff; font-weight: 500; cursor: pointer"
+            style="font-size: 16px; font-weight: 500; cursor: pointer"
           >
             {{ $t("auth.forgottenPassword") }}
           </div>
           <q-btn
             data-cy="submit-login"
-            rounded
             :label="$t('auth.login')"
-            style="background: #40c4ff"
+            color="primary"
             no-caps
+            unelevated
             text-color="white"
             :loading="loading"
             type="submit"
@@ -63,7 +104,14 @@
         </q-form>
       </div>
       <div>
-        <q-dialog v-model="forgottenPassword" persistent>
+        <q-dialog
+          v-model="forgottenPassword"
+          full-height
+          :maximized="true"
+          transition-show="fade"
+          transition-hide="fade"
+          persistent
+        >
           <send-email @resetPassword="resetPassword" />
         </q-dialog>
         <q-dialog v-model="isReset" persistent>
@@ -71,7 +119,7 @@
             :emailResetPassword="emailResetPassword"
             :sendEmailSuccess="sendEmailSuccess"
             :loading="loading"
-            @reSendEmail="resetPassword"
+            @retypeEmail="retypeEmail"
           />
         </q-dialog>
       </div>
@@ -89,6 +137,14 @@ import { AxiosError, AxiosResponse } from "axios";
 import prompts from "app/quasar.extensions.json";
 import SendEmail from "../dialogs/SendEmail.vue";
 import SowellMessage from "../dialogs/Message.vue";
+import {
+  ionMailOutline,
+  ionLockClosedOutline,
+  ionEyeOutline,
+  ionEyeOffOutline,
+  ionAlertCircleOutline,
+  ionCloseOutline
+} from "@quasar/extras/ionicons-v5";
 
 interface HeadersInterface {
   headers: {
@@ -157,6 +213,10 @@ export default defineComponent({
         });
     };
 
+    const retypeEmail = () => {
+      forgottenPassword.value = true
+    }
+
     const onSubmit = () => {
       loading.value = true;
       const data = {
@@ -185,25 +245,43 @@ export default defineComponent({
               $q.notify({
                 message: t("auth.403"),
                 color: "negative",
+                icon: ionAlertCircleOutline,
                 position: "top",
+                actions: [
+                  {
+                    color: "white",
+                    icon: ionCloseOutline,
+                  },
+                ],
               });
-              console.log('403')
               break;
             case 404:
               $q.notify({
                 message: t("auth.404"),
                 color: "negative",
+                icon: ionAlertCircleOutline,
                 position: "top",
+                actions: [
+                  {
+                    color: "white",
+                    icon: ionCloseOutline,
+                  },
+                ],
               });
-              console.log('404')
               break;
             default:
               $q.notify({
                 message: t("auth.loginFailed"),
                 color: "negative",
+                icon: ionAlertCircleOutline,
                 position: "top",
+                actions: [
+                  {
+                    color: "white",
+                    icon: ionCloseOutline,
+                  },
+                ],
               });
-              console.log('default')
           }
         });
     };
@@ -229,16 +307,15 @@ export default defineComponent({
       emailResetPassword,
       resetPassword,
       isReset,
+      retypeEmail,
       sendEmailSuccess,
+      ionMailOutline,
+      ionLockClosedOutline,
+      ionEyeOutline,
+      ionEyeOffOutline,
     };
   },
 });
 </script>
 
-<style scoped>
-@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap");
-
-.q-page {
-  font-family: "Montserrat", sans-serif;
-}
-</style>
+<style scoped></style>

package/src/components/pages/ResetPassword.vue

@@ -1,23 +1,32 @@
 <template>
   <q-layout>
-    <q-page class="flex flex-center">
-      <div>
-        <div class="column items-center q-mb-xl">
-          <img
-            style="width: 40px"
-            src="../../assets/Logo.svg"
-            class="q-mb-sm"
+    <q-page class="q-pa-md row justify-center full-height">
+      <div style="max-width: 342px">
+        <div>
+          <q-btn
+            class="q-pt-md"
+            flat
+            dense
+            size="12px"
+            icon="arrow_back_ios_new"
+            @click="$router.push(LOCAL_LOGIN_ROUTE)"
           />
-          <div
-            class="text-h5 text-center head q-mt-sm"
-            style="font-size: 17px; font-weight: 500"
-          >
-            {{ $t("auth.passwordRecovery") }}
-          </div>
         </div>
-        <q-form class="column items-center" @submit="onSubmit">
+        <div
+          class="text-subtitle1 q-mt-lg"
+          style="font-size: 34px; font-weight: 600; line-height: 34px"
+        >
+          {{ $t("auth.passwordRecovery") }}
+        </div>
+        <div
+          class="text-subtitle1 q-mt-lg q-mb-lg"
+          style="font-size: 16px; font-weight: 400; line-height: 24px"
+        >
+          {{ $t("auth.recommendPassword") }}
+        </div>
+        <q-form class="column form" @submit="onSubmit">
           <div>
-            <div class="q-mb-sm" style="font-size: 14px; font-weight: 400">
+            <div class="q-mb-sm" style="font-size: 14px; font-weight: 600">
               {{ $t("auth.newPassword") }}
             </div>
             <q-input
@@ -25,15 +34,19 @@
               v-model="password"
               data-cy="reset-password"
               :rules="validations['passwordRules']"
-              outlined
+              borderless
+              bg-color="white"
               dense
               class="full-width q-mb-md"
-            />
+            >
+              <template #prepend>
+                <q-icon :name="ionLockClosedOutline" />
+              </template>
+            </q-input>
           </div>
-
-          <div class="full-width">
+          <q-space class="mobile" />
+          <div>
             <q-btn
-              rounded
               :label="$t('common.register')"
               color="primary"
               :loading="loading"
@@ -46,6 +59,9 @@
           </div>
         </q-form>
       </div>
+      <q-dialog v-model="passwordUpdated" persistent>
+        <sowell-message :passwordUpdated="passwordUpdated" @goToLoginPage="goToLoginPage"/>
+      </q-dialog>
     </q-page>
   </q-layout>
 </template>
@@ -53,11 +69,17 @@
 <script lang="ts">
 //@ts-ignore
 import { computed, defineComponent, ref, Ref, onMounted } from "vue";
+import SowellMessage from "../dialogs/Message.vue";
 import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
 import { $api, $prompts, $router } from "../../injects";
 import jwt from 'jwt-decode'
-import { Buffer } from 'buffer'
+import { Buffer } from 'buffer/' // NOTE: the trailing '/' is intentional and required by buffer
+import {
+  ionLockClosedOutline,
+  ionCloseOutline,
+  ionAlertCircleOutline
+} from "@quasar/extras/ionicons-v5";
 
 interface DecodedToken { // FIXME: consider to move to its own file
   sub: number,
@@ -67,7 +89,7 @@ interface DecodedToken { // FIXME: consider to move to its own file
 
 export default defineComponent({
   name: "ResetPassword",
-
+  components: { SowellMessage },
   setup() {
     const { patch, post } = $api();
     const {
@@ -80,6 +102,7 @@ export default defineComponent({
     const $route = router.currentRoute.value
     const password = ref("");
     const loading = ref(false);
+    const passwordUpdated = ref(false)
     const { t } = useI18n();
 
     const token = ref("")
@@ -101,18 +124,22 @@ export default defineComponent({
       passwordConfirmationRules: [
         (val: string) =>
           val === password.value || t("auth.newPasswordConfirmationFailed"),
-        (val: string) => !!val || t("auth.resetPasswordPresenceError"),
-        (val: string) => val.length >= 6 || t("auth.resetPasswordLengthError"),
+        (val: string) => !!val || t("auth.passwordPresenceError"),
+        (val: string) => val.length >= 6 || t("auth.passwordLengthError"),
       ],
     };
 
-    const decodeKey  = (key: string) => {
+    const decodeKey = (key: string) => {
       try {
-        const decodedKey = Buffer.from(key, "base64").toString("utf-8").split(',')
+        // remove backslash to avoid decoding error
+        key = key.replace(/\\n/g, '')
+        const decodedKey = Buffer.from(key, 'base64').toString('utf-8').split(',')
+        // split instead of JSON.parse as JSON.parse doesn't work
+
         if (decodedKey.length !== 2) {
           throw 'Invalid encoded key'
         }
-        console.log('decodedKey', decodedKey)
+
         const email = decodedKey[0].replace('{', '').split(':')[1]
         const tmpToken = decodedKey[1].replace('}', '').split(':')[1]
         return {
@@ -150,21 +177,27 @@ export default defineComponent({
         updatePasswordPayload,
         updatePasswordHeaders
       ).then(() => {
-          $q.notify({
-            message: t("auth.passwordRecoverySuccess"),
-            color: "positive",
-            position: "top",
-          });
-          router.push(LOCAL_LOGIN_ROUTE);
-        }).catch(() => {
+        passwordUpdated.value = true;
+      }).catch(() => {
           $q.notify({
             message: t("auth.passwordRecoveryFailed"),
             color: "negative",
+            icon:ionAlertCircleOutline,
             position: "top",
+            actions: [
+              {
+                color: "white",
+                icon: ionCloseOutline,
+              },
+            ],
           });
         });
     };
 
+    const goToLoginPage = () => {
+      router.push(LOCAL_LOGIN_ROUTE);
+    }
+    
     onMounted(() => {
       let key = $route.query.key as string
       const { decoded, email, tmpToken } = decodeKey(key)
@@ -174,6 +207,13 @@ export default defineComponent({
           message: t("auth.passwordRecoveryInvalidLink"),
           color: "negative",
           position: "top",
+          icon: ionAlertCircleOutline,
+          actions: [
+            {
+              color: "white",
+              icon: ionCloseOutline,
+            },
+          ],
         })
       }
 
@@ -196,7 +236,14 @@ export default defineComponent({
               return $q.notify({
                 message: t("auth.passwordRecoveryExpiredLink"),
                 color: "negative",
+                icon: ionAlertCircleOutline,
                 position: "top",
+                actions: [
+                  {
+                    color: "white",
+                    icon: ionCloseOutline,
+                  },
+                ],
               });
             }
           }
@@ -204,6 +251,13 @@ export default defineComponent({
             message: t("auth.passwordRecoveryFailed"),
             color: "negative",
             position: "top",
+            icon: ionAlertCircleOutline,
+            actions: [
+              {
+                color: "white",
+                icon: ionCloseOutline,
+              },
+            ],
           });
         });
     })
@@ -214,14 +268,22 @@ export default defineComponent({
       loading,
       onSubmit,
       canSubmit,
+      passwordUpdated,
+      LOCAL_LOGIN_ROUTE,
+      ionLockClosedOutline,
+      goToLoginPage
     };
   },
 });
 </script>
 
 <style scoped>
-@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap");
-.q-page {
-  font-family: "Montserrat", sans-serif;
+.form {
+  height: calc(100% - 225px);
+}
+@media screen and (min-width: 450px) {
+  .mobile {
+    display: none;
+  }
 }
 </style>

package/src/i18n/en-US/index.ts

@@ -15,6 +15,13 @@ export default {
     tapEmail: "Please enter your email",
     404: "No user found with the provided credentials",
     403: "Insufficient rights, your account does not allow access to this interface",
+    passwordRecovery: 'Password recovery',
+    newPassword: 'New password',
+    newPasswordConfirmationFailed: "The passwords you typed don't match",
+    passwordRecoverySuccess: 'Your password has been updated',
+    passwordRecoveryFailed: 'An error occured while updating your password',
+    passwordRecoveryExpiredLink: 'The link expired',
+    passwordRecoveryInvalidLink: 'the link is invalid'
   },
   common: {
     register: "Save",

package/src/i18n/fr-FR/index.ts

@@ -15,9 +15,16 @@ export default {
     tapEmail: "Entrer votre email",
     404: "Aucun utilisateur trouvé avec les identifiants donnés",
     403: "Droits insuffisants, votre compte ne permet pas d'acceder à cette interface",
+    passwordRecovery: 'Récupération de mot de passe',
+    newPassword: 'Nouveau mot de passe',
+    newPasswordConfirmationFailed: 'Les mot de passes que vous avez saisi ne correspondent pas',
+    passwordRecoverySuccess: 'Votre mot de passe a été mis à jour',
+    passwordRecoveryFailed: "Une erreur s'est produite lors de la mise à jour de votre mot de passe",
+    passwordRecoveryExpiredLink: 'Lien de récupération expiré',
+    passwordRecoveryInvalidLink: 'Lien de récupération invalide'
   },
   common: {
-    register: "Enregistre",
+    register: "Enregistrer",
     send: "Envoyer",
     cancel: "Annuler",
   },