メモアプリ開発① アカウント機能

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    email VARCHAR(256) NOT NULL UNIQUE,
    password VARCHAR(256) NOT NULL,
    user_name VARCHAR(256) NOT NULL,
    created_at DATETIME NOT NULL,
    updated_at DATETIME NOT NULL
);

└── example
    └── simplememo
        ├── SimpleMemoApplication.java
        ├── config
        │   └── WebConfig.java
        ├── controller
        │   ├── UserController.java
        │   ├── SignUpRequest.java
        │   └── SignInRequest.java
        ├── mapper
        │   └── UserMapper.java
        ├── model
        │   └── User.java
        └── service
            └── UserService.java

package com.example.simplememo.model;

import lombok.Data;
import java.time.LocalDateTime;

@Data
public class User {
    private Long id;
    private String email;
    private String password;
    private String userName;
    private LocalDateTime createdAt;
    private LocalDateTime updatedAt;
}

package com.example.simplememo.controller;

import lombok.Data;

@Data
public class SignUpRequest {
    private String email;
    private String password;
    private String userName;
}

package com.example.simplememo.controller;

import lombok.Data;

@Data
public class SignInRequest {
    private String email;
    private String password;
}

package com.example.simplememo.mapper;

import com.example.simplememo.controller.SignUpRequest;

import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import com.example.simplememo.model.User;

@Mapper
public interface UserMapper {
    @Insert("INSERT INTO users (email, password, user_name, created_at, updated_at) VALUES (#{email}, #{password}, #{userName}, NOW(), NOW())")
    void insertUser(SignUpRequest request);

    @Select("SELECT * FROM users WHERE email = #{email}")
    User findByEmail(String email);

    @Delete("DELETE FROM users WHERE email = #{email}")
    int deleteUser(String email); // 影響を受けた行数を返す
}

package com.example.simplememo.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.example.simplememo.controller.SignInRequest;
import com.example.simplememo.controller.SignUpRequest;
import com.example.simplememo.mapper.UserMapper;
import com.example.simplememo.model.User;

@Service
public class UserService {
    @Autowired
    private UserMapper userMapper;

    public void signup(SignUpRequest request) {
        // 該当のメールアドレスが既に登録されているか確認
        User user = userMapper.findByEmail(request.getEmail());
        if (user != null) {
            throw new RuntimeException("入力されたメールアドレスは既に登録されています。");
        }
        try {
            userMapper.insertUser(request);
        } catch (Exception e) {
            throw new RuntimeException("登録に失敗しました。入力内容を確認してください。");
        }
    }

    public User signin(SignInRequest request) {
        User user = userMapper.findByEmail(request.getEmail());
        if (user.getPassword().equals(request.getPassword())) {
            return user;
        } else {
            throw new RuntimeException("入力されたパスワードが違います。");
        }
    }

    public void deleteUser(String email) {
        try {
            userMapper.deleteUser(email);
        } catch (Exception e) {
            throw new RuntimeException("削除に失敗しました。");
        }
    }
}

package com.example.simplememo.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.example.simplememo.model.User;
import com.example.simplememo.service.UserService;

@RestController
@RequestMapping("/api")
public class UserController {
  @Autowired
  private UserService userService;

  @PostMapping("/signup")
  public ResponseEntity<String> signup(@RequestBody SignUpRequest request) {
    try {
      userService.signup(request);
      return new ResponseEntity<>(HttpStatus.CREATED); // 201
    } catch (RuntimeException e) {
      return new ResponseEntity<>(e.getMessage(), HttpStatus.INTERNAL_SERVER_ERROR); // 500
    }
  }

  @PostMapping("/signin")
  public ResponseEntity<User> signin(@RequestBody SignInRequest request) {
    try {
      User user = userService.signin(request);
      return new ResponseEntity<>(user, HttpStatus.OK); // 200
    } catch (RuntimeException e) {
      return new ResponseEntity<>(HttpStatus.UNAUTHORIZED); // 401
    }
  }

  @DeleteMapping("/account")
  public ResponseEntity<Void> deleteUser(@RequestBody String email) {
    try {
      userService.deleteUser(email);
      return new ResponseEntity<>(HttpStatus.NO_CONTENT); // 204
    } catch (RuntimeException e) {
      return new ResponseEntity<>(HttpStatus.INTERNAL_SERVER_ERROR); // 500
    }
  }
}

└── App
    └── AuthProvider
        ├── Header
        │   ├── HeaderMenu
        │   └── HeaderModal
        └── Main
            └── AuthContainer
                ├── SignIn
                └── SignUp

└── App
    └── AuthProvider # ココ
        ├── Header
        │   ├── HeaderMenu
        │   └── HeaderModal
        └── Main
            └── AuthContainer
                ├── SignIn
                └── SignUp

import React, { useEffect, useState } from "react";
import { createContext, ReactNode } from "react";
import {
  AuthContextProps,
  initialSignUpData,
  SignUpData,
  initialSignInData,
  SignInData,
  AuthMode,
} from "../Types";

// コンテキストを作成
const AuthContext = createContext<AuthContextProps | undefined>(undefined);

const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
  // 認証状態
  const [isSignedIn, setIsSignedIn] = useState(false);
  // 画面状態
  const [authMode, setAuthMode] = useState<AuthMode>(AuthMode.SIGNIN);
  const [signUpData, setSignUpData] = useState<SignUpData>(initialSignUpData); // サインアップ時の入力内容
  const [signInData, setSignInData] = useState<SignInData>(initialSignInData); // サインイン時の入力内容
  const [errorMessage, setErrorMessage] = useState<string>("");
  const [deleteConfirm, setDeleteConfirm] = useState<string>(""); // アカウント削除確認時の入力内容
  const [modalOpen, setModalOpen] = useState(false);

  // サインイン状態の復元
  useEffect(() => {
    const userInfo = localStorage.getItem("userInfo");
    if (userInfo) {
      setIsSignedIn(true);
    }
  }, []);

  // 認証モードの変更
  const handleAuthModeChange = (newMode: AuthMode) => {
    setAuthMode(newMode);
    setErrorMessage("");
  };

  // フォームの入力変更ハンドリング
  const handleAuthFormChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setErrorMessage("");
    if (authMode === AuthMode.SIGNUP) {
      setSignUpData({ ...signUpData, [e.target.name]: e.target.value });
    } else if (authMode === AuthMode.SIGNIN) {
      setSignInData({ ...signInData, [e.target.name]: e.target.value });
    }
  };

  // 認証処理
  const handleAuthClick = async () => {
    const varidationResult = varidateForm();
    if (!varidationResult) return;

    const baseUrl = process.env.REACT_APP_API_BASE_URL;
    const endpoint = authMode === AuthMode.SIGNUP ? "signup" : "signin";
    const url = `${baseUrl}/api/${endpoint}`;
    const requestBody = authMode === AuthMode.SIGNUP ? signUpData : signInData;
    try {
      const response = await fetch(url, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(requestBody),
      });

      if (!response.ok) {
        if (authMode === AuthMode.SIGNUP) {
          setErrorMessage("このメールアドレスはすでに登録されています");
        } else if (authMode === AuthMode.SIGNIN) {
          setErrorMessage("メールアドレスもしくはパスワードが違います");
        }
        setErrorMessage("認証に失敗しました。");
        throw new Error("Failed to auth request");
      }
      setIsSignedIn(true);
      resetForm(); // 入力フォームをリセット
      const userInfo = await response.json();
      localStorage.setItem("userInfo", JSON.stringify(userInfo)); // ローカルストレージに保存
    } catch (error) {
      console.error("Error:", error);
    }
  };

  const varidateForm = () => {
    setErrorMessage("");

    if (authMode === AuthMode.SIGNUP) {
      if (!signUpData.userName || !signUpData.email || !signUpData.password) {
        setErrorMessage("入力欄が空欄の場合は入力してください");
        return false;
      }
      if (
        getByteLength(signUpData.userName) > 255 ||
        getByteLength(signUpData.email) > 255 ||
        getByteLength(signUpData.password) > 255
      ) {
        setErrorMessage("文字数制限を超えています");
        return false;
      }
    } else if (authMode === AuthMode.SIGNIN) {
      console.log(getByteLength(signInData.email), getByteLength(signInData.password));
      if (!signInData.email || !signInData.password) {
        setErrorMessage("入力欄が空欄の場合は入力してください");
        return false;
      }
    }

    return true;
  };

  const getByteLength = (content: string) => {
    const encoder = new TextEncoder();
    const byteArray = encoder.encode(content);
    return byteArray.length;
  };

  // サインアウト処理
  const handleSignOut = () => {
    setErrorMessage("");
    localStorage.removeItem("userInfo");
    setIsSignedIn(false);
  };

  // アカウント削除処理
  const handleDeleteClick = async () => {
    if (deleteConfirm !== "アカウント削除") {
      setErrorMessage("入力内容を確認してください");
      return;
    }

    const baseUrl = process.env.REACT_APP_API_BASE_URL;
    const url = `${baseUrl}/api/account`;
    const userInfo = localStorage.getItem("userInfo");
    const email = userInfo ? JSON.parse(userInfo).email : "";
    try {
      const response = await fetch(url, {
        method: "DELETE",
        headers: {
          "Content-Type": "text/plain",
        },
        body: email,
      });

      if (!response.ok) {
        console.log(response);
        setErrorMessage("アカウント削除に失敗しました。");
        throw new Error("Failed to auth request");
      }
      setIsSignedIn(false);
      setErrorMessage("");
      localStorage.removeItem("userInfo"); // ローカルストレージから削除
    } catch (error) {
      console.error("Error:", error);
    }
  };

  // 画面状態のリセット
  const resetForm = () => {
    setAuthMode(AuthMode.SIGNIN);
    setSignUpData(initialSignUpData);
    setSignInData(initialSignInData);
    setDeleteConfirm("");
    setErrorMessage("");
    setModalOpen(false);
  };

  return (
    <AuthContext.Provider
      value={{
        isSignedIn,
        setIsSignedIn,
        authMode,
        handleAuthModeChange,
        handleAuthFormChange,
        signUpData,
        signInData,
        handleAuthClick,
        errorMessage,
        handleSignOut,
        deleteConfirm,
        setDeleteConfirm,
        handleDeleteClick,
        setErrorMessage,
        modalOpen,
        setModalOpen,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

// contextオブジェクトを子が直接触らずに済むようにする
const useAuthContext = () => {
  const context = React.useContext(AuthContext);
  if (context === undefined) {
    throw new Error("useAuthContext must be used within a AuthProvider");
  }
  return context;
};

export { AuthProvider, useAuthContext };

└── App
    └── AuthProvider
        ├── Header # ココ
        │   ├── HeaderMenu
        │   └── HeaderModal
        └── Main
            └── AuthContainer
                ├── SignIn
                └── SignUp

import React, { useState } from "react";
import { useAuthContext } from "../../context/AuthContext";
import HeaderMenu from "./HeaderMenu";
import HeaderModal from "./HeaderModal";

const Header: React.VFC = () => {
  const { isSignedIn } = useAuthContext();
  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null); // メニューを開く場所

  const handleIconClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };
  return (
    <header className="header">
      <h1 className="header__title">Simpl</h1>
      {isSignedIn && (
        <>
          <button className="header__button" onClick={handleIconClick}>
            <img src="icon.png" alt="" />
          </button>
          <HeaderMenu
            anchorEl={anchorEl}
            setAnchorEl={setAnchorEl}
          />
          <HeaderModal />
        </>
      )}
    </header>
  );
};

export default Header;

└── App
    └── AuthProvider
        ├── Header
        │   ├── HeaderMenu # ココ
        │   └── HeaderModal
        └── Main
            └── AuthContainer
                ├── SignIn
                └── SignUp

import { useAuthContext } from "../../context/AuthContext";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import ListItemText from "@mui/material/ListItemText";
import ListItemIcon from "@mui/material/ListItemIcon";
import LogoutIcon from "@mui/icons-material/Logout";
import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
import { HeaderMenuProps } from "../../Types";

const HeaderMenu: React.VFC<HeaderMenuProps> = ({
  anchorEl,
  setAnchorEl,
}) => {
  const { handleSignOut, setModalOpen } = useAuthContext();
  const menuOpen = Boolean(anchorEl); // メニューを開いているか否か
  const handleMenuClose = () => {
    setAnchorEl(null);
  };
  return (
    <Menu
      anchorEl={anchorEl}
      open={menuOpen}
      onClose={handleMenuClose}
      anchorOrigin={{
        vertical: "bottom", // メニューの基準となる要素（anchorEl）の下部からの表示
        horizontal: "right", // メニューの基準となる要素（anchorEl）の右端からの表示
      }}
      transformOrigin={{
        vertical: "top", // メニュー自体の上部を基準として配置
        horizontal: "right", // メニュー自体の右端を基準として配置
      }}
    >
      <MenuItem className="header__menu-item" onClick={handleMenuClose}>
        <ListItemIcon>
          <LogoutIcon fontSize="large" />
        </ListItemIcon>
        <ListItemText className="header__menu-text" onClick={handleSignOut}>
          サインアウト
        </ListItemText>
      </MenuItem>
      <MenuItem className="header__menu-item" onClick={handleMenuClose}>
        <ListItemIcon>
          <DeleteForeverIcon fontSize="large" className="header__menu-img-red" />
        </ListItemIcon>
        <ListItemText
          className="header__menu-text header__menu-text-red"
          onClick={() => setModalOpen(true)}
        >
          アカウントを削除
        </ListItemText>
      </MenuItem>
    </Menu>
  );
};

export default HeaderMenu;

└── App
    └── AuthProvider
        ├── Header
        │   ├── HeaderMenu
        │   └── HeaderModal # ココ
        └── Main
            └── AuthContainer
                ├── SignIn
                └── SignUp

import Modal from "@mui/material/Modal";
import { useAuthContext } from "../../context/AuthContext";
import { useEffect } from "react";

const HeaderModal: React.VFC = () => {
  const {
    errorMessage,
    setErrorMessage,
    deleteConfirm,
    setDeleteConfirm,
    modalOpen,
    setModalOpen,
    handleDeleteClick,
  } = useAuthContext();

  useEffect(() => {
    setErrorMessage("");
    setDeleteConfirm("");
  }, [modalOpen]);

  const handleDeleteConfirmChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setErrorMessage("");
    setDeleteConfirm(e.target.value);
  };

  return (
    <Modal open={modalOpen} onClose={() => setModalOpen(false)}>
      <div className="modal">
        <h2 className="modal__title">アカウント削除</h2>
        <div className="modal__content">
          <p className="modal__text">削除すると以下の情報がすべて失われます</p>
          <ul className="modal__list">
            <li className="modal__list-item">・プロフィール情報</li>
            <li className="modal__list-item">・メモ情報</li>
          </ul>
        </div>
        <div className="modal__content">
          <p className="modal__text">確認のため「アカウント削除」と入力してください</p>
          <input
            className="common__form common__form--input"
            type="text"
            placeholder="アカウント削除"
            value={deleteConfirm}
            onChange={handleDeleteConfirmChange}
          />
        </div>
        <div className="modal__button-box">
          <button
            className="common__form common__form--button modal__button modal__button--cancel"
            onClick={() => setModalOpen(false)}
          >
            キャンセル
          </button>
          <button
            className="common__form common__form--button modal__button modal__button--delete"
            onClick={handleDeleteClick}
          >
            削除
          </button>
        </div>
        <div className="common__error">{errorMessage}</div>
      </div>
    </Modal>
  );
};

export default HeaderModal;

└── App
    └── AuthProvider
        ├── Header
        │   ├── HeaderMenu
        │   └── HeaderModal
        └── Main # ココ
            └── AuthContainer
                ├── SignIn
                └── SignUp

import AuthContainer from "./AuthContainer/AuthContainer";
import { useAuthContext } from "../../context/AuthContext";
import MemoContainer from "./MemoContainer/MemoContainer";

const Main: React.VFC = () => {
  const { isSignedIn } = useAuthContext();
  return <div className="main">{isSignedIn ? <MemoContainer /> : <AuthContainer />}</div>;
};

export default Main;

└── App
    └── AuthProvider
        ├── Header
        │   ├── HeaderMenu
        │   └── HeaderModal
        └── Main
            └── AuthContainer # ココ
                ├── SignIn
                └── SignUp

import SignIn from "./SignIn";
import SignUp from "./SignUp";
import { useAuthContext } from "../../../context/AuthContext";

const AuthContainer: React.VFC = () => {
  const { authMode, errorMessage } = useAuthContext();
  
  return (
    <div className="auth">
      <div className="auth__copy-box">
        <div className="auth__copy">メモをもっとシンプルに</div>
        <div className="auth__copy auth__copy--grayed">直感的にアイデアを書き出そう</div>
      </div>
      {authMode === "signup" ? <SignUp /> : <SignIn />}
      <div className="common__error auth__error">{errorMessage}</div>
    </div>
  );
};

export default AuthContainer;

└── App
    └── AuthProvider
        ├── Header
        │   ├── HeaderMenu
        │   └── HeaderModal
        └── Main
            └── AuthContainer
                ├── SignIn # ココ
                └── SignUp # ココ

import { AuthMode } from "../../../Types";
import { useAuthContext } from "../../../context/AuthContext";

const SignUp: React.VFC = () => {
  const { handleAuthModeChange, signUpData, handleAuthFormChange, handleAuthClick } =
    useAuthContext();

  return (
    <>
      <div className="auth__label-box">
        <p className="auth__label">アカウントを作成</p>
        <p
          className="auth__label auth__label--link"
          onClick={() => handleAuthModeChange(AuthMode.SIGNIN)}
        >
          サインイン
        </p>
      </div>
      <div className="auth__form-box">
        <input
          className="common__form common__form--input"
          name="userName"
          type="text"
          placeholder="ユーザー名を入力"
          value={signUpData.userName}
          onChange={handleAuthFormChange}
        />
        <input
          className="common__form common__form--input"
          name="email"
          type="text"
          placeholder="メールアドレスを入力"
          value={signUpData.email}
          onChange={handleAuthFormChange}
        />
        <input
          className="common__form common__form--input"
          name="password"
          type="password"
          placeholder="パスワードを入力"
          value={signUpData.password}
          onChange={handleAuthFormChange}
        />
        <button
          className="common__form common__form--button auth__form--button"
          onClick={handleAuthClick}
        >
          新規登録する
        </button>
      </div>
    </>
  );
};

export default SignUp;

import { AuthMode } from "../../../Types";
import { useAuthContext } from "../../../context/AuthContext";

const SignIn: React.VFC = () => {
  const { handleAuthModeChange, signInData, handleAuthFormChange, handleAuthClick } =
    useAuthContext();
  return (
    <>
      <div className="auth__label-box">
        <p className="auth__label">サインイン</p>
        <p
          className="auth__label auth__label--link"
          onClick={() => handleAuthModeChange(AuthMode.SIGNUP)}
        >
          アカウントを作成
        </p>
      </div>
      <div className="auth__form-box">
        <input
          className="common__form common__form--input"
          name="email"
          type="text"
          placeholder="メールアドレスを入力"
          value={signInData.email}
          onChange={handleAuthFormChange}
        />
        <input
          className="common__form common__form--input"
          name="password"
          type="password"
          placeholder="パスワードを入力"
          value={signInData.password}
          onChange={handleAuthFormChange}
        />
        <button
          className="common__form common__form--button auth__form--button"
          onClick={handleAuthClick}
        >
          サインインする
        </button>
      </div>
    </>
  );
};

export default SignIn;