Add ability to login from embedded site

packages/client/src/components/index.ts

@@ -5,5 +5,6 @@ export * from './Input'
 export * from './Link'
 export * from './Modal'
 export * from './Redirect'
-export * from './withHistory'
+export * from './ReturnHere'
 export * from './TimeAgo'
+export * from './withHistory'

packages/client/src/login/LoginActions.ts

@@ -10,6 +10,14 @@ export type TLoginAction =
 
 type TAction<T extends string> = TGetAction<TLoginAction, T>
 
+export const setRedirectTo = (redirectTo: string)
+: TAction<'LOGIN_REDIRECT_SET'> => {
+  return {
+    payload: {redirectTo},
+    type: 'LOGIN_REDIRECT_SET',
+  }
+}
+
 export class LoginActions {
   constructor(protected readonly http: IHTTPClient<IAPIDef>) {}
 
@@ -34,10 +42,5 @@ export class LoginActions {
     )
   }
 
-  setRedirectTo = (redirectTo: string): TAction<'LOGIN_REDIRECT_SET'> => {
+  setRedirectTo = setRedirectTo
-    return {
-      payload: {redirectTo},
-      type: 'LOGIN_REDIRECT_SET',
-    }
-  }
 }

packages/client/src/login/LoginForm.tsx

@@ -22,8 +22,8 @@ export class LoginForm extends React.PureComponent<ILoginFormProps> {
       return <Redirect to={this.props.redirectTo} />
     }
     return (
-      <form onSubmit={this.props.onSubmit}>
+      <form className='login-form' onSubmit={this.props.onSubmit}>
-        <p className='error'>{this.props.error}</p>
+        <p className='has-text-danger'>{this.props.error}</p>
         <Input
           Icon={FaUser}
           label='Username'
@@ -52,8 +52,8 @@ export class LoginForm extends React.PureComponent<ILoginFormProps> {
           />
         </div>
 
-        <p className='small center'>
+        <p className='small center mt-1'>
-          Don&apos;t have an account? <Link to='/auth/register'>Register!</Link>
+          Don&apos;t have an account? <Link to='/auth/register'>Sign up!</Link>
         </p>
       </form>
     )

packages/client/src/login/RegisterForm.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
-import {FaUser, FaLock} from 'react-icons/fa'
+import {FaEnvelope, FaUser, FaLock} from 'react-icons/fa'
 import {INewUser, IUser} from '@rondo/common'
 import {Input} from '../components/Input'
+import {Link} from 'react-router-dom'
 import {Redirect} from '../components/Redirect'
 
 export interface IRegisterFormProps {
@@ -19,10 +20,14 @@ export class RegisterForm extends React.PureComponent<IRegisterFormProps> {
       return <Redirect to={this.props.redirectTo} />
     }
     return (
-      <form onSubmit={this.props.onSubmit}>
+      <form
-        <p className='error'>{this.props.error}</p>
+        autoComplete='off'
+        className='register-form'
+        onSubmit={this.props.onSubmit}
+      >
+        <p className='has-text-danger'>{this.props.error}</p>
         <Input
-          Icon={FaUser}
+          Icon={FaEnvelope}
           label='Email'
           name='username'
           type='email'
@@ -42,6 +47,7 @@ export class RegisterForm extends React.PureComponent<IRegisterFormProps> {
           required
         />
         <Input
+          Icon={FaUser}
           label='First Name'
           name='firstName'
           type='text'
@@ -51,12 +57,13 @@ export class RegisterForm extends React.PureComponent<IRegisterFormProps> {
           required
         />
         <Input
+          Icon={FaUser}
           label='Last Name'
           name='lastName'
           type='text'
           onChange={this.props.onChange}
           value={this.props.data.lastName}
-          placeholder='First name'
+          placeholder='Last name'
           required
         />
         <div className='text-center'>
@@ -67,6 +74,9 @@ export class RegisterForm extends React.PureComponent<IRegisterFormProps> {
             value='Register'
           />
         </div>
+        <p className='small center mt-1'>
+          Already have an account? <Link to='/auth/login'>Log in!</Link>
+        </p>
       </form>
     )
   }

packages/client/src/test-utils/TestUtils.tsx

@@ -31,7 +31,8 @@ export class TestUtils {
   readonly createStore = createStore
 
   render(jsx: JSX.Element) {
-    const component = T.renderIntoDocument(jsx) as React.Component<any>
+    const component = T
+    .renderIntoDocument(jsx) as unknown as React.Component<any>
     const node = ReactDOM.findDOMNode(component) as Element
     return {component, node}
   }