Merge pull request #6 from EC-CUBE/master

ECCUBEコードベースと同期
sai-gillingham · Sep 22, 2023 · 102ed1c · 102ed1c
2 parents 6cbecfe + d296b53
commit 102ed1c
Show file tree

Hide file tree

Showing 12 changed files with 153 additions and 22 deletions.
diff --git a/src/state/ducks/front/login/api.ts b/src/state/ducks/front/login/api.ts
@@ -2,13 +2,5 @@ import OAuthApiUtils from "../../../../utils/OAuthApiUtils";
 
 export function callLogin(params) {
     console.log(params);
-    return new OAuthApiUtils().post(
-        "token",
-        {
-            "grant_type":"password",
-            "client_id": process.env.REACT_APP_API_CLIENT_KEY,
-            "username":params.username,
-            "password":params.password,
-        }
-    )
+    return new OAuthApiUtils().login(params.username, params.password);
 }
diff --git a/src/state/ducks/shared/oauth/actions.ts b/src/state/ducks/shared/oauth/actions.ts
@@ -54,17 +54,53 @@ export function oAuthRefreshTokenFailure(errorData: any) {
     }
 }
 
+//////////////////////////////
+// ログアウト機能
+//////////////////////////////
+export function oAuthLogoutIrregular() {
+    return {
+        type: types.LOGOUT_REQUEST_IRREGULAR
+    }
+}
 
+export function oAuthLogoutIrregularLoading() {
+    return {
+        type: types.LOGOUT_REQUEST_IRREGULAR_LOADING
+    }
+}
+
+export function oAuthLogoutIrregularSuccess() {
+    return {
+        type: types.LOGOUT_REQUEST_IRREGULAR_SUCCESS
+    }
+}
+
+export function oAuthLogoutIrregularFailure(errorData: any) {
+    return {
+        type: types.LOGOUT_REQUEST_IRREGULAR_FAILURE,
+        payload: {
+            errorData: errorData
+        }
+    }
+}
 
 
 const actions = {
+    // OAUTHトークン受信と更新
     oAuthReceiveToken,
     oAuthReceiveSessionDetailsSave,
 
+    // リフレッシュトークン
     oAuthRefreshToken,
     oAuthRefreshTokenLoading,
     oAuthRefreshTokenSuccess,
-    oAuthRefreshTokenFailure
+    oAuthRefreshTokenFailure,
+
+    // ログアウト機能
+    oAuthLogoutIrregular,
+    oAuthLogoutIrregularLoading,
+    oAuthLogoutIrregularSuccess,
+    oAuthLogoutIrregularFailure,
 };
 
 export default actions;
diff --git a/src/state/ducks/shared/oauth/api.ts b/src/state/ducks/shared/oauth/api.ts
@@ -9,3 +9,7 @@ export function refreshToken(refresh_token: string) {
         }
     );
 }
+
+export function logoutAPI(access_token: string) {
+    return new oAuthApiUtils().logout(access_token);
+}
diff --git a/src/state/ducks/shared/oauth/operations.ts b/src/state/ducks/shared/oauth/operations.ts
@@ -13,11 +13,13 @@ import actions from "./actions";
 const oAuthReceiveToken = actions.oAuthReceiveToken;
 const oAuthReceiveSessionDetailsSave = actions.oAuthReceiveSessionDetailsSave;
 const oAuthRefreshToken = actions.oAuthRefreshToken;
+const oAuthLogoutIrregular = actions.oAuthLogoutIrregular;
 
 const operations = {
     oAuthReceiveToken,
     oAuthReceiveSessionDetailsSave,
-    oAuthRefreshToken
+    oAuthRefreshToken,
+    oAuthLogoutIrregular
 }
 
 export default operations;
diff --git a/src/state/ducks/shared/oauth/reducers.ts b/src/state/ducks/shared/oauth/reducers.ts
@@ -22,14 +22,19 @@ export const oAuthState = {
 
     // リフレッシュトークン
     refreshTokenLoading: false,
-    refreshTokenError: {}
+    refreshTokenError: {},
+
+    // ログアウト
+    logoutIrregularLoading: false,
+    logoutIrregularError: {}
 }
 
 export default function loginReducer(state = oAuthState, action) {
     const failure_event_match = /FAILURE/.test(action.type);
     const request_last_state = /REQUEST$/.test(action.type);
 
     switch (action.type) {
+        // ログイン
         case types.OAUTH_TOKEN_SAVE:
             return {
                 ...state,
@@ -57,6 +62,30 @@ export default function loginReducer(state = oAuthState, action) {
                 refreshTokenError: state.refreshTokenError = action.payload.errorData
             }
         }
+        // ログアウト
+        case types.LOGOUT_REQUEST_IRREGULAR_LOADING: {
+            return {
+                ...state,
+                logoutIrregularLoading: state.logoutIrregularLoading = true
+            }
+        }
+        case types.LOGOUT_REQUEST_IRREGULAR_SUCCESS: {
+            return {
+                ...state,
+                logoutIrregularLoading: state.logoutIrregularLoading = false,
+                oAuthSessionDetails: state.oAuthSessionDetails = {}
+            }
+        }
+
+        case types.LOGOUT_REQUEST_IRREGULAR_FAILURE: {
+            return {
+                ...state,
+                logoutIrregularLoading: state.logoutIrregularLoading = false,
+                logoutIrregularError: state.logoutIrregularError = action.payload.errorData
+            }
+        }
+
+        // エラーキャッチ
         case failure_event_match && action.type: {
             return {
                 ...state,

diff --git a/src/state/ducks/shared/oauth/sagas.ts b/src/state/ducks/shared/oauth/sagas.ts
@@ -9,7 +9,7 @@
 import {call, put} from "redux-saga/effects";
 import { select } from "redux-saga/effects";
 import actions from "./actions";
-import {refreshToken} from "./api";
+import {logoutAPI, refreshToken} from "./api";
 import {oAuthSelectors} from "./index";
 
 
@@ -28,3 +28,16 @@ export function* oAuthRefreshAccessToken(data) {
         yield put(actions.oAuthRefreshTokenFailure(e));
     }
 }
+
+export function* oAuthLogoutRequest(data) {
+    yield put(actions.oAuthLogoutIrregularLoading());
+    const access_token = yield select(oAuthSelectors.getOAuthCredentials);
+    try {
+        yield call(logoutAPI, access_token?.access_token);
+        localStorage.removeItem('oAuthCredentials');
+        yield put(actions.oAuthLogoutIrregularSuccess());
+    } catch (e) {
+        console.log(e);
+        yield put(actions.oAuthLogoutIrregularFailure(e));
+    }
+}
diff --git a/src/state/ducks/shared/oauth/types.ts b/src/state/ducks/shared/oauth/types.ts
@@ -19,6 +19,12 @@ export const REFRESH_TOKEN_REQUEST_LOADING: string = "REFRESH_TOKEN_REQUEST_LOAD
 export const REFRESH_TOKEN_REQUEST_SUCCESS: string = "REFRESH_TOKEN_REQUEST_SUCCESS";
 export const REFRESH_TOKEN_REQUEST_FAILURE: string = "REFRESH_TOKEN_REQUEST_FAILURE";
 
+// ログアウト機能
+export const LOGOUT_REQUEST_IRREGULAR = "LOGOUT_REQUEST_IRREGULAR";
+export const LOGOUT_REQUEST_IRREGULAR_LOADING = "LOGOUT_REQUEST_IRREGULAR_LOADING";
+export const LOGOUT_REQUEST_IRREGULAR_SUCCESS = "LOGOUT_REQUEST_IRREGULAR_SUCCESS";
+export const LOGOUT_REQUEST_IRREGULAR_FAILURE = "LOGOUT_REQUEST_IRREGULAR_FAILURE";
+
 const types = {
     // OAUTHトークン受信と更新
     OAUTH_TOKEN_RECEIVE,
@@ -29,7 +35,13 @@ const types = {
     REFRESH_TOKEN_REQUEST,
     REFRESH_TOKEN_REQUEST_LOADING,
     REFRESH_TOKEN_REQUEST_SUCCESS,
-    REFRESH_TOKEN_REQUEST_FAILURE
+    REFRESH_TOKEN_REQUEST_FAILURE,
+
+    // ログアウト機能
+    LOGOUT_REQUEST_IRREGULAR,
+    LOGOUT_REQUEST_IRREGULAR_LOADING,
+    LOGOUT_REQUEST_IRREGULAR_SUCCESS,
+    LOGOUT_REQUEST_IRREGULAR_FAILURE
 }
 
 export default types;
diff --git a/src/state/ducks/shared/oauth/watchersSagas.ts b/src/state/ducks/shared/oauth/watchersSagas.ts
@@ -1,6 +1,6 @@
 import {takeLeading} from "redux-saga/effects";
 import types from "./types";
-import {oAuthRefreshAccessToken} from "./sagas";
+import {oAuthLogoutRequest, oAuthRefreshAccessToken} from "./sagas";
 
 
 /**
@@ -13,4 +13,5 @@ import {oAuthRefreshAccessToken} from "./sagas";
  */
 export function* fetchRequests() {
     yield takeLeading(types.REFRESH_TOKEN_REQUEST, oAuthRefreshAccessToken);
+    yield takeLeading(types.LOGOUT_REQUEST_IRREGULAR, oAuthLogoutRequest);
 }
diff --git a/src/utils/OAuthApiUtils.ts b/src/utils/OAuthApiUtils.ts
@@ -8,7 +8,6 @@ export default class OAuthApiUtils {
      * @param {string|null} baseurl カスタムURL
      */
     constructor(timeout = null, baseurl = null) {
-        // @TODO: CHANGE TO CORRECT URL
         axios.defaults.baseURL = baseurl  || process.env.REACT_APP_API_URL;
         axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
         axios.defaults.timeout = timeout || process.env.REACT_APP_ECCUBE_TIMEOUT;
@@ -18,13 +17,15 @@ export default class OAuthApiUtils {
      * oAuth API POST リクエスト
      * @param {string} uri API アクセスポイント
      * @param {Object} body Post データ
+     * @param headers headers 
      * @returns {Promise<axios.AxiosResponse<any>> | *} (API|Network) リスポンス
      */
-    post(uri, body) {
+    post(uri, body, headers = {}) {
         return axios({
             method: 'POST',
             url: uri,
-            data: body
+            data: body,
+            headers: headers
         });
     }
 
@@ -33,6 +34,39 @@ export default class OAuthApiUtils {
             'refresh_token': refreshToken
         })
     }
+
+    /**
+     * サーバーですべてのACCESS_TOKENを削除
+     * 
+     * @param accessToken
+     */
+    logout(accessToken: string) {
+        return this.post(
+            "/api/logout", {}, {
+                "Authorization": "Bearer " + accessToken,
+            }
+        )
+    }
+
+    /**
+     * ログイン
+     * 
+     * @param accountEmail
+     * @param password
+     */
+    login(accountEmail : string, password : string) {
+        return this.post(
+            "token",
+            {
+                "grant_type":"password",
+                "client_id": process.env.REACT_APP_API_CLIENT_KEY,
+                "username": accountEmail,
+                "password": password
+            }
+        )
+
+    }
+
 }
 
 export {axios};
diff --git a/src/views/App.tsx b/src/views/App.tsx
@@ -6,26 +6,30 @@ import FrontLayout from "./layout/front/Layout";
 import {ThemeProvider} from "@mui/material";
 import EccubeFrontTheme from "./theme/front/EccubeFrontTheme";
 import {cartOperators} from "../state/ducks/front/cart";
+import {oAuthOperations} from "../state/ducks/shared/oauth";
 
 /**
  * メインビューコンポーネント、すべてのビューはここからロードされます。
  */
 const mapStateToProps = state => {
     return {
         oAuthSessionDetails: state.oAuth.oAuthSessionDetails as null | object,
+        logoutIrregularLoading: state.oAuth.logoutIrregularLoading as boolean,
     }
 }
 
 /**
  * Reduxアクション（これもコンポーネントのパラメータに挿入されます。)
  */
 const mapEventToProps = {
-    cartSliderShow: cartOperators.cartSliderShow
+    cartSliderShow: cartOperators.cartSliderShow,
+    oAuthLogoutIrregular: oAuthOperations.oAuthLogoutIrregular
 }
 
 const AppContainer = ({
                           oAuthSessionDetails,
-                          cartSliderShow
+                          cartSliderShow,
+                          oAuthLogoutIrregular
                       }) => {
     console.log(oAuthSessionDetails)
     return (
@@ -34,6 +38,7 @@ const AppContainer = ({
                 <FrontLayout
                     oAuthSessionDetails={oAuthSessionDetails}
                     cartSliderShow={cartSliderShow}
+                    oAuthLogoutIrregular={oAuthLogoutIrregular}
                 />
             </ThemeProvider>
         </div>

diff --git a/src/views/layout/front/Header.tsx b/src/views/layout/front/Header.tsx
@@ -25,6 +25,7 @@ const TopBar = ({
                     i18n,
                     oAuthSessionDetails,
                     cartSliderShow,
+                    oAuthLogoutIrregular,
                     ...rest
                 }) => {
 
@@ -80,7 +81,7 @@ const TopBar = ({
                         </div>
                     )}
                     <Box sx={{ flexGrow: 0 }}>
-                        <Button variant="contained" color={"secondary"}>
+                        <Button variant="contained" color={"secondary"} onClick={() => oAuthSessionDetails?.access_token ?  oAuthLogoutIrregular() : console.log("Login")}>
                             {oAuthSessionDetails?.access_token ? "ログアウト" : "ログイン"}
                         </Button>
                     </Box>

diff --git a/src/views/layout/front/Layout.tsx b/src/views/layout/front/Layout.tsx
@@ -8,14 +8,16 @@ import CartDrawerContainer from "../../containers/front/cart/CartDrawerContainer
 
 const FrontLayout = ({
                          oAuthSessionDetails,
-                         cartSliderShow
+                         cartSliderShow,
+                         oAuthLogoutIrregular
                      }) => {
     return (
         <div>
             <CartContainer>
                 <Header
                     oAuthSessionDetails={oAuthSessionDetails}
                     cartSliderShow={cartSliderShow}
+                    oAuthLogoutIrregular={oAuthLogoutIrregular}
                 />
                 <div>
                     <div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,3 +9,7 @@ export function refreshToken(refresh_token: string) { @@
             }
         );
     }
+    export function logoutAPI(access_token: string) {
+        return new oAuthApiUtils().logout(access_token);
+    }