Explanation of Sample Membership Site

This page provides an explanation of the structure and specifications of our company's open-source sample membership site, for those who are using it as a template when constructing Kuroco.

Repository: https://github.com/diverta/front_nuxt_auth
Demo Site: https://dev-nuxt-auth.g.kuroco-front.app/

API Used

We will explain the APIs used in the sample membership site.
This section describes the role of each endpoint, so please check your own site created from the free trial to see what specific parameters are set.

Authentication

Path	Model::Operation	Description
/rcms-api/1/login	Login::login_challenge	Used for login. When you POST email and password to this endpoint, the login process is executed.
/rcms-api/1/logout	Login::logout	Used for logout. When you send a request to this endpoint, the logout process is executed.
/rcms-api/1/profile	Login::profile	When you send a request while logged in, information on name1 and name2 is returned. Used to confirm whether the user is logged in or not.
/rcms-api/1/reminder	Login::reminder	Used for password reset functionality. When you POST email, a password reminder email is sent, and a temporary password and token are issued. When you POST token, temp_pwd, and login_pwd, then the password is updated.
/rcms-api/1/reset_password	Login::reset_password	An endpoint for updating the password by POSTing login_id, current_password, and new_password, but it is not used in the frontend of the sample membership site.

Content

Path	Model::Operation	Description
/rcms-api/1/content/list	Topics::list	An API that retrieves a list of content structures with ID=1. You can extract data by specifying the count and topics_id in the query parameters.
/rcms-api/1/content/details/{topics_id}	Topics::details	An API that retrieves the details of the content.
/rcms-api/1/content/category	TopicsCategory::list	An API that retrieves a list of categories registered with content structure ID=1.
/rcms-api/1/content/preview	Topics::preview	An API for previewing content before saving it.
/rcms-api/1/content/update/{topics_id}	Topics::update	An API for updating content. It is not used in the frontend of the sample membership site.

Members

Path	Model::Operation	Description
/rcms-api/1/member/{member_id}	Member::details	API to retrieve the detailed information of a member. Only the member information with Group ID = 104 (user) can be retrieved and requests from ID=104 (user) are restricted. This API is not used in the frontend of the sample membership site because the list API is used instead.
/rcms-api/1/member/list	Member::list	API to retrieve the list of members with Group ID = 104 (user). Up to 1000 items can be retrieved and requests from ID=104 (user) are restricted.
/rcms-api/1/member/update	Member::update	API to update the information of a member. Only the information of the caller can be updated.
/rcms-api/1/member/register	Member::insert	API to add a new member. The member added with this API will be registered as a member of the group with Group ID = 104 (user).
/rcms-api/1/member/settings	MemberForm::details	API to return the member information settings. This API is not used in the frontend of the sample membership site.
/rcms-api/1/member/me	Member::details	API to retrieve the detailed information of the usert that called this API. Information of other members cannot be retrieved due to restrictions.

Favorites

Path	Model::Operation	Description
/rcms-api/1/favorite/list	Favorite::list	This API retrieves a list of favorites. By setting module_id and module_type as query parameters, the favorite list of the Reference member can be retrieved.
/rcms-api/1/favorite/register	Favorite::insert	This API adds a favorite. When module_id and module_type are POSTed, the favorite is added to [Activities] -> [Favorites].
/rcms-api/1/favorite/delete	Favorite::delete	This API deletes a favorite. When module_id and module_type are POSTed, the favorite is deleted from [Activities] -> [Favorites].

Forms

Path	Model::Operation	Description
/rcms-api/1/inquiry/{inquiry_id}	InquiryForm::details	This API retrieves the details of a form. Used to display the form items.
/rcms-api/1/inquiry/1	InquiryMessage::send	This API sends the answers to the form. When the input items in the form are POSTed, the answers are added to the form with form ID=1 under [Campaigns] -> [Forms].

Files

Path	Model::Operation	Description
/rcms-api/1/upload	Files::upload	This API uploads a file and stores it in the Kuroco temporary storage area. Used when uploading files from a form.

Specifications for Frontend and Operation

General

• To support multi-language through i18n, texts are displayed by using the {{ $t('top.latest_articles') }} syntax to fetch and display the text set in /locales.
• Processing completion and error messages are displayed using nuxt-snackbar plugin.

TOP Page(/)

Reference file

https://github.com/diverta/front_nuxt_auth/blob/main/pages/index.vue

Description of operation

• The /components/Login.vue is displayed when the user is not logged in, by using the <Login v-if="!authUser.member_id" /> syntax.
• During the login process in /components/Login.vue, the API request destination is changed using setSitekey().
  This enables a common frontend and a backend (Kuroco management screen) switching behaviour with each site key.
• If the user is logged in, the navigation, content list, and favorite list are displayed.
• The slider section uses Vuetify's v-carousel.
• The grid display of content is modularized, displayed by <TopicsGrid :topics="topicsList" /> calling /components/topics/Grid.vue.
• The list display of favorite is modularized, displayed by <TopicsList :topics="favouriteList" /> calling /components/topics/List.vue.

/topics_list

Reference file

https://github.com/diverta/front_nuxt_auth/blob/main/pages/topics_list.vue

Description

• Retrieves and displays a list of categories and content.
• The grid display of content is modularized, displayed by <TopicsGrid :topics="topics" /> calling /components/topics/Grid.vue.
• Pagination uses Vuetify's v-pagination.

/topics_detail/{topics_id}

Reference file

https://github.com/diverta/front_nuxt_auth/blob/main/pages/topics_detail/[slug].vue

Description

• Retrieves and displays Kuroco's content corresponding to the ID obtained from the URL.
• Clicking the star icon posts module_id to the /rcms-api/1/favorite/register endpoint to register it as a favorite.
• Clicking the star icon for a registered favorite content posts module_id to the /rcms-api/1/favorite/delete endpoint to delete it from favorites.

/favorite

Reference file

https://github.com/diverta/front_nuxt_auth/blob/main/pages/favourite.vue

Description

• By accessing, it retrieves a list of topics_id that have been favorited from the /rcms-api/1/favorite/list endpoint.
  Then it sends a request to the /rcms-api/1/content/list endpoint by passing the topics_id list as a query parameter to obtain a list of favorites.
• The list display of favorites is modularized, displayed by <TopicsList :topics="topics" /> calling /components/topics/List.vue.
• Pagination uses Vuetify's v-pagination.

/member

Reference file

https://github.com/diverta/front_nuxt_auth/blob/main/pages/member/index.vue

Desciption

• Retrieves and displays a list of members using the /rcms-api/1/member/list endpoint.
• Only members belonging to the member group are displayed.
• Only administrators or editor members can access the member list. Members who are registered from the frontend (as a 'User' group) cannot access it.
• The behavior of the filter at the top of the screen is handled on the frontend using Vuetify's v-autocomplete.
• The table on the frontend along with pagination is handled using Vuetify's v-data-table.

/member/detail/{member_id}

Reference file

https://github.com/diverta/front_nuxt_auth/tree/main/pages/member/detail/[slug].vue

Description

• Retrieves and displays member details by passing the member ID obtained from the URL as a query parameter to the /rcms-api/1/member/list endpoint.

/profile

Reference file

https://github.com/diverta/front_nuxt_auth/blob/main/pages/profile/index.vue

Description

• Displays the profile information of logged in user obtained from the /rcms-api/1/member/me endpoint.

/profile/edit

Reference file

https://github.com/diverta/front_nuxt_auth/blob/main/pages/profile/edit/index.vue

Description

• Displays the profile information of logged in user obtained from the /rcms-api/1/member/me endpoint.
• When submit is clicked, the entered data is posted to the /rcms-api/1/member/update endpoint.
• The form display uses Formkit.

/inquiry

Reference file

Reference file: https://github.com/diverta/front_nuxt_auth/blob/main/pages/inquiry.vue

Description

• Displays form items obtained from the /rcms-api/1/inquiry/1 endpoint.
• The form display uses Formkit.
• Clicking Submit posts data to the /rcms-api/1/inquiry/1 endpoint.
• The entered content is saved as a response in Form ID=1.

/signup

Reference file

Reference file: https://github.com/diverta/front_nuxt_auth/blob/main/pages/signup.vue

Description

• The form display uses Formkit.
• Clicking Submit posts data to the /rcms-api/1/member/register endpoint, completing the member's registration.
• Members registered from here belong to the 'User' group.

/reminder

Reference file

Reference file: https://github.com/diverta/front_nuxt_auth/blob/main/pages/reminder.vue

Description

• Clicking "Reset my password posts" will POST email to /rcms-api/1/reminder and password reset email will be sent.
• The password reset email uses the login/reset_password email template and contains the token information issued by the reminder API.
• When accessing the reminder API with the token information set in the query parameter, the temporary and new password input fields will be displayed.
• Clicking "SUBMIT" will POST login_pwd, temp_pwd, and token to the /rcms-api/1/reminder endpoint, completing the password update.

Used plugins

Several plugins are used to build the frontend of the membership sample site.
The main plugins used are introduced below, refer to each document for the description and specification of the plugin part.

Plugin Name	Official Documentation
nuxtjs/i18n	https://i18n.nuxtjs.org/
Vuetify	https://vuetifyjs.com/getting-started/installation/
Formkit	https://formkit.com/
Nuxt Snackbar	https://nuxt.com/modules/snackbar

Related Documents

We have prepared tutorials on how to implement each function.
The following tutorials introduce the implementation method of each function with simple code.

• How to Build a Membership Site on Kuroco from the Sample Site Template
• Setting Up Inquiry Forms with Kuroco and Nuxt.js
• Integrate Kuroco with Nuxt.js to Create a Content List Page
• Building a login page using Kuroco and Nuxt.js
• Setting up a new member registration form with Kuroco and Nuxt.js
• Building a multi-language website with Kuroco and Nuxt.js
• How to configure password reminder & reset
• Sharing a single frontend among multiple back-ends