refs https://github.com/TryGhost/members.js/issues/6
Use member identity and public site data admin API to fetch site data which was previously being passed down from the theme. This change allows us to be directly fetch all relevant site data except adminUrl and use it to initialize the flows.
Also adds a basic loading behavior till we finish fetching site and member logged-in data from API.
refs https://github.com/TryGhost/members.js/issues/6
To self-contain all the data needs for members.js, we load the site data and member's logged in state using available APIs instead of passing them down the theme
- Member Identity API uses member cookie and `/ssr` endpoint to identify if a member is currently logged in or not
- Site data API is the public admin API endpoint for fetching public site data like title, description, logo, brand etc.
Added new pages for different UI flows
- Sign-in Page: Allow member to signin with magic link
- Signup Page: Allow member to signup with name + email, also allow choosing plan in checkout
- Signed-in Page: Default account page if member is signed in
- Magic Link Page: Info page which shows magic link is sent to inbox
- Use local dev config only for development mode
- `.env.local` by default gets triggered for production builds as well, unlike `.env.development.local`
- added eslint-plugin-ghost, extended ghost/browser config & fixed all the issues
- did this because basic things like indent, quotes and semi-colons weren't being enforced resulting in inconsistencies
- we can customise this or create a ghost/react if desired
refs https://github.com/TryGhost/membersjs/issues/8
This allows theme developers to use a custom trigger button in their theme instead of default UI created by script by marking the custom button with data attribute - `data-members-trigger-button` .
In case of a custom trigger button, CRA doesn't render the default trigger button and attaches click event handling to the custom button to control the popup UI. Script also adds new custom class `popup-open` and `popup-close` based on popup state to allow theme developers to handle button UI based on popup state.
refs https://github.com/TryGhost/membersjs/issues/3
Adds signup/signin flow to theme when no member is logged in, uses api utils to send magic-link to member's email which can be used to signup/signin
no issue
We need to initialize members script with data passed down from the theme atm, the default initialization is only useful for quick local testing and UI development but not when script is used directly inside a theme.
refs https://github.com/TryGhost/membersjs/issues/2
We need to make requests to members Admin API and SSR endpoints to handle member's session on theme, send magic-link on email and also for using stripe checkout. This adds a small util that wraps all such external requests for use in CRA UI based on user action
Note: The util setup needs `blogUrl` and `adminUrl` values to setup the API endpoints, which we currently pass from the theme. This might change in immediate future based on how we decide to get these values in CRA script.
no refs.
- added icon for trigger button open/close state to indicate account menu
- updated style of trigger button for better contrast
- updated base font style and size for html and body to access global typographic styles
no issue
- Wraps the react rendering initialisation in a function which is accessed by theme to render the members UI as needed
- Uses site logo and logged in member email for rendering
no issue
- Adds new FrameComponent which allows encapsulating any React Component inside Iframe directly
- Wraps the Popup and Trigger components inside frame components to be rendered inside iframe
no issue
- Adds new components for membersJs trigger button and popup menu with style
- Adds basic trigger interaction between trigger button and popup menu
- Uses hardcoded member values
- Adds `prop-types` dependency
no issue
By default, CRAs build process creates chunked script files and adds them to default index.html. The updated build process uses `rewire` and `webpack` to -
- Tweak CRAs default behavior by switching off chunking, which leads to a single script
- Uses webpack locally to combine JS and CSS built by above step into a single `bundle.min.js`
