You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
2.9 KiB
61 lines
2.9 KiB
<template>
|
|
<div class="min-h-screen bg-gray-100 flex flex-col justify-center sm:py-12">
|
|
<div class="p-10 xs:p-0 mx-auto md:w-full md:max-w-md">
|
|
<h1 class="font-bold text-center text-2xl mb-5">Your Logo</h1>
|
|
<div class="bg-white shadow w-full rounded-lg divide-y divide-gray-200">
|
|
<form class="px-5 py-7" @submit.prevent="onUserSubmit">
|
|
<label class="font-semibold text-sm text-gray-600 pb-1 block">E-mail</label>
|
|
<input type="text" class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full" v-model="email" />
|
|
<label class="font-semibold text-sm text-gray-600 pb-1 block">Password</label>
|
|
<input type="password" class="border rounded-lg px-3 py-2 mt-1 mb-5 text-sm w-full" v-model="password" />
|
|
<button type="submit" class="transition duration-200 bg-blue-500 hover:bg-blue-600 focus:bg-blue-700 focus:shadow-sm focus:ring-4 focus:ring-blue-500 focus:ring-opacity-50 text-white w-full py-2.5 rounded-lg text-sm shadow-sm hover:shadow-md font-semibold text-center inline-block">
|
|
<span class="inline-block mr-2">Register</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 inline-block">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
|
</svg>
|
|
</button>
|
|
</form>
|
|
<div class="p-5">
|
|
<div>
|
|
<button type="button" class="transition duration-200 border border-gray-200 text-gray-500 w-full py-2.5 rounded-lg text-sm shadow-sm hover:shadow-md font-normal text-center inline-block">Github</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="py-5">
|
|
<div class="grid grid-cols-2 gap-1">
|
|
<div class="text-center sm:text-left whitespace-nowrap">
|
|
<button class="transition duration-200 mx-5 px-5 py-4 cursor-pointer font-normal text-sm rounded-lg text-gray-500 hover:bg-gray-200 focus:outline-none focus:bg-gray-300 focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50 ring-inset">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 inline-block align-text-top">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
<span class="inline-block ml-1">You have an account? Log in here!</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions } from 'vuex'
|
|
|
|
export default {
|
|
name: 'Register',
|
|
data() {
|
|
return {
|
|
email: '',
|
|
password: ''
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(["register"]),
|
|
onUserSubmit() {
|
|
this.register({
|
|
email: this.email,
|
|
password: this.password
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|