64 lines
32 KiB
Vue
64 lines
32 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<div class="container-fluid">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-12 col-md-5 col-lg-4 bg-img" style="background-image: url('/images/login.svg');background-size: cover;">
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="col-12 col-md-7 col-lg-8 pt-3 ">
|
|||
|
|
<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+R3vbv3ys5tuRz
|
|||
|
|
</defs>
|
|||
|
|
</svg>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="text-center pt-1 mt-5 ">
|
|||
|
|
<h2 class="fw-bolder display-6 text-center" >Log In</h2>
|
|||
|
|
<span class="fs-5 pt-1 text-muted">Welcome back, <span class="fw-bolder text-dark">Morris!</span></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="row pt-2 pb-5">
|
|||
|
|
<div class="col-12 pb-5">
|
|||
|
|
<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">
|
|||
|
|
<label class="form-label">Email</label>
|
|||
|
|
<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>
|
|||
|
|
<div class="invalid-feedback d-block" v-if="auth_error">Email or password is wrong, please try again!</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row justify-content-center pt-3">
|
|||
|
|
<div class="col-12 col-sm-8 col-md-8 col-lg-6">
|
|||
|
|
<label class="form-label">Password</label>
|
|||
|
|
<input type="password" v-model="form.password" placeholder="Password" class="form-control" >
|
|||
|
|
<span class="float-end pt-2"><a class="forgot-link" href="#">Forgot Password</a></span>
|
|||
|
|
</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">
|
|||
|
|
<button type="submit" class=" login-btn col-12" >Sign In <div v-if="loading" class="spinner-border spinner-border-sm" role="status">
|
|||
|
|
<span class="sr-only">Loading...</span>
|
|||
|
|
</div></button>
|
|||
|
|
<h5 class="text-center pt-3">Don’t have an Account? <NuxtLink class="signup-link" :to="localePath('/auth/signup')">Sign Up</NuxtLink></h5>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</script>
|