feat(login): Significant work on login page appearance and authentik button behavior. Implement backend Oauth2 flow through popup window
This commit is contained in:
parent
7317f35df3
commit
07058d1ae7
|
|
@ -128,6 +128,10 @@ export default defineConfig((ctx) => {
|
|||
// https://v2.quasar.dev/options/animations
|
||||
animations: [
|
||||
'fadeInUp',
|
||||
'zoomIn',
|
||||
'zoomOut',
|
||||
'flipInX',
|
||||
'flipOutX',
|
||||
],
|
||||
|
||||
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#sourcefiles
|
||||
|
|
|
|||
1
src/assets/Facebook-f_Logo-White-Logo.wine.svg
Normal file
1
src/assets/Facebook-f_Logo-White-Logo.wine.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="800" width="1200" viewBox="-204.79995 -339.26 1774.9329 2035.56"><path d="M1365.333 682.667C1365.333 305.64 1059.693 0 682.667 0 305.64 0 0 305.64 0 682.667c0 340.738 249.641 623.16 576 674.373V880H402.667V682.667H576v-150.4c0-171.094 101.917-265.6 257.853-265.6 74.69 0 152.814 13.333 152.814 13.333v168h-86.083c-84.804 0-111.25 52.623-111.25 106.61v128.057h189.333L948.4 880H789.333v477.04c326.359-51.213 576-333.635 576-674.373" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 499 B |
49
src/assets/authentik-icon.svg
Normal file
49
src/assets/authentik-icon.svg
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1080" height="1080" viewBox="0 0 1080 1080" xml:space="preserve">
|
||||
<desc>Created with Fabric.js 5.2.4</desc>
|
||||
<defs>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="transparent"></rect>
|
||||
<g transform="matrix(1 0 0 1 540 540)" id="55301b85-07f1-4acf-bf26-b6683c823720" >
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; visibility: hidden;" vector-effect="non-scaling-stroke" x="-540" y="-540" rx="0" ry="0" width="1080" height="1080" />
|
||||
</g>
|
||||
<g transform="matrix(1 0 0 1 540 540)" id="da9337d4-e838-4ccb-979c-f00b26630901" >
|
||||
</g>
|
||||
<g transform="matrix(5.81 0 0 5.81 601.84 359.89)" >
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-3.185" y="-9.1" rx="0" ry="0" width="6.37" height="18.2" />
|
||||
</g>
|
||||
<g transform="matrix(5.81 0 0 5.81 698.07 343.89)" >
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-3.185" y="-7.115" rx="0" ry="0" width="6.37" height="14.23" />
|
||||
</g>
|
||||
<g transform="matrix(5.81 0 0 5.81 134.98 458.83)" >
|
||||
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-29.9, -61.06)" d="M 30.83 55 C 22.3145672298958 54.99503104851832 14.478931819315697 59.64959801866213 10.409999999999997 67.13000000000001 L 21.21 67.13 C 26 63 32.94 61.8 38 67.13 L 49.39 67.13 C 44.93 61.09 38.24 55 30.83 55 Z" stroke-linecap="round" />
|
||||
</g>
|
||||
<g transform="matrix(5.81 0 0 5.81 143.28 593.36)" >
|
||||
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-31.33, -84.23)" d="M 46.25 78.11 C 31.36 109.25999999999999 5.25 82.71 21.25 67.11 L 10.41 67.11 C 1.9399999999999995 81.87 13.65 101.78999999999999 30.830000000000002 101.34 C 44.11 101.34 55.07 81.62 55.07 78.13 C 55.07 76.58999999999999 52.93 71.88 49.39 67.13 L 38 67.13 C 41.35475177313891 70.2938931788396 44.144820278453444 74.00722071682188 46.24999999999999 78.11000000000001 Z M 46.65 77.2 Z" stroke-linecap="round" />
|
||||
</g>
|
||||
<g transform="matrix(5.81 0 0 5.81 657.8 544.84)" >
|
||||
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-119.92, -75.88)" d="M 189.62 34.71 L 189.62 117 C 189.57590440199013 132.77513860191408 176.77520023098168 145.54006162918802 161 145.54 L 148.89 145.54 L 148.89 117.53999999999999 L 90.94 117.53999999999999 L 90.94 145.54 L 78.81 145.54 C 63.046509990433655 145.5235379760047 50.26405429342943 132.76343704587177 50.22 117 L 50.22 91.08 L 142.09 91.08 L 142.09 41.62 L 97.74 41.62 L 97.74 69.41 L 50.22 69.41 L 50.22 34.71 C 50.217338960898246 33.610516532031085 50.28078676990438 32.511867628714384 50.41 31.420000000000027 C 50.553980878767426 30.12458648688497 50.79126388588973 28.84125303991363 51.11999999999999 27.580000000000013 C 51.22 27.17 51.339999999999996 26.76 51.46 26.37 C 51.48259705595151 26.26792682087825 51.51267836095672 26.16765580419422 51.550000000000004 26.07 C 51.620000000000005 25.86 51.68000000000001 25.67 51.75000000000001 25.48 C 51.82000000000001 25.29 51.89000000000001 25.080000000000002 51.96000000000001 24.89 C 52.03000000000001 24.7 52.120000000000005 24.45 52.21000000000001 24.240000000000002 C 52.30000000000001 24.030000000000005 52.39000000000001 23.810000000000002 52.470000000000006 23.6 C 53.18454774032895 21.91581077898267 54.05500278611302 20.302121040259898 55.07 18.78000000000001 L 55.07000000000001 18.73 C 55.330000000000005 18.36 55.60000000000001 17.98 55.88000000000001 17.61 C 56.16000000000001 17.24 56.35000000000001 17 56.58000000000001 16.7 C 56.81000000000002 16.4 57.15000000000001 16.029999999999998 57.44000000000001 15.7 C 57.73000000000001 15.370000000000001 58.000000000000014 15.069999999999999 58.30000000000001 14.77 L 58.30000000000001 14.77 C 58.450582686780656 14.59439518361151 58.61439518361152 14.430582686780642 58.79000000000001 14.28 C 59.84986022067026 13.248689052056436 60.98645704682679 12.299296409031573 62.19 11.44000000000001 C 62.51000000000001 11.2 62.85000000000001 10.979999999999999 63.19000000000001 10.76 C 63.530000000000015 10.540000000000001 63.960000000000015 10.27 64.36000000000001 10.04 C 65.1007855356188 9.595365727098512 65.86525244652748 9.191433429194792 66.65000000000002 8.829999999999995 L 67.40000000000002 8.489999999999998 C 68.48969443676856 8.015574225444285 69.60865054891892 7.611413958070569 70.75 7.279999999999998 C 71.19000000000001 7.149999999999999 71.63000000000001 7.039999999999998 72.08000000000001 6.929999999999999 C 72.29381301055734 6.868353005403793 72.5107946782715 6.818280312854377 72.73000000000002 6.779999999999999 C 74.00562402828322 6.502693251234759 75.29859329120707 6.312255917935896 76.60000000000002 6.209999999999995 L 77.16000000000003 6.209999999999998 L 77.44000000000003 6.209999999999998 C 77.87000000000003 6.209999999999998 78.31000000000003 6.209999999999998 78.75000000000003 6.209999999999998 L 161 6.209999999999998 C 161.43 6.209999999999998 161.87 6.209999999999998 162.3 6.209999999999998 L 162.58 6.209999999999998 L 163.14000000000001 6.209999999999998 C 164.44462833559925 6.312987675169906 165.7408742820531 6.503415559056167 167.02 6.779999999999995 C 167.24 6.7799999999999985 167.45000000000002 6.869999999999998 167.67000000000002 6.929999999999999 C 168.12 7.039999999999999 168.55 7.149999999999999 168.99 7.2799999999999985 C 170.1318772871815 7.609789928019929 171.2509373460431 8.013987740325152 172.34 8.489999999999991 L 173.09 8.829999999999998 C 173.87697586719054 9.193489613785022 174.64466395809782 9.597360305088413 175.39000000000001 10.040000000000003 C 175.78 10.27 176.17000000000002 10.51 176.55 10.76 C 176.93 11.01 177.24 11.2 177.55 11.44 C 178.94975064875678 12.442653845213595 180.25817165206882 13.567025858289943 181.46 14.799999999999995 Q 181.91 15.249999999999998 182.33 15.729999999999999 C 182.62 16.049999999999997 182.9 16.389999999999997 183.18 16.729999999999997 L 183.89000000000001 17.639999999999997 C 184.17000000000002 18.009999999999998 184.43 18.389999999999997 184.69000000000003 18.759999999999998 L 184.69000000000003 18.81 C 185.70880076938587 20.329830693328024 186.57945523852905 21.943890132278067 187.29000000000002 23.630000000000003 L 187.56000000000003 24.27 L 187.80000000000004 24.919999999999998 C 187.88000000000005 25.11 187.95000000000005 25.31 188.02000000000004 25.509999999999998 L 188.21000000000004 26.099999999999998 C 188.21000000000004 26.189999999999998 188.27000000000004 26.29 188.31000000000003 26.4 C 188.42000000000004 26.79 188.54000000000002 27.2 188.65000000000003 27.61 C 188.97063112501445 28.872538785263004 189.20451052509793 30.15553435143527 189.35000000000002 31.449999999999996 C 189.50479635349456 32.53032513469534 189.59495675016225 33.61892844260915 189.62 34.709999999999994 Z" stroke-linecap="round" />
|
||||
</g>
|
||||
<g transform="matrix(5.81 0 0 5.81 657.77 176.48)" >
|
||||
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-119.91, -12.45)" d="M 184.76 18.78 L 55.07 18.78 C 60.377236920188395 10.870533150051077 69.27495843852509 6.123581846968795 78.79999999999998 6.120000000000003 L 161 6.12 C 170.5356659632686 6.113580892457525 179.44684395095976 10.861708557616211 184.76 18.779999999999998 Z" stroke-linecap="round" />
|
||||
</g>
|
||||
<g transform="matrix(5.81 0 0 5.81 657.77 249.98)" >
|
||||
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-119.91, -25.11)" d="M 189.43 31.43 L 50.4 31.43 C 50.91427959186886 26.89855519306598 52.516456983857935 22.558610009198375 55.07 18.78 L 184.76 18.78 C 187.3178161255805 22.556416616541153 188.9203937119418 26.897445838697628 189.43 31.429999999999986 Z" stroke-linecap="round" />
|
||||
</g>
|
||||
<g transform="matrix(5.81 0 0 5.81 657.8 323.42)" >
|
||||
<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-119.92, -37.75)" d="M 189.63 34.71 L 189.63 44.08 L 142.09 44.08 L 142.09 41.62 L 97.74 41.62 L 97.74 44.08 L 50.21 44.08 L 50.21 34.71 C 50.20733896089825 33.610516532031085 50.27078676990438 32.511867628714384 50.4 31.420000000000027 L 189.4 31.42 C 189.54260953740305 32.51105844407672 189.61941509607522 33.609711870300174 189.63 34.70999999999999 Z" stroke-linecap="round" />
|
||||
</g>
|
||||
<g transform="matrix(5.81 0 0 5.81 390.99 396.94)" >
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-23.77" y="-6.33" rx="0" ry="0" width="47.54" height="12.66" />
|
||||
</g>
|
||||
<g transform="matrix(5.81 0 0 5.81 924.61 396.94)" >
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-23.77" y="-6.33" rx="0" ry="0" width="47.54" height="12.66" />
|
||||
</g>
|
||||
<g transform="matrix(5.81 0 0 5.81 390.99 470.44)" >
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-23.77" y="-6.325" rx="0" ry="0" width="47.54" height="12.65" />
|
||||
</g>
|
||||
<g transform="matrix(5.81 0 0 5.81 924.61 470.44)" >
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-23.77" y="-6.325" rx="0" ry="0" width="47.54" height="12.65" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/logo-targo-green-button.png
Normal file
BIN
src/assets/logo-targo-green-button.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
|
|
@ -4,19 +4,24 @@
|
|||
<desc>Created with Fabric.js 5.2.4</desc>
|
||||
<defs>
|
||||
</defs>
|
||||
<rect x="0" y="0" width="100%" height="100%" fill="transparent"></rect>
|
||||
<g transform="matrix(1 0 0 1 540 540)" id="c0d40538-76c2-4703-b3cd-bdf3d5a21ef8" >
|
||||
</g>
|
||||
<g transform="matrix(1 0 0 1 540 540)" id="7afedaf1-4d8a-4d92-9575-5490d0131d9c" >
|
||||
<g transform="matrix(1 0 0 1 540 540)" id="c6d2fde5-1a24-4dc5-87c5-b2a64b343aac" >
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; visibility: hidden;" vector-effect="non-scaling-stroke" x="-540" y="-540" rx="0" ry="0" width="1080" height="1080" />
|
||||
</g>
|
||||
<g transform="matrix(1 0 0 1 570.76 504.11)" >
|
||||
<g transform="matrix(1 0 0 1 540 540)" id="fc8dc034-22ff-404b-bf14-463c02d3a7e7" >
|
||||
</g>
|
||||
<g transform="matrix(1 0 0 1 34.62 67.95)" >
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-opacity: 0; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" x="-50" y="-50" rx="0" ry="0" width="100" height="100" />
|
||||
</g>
|
||||
<g transform="matrix(1 0 0 1 524.62 557.95)" >
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; visibility: hidden;" vector-effect="non-scaling-stroke" x="-540" y="-540" rx="0" ry="0" width="1080" height="1080" />
|
||||
</g>
|
||||
<g transform="matrix(1 0 0 1 555.38 522.06)" >
|
||||
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1; visibility: hidden;" vector-effect="non-scaling-stroke" x="-540" y="-540" rx="0" ry="0" width="1080" height="1080" />
|
||||
</g>
|
||||
<g transform="matrix(9.62 0 0 9.62 540 540)" >
|
||||
<circle style="stroke: rgb(255,255,255); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" cx="0" cy="0" r="35" />
|
||||
</g>
|
||||
<g transform="matrix(7.38 0 0 6.58 540 574.18)" >
|
||||
<g transform="matrix(8.29 0 0 7.39 540 604.36)" >
|
||||
<path style="stroke: rgb(255,255,255); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(1,149,71); fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke" transform=" translate(-33.3, -35.18)" d="M 25.83 15 L 8.41 15 C 6.673265390558375 15.002017442566432 5.119885825128325 13.919842989529045 4.52 12.29 L 0 1.18 L 66.59 1.18 L 62.07 12.27 C 61.476757767300114 13.907725173754374 59.92186078409509 14.99895107713476 58.18 15 L 40.76 15 L 40.76 69.19 L 25.81 69.19 Z" stroke-linecap="round" />
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 3.0 KiB |
BIN
src/assets/village.jpg
Normal file
BIN
src/assets/village.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 MiB |
BIN
src/assets/village.png
Normal file
BIN
src/assets/village.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 MiB |
|
|
@ -4,3 +4,18 @@
|
|||
border-radius: #{$size}px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.text-fb-blue {
|
||||
color: #4267B2 !important;
|
||||
}
|
||||
.bg-fb-blue {
|
||||
background: #4267B2 !important;
|
||||
}
|
||||
|
||||
.text-authentik-orange {
|
||||
color: #fd4b2d !important;
|
||||
}
|
||||
.bg-authentik-orange {
|
||||
background: #fd4b2d !important;
|
||||
}
|
||||
|
|
@ -14,10 +14,9 @@
|
|||
|
||||
$primary: #019547;
|
||||
$secondary: #EFFFEF;
|
||||
$accent: #ADEAC6;
|
||||
$accent: #4ada86;
|
||||
|
||||
$dark-font: #305530;
|
||||
|
||||
$dark: #323232;
|
||||
$dark-page: #323232;
|
||||
|
||||
|
|
|
|||
|
|
@ -42,8 +42,11 @@ export default {
|
|||
signUp: 'Don’t have an account yet?',
|
||||
email: 'Email',
|
||||
password: 'Password',
|
||||
submit: 'Sign in ',
|
||||
employeeLoginButton: 'Targo employee login',
|
||||
submit: 'Connect',
|
||||
employeeLoginButton: 'Authentik',
|
||||
facebookLoginButton:'Connect with Facebook',
|
||||
tooltipComingSoon: 'Coming soon!',
|
||||
loginOrSeparator: 'OR',
|
||||
emailValidation: 'Email must be a valid email.',
|
||||
passwordValidation: 'Password must be a valid email.',
|
||||
rememberMe: 'Remember me',
|
||||
|
|
|
|||
|
|
@ -148,8 +148,11 @@ export default {
|
|||
signUp: 'Vous n’avez pas encore de compte?',
|
||||
email: 'Email',
|
||||
password: 'Mot de passe',
|
||||
submit: 'Se connecter',
|
||||
employeeLoginButton: 'Login employé Targo',
|
||||
submit: 'Connecter',
|
||||
employeeLoginButton: 'Authentik',
|
||||
facebookLoginButton:'Facebook',
|
||||
tooltipComingSoon: 'À venir!',
|
||||
loginOrSeparator: 'OU',
|
||||
emailValidation: 'Email doit être un e-mail valide.',
|
||||
passwordValidation: 'Mot de passe doit être rempli.',
|
||||
rememberMe: 'Rester connecté',
|
||||
|
|
|
|||
|
|
@ -23,8 +23,13 @@ export const useAuthStore = defineStore('auth', {
|
|||
},
|
||||
|
||||
actions: {
|
||||
async login() {
|
||||
api.get('v1/');
|
||||
login() {
|
||||
const authPopup = window.open('http://localhost:3000/auth/v1/login', 'authPopup', 'width=600,height=800');
|
||||
window.addEventListener('message', (event) => {
|
||||
if (event.data.type === 'authSuccess') {
|
||||
console.log('Logged in successfully!');
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
async oidcLogin() {
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
/* eslint-disable */
|
||||
export const useAuthAccess = () => {
|
||||
const isLoggedIn = async () => {
|
||||
return authStore.hasAuthToken;
|
||||
};
|
||||
|
||||
const isAuthorizedUser = async () => {
|
||||
return authStore.isAuthorizedUser();
|
||||
};
|
||||
|
||||
const forgotPassword = async (email: string) => {
|
||||
return authStore.forgotPassword(email);
|
||||
};
|
||||
|
||||
return {
|
||||
isLoggedIn,
|
||||
isAuthorizedUser,
|
||||
forgotPassword,
|
||||
};
|
||||
};
|
||||
33
src/modules/auth/composables/use-auth-api.ts
Normal file
33
src/modules/auth/composables/use-auth-api.ts
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import { useAuthStore } from "../auth-store";
|
||||
|
||||
export const useAuthApi = () => {
|
||||
const authStore = useAuthStore();
|
||||
const login = () => {
|
||||
const response = authStore.login();
|
||||
return response;
|
||||
};
|
||||
|
||||
const oidcLogin = () => {
|
||||
return {status: 200, message: 'sent an openid connect login request'};
|
||||
};
|
||||
|
||||
const logout = () => {
|
||||
return {status: 200, message: 'sent a logout request'};
|
||||
};
|
||||
|
||||
const isLoggedIn = () => {
|
||||
return {status: 200, message: 'sent a isLoggedIn request'};
|
||||
};
|
||||
|
||||
const forgotPassword = (email: string) => {
|
||||
return {status: 200, message: 'sent a password reset request with email ' + email};
|
||||
};
|
||||
|
||||
return {
|
||||
login,
|
||||
oidcLogin,
|
||||
logout,
|
||||
isLoggedIn,
|
||||
forgotPassword,
|
||||
};
|
||||
};
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
/* eslint-disable */
|
||||
export const useAuthSession = () => {
|
||||
const login = async () => {
|
||||
return {status: 200, message: 'sent a login request'};
|
||||
};
|
||||
|
||||
const oidcLogin = async () => {
|
||||
return authStore.oidcLogin();
|
||||
};
|
||||
|
||||
const logout = async () => {
|
||||
return authStore.logout();
|
||||
};
|
||||
|
||||
const setUser = (user: Record<string, any>) => {
|
||||
return authStore.setUser( user );
|
||||
};
|
||||
|
||||
const setAuthToken = (token: string) => {
|
||||
return authStore.setAuthToken( token );
|
||||
};
|
||||
|
||||
return {
|
||||
login,
|
||||
oidcLogin,
|
||||
logout,
|
||||
setUser,
|
||||
setAuthToken,
|
||||
};
|
||||
};
|
||||
32
src/modules/auth/pages/auth-login-popup-success.vue
Normal file
32
src/modules/auth/pages/auth-login-popup-success.vue
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue';
|
||||
|
||||
onMounted(() => {
|
||||
if (window.opener) {
|
||||
setTimeout(() => {
|
||||
window.opener.postMessage({ type: 'authSuccess' });
|
||||
window.close();
|
||||
}, 1500);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-layout class="bg-secondary">
|
||||
<q-page-container>
|
||||
<q-page class="column items-center justify-center q-pa-xl">
|
||||
<transition appear enter-active-class="animated slow flipInX" leave-active-class="animated flipOutX">
|
||||
<q-card class="col-3 items-center">
|
||||
<q-card-section class="row justify-center ">
|
||||
<q-icon name="check_circle" color="green" size="xl" />
|
||||
</q-card-section>
|
||||
<q-separator inset color="primary" />
|
||||
<q-card-section class="row justify-center">
|
||||
<span class="row text-primary text-h3">Login Successful!</span>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</transition>
|
||||
</q-page>
|
||||
</q-page-container>
|
||||
</q-layout>
|
||||
</template>
|
||||
|
|
@ -1,26 +1,25 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { useAuthSession } from 'src/modules/auth/composables/use-auth-session';
|
||||
import { useAuthApi } from '../composables/use-auth-api';
|
||||
|
||||
const { login } = useAuthSession();
|
||||
const { login } = useAuthApi();
|
||||
const email = ref('');
|
||||
const isShowingEmployeeLoginButton = ref(false);
|
||||
const isRemembered = ref(false);
|
||||
|
||||
watch(email, (value) => {
|
||||
if (!isShowingEmployeeLoginButton.value && value.includes('@targoint')) {
|
||||
isShowingEmployeeLoginButton.value = true;
|
||||
}
|
||||
isShowingEmployeeLoginButton.value = value.includes('@targoint');
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-layout view="hHh lpR fFf" class="flex flex-center bg-secondary">
|
||||
<q-img src="src/assets/login-background.png" fit="cover" position="50% 100%" class="absolute-full" />
|
||||
<q-layout view="hHh lpR fFf" class="flex flex-center bg-dark">
|
||||
<q-img src="src/assets/village.png" fit="cover" position="50% 100%" class="absolute-full" />
|
||||
<q-page-container>
|
||||
<transition appear enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
|
||||
<q-card class="rounded-20">
|
||||
<q-card-section class="text-center bg-primary">
|
||||
<q-img src="/src/assets/logo-targo-white.svg" ratio="4.6" fit="contain" class="full-width" />
|
||||
<q-card-section class="text-center bg-primary q-pa-lg">
|
||||
<q-img src="/src/assets/logo-targo-white.svg" ratio="4.6" fit="contain" />
|
||||
</q-card-section>
|
||||
<div class="q-pt-sm q-px-xl q-pb-lg">
|
||||
<q-card-section class="text-center">
|
||||
|
|
@ -36,20 +35,33 @@
|
|||
<q-toggle v-model="isRemembered" :label="$t('loginPage.rememberMe')" color="primary" />
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section>
|
||||
<q-btn :label="$t('loginPage.submit')" type="submit" color="primary" rounded size="md" class="full-width q-mt-md" />
|
||||
</q-card-section>
|
||||
<q-card-actions>
|
||||
<q-btn disabled rounded push :label="$t('loginPage.submit')" type="submit" color="primary" class="full-width" />
|
||||
</q-card-actions>
|
||||
|
||||
<!-- A implémenter plus tard sans doute, pour les clients. A revoir avec Authentik API pour création de users -->
|
||||
<!-- <q-card-section class="text-center q-pa-none q-mt-none">
|
||||
<RouterLink disabled class="text-primary" to="/signup">{{ $t('loginPage.signUp') }}</RouterLink>
|
||||
</q-card-section> -->
|
||||
</q-form>
|
||||
|
||||
<q-card-section class="text-center q-pt-none">
|
||||
<RouterLink class="text-primary text-weight-bold" style="text-decoration: none" to="/signup">{{ $t('loginPage.signUp') }}</RouterLink>
|
||||
<q-card-section class="row q-pt-sm">
|
||||
<q-separator color="primary" class="col self-center"/>
|
||||
<span class="col text-primary text-weight-bolder text-center vertical-align self-center">{{$t('loginPage.loginOrSeparator')}}</span>
|
||||
<q-separator color="primary" class="col self-center"/>
|
||||
</q-card-section>
|
||||
|
||||
<q-card-section v-if="isShowingEmployeeLoginButton">
|
||||
<q-btn class="full-width" :label="$t('loginPage.employeeLoginButton')" icon="login" />
|
||||
<q-card-section class="column q-px-sm q-pt-none">
|
||||
<q-btn disabled rounded push :label="$t('loginPage.facebookLoginButton')" color="fb-blue" class="full-width row q-mb-sm" icon="img:src/assets/Facebook-f_Logo-White-Logo.wine.svg">
|
||||
<q-tooltip anchor="top middle" class="bg-primary">{{$t('loginPage.tooltipComingSoon')}}</q-tooltip>
|
||||
</q-btn>
|
||||
<transition appear enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
|
||||
<q-btn rounded push color="authentik-orange" v-if="isShowingEmployeeLoginButton" @click="login" :label="$t('loginPage.employeeLoginButton')" class="full-width row" icon="img:src/assets/authentik-icon.svg" />
|
||||
</transition>
|
||||
</q-card-section>
|
||||
</div>
|
||||
</q-card>
|
||||
</transition>
|
||||
</q-page-container>
|
||||
</q-layout>
|
||||
</template>
|
||||
|
|
@ -31,6 +31,7 @@ export default defineRouter(function (/* { store, ssrContext } */) {
|
|||
const authStore = useAuthStore();
|
||||
|
||||
if (destinationPage.meta.requiresAuth && !authStore.isAuthorizedUser()) {
|
||||
console.log("access denied!")
|
||||
return { name: 'login' };
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -20,6 +20,13 @@ const routes: RouteRecordRaw[] = [
|
|||
meta: { requiresAuth: false },
|
||||
},
|
||||
|
||||
{
|
||||
path: '/login-success',
|
||||
name: 'login-success',
|
||||
component: () => import('src/modules/auth/pages/auth-login-popup-success.vue'),
|
||||
meta: { requiresAuth: false },
|
||||
},
|
||||
|
||||
// Always leave this as last one,
|
||||
// but you can also remove it
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user