2022-12-16 23:17:37 +00:00
< template >
< div >
2023-02-27 05:45:13 +00:00
< video -background
src = "/video/bg-video.mp4"
style = " height: 100vh;"
>
2022-12-16 23:17:37 +00:00
< div class = "container-fluid" >
2023-02-27 02:32:54 +00:00
< div class = "row " >
2023-02-26 07:22:35 +00:00
< div class = "col-12 col-md-5 col-lg-4 bg-img d-none d-md-block" style = "background-image: url('/images/login.svg');background-size: cover;height: 100vh" >
2023-02-26 05:52:16 +00:00
2022-12-16 23:17:37 +00:00
< / div >
2023-02-27 02:32:54 +00:00
< div class = "col-12 col-md-7 col-lg-8 pt-3" >
< div class = "row" >
< div class = "col-12" >
< div class = "py-3 text-center" >
< svg width = "225" height = "32" viewBox = "0 0 225 32" fill = "none" xmlns = "http://www.w3.org/2000/svg" xmlns :xlink ="http://www.w3.org/1999/xlink" >
< rect width = "225" height = "32" fill = "url(#pattern0)" / >
< defs >
< pattern id = "pattern0" patternContentUnits = "objectBoundingBox" width = "1" height = "1" >
< use xlink :href ="#image0_129_1673" transform = "matrix(0.000429185 0 0 0.0030177 0 -0.000938841)" / >
< / pattern >
< image id = "image0_129_1673" width = "2330" height = "332" xlink : href = " data : image / png ; base64 , iVBORw0KGgoAAAANSUhEUgAACRoAAAFMCAMAAACZeWInAAABR1BMVEVMaXGZpKqZpKqZpKqZpKqZpKqZpKqZpKqZpKqZpKqZpKqZpKqZpKqZpKqZpKqZpKrpwEbpr0bpwUbprkbpwUbpwUbprEbpv0bpq0bpqEbpwEbpqUbprUbprUbpwEbpq0bpq0bpw0bpqkbprEbpwEbpp0bpsUbpwEbpwUbpsUbpskbpsUbprEbpv0bpuEbpw0bpv0bpwEbpwEbpp0bpwkbpskbpv0bpwEbptEbpskbpvEbpskbpsUbpqUbpq0bprkbpw0bpuEbptUbps0bpq0bpuUbpskbpukbpu0bpvkbpuEbprkbpqEbprUaZpKrpv0bppEbppUbpvkbpr0bprkbpwEbppkbpsEbpvUbpp0bprUbpqEbpqUbpqkbpq0bprEbpsUbpvEbpskbps0bptEbptUbptkbpt0bpu0bpukbpuEbpuUbpo0Y6m5fPAAAATnRSTlMAoCAw8BBgQMCA0OCQUHCwHx / cV1ecnP7c7 / b2cDyvwM9w54eH + + / 773A8wK / 2VzzA58 / 2wK88cJzn74fcwO / 5wPbP9vvc + / b8 + / uS5FVlrZ9SAAAACXBIWXMAACxKAAAsSgF3enRNAAAgAElEQVR4nO2daZfctrWuq6pr7Bq6NUZyZHmQneNB8Zw4zol87knO5HvXakuybHm25dnx + f + f76qhu6tqAyC4BwBkv8 + HZNmuJgkCBB5ubIAdAMAuvdFkNl5zNBkekP8OAAAAAHBBGMy705M9xoseqh8AAAAAF49Rt7 / vRWsOh2gNAAAAALhYjMZEic7pTwZoDgAAAAC4MPRCYrRkisgRAAAAAC4KC89U2jZjBI4AAAAAcBEYHBEPctEfoTUAAAAAoPX0Dh0e5ASTagAAAABoOwcRk2mnwI0AAAAA0G7qmBHcCAAAAADtZhA9mwY3KpoJqapqxqECjRgHPJmQwwAAAADNomrRPgGfDikTqBEAAACgQP0BdYo1 / EUCNQIAAADkHJCxrZoZ7nuJQI0AAAAAObWn05Zge6MSgRoBAAAAYoZkaBMPqCATUCMAAABAzJQMbVEgbFQgUCMAAABACi9oVDGigjxAjQAAAAAprEyjJT3c + uKAGgEAAABCemRgiwWL1MoDagQAAAAIWZCBLZYpbn1xQI0AAAAAIez5NGyJXSBQIwAAAEDGgIxr8Sxw70sDagQAAADIYA19G45w70sDagQAAADI4IylpyDZqDigRgAAAICMLhnXaoB7XxpQIwAAAECGIAsbG2KXB9QIAAAAkMH8SsgaqFFpQI0AAAAAGWRYqwOWqJUG1AgAAACQQYY1DIFNBmoEAAAAyCDDGobAJgM1AgAAAGSQYQ1DYJOBGgEAAAAyyLCGIbDJQI0AaD0Ho / r00CyWvP7cktv / Z80Ly3 + 4Sn4EgEyNhrh / hQE1AqD1cLZcudAP5dXnbr9z + aWXfvfhho / 3eeqlN99557nnyB + CC8sheYRqgMX7pQE1AqD1QI2iee72Oy / 9y4cOiB2teenyO8 + 93pCyAUuw5WOrgBoB0HqgRhEcP / fOm04p2oXI0ZKX3roGP7rg4EMhrQJqBEDrgRpV8Pq1y08RCfJBxGjDm + 9ggu0CsyCPUDz4vGxxQI0AaD1QowCvX7scESyqjhytw0e3kaR9QWENfRu6F / 3mlQfUCIDWAzXy8dxb8dEilyC5LOnytWPP2UCbIY9QPPhOSHFAjQBoPVAjJy9c / h3xHbYjnf3D8n9euo3UowvHEXmGosFOGcUBNQKg9UCNKFpe5OMp2NEFY0ieoVgOL / qtKxCoEQCtB2q0x3PGXrTmJcysXSQG5BmKBfNp5QE1AqD1QI22ef2dumnXfC6 / S04P2gp7 + T7m08oDagRA64EanfPCm8m8aMW / 3Ebo6ILAXaOG9WkFAjUCoPVAjTYc304XMDrnMhb0XwyYG2IfXPT7ViJQIwBaD9RoxetJMoxcvHSNXAxoH7ywEYJGJQI1AqD1QI2WqdeJZ9J2 + QBydAHgrN / vI9OoRKBGALQeqFHnuZeIrSTmd28g6ajtDPrkOcLo10ygRgC0nguvRvnF6MMPHz58CDlqO3PyHFURHE5BNqBGALSeC65GJYjRSo0ePnyDXBxoFXUX8GM6rVCgRgC0ngutRq9nzTE64 + Ea5By1nEPyJIXoY3VaoUCNAGg9F1iNjt8ikpLTjB4 + fPhH7ALZZga13Gh40W9XsUCNAGg9F1eNbudarr / Hw23 + + mdynaA11HEjmFGxQI0AaD0XVY2ey7HBo4sdM3r46afIx24xg9gl / JhNKxioEQCt52Kq0XEZSUYOM / r00w9eIJcLWkPcsHqIDOyCgRoB0HoupBqVMpe2Z0afbngTs2rtZTQlzxMBo17RQI0AaD0XUI1eL2LB / goaM1ry5MltctGgLQwmFZs / jjGZVjZQIwBaz8VTo3eIoGTDZ0ZPniAdu8X0ugE5Go8u + u0pHqgRAK3noqnR60 + VY0YBNULgqNUMFu61av0uIkblAzUCoPVcMDUqJ8toX4z2zOjJk79iqVqb6S2O9mJHh7P5Rb8pzQBqBEDruVBqlHhh2kPyb3b / s1ONTs3ol19 + wVK1ltMbLSaTo / F4NpnMMY / WGKBGALSei6RGz6ULGW10h / x7pxS5gka / LHmLFAEAkBmoEQCt5wKpUZL864d + + QmyP522UqNf / hvZ2AAUBtQIgNZzYdToOMGS / ZD7VOAKGv2CSTUAigNqBEDruShqdNX2wyBh74n1ov2g0S + / / vorJtUAKAqoEQCt54Ko0TUiM8V4kcuMnpyZ0a + / YqUaACUBNQKg9VwMNXqL6EwxXuRSoy0x + vXXX / / nNVIeAEAuoEYAtJ6LoEbHl4nQlONFlWb066 + / IeEIgGKAGgHQei6AGh2bbYBNLEdmRp86zei333777RopFAAgD1AjAFpP + 9WocDMiQaP9kNGK / yTFAgBkAWoEQOtpvRpZmRFRHLEaeWNGv / 322z / hRgCUAdQIgNbTdjUyMiMiOHI1euIKGp2a0T / / + e9YqAZACUCNAGg9LVcjk + 2MiN0oqNGTraDRvhgtzQhuBEAZQI0AaD3tVqOr2l9NI2KjZUaOkNFvO2YENwKgCKBGALSeVqtRA8zooTfPaN + M4EYAlADUCIDW02Y1aoIZPfTuZ0TM6J8 / / 4zNHwHIDdQIgNbTYjV6TtmMiNXEmg / BrUZuM / rtXIx + hhsBkB2oEQCtp71qpP3ZNGI9XDFaEWtG / 9wxo59 / xpwaAHmBGgHQelqrRmWb0ZkdnanRL85Eo30z + rlR + Uaj0Wg0n5yx / McR + VG + C1os / / GA / Oiis6qmxXm1TYarfzNo9G052C7TfDQa9chPomm8GvW2H4NFSx6CZQ2PhnutVlDLBdLb61AX + XtUGfsFWj2ZpZSorWqU3YyICTlY / 4zGjLxi1Aw3Gs0ns3GgYY3Hs8kwZfuvuKD + eLx8KMmfXSQORsPlPZqSm7N3o7pLw23QfemNJrPxISnJium4y2qHjVWj0XzS9d2Mw / Fs0kCTGI0mkyNfmTa3ftydLBpsf731o9knBduuvFUP1pC3l8G6Pw72Nf3x + GjZ1WQskn / A8NMANcppRp9GadEmchRlRltq9NNPJbtRbz4Jt / jd1j8bWndYtS5oOp7M2 / WaGcFgtJjF36JTxt3JvPTBpjecRfVu06NJPT9qohqNJkdBf9jQH88a8gis2m1IFwjT8WzRrNjnwXAStj7CuFu03w5Gk25d4zgcp32PPqOdavQWcZt0YlQTstPjb78Gzeinn / 6dFLcIDhZHtXqqNf1xzXEpnt6wW3vIPznp1x0om8tgNDli3KFzErgtk96wZmOs0wybpkajSb1eftodFm0QonZbW4TzcLDo1pOiLfpFvuKNJpzxYbvaEjfKVqrRZSI35ZuRd2Xanhj99NNP5X1PrfZItEP / aKj + JM9ngkG / f7Roe / SoN + R3vbv3ys5tuR
< / defs >
< / svg >
< / div >
< / div >
< / div >
< div class = "row" style = "height: 90%" >
< div class = "col-12 my-auto" >
< div class = "text-center pt-1 " >
2023-02-27 16:51:33 +00:00
< h2 class = "fw-bolder display-6 text-center" > { { t ( 'Log In' ) } } < / h2 >
< span class = "fs-5 pt-1 text-muted" > { { t ( 'Welcome back,' ) } } < / span >
2023-02-27 02:32:54 +00:00
< / div >
< div class = "row pt-2" >
< div class = "col-12" >
< form @submit.prevent ="loginNow" method = "POST" class = " pb-5 " >
< div class = "row pt-3 justify-content-center" >
< div class = "col-12 col-sm-8 col-md-8 col-lg-6" >
2023-02-27 16:51:33 +00:00
< label class = "form-label" > { { t ( 'Email' ) } } < / label >
2023-02-27 02:32:54 +00:00
< input type = "email" v -model = " form.email " placeholder = "Email" class = "form-control" >
< div class = "invalid-feedback d-block" v-if ="errors.email" > {{ errors.email [ 0 ] }} < / div >
2023-02-27 16:51:33 +00:00
< div class = "invalid-feedback d-block" v-if ="auth_error" > {{ t ( ' Email or password is wrong , please try again ! ' ) }} < / div >
2023-02-27 02:32:54 +00:00
< / div >
< / div >
< div class = "row justify-content-center pt-3" >
< div class = "col-12 col-sm-8 col-md-8 col-lg-6" >
2023-02-27 16:51:33 +00:00
< label class = "form-label" > { { t ( 'Password' ) } } < / label >
2023-02-27 02:32:54 +00:00
< input type = "password" v -model = " form.password " placeholder = "Password" class = "form-control" >
2023-02-27 16:51:33 +00:00
< span class = "float-end pt-2" > < router -link :to ="localePath('/auth/forgot')" class = "forgot-link" href = "#" > { { t ( 'Forgot Password' ) } } < / r o u t e r - l i n k > < / s p a n >
2023-02-27 02:32:54 +00:00
< / div >
< / div >
< div class = "row justify-content-center pb-5" >
< div class = "col-12 col-sm-8 col-md-8 col-lg-6 pt-4 text-center" >
2023-02-27 16:51:33 +00:00
< button type = "submit" class = " login-btn col-12" > { { t ( 'Sign In' ) } } < div v-if ="loading" class="spinner-border spinner-border-sm" role="status" >
< span class = "sr-only" > { { t ( 'Loading...' ) } } < / span >
2023-02-27 02:32:54 +00:00
< / div > < / button >
2023-02-27 16:51:33 +00:00
< h5 class = "text-center pt-3" > { { t ( 'Don’ t have an Account?' ) } } < NuxtLink class = "signup-link" :to ="localePath('/auth/signup')">{{t(" Sign Up " ) }} < / NuxtLink > < / h5 >
2023-02-27 02:32:54 +00:00
< / div >
< / div >
< / form >
2022-12-16 23:17:37 +00:00
< / div >
2023-02-27 02:32:54 +00:00
< / div >
2022-12-16 23:17:37 +00:00
< / div >
< / div >
2023-02-27 02:32:54 +00:00
2022-12-16 23:17:37 +00:00
< / div >
< / div >
< / div >
2023-02-27 05:45:13 +00:00
< / v i d e o - b a c k g r o u n d >
2022-12-16 23:17:37 +00:00
< / div >
< / template >
< script >
2023-02-14 04:40:06 +00:00
import backgroundImagePath from '~/assets/image/login4.png' ;
import { useUserStore } from '@/stores/user' ;
import { mapState , mapActions } from "pinia" ;
2022-12-16 23:17:37 +00:00
export default {
2023-02-26 05:52:16 +00:00
setup ( ) {
const { t } = useI18n ( )
const localePath = useLocalePath ( )
2022-12-16 23:17:37 +00:00
2023-02-26 05:52:16 +00:00
return {
t ,
localePath ,
}
} ,
2023-02-11 19:25:59 +00:00
mounted ( ) {
2023-02-25 06:48:20 +00:00
// if (this.is_login){
// this.$router.push('/onboarding');
// }
2023-02-11 19:25:59 +00:00
} ,
2023-02-14 04:40:06 +00:00
name : 'Login' ,
2022-12-16 23:17:37 +00:00
data ( ) {
return {
2023-02-14 04:40:06 +00:00
loading : false ,
form : {
email : "" ,
password : "" ,
} ,
auth _error : false ,
2022-12-16 23:17:37 +00:00
backgroundImagePath : backgroundImagePath ,
2023-02-14 04:40:06 +00:00
errors : [ ]
2022-12-16 23:17:37 +00:00
}
2023-02-11 19:25:59 +00:00
} ,
2023-02-15 03:36:51 +00:00
computed : {
... mapState ( useUserStore , [ 'is_login' ] )
} ,
2023-02-11 19:25:59 +00:00
methods : {
2023-02-14 04:40:06 +00:00
... mapActions ( useUserStore , [ 'login' , 'logout' ] ) ,
loginNow ( ) {
this . errors = [ ] ;
this . auth _error = false ;
this . loading = true ;
this . $axios . post ( '/api/login' , this . form ) . then ( ( { data } ) => {
this . loading = false ;
2023-02-25 06:48:20 +00:00
2023-02-15 03:36:51 +00:00
if ( data . status == 'success' ) {
2023-02-25 06:48:20 +00:00
// this.$axios.headers.Authorization='bearer '+data.user,data.authorisation.token;
2023-02-15 03:36:51 +00:00
this . login ( data . user , data . authorisation . token ) ;
2023-02-25 06:48:20 +00:00
2023-02-27 04:54:49 +00:00
this . $toast . success ( 'Login Successfully....' ) ;
this . $router . push ( this . localePath ( '/onboarding' ) ) ;
2023-02-15 03:36:51 +00:00
2023-02-27 04:54:49 +00:00
} else {
this . $toast . error ( ` Email or password is incorrect. ` ) ;
2023-02-15 03:36:51 +00:00
}
2023-02-14 04:40:06 +00:00
} ) . catch ( ( error ) => {
this . loading = false ;
console . log ( error ) ;
if ( error . response . status == 401 ) {
this . auth _error = true ;
2023-02-27 04:54:49 +00:00
this . $toast . error ( ` Email or password is incorrect. ` ) ;
2023-02-14 04:40:06 +00:00
}
if ( error . response . status == 422 ) {
this . errors = error . response . data . errors ;
}
2023-02-11 19:25:59 +00:00
} )
}
2022-12-16 23:17:37 +00:00
}
}
< / script >