TW Reporter Registration Package

Host Project Environment

• The host project need to contain following:

  1. react
  2. redux
  3. react-router
  4. express server

• Bonus: The package work with next.js

Installation

npm i --save twreporter-registration

Work Flow

List of Containers/Components and Reducers

Containers

• ActivePage
• AuthenticationScreen
• Features
• SignInForm
• SignUpForm

Components

• SignOut

Reducers

• authReducer
• configure user has to pass api url initial state obj to configure reducer

import { configureReducer } from 'twreporter-registration'
const registrationInitialState = {
  apiUrl: '',
  signUp: '',
  signIn: '',
  activate: '',
  bookmarkUpdate: '',
  bookmarkDelete: '',
  bookmarkGet: '',
  ping: '',
  oAuthProviders: {
    google: '',
    facebook: '',
  },
},
const configReducer = configureReducer(registrationInitialState)
const rootReducer = combineReducers({
  authConfigure: configReducer,
})

Usage js

• import containers/components from twreporter-registration to react router js file of your host project. Most of containers is pretty handy, However, some complex containers need specific properties or can only be used in specific circumstances.
  • AuthenticationScreen: is only for client side
  • SignInForm has following properties (you can pass properties through react-router or jsx it self.)
    • title (string): form title
    • browserHistory (func): browserHistory from router or Router of next.js
    • AssignedLink (func): This one is only for next.js Link
    • signInRedirectPath (signin):
    • location: query data for TWReporter GO_API (after oAuth)
    • domain: query data for TWReporter GO_API (after oAuth)
    • account (boolean): show SignIn SignUp function
    • google (boolean): show google function
    • facebook (boolean): show facebook function
    • defaultStyle (boolean): with defaultStyle or not (for now the difference is only on frame size and location)
  • ActivateForm
    • query: pass your query data from next.js or just put null for react-router
    • browserHistory: browserHistory of react-router or Router of next.js
    • activateRedirectPath: '/yourpage'

import { SignUpForm, SignInForm, ActivePage, AuthenticationScreen, Features, SignOut } from 'twreporter-registration'
export default function (history = browserHistory) {
return (
 <Router history={history} >
   <Route path="/" component={App}>
     <IndexRoute component={Home} />
     <Route
        path="signup"
        component={SignUpForm}
     />
     <Route
        path="signin"
        component={SignInForm}
        title={'Sign In to TWReporter'}
        browserHistory={browserHistory}
        signInRedirectPath = {'/features'}
        location={'http://testtest.twreporter.org:3000/features'}
        domain={'twreporter.org'}
        account={false}
        facebook={true}
        google={true}
        defaultStyle={false}
     />
     <Route
        path="activate"
        component={ActivePage}
        query={this.props.query/null}
        browserHistory={Router}
        activateRedirectPath={'/content'}
     />
     <Route
        path="features"
        component={AuthenticationScreen(Features)}
        redirectPath={'/signin'}
     />
     <Route
        path="signout"
        component={SignOut}
     />
   </Route>
 </Router>
)
}

• import reducers from twreporter-registration to root reducer

import { authReducer, oauthReducer, configureReducer } from 'twreporter-registration'
const rootReducer = combineReducers({
   authConfigure: configureReducer,
   oauth: oauthReducer,
   auth: authReducer,
})

• import actions from from package
  We provide you a default structure of path of authentication api server. You only need to enter your paths into registrationConfigure obj which is presented at following example.

// in your render file
import { types, configureAction } from 'twreporter-registration'
const registrationConfigure = {
    apiUrl: 'http://testtest.twreporter.org/8080',
    signUp: '/v1/signup',
    signIn: '/v1/login',
    activate: '/v1/activate',
    bookmarkUpdate: '',
    bookmarkDelete: '',
    bookmarkGet: '',
    ping: '',
    oAuthProviders: {
      google: '/v1/auth/google',
      facebook: '/v1/auth/facebook'
    }
}
// before render, you have to dispatch configureAction from our package
// you can to choose either server side or client side rendering
store.dispatch(configureAction(registrationConfigure))
ReactDOM.render((
  <Provider store={store}>
    <DeviceProvider device={device}>
      { createRoutes(history) }
    </DeviceProvider>
  </Provider>
), document.getElementById('root'))

• Processing auth_info from Respond/Cookies (in your express server)

import { authInfoStringToObj } from 'twreporter-registration'
let authInfoObj = authInfoStringToObj(auth_info_string)
store.dispatch(authUserAction(authType, authInfoObj))

Next.js Example

class SignIn extends React.Component {
  static getInitialProps ({ store }) {
    const registrationConfigure = {
      apiUrl: 'http://testtest.twreporter.org:8080',
      signUp: '/v1/signup',
      signIn: '/v1/login',
      activate: '/v1/activate',
      bookmarkUpdate: '',
      bookmarkDelete: '',
      bookmarkGet: '',
      ping: '',
      oAuthProviders: {
        google: '/v1/auth/google',
        facebook: '/v1/auth/facebook'
      }
    }
    store.dispatch(configureAction(registrationConfigure))
  }

  render() {
    return (
      <SignInForm
        title={'Sign In to Newsletter'}
        browserHistory={Router}
        AssignedLink={Link}
        signInRedirectPath={'/features'}
        location={'http://testtest.twreporter.org:3000/features'}
        domain={'twreporter.org'}
        account={false}
        facebook={true}
        google={true}
        defaultStyle={false}
      />
    )
  }
}

Development

npm run dev   //development mode
npm run build //production mode

• advice for developer/programmer: You can program in es2015 + es2017 and only need to edit files in src directory. All files will be transpiled through babel-preset-es2017 and transfered to lib directory.

• Working On

1. modify AuthScreen Component to be compatible with next.js
2. Make Token Manager to be available
3. Reassemble localStorage data