User Profile

Default

HomeflowJS includes a default user profile modal to allow users to register, sign in, and manage their saved properties and searches. It has a fixed layout, but can be styled to fit the theme using CSS.

To include it, simply pass withUserProfile as a prop to the Modal component:

import { Modal } from 'homeflowjs';

<Modal withUserProfile />

This will create routes to render the below modal for any fragment identifier beginning with #/user.

See the section on modals for more info.

The default user profile modal can be customised using CSS, but if you need more flexibility in creating user profile elements, you can use the components below.

UserRegisterForm

Wraps all fields of your register form and handles validation and creation of new user on submit.

import { UserRegisterForm } from 'homeflowjs/user';

const RegisterForm = () => (

<UserRegisterForm>

{/* user fields and other JSX goes here */}

<button type="submit">Register</button>

</UserRegisterForm>

);

UserInput

Creates an input for creating or editing a user field.

import { UserRegisterForm, UserInput } from 'homeflowjs/user';

const RegisterForm = () => (

<UserRegisterForm>

<UserInput name="first_name" />

<UserInput name="last_name" />

<UserInput name="email" required />

<UserInput name="password" required />

<UserInput name="password_confirmation" required />

<button type="submit">Register</button>

</UserRegisterForm>

);

UserHoneypot

Anti-spam honeypot that can be placed anywhere within the <UserRegisterForm>. Read more about honeypots in this Confluence document for further information.

import { UserRegisterForm, UserInput, UserHoneypot } from 'homeflowjs/user';

const RegisterForm = () => (

<UserRegisterForm>

{/* honeypot */}

<UserHoneypot />

{/* honeypot */}

<UserInput name="first_name" />

<UserInput name="last_name" />

...

<button type="submit">Register</button>

</UserRegisterForm>

);

UserSignInForm

Form for logging a user in. Should be used with SignInInput components.

import { UserSignInForm, SignInInput } from 'homeflowjs/user';

const SignInForm = () => (

<UserSignInForm>

<label>Email</label>

<SignInInput name="email" required />

<label>Password</label>

<SignInInput name="password" required />

<button type="submit">Sign In</button>

</UserSignInForm>

)

UserEditForm

Form to allow a user to edit their profile.

import { UserEditForm, UserInput } from 'homeflowjs/user';

const SignInForm = () => (

<UserEditForm>

<UserInput name="first_name" />

<UserInput name="last_name" />

{/* etc */}

<button type="submit">Update</button>

</UserEditForm>

)

ForgottenPasswordForm

Form allowing the user to reset their password.

import { ForgottenPasswordForm } from 'homeflowjs/user';

<ForgottenPasswordForm />

Props

Prop	Type	Description
inputClass	String	Custom class for the email input
buttonClass	String	Custom class for the submit button

MarketingPreferencesForm

Form allowing the user to change their marketing preferences.

import { MarketingPreferencesForm } from 'homeflowjs/user';

<MarketingPreferencesForm />

Props

Prop	Type	Description
buttonClass	String	Custom class for the submit button
buttonSpanClass	String	Custom class for the span in submit button
strict	Boolean	false (default): render radio with span, true: render radio with label

SignOutButton

Button for signing out the user and finishing the session. Includes notification if success or error.

import { SignOutButton } from 'homeflowjs/user';

<SignOutButton pushHistory reload>

Sign Out

</SignOutButton>

Props

Prop	Type	Description
children	Element or string	Text or element inside the button - is required
pushHistory	Boolean	Push history to / after successfull sign out. Default: false
reload	Boolean	Reload page after successfull sign out. Default: false