Julio Montoya
4 years ago
parent
c5033bd6b1
commit
cab2a9335b
@ -0,0 +1,126 @@ |
||||
<template> |
||||
<form class="mt-8 space-y-6" @submit.prevent="onSubmit"> |
||||
<input type="hidden" name="remember" value="true" /> |
||||
<div class="rounded-md shadow-sm -space-y-px"> |
||||
<div> |
||||
<label for="login" class="sr-only">Username</label> |
||||
<input id="login" v-model="login" name="login" type="text" autocomplete="login" required="" |
||||
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm" |
||||
placeholder="Username"/> |
||||
</div> |
||||
<div> |
||||
<label for="password" class="sr-only">Password</label> |
||||
<input id="password" v-model="password" name="password" type="password" autocomplete="current-password" |
||||
required="" |
||||
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm" |
||||
placeholder="Password"/> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="flex items-center justify-between"> |
||||
<div class="flex items-center"> |
||||
<input id="remember_me" name="remember_me" type="checkbox" |
||||
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"/> |
||||
<label for="remember_me" class="ml-2 block text-sm text-gray-900"> |
||||
Remember me |
||||
</label> |
||||
</div> |
||||
|
||||
<div class="text-sm"> |
||||
<a href="/main/auth/lostPassword.php" id="forgot" class="font-medium text-blue-600 hover:text-blue-500"> |
||||
Forgot your password? |
||||
</a> |
||||
</div> |
||||
</div> |
||||
|
||||
<div> |
||||
<button |
||||
type="submit" |
||||
class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
||||
|
||||
<span class="absolute left-0 inset-y-0 flex items-center pl-3"> |
||||
<svg v-if="isLoading" |
||||
class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> |
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> |
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> |
||||
</svg> |
||||
<LockClosedIcon v-if="!isLoading" class="h-5 w-5 text-blue-500 group-hover:text-blue-400" aria-hidden="true" /> |
||||
</span> |
||||
Sign in |
||||
</button> |
||||
</div> |
||||
</form> |
||||
|
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
import {mapGetters, useStore} from 'vuex'; |
||||
import { LockClosedIcon } from '@heroicons/vue/solid' |
||||
import useState from "../hooks/useState"; |
||||
import {ref} from "vue"; |
||||
import {useRoute, useRouter} from "vue-router"; |
||||
|
||||
export default { |
||||
name: "Login", |
||||
components: { |
||||
//ErrorMessage, |
||||
LockClosedIcon |
||||
}, |
||||
setup() { |
||||
const { isSidebarOpen } = useState(); |
||||
const route = useRoute(); |
||||
const router = useRouter(); |
||||
const store = useStore(); |
||||
|
||||
const login = ref(''); |
||||
const password = ref(''); |
||||
|
||||
let redirect = route.query.redirect; |
||||
if (store.getters["security/isAuthenticated"]) { |
||||
console.log(redirect); |
||||
if (typeof redirect !== "undefined") { |
||||
router.push({path: redirect}); |
||||
} else { |
||||
router.push({path: "/"}); |
||||
} |
||||
} |
||||
|
||||
isSidebarOpen.value = false; |
||||
|
||||
function onSubmit(evt) { |
||||
evt.preventDefault() |
||||
performLogin(); |
||||
} |
||||
|
||||
async function performLogin() { |
||||
console.log('performLogin'); |
||||
let payload = {login: login.value, password: password.value}; |
||||
let redirect = route.query.redirect; |
||||
await store.dispatch("security/login", payload); |
||||
if (!store.getters["security/hasError"]) { |
||||
isSidebarOpen.value = true; |
||||
if (typeof redirect !== "undefined") { |
||||
router.push({path: redirect}); |
||||
} else { |
||||
router.push({path: "/courses"}); |
||||
} |
||||
} |
||||
} |
||||
|
||||
return { |
||||
onSubmit, |
||||
login, |
||||
password |
||||
} |
||||
}, |
||||
|
||||
computed: { |
||||
...mapGetters({ |
||||
'isLoading': 'security/isLoading', |
||||
'hasError': 'security/hasError', |
||||
'error': 'security/error', |
||||
}), |
||||
} |
||||
} |
||||
</script> |
||||
@ -0,0 +1,14 @@ |
||||
<template> |
||||
<q-page class="q-layout-padding"> |
||||
<div class="flex justify-center lg:mt-16"> |
||||
<img src="/img/document/images/mr_chamilo/svg/collaborative.svg" /> |
||||
</div> |
||||
</q-page> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
export default { |
||||
name: "Home", |
||||
} |
||||
</script> |
||||
@ -1,23 +1,57 @@ |
||||
<template> |
||||
<div> |
||||
Welcome ! |
||||
</div> |
||||
<q-layout view="hHh LpR lff" class="bg-grey-1"> |
||||
<q-header bordered class="bg-white text-grey-8" height-hint="64"> |
||||
<q-toolbar> |
||||
<q-toolbar-title v-if="$q.screen.gt.xs" shrink class="row items-center no-wrap"> |
||||
<img style="width:200px" src="/build/css/themes/chamilo/images/header-logo.png" /> |
||||
</q-toolbar-title> |
||||
|
||||
<q-space /> |
||||
|
||||
<div class="q-gutter-sm row items-center no-wrap"> |
||||
|
||||
</div> |
||||
</q-toolbar> |
||||
</q-header> |
||||
<q-page-container> |
||||
<q-page class="q-layout-padding"> |
||||
<div class="grid grid-cols-1 md:grid-cols-2"> |
||||
|
||||
<!-- Form--> |
||||
<div class="md:row-start-1 md:col-start-2 md:col-end-2 p-12"> |
||||
<div class="mt-10 lg:mt-16 flex justify-center"> |
||||
<div class="max-w-sm"> |
||||
<div> |
||||
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900"> |
||||
Sign in |
||||
</h2> |
||||
</div> |
||||
<Login /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="md:row-start-1 md:col-start-1 md:col-end-1"> |
||||
<div class="flex justify-center lg:mt-16"> |
||||
<img src="/img/document/images/mr_chamilo/svg/teaching.svg" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</q-page> |
||||
</q-page-container> |
||||
</q-layout> |
||||
</template> |
||||
|
||||
<script> |
||||
import Login from '../components/Login'; |
||||
export default { |
||||
name: "Index", |
||||
data() { |
||||
return { |
||||
}; |
||||
}, |
||||
computed: { |
||||
|
||||
components: { |
||||
Login |
||||
}, |
||||
created() { |
||||
|
||||
}, |
||||
methods: { |
||||
} |
||||
name: "Index", |
||||
data: () => ({ |
||||
showBreadcrumb : false |
||||
}) |
||||
} |
||||
</script> |
||||
@ -0,0 +1,23 @@ |
||||
<template> |
||||
<div class=" flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8"> |
||||
<div class="max-w-md w-full space-y-8"> |
||||
<div> |
||||
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900"> |
||||
Sign in |
||||
</h2> |
||||
</div> |
||||
<Login /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Login from '../components/Login'; |
||||
|
||||
export default { |
||||
components: { |
||||
Login |
||||
}, |
||||
name: "LoginPage" |
||||
} |
||||
</script> |
||||
@ -1,136 +0,0 @@ |
||||
<template> |
||||
<div class=" flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8"> |
||||
<div class="max-w-md w-full space-y-8"> |
||||
<div> |
||||
<!-- <img class="mx-auto h-12 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-600.svg" alt="Workflow" />--> |
||||
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900"> |
||||
Sign in To Your Account |
||||
</h2> |
||||
</div> |
||||
<form class="mt-8 space-y-6" @submit.prevent="onSubmit"> |
||||
<input type="hidden" name="remember" value="true" /> |
||||
<div class="rounded-md shadow-sm -space-y-px"> |
||||
<div> |
||||
<label for="login" class="sr-only">Username</label> |
||||
<input id="login" v-model="login" name="login" type="text" autocomplete="login" required="" |
||||
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm" |
||||
placeholder="Username"/> |
||||
</div> |
||||
<div> |
||||
<label for="password" class="sr-only">Password</label> |
||||
<input id="password" v-model="password" name="password" type="password" autocomplete="current-password" |
||||
required="" |
||||
class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm" |
||||
placeholder="Password"/> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="flex items-center justify-between"> |
||||
<div class="flex items-center"> |
||||
<input id="remember_me" name="remember_me" type="checkbox" |
||||
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"/> |
||||
<label for="remember_me" class="ml-2 block text-sm text-gray-900"> |
||||
Remember me |
||||
</label> |
||||
</div> |
||||
|
||||
<div class="text-sm"> |
||||
<a href="/main/auth/lostPassword.php" id="forgot" class="font-medium text-blue-600 hover:text-blue-500"> |
||||
Forgot your password? |
||||
</a> |
||||
</div> |
||||
</div> |
||||
|
||||
<div> |
||||
<button |
||||
type="submit" |
||||
class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
||||
|
||||
<span class="absolute left-0 inset-y-0 flex items-center pl-3"> |
||||
<svg v-if="isLoading" |
||||
class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> |
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> |
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> |
||||
</svg> |
||||
<LockClosedIcon v-if="!isLoading" class="h-5 w-5 text-blue-500 group-hover:text-blue-400" aria-hidden="true" /> |
||||
</span> |
||||
Sign in |
||||
</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import {mapGetters, useStore} from 'vuex'; |
||||
import ErrorMessage from "../components/ErrorMessage.vue"; |
||||
import { LockClosedIcon } from '@heroicons/vue/solid' |
||||
import useState from "../hooks/useState"; |
||||
import {ref} from "vue"; |
||||
import {useRoute, useRouter} from "vue-router"; |
||||
import isEmpty from "lodash/isEmpty"; |
||||
|
||||
export default { |
||||
name: "Login", |
||||
components: { |
||||
ErrorMessage, |
||||
LockClosedIcon |
||||
}, |
||||
setup() { |
||||
const { isSidebarOpen } = useState(); |
||||
const route = useRoute(); |
||||
const router = useRouter(); |
||||
const store = useStore(); |
||||
|
||||
const login = ref(''); |
||||
const password = ref(''); |
||||
|
||||
let redirect = route.query.redirect; |
||||
if (store.getters["security/isAuthenticated"]) { |
||||
console.log(redirect); |
||||
if (typeof redirect !== "undefined") { |
||||
router.push({path: redirect}); |
||||
} else { |
||||
router.push({path: "/"}); |
||||
} |
||||
} |
||||
|
||||
isSidebarOpen.value = false; |
||||
|
||||
function onSubmit(evt) { |
||||
evt.preventDefault() |
||||
performLogin(); |
||||
} |
||||
|
||||
async function performLogin() { |
||||
console.log('performLogin'); |
||||
let payload = {login: login.value, password: password.value}; |
||||
let redirect = route.query.redirect; |
||||
await store.dispatch("security/login", payload); |
||||
if (!store.getters["security/hasError"]) { |
||||
isSidebarOpen.value = true; |
||||
if (typeof redirect !== "undefined") { |
||||
router.push({path: redirect}); |
||||
} else { |
||||
router.push({path: "/courses"}); |
||||
} |
||||
} |
||||
} |
||||
|
||||
return { |
||||
onSubmit, |
||||
login, |
||||
password |
||||
} |
||||
}, |
||||
|
||||
computed: { |
||||
...mapGetters({ |
||||
'isLoading': 'security/isLoading', |
||||
'hasError': 'security/hasError', |
||||
'error': 'security/error', |
||||
}), |
||||
} |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue