D7783 login & register page opnform (#16)
* login & register new UI * checkbox-input support for label as slot * test case changes
This commit is contained in:
Chirag
GitHub
parent
35c49ff90c
commit
907f78e6ce
|
|
@ -9,6 +9,7 @@ use Illuminate\Contracts\Auth\MustVerifyEmail;
|
||||||
use Illuminate\Foundation\Auth\RegistersUsers;
|
use Illuminate\Foundation\Auth\RegistersUsers;
|
||||||
use Illuminate\Http\Request;
|
use Illuminate\Http\Request;
|
||||||
use Illuminate\Support\Facades\Validator;
|
use Illuminate\Support\Facades\Validator;
|
||||||
|
use Illuminate\Validation\Rule;
|
||||||
|
|
||||||
class RegisterController extends Controller
|
class RegisterController extends Controller
|
||||||
{
|
{
|
||||||
|
|
@ -52,7 +53,10 @@ class RegisterController extends Controller
|
||||||
'name' => 'required|max:255',
|
'name' => 'required|max:255',
|
||||||
'email' => 'required|email:filter|max:255|unique:users',
|
'email' => 'required|email:filter|max:255|unique:users',
|
||||||
'password' => 'required|min:6|confirmed',
|
'password' => 'required|min:6|confirmed',
|
||||||
'hear_about_us' => 'required|string'
|
'hear_about_us' => 'required|string',
|
||||||
|
'agree_terms' => ['required',Rule::in([true])]
|
||||||
|
],[
|
||||||
|
'agree_terms' => 'Please agree with the terms and conditions.'
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div :class="wrapperClass">
|
<div :class="wrapperClass">
|
||||||
<v-checkbox :id="id?id:name" v-model="compVal" :disabled="disabled" :name="name" @input="$emit('input',$event)">
|
<v-checkbox :id="id?id:name" v-model="compVal" :disabled="disabled" :name="name" @input="$emit('input',$event)" :size="size">
|
||||||
|
<slot name="label">
|
||||||
{{ label }} <span v-if="required" class="text-red-500 required-dot">*</span>
|
{{ label }} <span v-if="required" class="text-red-500 required-dot">*</span>
|
||||||
|
</slot>
|
||||||
</v-checkbox>
|
</v-checkbox>
|
||||||
<small v-if="help" :class="theme.default.help">
|
<small v-if="help" :class="theme.default.help">
|
||||||
<slot name="help">{{ help }}</slot>
|
<slot name="help">{{ help }}</slot>
|
||||||
|
|
|
||||||
|
|
@ -1,47 +1,84 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="flex mt-6 mb-10">
|
<div class="flex mt-6 mb-10">
|
||||||
<div class="w-full md:w-2/3 md:mx-auto md:max-w-md px-4">
|
<div class="w-full md:max-w-6xl mx-auto px-4 flex md:flex-row-reverse flex-wrap">
|
||||||
<h1 class="my-6">
|
<div class="w-full md:w-1/2 md:p-6">
|
||||||
{{ $t('login') }}
|
<div class="border rounded-md p-6 shadow-md sticky top-4">
|
||||||
</h1>
|
<h2 class="font-semibold text-2xl">
|
||||||
<form @submit.prevent="login" @keydown="form.onKeydown($event)">
|
Login to OpnForm
|
||||||
|
</h2>
|
||||||
|
<small>Welcome back! Please enter your details.</small>
|
||||||
|
|
||||||
|
<form @submit.prevent="login" @keydown="form.onKeydown($event)" class="mt-4">
|
||||||
<!-- Email -->
|
<!-- Email -->
|
||||||
<text-input name="email" :form="form" :label="$t('email')" :required="true" />
|
<text-input name="email" :form="form" :label="$t('email')" :required="true" placeholder="Your email address" />
|
||||||
|
|
||||||
<!-- Password -->
|
<!-- Password -->
|
||||||
<text-input class="mt-8" native-type="password"
|
<text-input native-type="password" placeholder="Your password"
|
||||||
name="password" :form="form" :label="$t('password')" :required="true"
|
name="password" :form="form" :label="$t('password')" :required="true"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Remember Me -->
|
<!-- Remember Me -->
|
||||||
<div class="relative flex items-center mt-8 mb-6">
|
<div class="relative flex items-center my-5">
|
||||||
<v-checkbox v-model="remember" class="w-full md:w-1/2" name="remember">
|
<v-checkbox v-model="remember" class="w-full md:w-1/2" name="remember" size="small">
|
||||||
{{ $t('remember_me') }}
|
{{ $t('remember_me') }}
|
||||||
</v-checkbox>
|
</v-checkbox>
|
||||||
|
|
||||||
<div class="w-full md:w-1/2 text-right">
|
<div class="w-full md:w-1/2 text-right">
|
||||||
<router-link :to="{ name: 'password.request' }"
|
<router-link :to="{ name: 'password.request' }" class="text-xs hover:underline text-gray-500 sm:text-sm hover:text-gray-700">
|
||||||
class="text-xs hover:underline text-gray-500 sm:text-sm hover:text-gray-700"
|
Forgot your password?
|
||||||
>
|
|
||||||
{{ $t('forgot_password') }}
|
|
||||||
</router-link>
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Submit Button -->
|
<!-- Submit Button -->
|
||||||
<v-button class="w-full" dusk="btn_login" :loading="form.busy">
|
<v-button dusk="btn_login" :loading="form.busy">Log in to continue</v-button>
|
||||||
{{ $t('login') }}
|
|
||||||
</v-button>
|
|
||||||
|
|
||||||
<p class="text-center text-gray-500 mt-4">
|
<p class="text-gray-500 mt-4">
|
||||||
No Account? <router-link :to="{name:'register'}">
|
Don't have an account? <router-link :to="{name:'register'}" class="font-semibold ml-1">Sign Up</router-link>
|
||||||
Register
|
|
||||||
</router-link>
|
|
||||||
</p>
|
</p>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
|
<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 />
|
<open-form-footer />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -50,10 +87,12 @@
|
||||||
import Form from 'vform'
|
import Form from 'vform'
|
||||||
import Cookies from 'js-cookie'
|
import Cookies from 'js-cookie'
|
||||||
import OpenFormFooter from '../../components/pages/OpenFormFooter'
|
import OpenFormFooter from '../../components/pages/OpenFormFooter'
|
||||||
|
import Testimonials from '../../components/pages/welcome/Testimonials'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
OpenFormFooter
|
OpenFormFooter,
|
||||||
|
Testimonials
|
||||||
},
|
},
|
||||||
|
|
||||||
middleware: 'guest',
|
middleware: 'guest',
|
||||||
|
|
|
||||||
|
|
@ -1,47 +1,90 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<div class="flex mt-6 mb-10">
|
<div class="flex mt-6 mb-10">
|
||||||
<div class="w-full md:w-2/3 md:mx-auto md:max-w-md px-4">
|
<div class="w-full md:max-w-6xl mx-auto px-4 flex md:flex-row-reverse flex-wrap">
|
||||||
<template v-if="mustVerifyEmail">
|
<div class="w-full md:w-1/2 md:p-6">
|
||||||
<h1 class="my-6">
|
<div class="border rounded-md p-6 shadow-md sticky top-4">
|
||||||
{{ $t('register') }}
|
<h2 class="font-semibold text-2xl">
|
||||||
</h1>
|
Create an account
|
||||||
<div class="text-green-500">
|
</h2>
|
||||||
{{ $t('verify_email_address') }}
|
<small>Sign up in less than 2 minutes.</small>
|
||||||
</div>
|
|
||||||
</template>
|
<form @submit.prevent="register" @keydown="form.onKeydown($event)" class="mt-4">
|
||||||
<template v-else>
|
|
||||||
<h1 class="my-6">
|
|
||||||
{{ $t('register') }}
|
|
||||||
</h1>
|
|
||||||
<form @submit.prevent="register" @keydown="form.onKeydown($event)">
|
|
||||||
<!-- Name -->
|
<!-- Name -->
|
||||||
<text-input name="name" :form="form" :label="$t('name')" :required="true" />
|
<text-input name="name" :form="form" :label="$t('name')" placeholder="Your name" :required="true" />
|
||||||
|
|
||||||
<!-- Email -->
|
<!-- Email -->
|
||||||
<text-input name="email" :form="form" :label="$t('email')" :required="true" />
|
<text-input name="email" :form="form" :label="$t('email')" :required="true" placeholder="Your email address" />
|
||||||
|
|
||||||
<select-input name="hear_about_us" :options="hearAboutUsOptions" :form="form" label="How did you hear about us?" :required="true" />
|
<select-input name="hear_about_us" :options="hearAboutUsOptions" :form="form" placeholder="Select option"
|
||||||
|
label="How did you hear about us?" :required="true"
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- Password -->
|
<!-- Password -->
|
||||||
<text-input native-type="password"
|
<text-input native-type="password" placeholder="Enter password"
|
||||||
name="password" :form="form" :label="$t('password')" :required="true"
|
name="password" :form="form" :label="$t('password')" :required="true"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- Password Confirmation-->
|
<!-- Password Confirmation-->
|
||||||
<text-input class="mb-4" native-type="password"
|
<text-input native-type="password" :form="form" :required="true" placeholder="Enter confirm password"
|
||||||
name="password_confirmation" :form="form" :label="$t('confirm_password')" :required="true"
|
name="password_confirmation" :label="$t('confirm_password')"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<checkbox-input :form="form" name="agree_terms" :required="true">
|
||||||
|
<template #label>
|
||||||
|
I agree with the <router-link :to="{name:'terms-conditions'}" target="_blank">Terms and conditions</router-link> and <router-link :to="{name:'privacy-policy'}" target="_blank">Privacy policy</router-link> of the website and I accept them.
|
||||||
|
</template>
|
||||||
|
</checkbox-input>
|
||||||
|
|
||||||
<!-- Submit Button -->
|
<!-- Submit Button -->
|
||||||
<v-button class="w-full" :loading="form.busy">
|
<v-button :loading="form.busy">Create an account</v-button>
|
||||||
{{ $t('register') }}
|
|
||||||
</v-button>
|
<p class="text-gray-500 mt-4">
|
||||||
|
Already have an account? <router-link :to="{name:'login'}" class="font-semibold ml-1">Log In</router-link>
|
||||||
|
</p>
|
||||||
|
|
||||||
<!-- GitHub Register Button -->
|
<!-- GitHub Register Button -->
|
||||||
<login-with-github />
|
<login-with-github />
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</div>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<open-form-footer />
|
<open-form-footer />
|
||||||
|
|
@ -54,9 +97,11 @@ import LoginWithGithub from '~/components/LoginWithGithub'
|
||||||
import SelectInput from '../../components/forms/SelectInput'
|
import SelectInput from '../../components/forms/SelectInput'
|
||||||
import OpenFormFooter from '../../components/pages/OpenFormFooter'
|
import OpenFormFooter from '../../components/pages/OpenFormFooter'
|
||||||
import { initCrisp } from '../../middleware/check-auth'
|
import { initCrisp } from '../../middleware/check-auth'
|
||||||
|
import Testimonials from '../../components/pages/welcome/Testimonials'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
Testimonials,
|
||||||
SelectInput,
|
SelectInput,
|
||||||
LoginWithGithub,
|
LoginWithGithub,
|
||||||
OpenFormFooter
|
OpenFormFooter
|
||||||
|
|
@ -73,7 +118,8 @@ export default {
|
||||||
name: '',
|
name: '',
|
||||||
email: '',
|
email: '',
|
||||||
password: '',
|
password: '',
|
||||||
password_confirmation: ''
|
password_confirmation: '',
|
||||||
|
agree_terms: false
|
||||||
}),
|
}),
|
||||||
mustVerifyEmail: false
|
mustVerifyEmail: false
|
||||||
}),
|
}),
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@ it('can register', function () {
|
||||||
'hear_about_us' => 'google',
|
'hear_about_us' => 'google',
|
||||||
'password' => 'secret',
|
'password' => 'secret',
|
||||||
'password_confirmation' => 'secret',
|
'password_confirmation' => 'secret',
|
||||||
|
'agree_terms' => true
|
||||||
])
|
])
|
||||||
->assertSuccessful()
|
->assertSuccessful()
|
||||||
->assertJsonStructure(['id', 'name', 'email']);
|
->assertJsonStructure(['id', 'name', 'email']);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue