D7783 login & register page opnform (#16)

* login & register new UI

* checkbox-input support for label as slot

* test case changes

app/Http/Controllers/Auth/RegisterController.php

@@ -9,6 +9,7 @@ use Illuminate\Contracts\Auth\MustVerifyEmail;
 use Illuminate\Foundation\Auth\RegistersUsers;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Validator;
+use Illuminate\Validation\Rule;
 
 class RegisterController extends Controller
 {
@@ -52,7 +53,10 @@ class RegisterController extends Controller
             'name' => 'required|max:255',
             'email' => 'required|email:filter|max:255|unique:users',
             '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.'
         ]);
     }
 

resources/js/components/forms/CheckboxInput.vue

@@ -1,7 +1,9 @@
 <template>
   <div :class="wrapperClass">
-    <v-checkbox :id="id?id:name" v-model="compVal" :disabled="disabled" :name="name" @input="$emit('input',$event)">
-      {{ label }} <span v-if="required" class="text-red-500 required-dot">*</span>
+    <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>
+      </slot>
     </v-checkbox>
     <small v-if="help" :class="theme.default.help">
       <slot name="help">{{ help }}</slot>

resources/js/pages/auth/login.vue

@@ -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',

resources/js/pages/auth/register.vue

@@ -1,47 +1,90 @@
 <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">
-        <template v-if="mustVerifyEmail">
-          <h1 class="my-6">
-            {{ $t('register') }}
-          </h1>
-          <div class="text-green-500">
-            {{ $t('verify_email_address') }}
+      <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">
+              Create an account
+            </h2>
+            <small>Sign up in less than 2 minutes.</small>
+
+            <form @submit.prevent="register" @keydown="form.onKeydown($event)" class="mt-4">
+              <!-- Name -->
+              <text-input name="name" :form="form" :label="$t('name')" placeholder="Your name" :required="true" />
+
+              <!-- Email -->
+              <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" placeholder="Select option"
+                            label="How did you hear about us?" :required="true"
+              />
+
+              <!-- Password -->
+              <text-input native-type="password" placeholder="Enter password"
+                          name="password" :form="form" :label="$t('password')" :required="true"
+              />
+
+              <!-- Password Confirmation-->
+              <text-input native-type="password" :form="form" :required="true" placeholder="Enter confirm password"
+                          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 -->
+              <v-button :loading="form.busy">Create an account</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 -->
+              <login-with-github />
+            </form>
           </div>
-        </template>
-        <template v-else>
-          <h1 class="my-6">
-            {{ $t('register') }}
+        </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>
-          <form @submit.prevent="register" @keydown="form.onKeydown($event)">
-            <!-- Name -->
-            <text-input name="name" :form="form" :label="$t('name')" :required="true" />
-
-            <!-- Email -->
-            <text-input name="email" :form="form" :label="$t('email')" :required="true" />
-
-            <select-input name="hear_about_us" :options="hearAboutUsOptions" :form="form" label="How did you hear about us?" :required="true" />
-
-            <!-- Password -->
-            <text-input native-type="password"
-                        name="password" :form="form" :label="$t('password')" :required="true"
-            />
-
-            <!-- Password Confirmation-->
-            <text-input class="mb-4" native-type="password"
-                        name="password_confirmation" :form="form" :label="$t('confirm_password')" :required="true"
-            />
-
-            <!-- Submit Button -->
-            <v-button class="w-full" :loading="form.busy">
-              {{ $t('register') }}
-            </v-button>
-
-            <!-- GitHub Register Button -->
-            <login-with-github />
-          </form>
-        </template>
+          <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 />
@@ -54,9 +97,11 @@ import LoginWithGithub from '~/components/LoginWithGithub'
 import SelectInput from '../../components/forms/SelectInput'
 import OpenFormFooter from '../../components/pages/OpenFormFooter'
 import { initCrisp } from '../../middleware/check-auth'
+import Testimonials from '../../components/pages/welcome/Testimonials'
 
 export default {
   components: {
+    Testimonials,
     SelectInput,
     LoginWithGithub,
     OpenFormFooter
@@ -73,7 +118,8 @@ export default {
       name: '',
       email: '',
       password: '',
-      password_confirmation: ''
+      password_confirmation: '',
+      agree_terms: false
     }),
     mustVerifyEmail: false
   }),

tests/Feature/RegisterTest.php

@@ -10,6 +10,7 @@ it('can register', function () {
         'hear_about_us' => 'google',
         'password' => 'secret',
         'password_confirmation' => 'secret',
+        'agree_terms' => true
     ])
         ->assertSuccessful()
         ->assertJsonStructure(['id', 'name', 'email']);