salix v2 to js migration
This commit is contained in:
parent
ee5098aede
commit
3683502f30
|
|
@ -78,6 +78,14 @@ module.exports = configure(function (ctx) {
|
|||
},
|
||||
port: 8080,
|
||||
open: true, // opens browser window automatically
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:3000',
|
||||
logLevel: 'debug',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-framework
|
||||
|
|
@ -95,7 +103,7 @@ module.exports = configure(function (ctx) {
|
|||
// directives: [],
|
||||
|
||||
// Quasar plugins
|
||||
plugins: [],
|
||||
plugins: ['Notify', 'Dialog'],
|
||||
},
|
||||
|
||||
// animations: 'all', // --- includes all animations
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1"
|
||||
id="Capa_1" inkscape:version="0.91 r13725" sodipodi:docname="logo.svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:ns="&ns_sfw;" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 400 168.6"
|
||||
style="enable-background:new 0 0 400 168.6;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#3D3D3F;}
|
||||
.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#8EBB27;}
|
||||
.st2{fill:#8EBB27;}
|
||||
.st3{fill:#F19300;}
|
||||
</style>
|
||||
<sodipodi:namedview bordercolor="#666666" borderopacity="1" fit-margin-bottom="0" fit-margin-left="0" fit-margin-right="0" fit-margin-top="0" gridtolerance="10" guidetolerance="10" id="namedview41" inkscape:current-layer="Capa_1" inkscape:cx="200" inkscape:cy="84.28212" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-height="1016" inkscape:window-maximized="1" inkscape:window-width="1920" inkscape:window-x="1920" inkscape:window-y="27" inkscape:zoom="3.09" objecttolerance="10" pagecolor="#ffffff" showgrid="false">
|
||||
</sodipodi:namedview>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st0" d="M106.1,40L92.3,0h10.9l5.6,20.6l0.5,1.7c0.7,2.5,1.2,4.5,1.6,6.2c0.2-0.8,0.4-1.8,0.7-2.9
|
||||
c0.3-1.1,0.7-2.6,1.2-4.3L118.7,0h10.8l-13.9,40H106.1z"/>
|
||||
<path class="st1" d="M386.1,40h-9.8c0-0.5,0.1-1,0.1-1.5l0.2-1.6c-1.7,1.4-3.5,2.4-5.2,3c-1.7,0.6-3.5,1-5.3,1
|
||||
c-2.8,0-4.9-0.8-6.1-2.3c-1.2-1.6-1.5-3.7-0.7-6.3c0.7-2.4,1.9-4.4,3.6-6c1.7-1.5,4-2.6,6.8-3.2c1.5-0.3,3.5-0.7,5.8-1.1
|
||||
c3.5-0.5,5.4-1.3,5.7-2.4l0.2-0.7c0.2-0.9,0.1-1.5-0.4-2c-0.5-0.4-1.4-0.7-2.7-0.7c-1.4,0-2.6,0.3-3.5,0.8c-1,0.6-1.7,1.4-2.2,2.5
|
||||
h-8.9c1.4-3.3,3.5-5.8,6.2-7.5c2.7-1.6,6.2-2.4,10.5-2.4c2.6,0,4.7,0.3,6.4,1c1.6,0.6,2.8,1.6,3.4,2.9c0.4,0.9,0.6,2,0.6,3.3
|
||||
c-0.1,1.3-0.5,3.3-1.3,6.2l-3.1,11.2c-0.4,1.3-0.5,2.4-0.5,3.2c0,0.8,0.2,1.3,0.7,1.5L386.1,40z M379.4,26.1
|
||||
c-0.9,0.5-2.3,0.9-4.3,1.3c-1,0.2-1.7,0.3-2.2,0.5c-1.3,0.3-2.2,0.7-2.8,1.2c-0.6,0.5-1.1,1.2-1.3,2c-0.3,1.1-0.2,1.9,0.3,2.5
|
||||
c0.5,0.6,1.2,1,2.3,1c1.7,0,3.1-0.5,4.4-1.4c1.3-1,2.2-2.2,2.6-3.7L379.4,26.1z"/>
|
||||
<path class="st1" d="M337.3,40l8.3-29.5h9.3l-1.4,5.2c1.6-2,3.3-3.5,5.1-4.4c1.8-0.9,3.9-1.4,6.3-1.5l-2.7,9.6
|
||||
c-0.4-0.1-0.8-0.1-1.2-0.1c-0.4,0-0.8,0-1.1,0c-1.5,0-2.8,0.2-3.9,0.7c-1.1,0.4-2.1,1.1-2.9,2.1c-0.5,0.6-1,1.5-1.5,2.6
|
||||
c-0.5,1.1-1.1,3-1.8,5.6l-2.8,9.9H337.3z"/>
|
||||
<path class="st1" d="M340.8,10.5L332.5,40h-9.5l1.1-4.1c-1.6,1.6-3.3,2.9-4.9,3.6c-1.7,0.8-3.5,1.2-5.4,1.2
|
||||
c-3.3,0-5.5-0.8-6.7-2.5c-1.2-1.7-1.3-4.2-0.4-7.4l5.7-20.3h9.7L317.6,27c-0.7,2.4-0.8,4.1-0.5,5c0.4,0.9,1.3,1.4,2.8,1.4
|
||||
c1.7,0,3.1-0.6,4.1-1.7c1.1-1.1,2-2.9,2.7-5.5l4.4-15.8H340.8z"/>
|
||||
<path class="st1" d="M290.1,16.3l1.6-5.8h4l2.3-8.3h9.7l-2.3,8.3h5l-1.6,5.8h-5l-3.6,12.8c-0.5,2-0.7,3.3-0.3,3.9
|
||||
c0.3,0.6,1.2,1,2.6,1l0.7,0l0.5,0l-1.7,6.2c-1.1,0.2-2.1,0.3-3.1,0.5c-1,0.1-2,0.2-2.9,0.2c-3.4,0-5.4-0.8-6.2-2.5
|
||||
c-0.8-1.6-0.4-5.1,1.1-10.5l3.2-11.4H290.1z"/>
|
||||
<path class="st1" d="M283.5,40h-9.8c0-0.5,0.1-1,0.1-1.5L274,37c-1.7,1.4-3.5,2.4-5.2,3c-1.7,0.6-3.5,1-5.3,1
|
||||
c-2.8,0-4.9-0.8-6.1-2.3c-1.2-1.6-1.5-3.7-0.7-6.3c0.7-2.4,1.9-4.4,3.6-6c1.7-1.5,4-2.6,6.8-3.2c1.5-0.3,3.5-0.7,5.8-1.1
|
||||
c3.5-0.5,5.4-1.3,5.7-2.4l0.2-0.7c0.2-0.9,0.1-1.5-0.4-2c-0.5-0.4-1.4-0.7-2.7-0.7c-1.4,0-2.6,0.3-3.5,0.8c-1,0.6-1.7,1.4-2.2,2.5
|
||||
H261c1.4-3.3,3.5-5.8,6.2-7.5c2.7-1.6,6.2-2.4,10.5-2.4c2.6,0,4.7,0.3,6.4,1c1.6,0.6,2.8,1.6,3.4,2.9c0.4,0.9,0.6,2,0.6,3.3
|
||||
c-0.1,1.3-0.5,3.3-1.3,6.2l-3.1,11.2c-0.4,1.3-0.5,2.4-0.5,3.2c0,0.8,0.2,1.3,0.7,1.5L283.5,40z M276.7,26.1
|
||||
c-0.9,0.5-2.3,0.9-4.3,1.3c-1,0.2-1.7,0.3-2.2,0.5c-1.3,0.3-2.2,0.7-2.8,1.2c-0.6,0.5-1.1,1.2-1.3,2c-0.3,1.1-0.2,1.9,0.3,2.5
|
||||
c0.5,0.6,1.2,1,2.3,1c1.7,0,3.1-0.5,4.4-1.4c1.3-1,2.2-2.2,2.6-3.7L276.7,26.1z"/>
|
||||
<path class="st0" d="M219.6,0l-11.2,40h-9.7l1.1-3.9c-1.5,1.6-3.1,2.8-4.8,3.6c-1.6,0.8-3.4,1.2-5.3,1.2c-3.7,0-6.3-1.4-7.8-4.3
|
||||
c-1.5-2.9-1.6-6.6-0.3-11.2c1.3-4.7,3.5-8.4,6.7-11.4c3.1-2.9,6.5-4.4,10.1-4.4c1.9,0,3.6,0.4,4.8,1.2c1.3,0.8,2.2,1.9,2.8,3.5
|
||||
L210,0H219.6z M189.8,24.9c-0.7,2.6-0.8,4.7-0.2,6.1c0.6,1.4,1.8,2.1,3.7,2.1c1.8,0,3.4-0.7,4.8-2.1c1.3-1.4,2.4-3.4,3.1-6.1
|
||||
c0.7-2.5,0.7-4.4,0.1-5.8c-0.6-1.4-1.8-2-3.7-2c-1.7,0-3.3,0.7-4.7,2.1C191.5,20.6,190.4,22.5,189.8,24.9z"/>
|
||||
<path class="st0" d="M153.6,40l8.3-29.5h9.3l-1.4,5.2c1.6-2,3.3-3.5,5.1-4.4c1.8-0.9,7.9-1.4,10.3-1.5l-2.7,9.6
|
||||
c-0.4-0.1-0.8-0.1-1.2-0.1c-0.4,0-0.8,0-1.1,0c-1.5,0-6.8,0.2-7.9,0.7c-1.1,0.4-2.1,1.1-2.9,2.1c-0.5,0.6-1,1.5-1.5,2.6
|
||||
c-0.5,1.1-1.1,3-1.8,5.6l-2.8,9.9H153.6z"/>
|
||||
<path class="st0" d="M143.5,30.7h9.3c-1.8,3.2-4.2,5.7-7.2,7.5c-3,1.8-6.4,2.7-10.2,2.7c-4.6,0-7.8-1.4-9.7-4.2
|
||||
c-1.9-2.8-2.2-6.6-0.8-11.4c1.4-4.9,3.8-8.8,7.3-11.6c3.5-2.9,7.5-4.3,12-4.3c4.7,0,8,1.5,9.8,4.3c1.9,2.9,2.1,6.9,0.7,12
|
||||
l-0.3,1.1l-0.2,0.6h-20c-0.6,2.1-0.6,3.7,0,4.8c0.6,1.1,1.8,1.6,3.5,1.6c1.3,0,2.4-0.3,3.4-0.8C142.1,32.6,142.9,31.8,143.5,30.7z
|
||||
M135.4,22.1l11,0c0.5-1.9,0.4-3.4-0.3-4.4c-0.7-1.1-1.8-1.6-3.5-1.6c-1.6,0-3,0.5-4.3,1.6C137.1,18.6,136.1,20.1,135.4,22.1z"/>
|
||||
<path class="st2" d="M241.2,40.4l-8.4-24.6l-8.5,24.6h-9.6l12.6-40h10.8L244,21l0.5,1.7c0.7,2.5,1.2,4.5,1.6,6.2l0.7-2.9
|
||||
c0.3-1.1,0.7-2.6,1.2-4.3l5.9-21.2h10.8l-13.9,40H241.2z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st3" d="M106.1,54.4h4.8l48.9,113.9h-5.9L137,129H79.9l-16.8,39.3H57L106.1,54.4z M135.3,124.2l-26.8-62.7l-26.9,62.7
|
||||
H135.3z"/>
|
||||
<path class="st3" d="M178.1,168.3V54.4h5.6v108.7h69.8v5.1H178.1z"/>
|
||||
<path class="st3" d="M271.1,168.3V54.4h5.6v113.9H271.1z"/>
|
||||
<path class="st3" d="M300.2,54.4l42,53.6l42-53.6h6.4l-45.4,57.7l44.1,56.1H383l-40.7-52l-40.7,52h-6.7l44.1-56.1l-45.4-57.7
|
||||
H300.2z"/>
|
||||
<g>
|
||||
<path class="st3" d="M5.8,168.3L5.3,163l0.2,2.7L5.3,163c0.4,0,10.4-1.1,18.9-11.8c10.5-13.1,14.1-35.2,10.5-63.9
|
||||
C31,57.7,35.4,34.8,47.6,19.1C60.3,3,76.6,0.9,77.3,0.8l0.6,5.3c-0.1,0-11.9,1.6-22.4,12.1c-14,14-19.3,37.7-15.5,68.4
|
||||
c3.8,30.7-0.1,53.6-11.8,68.1C18.3,167.1,6.3,168.2,5.8,168.3z"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.2 KiB |
|
|
@ -0,0 +1,22 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="40mm" height="40mm" viewBox="0 0 40 40" version="1.1" id="svg823" inkscape:version="0.92.4 (5da689c313, 2019-01-14)" sodipodi:docname="logo.svg">
|
||||
<defs id="defs817"/>
|
||||
<sodipodi:namedview id="base" pagecolor="#2f2f2f" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:zoom="5.635625" inkscape:cx="70.551181" inkscape:cy="75.590551" inkscape:document-units="mm" inkscape:current-layer="layer1" showgrid="false" inkscape:window-width="1920" inkscape:window-height="1043" inkscape:window-x="1920" inkscape:window-y="0" inkscape:window-maximized="1"/>
|
||||
<metadata id="metadata820">
|
||||
<rdf:RDF>
|
||||
<cc:Work rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
|
||||
<dc:title/>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(0,-257)">
|
||||
<path style="fill:#88bd32;stroke-width:0.83333331" inkscape:connector-curvature="0" id="path4" d="m 27.583333,261.08333 c 0.25,-0.0833 0.5,-0.16666 0.75,-0.16666 L 39,259.5 l -0.166667,6.08333 c -0.166666,5 -3.083333,9.5 -6.666666,10.5 -0.25,0.0833 -0.5,0.16667 -0.75,0.16667 L 20.75,277.66667 l 0.166667,-6.08334 c 0.166666,-5.08333 3.083333,-9.5 6.666666,-10.5 z" class="st0"/>
|
||||
<path style="fill:#88bd32;stroke-width:0.83333331" inkscape:connector-curvature="0" id="path6" d="m 5.9166667,281.91667 c 0.1666667,-0.0833 0.4166667,-0.0833 0.5833334,-0.0833 L 14.25,280.75 14.16667,285.08333 C 14.08334,288.75 11.91667,292 9.3333364,292.75 c -0.25,0.0833 -0.4166667,0.0833 -0.5833334,0.0833 L 1.0000001,293.91667 1.0833334,289.5 c 0.1666667,-3.58333 2.25,-6.91667 4.8333333,-7.58333 z" class="st0"/>
|
||||
<g id="g10" style="fill:#f7931e;fill-opacity:1;stroke:none;stroke-opacity:1" transform="matrix(0.83333333,0,0,0.83333333,8.0000002e-8,257)">
|
||||
<path style="fill:#f7931e;fill-opacity:1;stroke:none;stroke-opacity:1" inkscape:connector-curvature="0" id="path8" d="m 12,48 c -0.4,0 -0.7,-0.3 -0.7,-0.6 0,-0.4 0.2,-0.7 0.6,-0.8 0,0 3,-0.3 5.5,-3.4 3,-3.8 4.1,-10.1 3,-18.4 C 19.3,16.3 20.6,9.7 24.1,5.3 27.8,0.6 32.5,0 32.7,0 c 0.4,0 0.7,0.2 0.8,0.6 0,0.4 -0.2,0.7 -0.6,0.8 0,0 -4.3,0.6 -7.6,4.7 -3.3,4.2 -4.4,10.4 -3.4,18.5 1.1,8.8 0,15.4 -3.4,19.5 -2.8,3.5 -6.2,3.9 -6.5,3.9 0.1,0 0.1,0 0,0 z" class="st1"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
|
|
@ -1,15 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 356 360">
|
||||
<path
|
||||
d="M43.4 303.4c0 3.8-2.3 6.3-7.1 6.3h-15v-22h14.4c4.3 0 6.2 2.2 6.2 5.2 0 2.6-1.5 4.4-3.4 5 2.8.4 4.9 2.5 4.9 5.5zm-8-13H24.1v6.9H35c2.1 0 4-1.3 4-3.8 0-2.2-1.3-3.1-3.7-3.1zm5.1 12.6c0-2.3-1.8-3.7-4-3.7H24.2v7.7h11.7c3.4 0 4.6-1.8 4.6-4zm36.3 4v2.7H56v-22h20.6v2.7H58.9v6.8h14.6v2.3H58.9v7.5h17.9zm23-5.8v8.5H97v-8.5l-11-13.4h3.4l8.9 11 8.8-11h3.4l-10.8 13.4zm19.1-1.8V298c0-7.9 5.2-10.7 12.7-10.7 7.5 0 13 2.8 13 10.7v1.4c0 7.9-5.5 10.8-13 10.8s-12.7-3-12.7-10.8zm22.7 0V298c0-5.7-3.9-8-10-8-6 0-9.8 2.3-9.8 8v1.4c0 5.8 3.8 8.1 9.8 8.1 6 0 10-2.3 10-8.1zm37.2-11.6v21.9h-2.9l-15.8-17.9v17.9h-2.8v-22h3l15.6 18v-18h2.9zm37.9 10.2v1.3c0 7.8-5.2 10.4-12.4 10.4H193v-22h11.2c7.2 0 12.4 2.8 12.4 10.3zm-3 0c0-5.3-3.3-7.6-9.4-7.6h-8.4V307h8.4c6 0 9.5-2 9.5-7.7V298zm50.8-7.6h-9.7v19.3h-3v-19.3h-9.7v-2.6h22.4v2.6zm34.4-2.6v21.9h-3v-10.1h-16.8v10h-2.8v-21.8h2.8v9.2H296v-9.2h2.9zm34.9 19.2v2.7h-20.7v-22h20.6v2.7H316v6.8h14.5v2.3H316v7.5h17.8zM24 340.2v7.3h13.9v2.4h-14v9.6H21v-22h20v2.7H24zm41.5 11.4h-9.8v7.9H53v-22h13.3c5.1 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6H66c3.1 0 5.3-1.5 5.3-4.7 0-3.3-2.2-4.1-5.3-4.1H55.7v8.8zm47.9 6.2H89l-2 4.3h-3.2l10.7-22.2H98l10.7 22.2h-3.2l-2-4.3zm-1-2.3l-6.3-13-6 13h12.2zm46.3-15.3v21.9H146v-17.2L135.7 358h-2.1l-10.2-15.6v17h-2.8v-21.8h3l11 16.9 11.3-17h3zm35 19.3v2.6h-20.7v-22h20.6v2.7H166v6.8h14.5v2.3H166v7.6h17.8zm47-19.3l-8.3 22h-3l-7.1-18.6-7 18.6h-3l-8.2-22h3.3L204 356l6.8-18.5h3.4L221 356l6.6-18.5h3.3zm10 11.6v-1.4c0-7.8 5.2-10.7 12.7-10.7 7.6 0 13 2.9 13 10.7v1.4c0 7.9-5.4 10.8-13 10.8-7.5 0-12.7-3-12.7-10.8zm22.8 0v-1.4c0-5.7-4-8-10-8s-9.9 2.3-9.9 8v1.4c0 5.8 3.8 8.2 9.8 8.2 6.1 0 10-2.4 10-8.2zm28.3 2.4h-9.8v7.9h-2.8v-22h13.2c5.2 0 8 1.9 8 6.8 0 3.7-2 6.3-5.6 7l6 8.2h-3.3l-5.8-8zm-9.8-2.6h10.2c3 0 5.2-1.5 5.2-4.7 0-3.3-2.1-4.1-5.2-4.1h-10.2v8.8zm40.3-1.5l-6.8 5.6v6.4h-2.9v-22h2.9v12.3l15.2-12.2h3.7l-9.9 8.1 10.3 13.8h-3.6l-8.9-12z" />
|
||||
<path fill="#050A14"
|
||||
d="M188.4 71.7a10.4 10.4 0 01-20.8 0 10.4 10.4 0 1120.8 0zM224.2 45c-2.2-3.9-5-7.5-8.2-10.7l-12 7c-3.7-3.2-8-5.7-12.6-7.3a49.4 49.4 0 00-9.7 13.9 59 59 0 0140.1 14l7.6-4.4a57 57 0 00-5.2-12.5zM178 125.1c4.5 0 9-.6 13.4-1.7v-14a40 40 0 0012.5-7.2 47.7 47.7 0 00-7.1-15.3 59 59 0 01-32.2 27.7v8.7c4.4 1.2 8.9 1.8 13.4 1.8zM131.8 45c-2.3 4-4 8.1-5.2 12.5l12 7a40 40 0 000 14.4c5.7 1.5 11.3 2 16.9 1.5a59 59 0 01-8-41.7l-7.5-4.3c-3.2 3.2-6 6.7-8.2 10.6z" />
|
||||
<path fill="#00B4FF"
|
||||
d="M224.2 98.4c2.3-3.9 4-8 5.2-12.4l-12-7a40 40 0 000-14.5c-5.7-1.5-11.3-2-16.9-1.5a59 59 0 018 41.7l7.5 4.4c3.2-3.2 6-6.8 8.2-10.7zm-92.4 0c2.2 4 5 7.5 8.2 10.7l12-7a40 40 0 0012.6 7.3c4-4.1 7.3-8.8 9.7-13.8a59 59 0 01-40-14l-7.7 4.4c1.2 4.3 3 8.5 5.2 12.4zm46.2-80c-4.5 0-9 .5-13.4 1.7V34a40 40 0 00-12.5 7.2c1.5 5.7 4 10.8 7.1 15.4a59 59 0 0132.2-27.7V20a53.3 53.3 0 00-13.4-1.8z" />
|
||||
<path fill="#00B4FF"
|
||||
d="M178 9.2a62.6 62.6 0 11-.1 125.2A62.6 62.6 0 01178 9.2m0-9.2a71.7 71.7 0 100 143.5A71.7 71.7 0 00178 0z" />
|
||||
<path fill="#050A14"
|
||||
d="M96.6 212v4.3c-9.2-.8-15.4-5.8-15.4-17.8V180h4.6v18.4c0 8.6 4 12.6 10.8 13.5zm16-31.9v18.4c0 8.9-4.3 12.8-10.9 13.5v4.4c9.2-.7 15.5-5.6 15.5-18v-18.3h-4.7zM62.2 199v-2.2c0-12.7-8.8-17.4-21-17.4-12.1 0-20.7 4.7-20.7 17.4v2.2c0 12.8 8.6 17.6 20.7 17.6 1.5 0 3-.1 4.4-.3l11.8 6.2 2-3.3-8.2-4-6.4-3.1a32 32 0 01-3.6.2c-9.8 0-16-3.9-16-13.3v-2.2c0-9.3 6.2-13.1 16-13.1 9.9 0 16.3 3.8 16.3 13.1v2.2c0 5.3-2.1 8.7-5.6 10.8l4.8 2.4c3.4-2.8 5.5-7 5.5-13.2zM168 215.6h5.1L156 179.7h-4.8l17 36zM143 205l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.8-3.7H143zm133.7 10.7h5.2l-17.3-35.9h-4.8l17 36zm-25-10.7l7.4-15.7-2.4-5-15.1 31.4h5.1l3.3-7h18.3l-1.7-3.7h-14.8zm73.8-2.5c6-1.2 9-5.4 9-11.4 0-8-4.5-10.9-12.9-10.9h-21.4v35.5h4.6v-31.3h16.5c5 0 8.5 1.4 8.5 6.7 0 5.2-3.5 7.7-8.5 7.7h-11.4v4.1h10.7l9.3 12.8h5.5l-9.9-13.2zm-117.4 9.9c-9.7 0-14.7-2.5-18.6-6.3l-2.2 3.8c5.1 5 11 6.7 21 6.7 1.6 0 3.1-.1 4.6-.3l-1.9-4h-3zm18.4-7c0-6.4-4.7-8.6-13.8-9.4l-10.1-1c-6.7-.7-9.3-2.2-9.3-5.6 0-2.5 1.4-4 4.6-5l-1.8-3.8c-4.7 1.4-7.5 4.2-7.5 8.9 0 5.2 3.4 8.7 13 9.6l11.3 1.2c6.4.6 8.9 2 8.9 5.4 0 2.7-2.1 4.7-6 5.8l1.8 3.9c5.3-1.6 8.9-4.7 8.9-10zm-20.3-21.9c7.9 0 13.3 1.8 18.1 5.7l1.8-3.9a30 30 0 00-19.6-5.9c-2 0-4 .1-5.7.3l1.9 4 3.5-.2z" />
|
||||
<path fill="#00B4FF"
|
||||
d="M.5 251.9c29.6-.5 59.2-.8 88.8-1l88.7-.3 88.7.3 44.4.4 44.4.6-44.4.6-44.4.4-88.7.3-88.7-.3a7981 7981 0 01-88.8-1z" />
|
||||
<path fill="none" d="M-565.2 324H-252v15.8h-313.2z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 4.4 KiB |
|
|
@ -1,5 +1,7 @@
|
|||
import { boot } from 'quasar/wrappers';
|
||||
import axios from 'axios';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
|
||||
|
||||
// Be careful when using SSR for cross-request state pollution
|
||||
// due to creating a Singleton instance here;
|
||||
|
|
@ -8,6 +10,22 @@ import axios from 'axios';
|
|||
// "export default () => {}" function below (which runs individually
|
||||
// for each client)
|
||||
const api = axios.create({ baseURL: 'https://api.example.com' });
|
||||
const { getToken } = useSession();
|
||||
|
||||
axios.interceptors.request.use(
|
||||
function (context) {
|
||||
const token = getToken();
|
||||
|
||||
if (token.length && context.headers) {
|
||||
context.headers.Authorization = token;
|
||||
}
|
||||
|
||||
return context;
|
||||
},
|
||||
function (error) {
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
|
||||
export default boot(({ app }) => {
|
||||
// for use inside Vue files (Options API) through this.$axios and this.$api
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import messages from 'src/i18n';
|
|||
|
||||
export default boot(({ app }) => {
|
||||
const i18n = createI18n({
|
||||
locale: 'en-US',
|
||||
locale: 'en',
|
||||
messages,
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,41 +0,0 @@
|
|||
<template>
|
||||
<q-item clickable tag="a" target="_blank" :href="link">
|
||||
<q-item-section v-if="icon" avatar>
|
||||
<q-icon :name="icon" />
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>
|
||||
<q-item-label>{{ title }}</q-item-label>
|
||||
<q-item-label caption>{{ caption }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'EssentialLink',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
|
||||
caption: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
link: {
|
||||
type: String,
|
||||
default: '#',
|
||||
},
|
||||
|
||||
icon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
|
||||
|
||||
<script setup>
|
||||
import { useState } from 'src/composables/useState';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
import UserPanel from 'src/components/UserPanel.vue';
|
||||
|
||||
const session = useSession();
|
||||
const state = useState();
|
||||
const user = state.getUser();
|
||||
const token = session.getToken();
|
||||
|
||||
defineEmits(['toggle-drawer']);
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-header class="bg-dark" color="white" elevated bordered>
|
||||
<q-toolbar class="q-py-sm q-px-md">
|
||||
<q-btn flat @click="$emit('toggle-drawer')" round dense icon="menu" />
|
||||
<router-link to="/">
|
||||
<q-btn flat round class="q-ml-xs" v-if="$q.screen.gt.xs">
|
||||
<q-avatar square size="md">
|
||||
<q-img src="~/assets/logo_icon.svg" alt="Logo" />
|
||||
</q-avatar>
|
||||
</q-btn>
|
||||
</router-link>
|
||||
<q-toolbar-title shrink class="text-weight-bold">Salix</q-toolbar-title>
|
||||
<q-space></q-space>
|
||||
<div class="q-pl-sm q-gutter-sm row items-center no-wrap">
|
||||
<q-btn v-if="$q.screen.gt.xs" dense flat size="md" icon="add">
|
||||
<q-icon name="arrow_drop_down" size="s" />
|
||||
<q-menu>
|
||||
<q-list style="min-width: 150px">
|
||||
<q-item clickable>
|
||||
<q-item-section>New customer</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable>
|
||||
<q-item-section>New ticket</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
<q-btn v-if="$q.screen.gt.xs" dense flat round size="md" icon="notifications" />
|
||||
<q-btn dense flat no-wrap>
|
||||
<q-avatar size="lg">
|
||||
<q-img
|
||||
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
|
||||
spinner-color="white"
|
||||
/>
|
||||
</q-avatar>
|
||||
<q-tooltip>Account</q-tooltip>
|
||||
<q-icon name="arrow_drop_down" size="s" />
|
||||
<UserPanel />
|
||||
</q-btn>
|
||||
</div>
|
||||
</q-toolbar>
|
||||
</q-header>
|
||||
</template>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<template>
|
||||
<q-btn data-cy="button" label="test emit" color="positive" rounded icon="edit" @click="$emit('test')" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'QuasarButton',
|
||||
emits: ['test'],
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<template>
|
||||
<!-- notice dialogRef here -->
|
||||
<q-dialog ref="dialogRef" @hide="onDialogHide" data-cy="dialog">
|
||||
<q-card class="q-dialog-plugin">
|
||||
<q-card-section>{{ message }}</q-card-section>
|
||||
|
||||
<!-- buttons example -->
|
||||
<q-card-actions align="right">
|
||||
<q-btn data-cy="ok-button" color="primary" label="OK" @click="onOKClick" />
|
||||
<q-btn color="primary" label="Cancel" @click="onCancelClick" />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useDialogPluginComponent } from 'quasar';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'QuasarDialog',
|
||||
props: {
|
||||
message: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
|
||||
// REQUIRED; need to specify some events that your
|
||||
// component will emit through useDialogPluginComponent()
|
||||
emits: useDialogPluginComponent.emits,
|
||||
|
||||
setup() {
|
||||
// REQUIRED; must be called inside of setup()
|
||||
const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
|
||||
// dialogRef - Vue ref to be applied to QDialog
|
||||
// onDialogHide - Function to be used as handler for @hide on QDialog
|
||||
// onDialogOK - Function to call to settle dialog with "ok" outcome
|
||||
// example: onDialogOK() - no payload
|
||||
// example: onDialogOK({ /*.../* }) - with payload
|
||||
// onDialogCancel - Function to call to settle dialog with "cancel" outcome
|
||||
|
||||
return {
|
||||
// This is REQUIRED;
|
||||
// Need to inject these (from useDialogPluginComponent() call)
|
||||
// into the vue scope for the vue html template
|
||||
dialogRef,
|
||||
onDialogHide,
|
||||
|
||||
// other methods that we used in our vue html template;
|
||||
// these are part of our example (so not required)
|
||||
onOKClick() {
|
||||
// on OK, it is REQUIRED to
|
||||
// call onDialogOK (with optional payload)
|
||||
onDialogOK();
|
||||
// or with payload: onDialogOK({ ... })
|
||||
// ...and it will also hide the dialog automatically
|
||||
},
|
||||
|
||||
// we can passthrough onDialogCancel directly
|
||||
onCancelClick: onDialogCancel,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
<template>
|
||||
<q-drawer
|
||||
v-model="showDrawer"
|
||||
show-if-above
|
||||
:width="200"
|
||||
:breakpoint="700"
|
||||
elevated
|
||||
data-cy="drawer"
|
||||
class="bg-primary text-white"
|
||||
>
|
||||
<q-scroll-area class="fit">
|
||||
<div class="q-pa-sm">
|
||||
<div v-for="n in 50" :key="n">Drawer {{ n }} / 50</div>
|
||||
</div>
|
||||
<q-btn data-cy="button">Am I on screen?</q-btn>
|
||||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'QuasarDrawer',
|
||||
setup() {
|
||||
const showDrawer = ref(true);
|
||||
|
||||
return {
|
||||
showDrawer,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<template>
|
||||
<q-page-sticky position="bottom-right" :offset="[18, 18]">
|
||||
<q-btn data-cy="button" rounded color="accent" icon="arrow_forward">
|
||||
{{ title }}
|
||||
</q-btn>
|
||||
</q-page-sticky>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'QuasarPageSticky',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
<template>
|
||||
<q-btn color="primary" data-cy="button">
|
||||
Button
|
||||
<q-tooltip v-model="showTooltip" data-cy="tooltip" class="bg-red" :offset="[10, 10]"> Here I am! </q-tooltip>
|
||||
</q-btn>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'QuasarTooltip',
|
||||
setup() {
|
||||
const showTooltip = ref(true);
|
||||
|
||||
return {
|
||||
showTooltip,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<template>
|
||||
<q-menu>
|
||||
<div class="row no-wrap q-pa-md">
|
||||
<div class="column">
|
||||
<div class="text-h6 q-mb-md">{{ t('components.userPanel.settings') }}</div>
|
||||
<q-toggle
|
||||
:label="t(`globals.lang['${locale}']`)"
|
||||
icon="public"
|
||||
color="orange"
|
||||
false-value="es"
|
||||
true-value="en"
|
||||
v-model="locale"
|
||||
/>
|
||||
<q-toggle
|
||||
v-model="darkMode"
|
||||
checked-icon="dark_mode"
|
||||
color="orange"
|
||||
unchecked-icon="light_mode"
|
||||
/>
|
||||
|
||||
<q-btn color="orange" outline size="sm" label="Settings" icon="settings" />
|
||||
</div>
|
||||
|
||||
<q-separator vertical inset class="q-mx-lg" />
|
||||
|
||||
<div class="column items-center" style="min-width: 150px">
|
||||
<q-avatar size="80px">
|
||||
<q-img
|
||||
:src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
|
||||
spinner-color="white"
|
||||
/>
|
||||
</q-avatar>
|
||||
|
||||
<div class="text-subtitle1 q-mt-md">
|
||||
<strong>{{ user.nickname }}</strong>
|
||||
</div>
|
||||
<div class="text-subtitle3 text-grey-7 q-mb-xs">@{{ user.username }}</div>
|
||||
|
||||
<q-btn
|
||||
color="orange"
|
||||
flat
|
||||
label="Log Out"
|
||||
size="sm"
|
||||
icon="logout"
|
||||
@click="logout()"
|
||||
v-close-popup
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</q-menu>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, computed } from 'vue';
|
||||
import { Dark, useQuasar } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
|
||||
import { useState } from 'src/composables/useState';
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
|
||||
const quasar = useQuasar();
|
||||
const state = useState();
|
||||
const session = useSession();
|
||||
const router = useRouter();
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
const darkMode = computed({
|
||||
get() {
|
||||
return Dark.isActive;
|
||||
},
|
||||
set(value) {
|
||||
Dark.set(value);
|
||||
},
|
||||
});
|
||||
|
||||
const user = state.getUser();
|
||||
const token = session.getToken();
|
||||
|
||||
onMounted(() => {
|
||||
axios
|
||||
.get('/api/accounts/acl')
|
||||
.then(({ data }) => {
|
||||
state.setUser({
|
||||
id: data.user.id,
|
||||
username: data.user.name,
|
||||
nickname: data.user.nickname,
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
quasar.notify({
|
||||
message: t('errors.statusUnauthorized'),
|
||||
type: 'negative',
|
||||
});
|
||||
logout();
|
||||
});
|
||||
});
|
||||
|
||||
function logout() {
|
||||
session.destroy();
|
||||
router.push('/login');
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import { mount } from '@cypress/vue';
|
||||
import QuasarButton from '../QuasarButton.vue';
|
||||
|
||||
describe('QuasarButton', () => {
|
||||
it('renders a message', () => {
|
||||
const label = 'Hello there';
|
||||
mount(QuasarButton, {
|
||||
props: {
|
||||
label,
|
||||
},
|
||||
});
|
||||
|
||||
cy.dataCy('button').should('contain', label);
|
||||
});
|
||||
|
||||
it('renders another message', () => {
|
||||
const label = 'Will this work?';
|
||||
mount(QuasarButton, {
|
||||
props: {
|
||||
label,
|
||||
},
|
||||
});
|
||||
|
||||
cy.dataCy('button').should('contain', label);
|
||||
});
|
||||
|
||||
it('should have a `positive` color', () => {
|
||||
mount(QuasarButton);
|
||||
|
||||
cy.dataCy('button').should('have.backgroundColor', 'var(--q-positive)').should('have.color', 'white');
|
||||
});
|
||||
|
||||
it('should emit `test` upon click', () => {
|
||||
mount(QuasarButton);
|
||||
|
||||
cy.dataCy('button')
|
||||
.click()
|
||||
.should(() => {
|
||||
expect(Cypress.vueWrapper.emitted('test')).to.have.length(1);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import { mount } from '@cypress/vue';
|
||||
import DialogWrapper from 'app/test/cypress/wrappers/DialogWrapper.vue';
|
||||
import QuasarDialog from '../QuasarDialog.vue';
|
||||
|
||||
describe('QuasarDialog', () => {
|
||||
it('should show a dialog with a message', () => {
|
||||
const message = 'Hello, I am a dialog';
|
||||
mount(DialogWrapper, {
|
||||
props: {
|
||||
component: QuasarDialog,
|
||||
componentProps: {
|
||||
message,
|
||||
},
|
||||
},
|
||||
});
|
||||
cy.dataCy('dialog').should('exist').should('contain', message);
|
||||
});
|
||||
|
||||
it('should close a dialog when clikcing ok', () => {
|
||||
// The dialog is still visible from the previous test
|
||||
cy.dataCy('dialog').should('exist').dataCy('ok-button').click();
|
||||
cy.dataCy('dialog').should('not.exist');
|
||||
});
|
||||
});
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
import { mount } from '@cypress/vue';
|
||||
import LayoutContainer from 'app/test/cypress/wrappers/LayoutContainer.vue';
|
||||
import QuasarDrawer from '../QuasarDrawer.vue';
|
||||
|
||||
describe('QuasarDrawer', () => {
|
||||
it('should show a drawer', () => {
|
||||
mount(LayoutContainer, {
|
||||
props: {
|
||||
component: QuasarDrawer,
|
||||
},
|
||||
});
|
||||
cy.dataCy('drawer').should('exist').dataCy('button').should('not.be.visible');
|
||||
cy.get('.q-scrollarea .scroll').scrollTo('bottom', { duration: 500 }).dataCy('button').should('be.visible');
|
||||
});
|
||||
});
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import { mount } from '@cypress/vue';
|
||||
import LayoutContainer from 'app/test/cypress/wrappers/LayoutContainer.vue';
|
||||
import QuasarPageSticky from '../QuasarPageSticky.vue';
|
||||
|
||||
describe('QuasarPageSticky', () => {
|
||||
it('should show a sticky at the bottom-right of the page', () => {
|
||||
mount(LayoutContainer, {
|
||||
props: {
|
||||
component: QuasarPageSticky,
|
||||
title: 'Test',
|
||||
},
|
||||
});
|
||||
|
||||
cy.dataCy('button')
|
||||
.should('be.visible')
|
||||
.should(($el) => {
|
||||
const rect = $el[0].getBoundingClientRect();
|
||||
expect(rect.bottom).to.equal(window.innerHeight - 18);
|
||||
expect(rect.right).to.equal(window.innerWidth - 18);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import { mount } from '@cypress/vue';
|
||||
import QuasarTooltip from '../QuasarTooltip.vue';
|
||||
|
||||
describe('QuasarTooltip', () => {
|
||||
it('should show a tooltip', () => {
|
||||
mount(QuasarTooltip);
|
||||
|
||||
cy.dataCy('button').trigger('mouseover');
|
||||
cy.dataCy('tooltip').contains('Here I am!');
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import { describe, expect, it, jest } from '@jest/globals';
|
||||
import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { i18n } from 'src/boot/i18n';
|
||||
import UserPanel from '../UserPanel.vue';
|
||||
|
||||
// Specify here Quasar config you'll need to test your component
|
||||
installQuasarPlugin();
|
||||
const routerPushMock = jest.fn();
|
||||
|
||||
jest.mock('vue-router', () => ({
|
||||
useRouter: () => ({
|
||||
push: routerPushMock,
|
||||
}),
|
||||
}));
|
||||
|
||||
describe('UserPanel', () => {
|
||||
it('should have the function logout defined', () => {
|
||||
const wrapper = mount(UserPanel, {
|
||||
global: {
|
||||
plugins: [i18n]
|
||||
}
|
||||
});
|
||||
const { vm } = wrapper;
|
||||
|
||||
expect(vm.logout).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
/* import store from '@/store';
|
||||
|
||||
export function useRole() {
|
||||
function hasAny(roles: string[]): boolean {
|
||||
const roleStore: string[] = store.state.roles;
|
||||
|
||||
for (const role of roles) {
|
||||
if (roleStore.indexOf(role) !== -1) return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
return {
|
||||
hasAny,
|
||||
};
|
||||
}
|
||||
*/
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import { useState } from './useState';
|
||||
|
||||
export function useSession() {
|
||||
function getToken() {
|
||||
const localToken = localStorage.getItem('token');
|
||||
const sessionToken = sessionStorage.getItem('token');
|
||||
|
||||
return localToken || sessionToken || '';
|
||||
}
|
||||
|
||||
function setToken(data) {
|
||||
if (data.keepLogin) {
|
||||
localStorage.setItem('token', data.token);
|
||||
} else {
|
||||
sessionStorage.setItem('token', data.token);
|
||||
}
|
||||
}
|
||||
|
||||
function destroy() {
|
||||
localStorage.removeItem('token');
|
||||
sessionStorage.getItem('token');
|
||||
|
||||
const { setUser } = useState();
|
||||
|
||||
setUser({
|
||||
id: 0,
|
||||
username: '',
|
||||
nickname: '',
|
||||
});
|
||||
}
|
||||
|
||||
function isLoggedIn() {
|
||||
const localToken = localStorage.getItem('token');
|
||||
const sessionToken = sessionStorage.getItem('token');
|
||||
|
||||
return !!(localToken || sessionToken);
|
||||
}
|
||||
|
||||
return {
|
||||
getToken,
|
||||
setToken,
|
||||
destroy,
|
||||
isLoggedIn,
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import { ref, computed } from 'vue';
|
||||
|
||||
const user = ref({
|
||||
id: 0,
|
||||
username: '',
|
||||
nickname: '',
|
||||
});
|
||||
|
||||
const roles = ref([]);
|
||||
|
||||
export function useState() {
|
||||
function getUser() {
|
||||
return computed(() => {
|
||||
return {
|
||||
id: user.value.id,
|
||||
username: user.value.username,
|
||||
nickname: user.value.nickname,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function setUser(data) {
|
||||
user.value = {
|
||||
id: data.id,
|
||||
username: data.username,
|
||||
nickname: data.nickname,
|
||||
};
|
||||
}
|
||||
|
||||
function getRoles() {
|
||||
return computed(() => {
|
||||
return roles.value;
|
||||
});
|
||||
}
|
||||
|
||||
function setRoles(data) {
|
||||
roles.value = data;
|
||||
}
|
||||
|
||||
return {
|
||||
getUser,
|
||||
setUser,
|
||||
getRoles,
|
||||
setRoles,
|
||||
};
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import toLowerCase from './toLowerCase';
|
||||
|
||||
export default {
|
||||
toLowerCase,
|
||||
};
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
export default function toLowerCase(value) {
|
||||
return value.toLowerCase();
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
// This is just an example,
|
||||
// so you can safely delete all default props below
|
||||
|
||||
export default {
|
||||
failed: 'Action failed',
|
||||
success: 'Action was successful',
|
||||
};
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
export default {
|
||||
globals: {
|
||||
lang: {
|
||||
es: 'Spanish',
|
||||
en: 'English',
|
||||
},
|
||||
},
|
||||
errors: {
|
||||
statusUnauthorized: 'Access denied',
|
||||
statusInternalServerError: 'An internal server error has ocurred',
|
||||
},
|
||||
login: {
|
||||
title: 'Login',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
submit: 'Log in',
|
||||
keepLogin: 'Keep me logged in',
|
||||
loginSuccess: 'You have successfully logged in',
|
||||
loginError: 'Invalid username or password',
|
||||
},
|
||||
customer: {},
|
||||
components: {
|
||||
topbar: {},
|
||||
userPanel: {
|
||||
settings: 'Settings',
|
||||
logOut: 'Log Out',
|
||||
},
|
||||
},
|
||||
pages: {
|
||||
logIn: 'Log In',
|
||||
dashboard: 'Dashboard',
|
||||
customers: 'Customers',
|
||||
list: 'List',
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
export default {
|
||||
globals: {
|
||||
lang: {
|
||||
es: 'Español',
|
||||
en: 'Inglés',
|
||||
},
|
||||
},
|
||||
errors: {
|
||||
statusUnauthorized: 'Acceso denegado',
|
||||
statusInternalServerError: 'Ha ocurrido un error interno del servidor',
|
||||
},
|
||||
login: {
|
||||
title: 'Iniciar sesión',
|
||||
username: 'Nombre de usuario',
|
||||
password: 'Contraseña',
|
||||
submit: 'Iniciar sesión',
|
||||
keepLogin: 'Mantener sesión iniciada',
|
||||
loginSuccess: 'Inicio de sesión correcto',
|
||||
loginError: 'Nombre de usuario o contraseña incorrectos',
|
||||
},
|
||||
customer: {},
|
||||
components: {
|
||||
topbar: {},
|
||||
userPanel: {
|
||||
settings: 'Configuración',
|
||||
logOut: 'Cerrar sesión',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -1,5 +1,7 @@
|
|||
import enUS from './en-US';
|
||||
import en from './en';
|
||||
import es from './es';
|
||||
|
||||
export default {
|
||||
'en-US': enUS,
|
||||
en: en,
|
||||
es: es,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,95 +1,89 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import Navbar from 'src/components/Navbar.vue';
|
||||
const drawer = ref(false);
|
||||
const miniState = ref(true);
|
||||
|
||||
function onToggleDrawer() {
|
||||
drawer.value = !drawer.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-layout view="lHh Lpr lFf">
|
||||
<q-header elevated>
|
||||
<q-toolbar>
|
||||
<q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
|
||||
<q-layout view="hHh lpR fFf">
|
||||
<Navbar @toggle-drawer="onToggleDrawer()" />
|
||||
<q-drawer
|
||||
v-model="drawer"
|
||||
show-if-above
|
||||
:mini="miniState"
|
||||
@mouseover="miniState = false"
|
||||
@mouseout="miniState = true"
|
||||
mini-to-overlay
|
||||
:width="200"
|
||||
:breakpoint="500"
|
||||
>
|
||||
<q-scroll-area class="fit text-grey-8">
|
||||
<q-list padding>
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:to="{ path: '/dashboard' }"
|
||||
active-class="text-orange"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="dashboard" />
|
||||
</q-item-section>
|
||||
<q-item-section>Dashboard</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
v-ripple
|
||||
:to="{ path: '/customer' }"
|
||||
active-class="text-orange"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="people" />
|
||||
</q-item-section>
|
||||
<q-item-section>Customers</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-ripple :to="{ path: '/ticket' }" active-class="text-orange">
|
||||
<q-item-section avatar>
|
||||
<q-icon name="vn:ticket" />
|
||||
</q-item-section>
|
||||
<q-item-section>Tickets</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable v-ripple>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="receipt" />
|
||||
</q-item-section>
|
||||
|
||||
<q-toolbar-title> Quasar App </q-toolbar-title>
|
||||
<q-item-section>Invoice Out</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<div>Quasar v{{ $q.version }}</div>
|
||||
</q-toolbar>
|
||||
</q-header>
|
||||
<q-item clickable v-ripple>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="shopping_cart" />
|
||||
</q-item-section>
|
||||
|
||||
<q-drawer v-model="leftDrawerOpen" show-if-above bordered>
|
||||
<q-list>
|
||||
<q-item-label header> Essential Links </q-item-label>
|
||||
<q-item-section>Catalog</q-item-section>
|
||||
</q-item>
|
||||
|
||||
<EssentialLink v-for="link in essentialLinks" :key="link.title" v-bind="link" />
|
||||
</q-list>
|
||||
<q-separator />
|
||||
|
||||
<q-item clickable v-ripple>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="drafts" />
|
||||
</q-item-section>
|
||||
|
||||
<q-item-section>Drafts</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-scroll-area>
|
||||
</q-drawer>
|
||||
|
||||
<q-page-container>
|
||||
<router-view />
|
||||
<router-view></router-view>
|
||||
</q-page-container>
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref } from 'vue';
|
||||
import EssentialLink from 'components/EssentialLink.vue';
|
||||
|
||||
const linksList = [
|
||||
{
|
||||
title: 'Docs',
|
||||
caption: 'quasar.dev',
|
||||
icon: 'school',
|
||||
link: 'https://quasar.dev',
|
||||
},
|
||||
{
|
||||
title: 'Github',
|
||||
caption: 'github.com/quasarframework',
|
||||
icon: 'code',
|
||||
link: 'https://github.com/quasarframework',
|
||||
},
|
||||
{
|
||||
title: 'Discord Chat Channel',
|
||||
caption: 'chat.quasar.dev',
|
||||
icon: 'chat',
|
||||
link: 'https://chat.quasar.dev',
|
||||
},
|
||||
{
|
||||
title: 'Forum',
|
||||
caption: 'forum.quasar.dev',
|
||||
icon: 'record_voice_over',
|
||||
link: 'https://forum.quasar.dev',
|
||||
},
|
||||
{
|
||||
title: 'Twitter',
|
||||
caption: '@quasarframework',
|
||||
icon: 'rss_feed',
|
||||
link: 'https://twitter.quasar.dev',
|
||||
},
|
||||
{
|
||||
title: 'Facebook',
|
||||
caption: '@QuasarFramework',
|
||||
icon: 'public',
|
||||
link: 'https://facebook.quasar.dev',
|
||||
},
|
||||
{
|
||||
title: 'Quasar Awesome',
|
||||
caption: 'Community Quasar projects',
|
||||
icon: 'favorite',
|
||||
link: 'https://awesome.quasar.dev',
|
||||
},
|
||||
];
|
||||
|
||||
export default defineComponent({
|
||||
name: 'MainLayout',
|
||||
|
||||
components: {
|
||||
EssentialLink,
|
||||
},
|
||||
|
||||
setup() {
|
||||
const leftDrawerOpen = ref(false);
|
||||
|
||||
return {
|
||||
essentialLinks: linksList,
|
||||
leftDrawerOpen,
|
||||
toggleLeftDrawer() {
|
||||
leftDrawerOpen.value = !leftDrawerOpen.value;
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<div class="row fit fixed">
|
||||
<div class="col-2">
|
||||
<q-card square>
|
||||
<router-link :to="{ path: '/customer/list' }">
|
||||
<q-icon name="arrow_back" size="md" color="primary" />
|
||||
</router-link>
|
||||
</q-card>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
<q-card>asd</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
<router-view></router-view>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
|
||||
const customers = [
|
||||
{
|
||||
id: 1101,
|
||||
name: 'Bruce Wayne',
|
||||
username: 'batman',
|
||||
email: 'batman@gotham',
|
||||
phone: '555-555-5555',
|
||||
expanded: ref(false),
|
||||
},
|
||||
{
|
||||
id: 1102,
|
||||
name: 'James Gordon',
|
||||
username: 'jamesgordon',
|
||||
email: 'jamesgordon@gotham',
|
||||
phone: '555-555-1111',
|
||||
expanded: ref(false),
|
||||
},
|
||||
];
|
||||
|
||||
function navigate(id) {
|
||||
router.push({ path: `/customer/${id}` });
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-page class="q-pa-md">
|
||||
<div class="column items-center q-gutter-y-md">
|
||||
<q-card v-for="customer in customers" :key="customer.id" class="card">
|
||||
<!-- v-ripple :to="{ path: '/dashboard' }" -->
|
||||
<q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
|
||||
<q-item-section class="q-pa-md">
|
||||
<div class="text-h6">{{ customer.name }}</div>
|
||||
<q-item-label caption>@{{ customer.username }}</q-item-label>
|
||||
<div class="q-mt-md">
|
||||
<q-list>
|
||||
<q-item class="q-pa-none">
|
||||
<q-item-section>
|
||||
<q-item-label caption>Email</q-item-label>
|
||||
<q-item-label>{{ customer.email }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item class="q-pa-none">
|
||||
<q-item-section>
|
||||
<q-item-label caption>Phone</q-item-label>
|
||||
<q-item-label>{{ customer.phone }}</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</div>
|
||||
</q-item-section>
|
||||
<q-btn color="grey-7" round flat icon="more_vert">
|
||||
<q-menu cover auto-close>
|
||||
<q-list>
|
||||
<q-item clickable>
|
||||
<q-item-section>Action 1</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable>
|
||||
<q-item-section>Action 2</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
<q-separator vertical />
|
||||
<q-card-actions vertical class="justify-between">
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
color="orange"
|
||||
icon="arrow_circle_right"
|
||||
@click="navigate(customer.id)"
|
||||
/>
|
||||
<q-btn flat round color="accent" icon="preview" />
|
||||
<q-btn flat round color="accent" icon="vn:ticket" />
|
||||
<q-card-actions>
|
||||
<q-btn
|
||||
color="grey"
|
||||
round
|
||||
flat
|
||||
dense
|
||||
:icon="customer.expanded.value ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
|
||||
@click="customer.expanded.value = !customer.expanded.value"
|
||||
/>
|
||||
</q-card-actions>
|
||||
</q-card-actions>
|
||||
</q-item>
|
||||
<q-slide-transition>
|
||||
<div v-show="customer.expanded.value">
|
||||
<q-separator />
|
||||
<q-card-section class="text-subitle2">
|
||||
<q-list>
|
||||
<q-item clickable>
|
||||
<q-item-section>
|
||||
<q-item-label>Address</q-item-label>
|
||||
<q-item-label caption>Avenue 11</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-card-section>
|
||||
</div>
|
||||
</q-slide-transition>
|
||||
<!-- <q-card-section horizontal>
|
||||
<q-card-section vertical class="col">
|
||||
<div class="text-h6">{{ customer.name }}</div>
|
||||
<div class="text-subtitle2">@{{ customer.username }}</div>
|
||||
|
||||
<q-card-section vertical>text</q-card-section>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator vertical />
|
||||
|
||||
<q-card-actions vertical class="justify-around">
|
||||
<q-btn flat round color="red" icon="favorite" />
|
||||
<q-btn flat round color="accent" icon="bookmark" />
|
||||
<q-btn color="grey-7" round flat icon="more_vert">
|
||||
<q-menu cover auto-close>
|
||||
<q-list>
|
||||
<q-item clickable>
|
||||
<q-item-section>Action 1</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable>
|
||||
<q-item-section>Action 2</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</q-card-actions>
|
||||
</q-card-section>-->
|
||||
</q-card>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card {
|
||||
width: 100%;
|
||||
max-width: 60em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
const slide = ref('style');
|
||||
const slideText = 'Description text';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-page class="q-pa-md">
|
||||
<q-banner
|
||||
v-if="$q.screen.gt.xs"
|
||||
inline-actions
|
||||
rounded
|
||||
class="bg-orange text-white q-mb-lg"
|
||||
>
|
||||
You have lost connection to the internet. This app is offline.
|
||||
<template #action>
|
||||
<q-btn flat label="Turn ON Wifi" />
|
||||
<q-btn flat label="Dismiss" />
|
||||
</template>
|
||||
</q-banner>
|
||||
|
||||
<div class="row items-start wrap q-col-gutter-md q-mb-lg">
|
||||
<div class="col-12 col-md">
|
||||
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
|
||||
<q-carousel
|
||||
v-model="slide"
|
||||
transition-prev="scale"
|
||||
transition-next="scale"
|
||||
swipeable
|
||||
animated
|
||||
control-color="white"
|
||||
navigation
|
||||
padding
|
||||
arrows
|
||||
height="300px"
|
||||
class="bg-orange-3 text-white shadow-1 rounded-borders"
|
||||
>
|
||||
<q-carousel-slide name="style" class="column no-wrap flex-center">
|
||||
<q-icon name="style" size="56px" />
|
||||
<div class="q-mt-md text-center">{{ slideText }}</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="tv" class="column no-wrap flex-center">
|
||||
<q-icon name="live_tv" size="56px" />
|
||||
<div class="q-mt-md text-center">{{ slideText }}</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="layers" class="column no-wrap flex-center">
|
||||
<q-icon name="layers" size="56px" />
|
||||
<div class="q-mt-md text-center">{{ slideText }}</div>
|
||||
</q-carousel-slide>
|
||||
<q-carousel-slide name="map" class="column no-wrap flex-center">
|
||||
<q-icon name="terrain" size="56px" />
|
||||
<div class="q-mt-md text-center">{{ slideText }}</div>
|
||||
</q-carousel-slide>
|
||||
</q-carousel>
|
||||
</div>
|
||||
<div class="col-12 col-md">
|
||||
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
|
||||
<q-card class="q-pa-md">Dashboard page..</q-card>
|
||||
</div>
|
||||
<div class="col-12 col-md">
|
||||
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
|
||||
<q-card class="q-pa-md">Dashboard page..</q-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row items-start q-col-gutter-md q-mb-lg">
|
||||
<div class="col-12 col-md">
|
||||
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
|
||||
<q-card class="q-pa-md">Dashboard page..</q-card>
|
||||
</div>
|
||||
<div class="col-12 col-md">
|
||||
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
|
||||
<q-card class="q-pa-md">Dashboard page..</q-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row items-start q-col-gutter-md q-mb-lg">
|
||||
<div class="col">
|
||||
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
|
||||
<q-card class="q-pa-md">Dashboard page..</q-card>
|
||||
</div>
|
||||
</div>
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<template>
|
||||
<q-page class="flex flex-center">
|
||||
<img alt="Quasar logo" src="~assets/quasar-logo-vertical.svg" style="width: 200px; height: 200px" />
|
||||
</q-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'IndexPage',
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,147 @@
|
|||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { Dark, useQuasar } from 'quasar';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import axios from 'axios';
|
||||
|
||||
import { useSession } from 'src/composables/useSession';
|
||||
|
||||
const quasar = useQuasar();
|
||||
const session = useSession();
|
||||
const router = useRouter();
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
let username = ref('');
|
||||
let password = ref('');
|
||||
let keepLogin = ref(true);
|
||||
|
||||
const darkMode = computed({
|
||||
get() {
|
||||
return Dark.isActive;
|
||||
},
|
||||
set(value) {
|
||||
Dark.set(value);
|
||||
},
|
||||
});
|
||||
|
||||
async function onSubmit() {
|
||||
try {
|
||||
const { data } = await axios.post('/api/accounts/login', {
|
||||
user: username.value,
|
||||
password: password.value,
|
||||
});
|
||||
|
||||
session.setToken({
|
||||
token: data.token,
|
||||
keepLogin: keepLogin.value,
|
||||
});
|
||||
|
||||
quasar.notify({
|
||||
message: t('login.loginSuccess'),
|
||||
type: 'positive',
|
||||
});
|
||||
|
||||
await router.push({ path: '/dashboard' });
|
||||
} catch (error) {
|
||||
if (axios.isAxiosError(error)) {
|
||||
const errorCode = error.response && error.response.status;
|
||||
if (errorCode === 401) {
|
||||
quasar.notify({
|
||||
message: t('login.loginError'),
|
||||
type: 'negative',
|
||||
});
|
||||
}
|
||||
} else {
|
||||
quasar.notify({
|
||||
message: t('errors.statusInternalServerError'),
|
||||
type: 'negative',
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-layout>
|
||||
<q-header class="transparent">
|
||||
<q-toolbar>
|
||||
<q-space></q-space>
|
||||
<q-toggle
|
||||
:label="t(`globals.lang['${locale}']`)"
|
||||
icon="public"
|
||||
color="orange"
|
||||
false-value="es"
|
||||
true-value="en"
|
||||
v-model="locale"
|
||||
/>
|
||||
<q-toggle
|
||||
v-model="darkMode"
|
||||
checked-icon="dark_mode"
|
||||
color="orange"
|
||||
unchecked-icon="light_mode"
|
||||
/>
|
||||
</q-toolbar>
|
||||
</q-header>
|
||||
<q-page-container>
|
||||
<q-page>
|
||||
<div id="login">
|
||||
<q-card class="login q-pa-xl">
|
||||
<q-img
|
||||
src="~/assets/logo.svg"
|
||||
alt="Logo"
|
||||
fit="contain"
|
||||
:ratio="16 / 9"
|
||||
class="q-mb-md"
|
||||
/>
|
||||
<q-form @submit="onSubmit" class="q-gutter-md">
|
||||
<q-input
|
||||
filled
|
||||
color="orange"
|
||||
v-model="username"
|
||||
:label="t('login.username')"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) => (val && val.length > 0) || 'Please type something',
|
||||
]"
|
||||
/>
|
||||
<q-input
|
||||
filled
|
||||
color="orange"
|
||||
type="password"
|
||||
v-model="password"
|
||||
:label="t('login.password')"
|
||||
lazy-rules
|
||||
:rules="[
|
||||
(val) => (val && val.length > 0) || 'Please type something',
|
||||
]"
|
||||
/>
|
||||
<q-toggle
|
||||
v-model="keepLogin"
|
||||
:label="t('login.keepLogin')"
|
||||
color="orange"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<q-btn :label="t('login.submit')" type="submit" color="orange" />
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</div>
|
||||
</q-page>
|
||||
</q-page-container>
|
||||
</q-layout>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#login {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: inherit;
|
||||
}
|
||||
|
||||
.login {
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
import { jest, describe, expect, it } from '@jest/globals';
|
||||
import { mount } from '@vue/test-utils';
|
||||
import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';
|
||||
import { i18n } from 'src/boot/i18n';
|
||||
import { Notify } from 'quasar';
|
||||
import axios from 'axios';
|
||||
import Login from '../Login.vue';
|
||||
|
||||
// Specify here Quasar config you'll need to test your component
|
||||
installQuasarPlugin({
|
||||
plugins: {
|
||||
Notify
|
||||
}
|
||||
});
|
||||
const routerPushMock = jest.fn();
|
||||
|
||||
jest.mock('vue-router', () => ({
|
||||
useRouter: () => ({
|
||||
push: routerPushMock,
|
||||
}),
|
||||
}));
|
||||
|
||||
|
||||
describe('Login', () => {
|
||||
it('should successfully set the token into session', async () => {
|
||||
const wrapper = mount(Login, {
|
||||
global: {
|
||||
plugins: [i18n]
|
||||
}
|
||||
});
|
||||
const { vm } = wrapper;
|
||||
|
||||
jest.spyOn(axios, 'post').mockResolvedValue({ data: { token: 'token' } });
|
||||
jest.spyOn(vm.quasar, 'notify')
|
||||
|
||||
expect(vm.session.getToken()).toEqual('');
|
||||
|
||||
await vm.onSubmit();
|
||||
|
||||
expect(vm.session.getToken()).toEqual('token');
|
||||
expect(vm.quasar.notify).toHaveBeenCalledWith(expect.objectContaining(
|
||||
{ 'type': 'positive' }
|
||||
));
|
||||
vm.session.destroy();
|
||||
});
|
||||
|
||||
it('should not set the token into session if any error occurred', async () => {
|
||||
const wrapper = mount(Login, {
|
||||
global: {
|
||||
plugins: [i18n]
|
||||
}
|
||||
});
|
||||
const { vm } = wrapper;
|
||||
|
||||
jest.spyOn(axios, 'post').mockRejectedValue(new Error('error'));
|
||||
jest.spyOn(vm.quasar, 'notify')
|
||||
|
||||
expect(vm.session.getToken()).toEqual('');
|
||||
|
||||
await vm.onSubmit();
|
||||
|
||||
expect(vm.quasar.notify).toHaveBeenCalledWith(expect.objectContaining(
|
||||
{ 'type': 'negative' }
|
||||
));
|
||||
});
|
||||
});
|
||||
|
|
@ -5,15 +5,16 @@
|
|||
|
||||
<div class="text-h2" style="opacity: 0.4">Oops. Nothing here...</div>
|
||||
|
||||
<q-btn class="q-mt-xl" color="white" text-color="blue" unelevated to="/" label="Go Home" no-caps />
|
||||
<q-btn
|
||||
class="q-mt-xl"
|
||||
color="white"
|
||||
text-color="blue"
|
||||
unelevated
|
||||
to="/"
|
||||
label="Go Home"
|
||||
no-caps
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ErrorNotFound',
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,16 +1,49 @@
|
|||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('layouts/MainLayout.vue'),
|
||||
children: [{ path: '', component: () => import('pages/IndexPage.vue') }],
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
meta: { title: 'logIn' },
|
||||
component: () => import('../pages/Login/Login.vue'),
|
||||
},
|
||||
|
||||
// Always leave this as last one,
|
||||
// but you can also remove it
|
||||
{
|
||||
path: '/:catchAll(.*)*',
|
||||
component: () => import('pages/ErrorNotFound.vue'),
|
||||
path: '/',
|
||||
name: 'Main',
|
||||
component: () => import('../layouts/MainLayout.vue'),
|
||||
redirect: { name: 'Dashboard' },
|
||||
children: [
|
||||
{
|
||||
path: '/dashboard',
|
||||
name: 'Dashboard',
|
||||
meta: { title: 'dashboard' },
|
||||
component: () => import('../pages/Dashboard/Dashboard.vue'),
|
||||
},
|
||||
{
|
||||
path: '/customer',
|
||||
name: 'Customer',
|
||||
meta: { title: 'customers' },
|
||||
component: () => import('../pages/Customer/CustomerLayout.vue'),
|
||||
redirect: { name: 'List' },
|
||||
children: [
|
||||
{
|
||||
path: 'list',
|
||||
name: 'List',
|
||||
meta: { title: 'list' },
|
||||
component: () => import('../pages/Customer/List.vue'),
|
||||
},
|
||||
{
|
||||
path: ':id',
|
||||
name: 'Card',
|
||||
component: () => import('../pages/Customer/Card/CustomerCard.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/:pathMatch(.*)*',
|
||||
name: 'NotFound',
|
||||
component: () => import('../pages/NotFound.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default routes;
|
||||
export default routes;
|
||||
Loading…
Reference in New Issue