matt/opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

D7783 login & register page opnform (#16)

Browse Source 
* login & register new UI

* checkbox-input support for label as slot

* test case changes
This commit is contained in:
Chirag
2022-10-19 13:48:07 +05:30
committed by GitHub
parent 35c49ff90c
commit 907f78e6ce
5 changed files with 170 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
resources/js/pages/auth/login.vue
View File

@@ -1,45 +1,82 @@
<template>
<div>
<div class="flex mt-6 mb-10">
<div class="w-full md:w-2/3 md:mx-auto md:max-w-md px-4">
<h1 class="my-6">
{{ $t('login') }}
</h1>
<form @submit.prevent="login" @keydown="form.onKeydown($event)">
<!-- Email -->
<text-input name="email" :form="form" :label="$t('email')" :required="true" />
<div class="w-full md:max-w-6xl mx-auto px-4 flex md:flex-row-reverse flex-wrap">
<div class="w-full md:w-1/2 md:p-6">
<div class="border rounded-md p-6 shadow-md sticky top-4">
<h2 class="font-semibold text-2xl">
Login to OpnForm
</h2>
<small>Welcome back! Please enter your details.</small>
<!-- Password -->
<text-input class="mt-8" native-type="password"
name="password" :form="form" :label="$t('password')" :required="true"
/>
<form @submit.prevent="login" @keydown="form.onKeydown($event)" class="mt-4">
<!-- Email -->
<text-input name="email" :form="form" :label="$t('email')" :required="true" placeholder="Your email address" />
<!-- Remember Me -->
<div class="relative flex items-center mt-8 mb-6">
<v-checkbox v-model="remember" class="w-full md:w-1/2" name="remember">
{{ $t('remember_me') }}
</v-checkbox>
<!-- Password -->
<text-input native-type="password" placeholder="Your password"
name="password" :form="form" :label="$t('password')" :required="true"
/>
<div class="w-full md:w-1/2 text-right">
<router-link :to="{ name: 'password.request' }"
class="text-xs hover:underline text-gray-500 sm:text-sm hover:text-gray-700"
>
{{ $t('forgot_password') }}
</router-link>
</div>
<!-- Remember Me -->
<div class="relative flex items-center my-5">
<v-checkbox v-model="remember" class="w-full md:w-1/2" name="remember" size="small">
{{ $t('remember_me') }}
</v-checkbox>
<div class="w-full md:w-1/2 text-right">
<router-link :to="{ name: 'password.request' }" class="text-xs hover:underline text-gray-500 sm:text-sm hover:text-gray-700">
Forgot your password?
</router-link>
</div>
</div>
<!-- Submit Button -->
<v-button dusk="btn_login" :loading="form.busy">Log in to continue</v-button>
<p class="text-gray-500 mt-4">
Don't have an account? <router-link :to="{name:'register'}" class="font-semibold ml-1">Sign Up</router-link>
</p>
</form>
</div>
<!-- Submit Button -->
<v-button class="w-full" dusk="btn_login" :loading="form.busy">
{{ $t('login') }}
</v-button>
<p class="text-center text-gray-500 mt-4">
No Account? <router-link :to="{name:'register'}">
Register
</router-link>
</div>
<div class="w-full md:w-1/2 md:p-6 mt-8 md:mt-0 ">
<h1 class="font-bold">
Create beautiful Notion forms and share them anywhere
</h1>
<p class="text-gray-900 my-4 text-lg">
It takes seconds, you don't need to know how to code and it's free.
</p>
</form>
<div class="flex flex-wrap justify-center">
<p class="px-3 pb-3 text-sm text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
Unlimited forms
</p>
<p class="px-3 pb-3 text-sm text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
Unlimited fields
</p>
<p class="px-3 pb-3 text-sm text-gray-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 inline" fill="none" viewBox="0 0 24 24"
stroke="currentColor" stroke-width="2"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
Unlimited submissions
</p>
</div>
<div class="mt-3 p-6">
<testimonials />
</div>
</div>
</div>
</div>
<open-form-footer />
@@ -50,10 +87,12 @@
import Form from 'vform'
import Cookies from 'js-cookie'
import OpenFormFooter from '../../components/pages/OpenFormFooter'
import Testimonials from '../../components/pages/welcome/Testimonials'
export default {
components: {
OpenFormFooter
OpenFormFooter,
Testimonials
},
middleware: 'guest',