【wip】パスワードリセット部分の作成

[hikahana]

対応Issue

resolve #0

概要

実装詳細

画面スクリーンショット等

テスト項目

• [ ]
• [ ]
• [ ]

備考

[Copilot]

Pull request overview

このPRはパスワードリセット機能を実装してるよ～💡 DeviseTokenAuthを使ってバックエンドのメール送信機能を構築して、フロントエンドにはReactでパスワードリセットリクエストフォームを追加してるね✨

主な変更点はこんな感じ👇

• フロントエンドにPasswordResetCardコンポーネントを新規追加して、トップページに配置💻
• バックエンドにDevise用のパスワードリセットコントローラーとメールテンプレートを実装📧
• 開発環境でメール送信テスト用にletter_openerを導入🔧

Reviewed changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
user/src/pages/index.tsx	トップページにPasswordResetCardコンポーネントを追加して、WelcomeBoxと一緒にレイアウト調整したよ📱
user/src/components/PasswordResetCard/index.ts	PasswordResetCardコンポーネントのバレルエクスポート設定💫
user/src/components/PasswordResetCard/PasswordResetCard.tsx	メールアドレス入力してパスワードリセットリクエストを送信するコンポーネントを実装✉️
api/config/routes.rb	DeviseTokenAuthのpasswordsコントローラーをマウントして、letter_opener_webのルーティングも追加📍
api/config/initializers/devise.rb	Deviseのメール送信元アドレスを環境変数から取得するように変更🔐
api/config/environments/production.rb	本番環境用のSMTP設定（Outlook）とメーラー設定を追加🚀
api/config/environments/development.rb	開発環境でletter_openerを使ってメール送信テストできるように設定🛠️
api/app/mailers/reset_password_instructions.text.erb	パスワードリセットメールのテキスト版テンプレート（要修正：配置場所が間違ってるよ😱）
api/app/mailers/reset_password_instructions.html.erb	パスワードリセットメールのHTML版テンプレート（要修正：配置場所が間違ってるよ😱）
api/app/mailers/application_mailer.rb	ApplicationMailerのデフォルト送信元を環境変数から取得するように変更📮
api/app/controllers/api/auth/passwords_controller.rb	DeviseTokenAuthのPasswordsControllerを継承したカスタムコントローラー🎮
api/Gemfile.lock	letter_openerとletter_opener_webの依存関係を追加📦
api/Gemfile	開発環境用にletter_openerとletter_opener_webを追加（要修正：developmentグループに入れてね💦）
README.md	メール送信設定（Outlook SMTP）の環境変数ドキュメントを追加📝

[Copilot]

apiUrl を2回も定義しちゃってるから、1つ削除した方がいいよ～😅

9行目の buildRedirectUrl() 関数内で定義してるのと、31行目のコンポーネント内で定義してるやつが重複してるね💦

こんな感じで修正するとスッキリするよ✨

const PasswordResetCard = () => {
  const [email, setEmail] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);
  
  const apiUrl = process.env.NEXT_PUBLIC_API_URL;
  const redirectUrl = useMemo(() => buildRedirectUrl(apiUrl), [apiUrl]);
  
  // ...
};

で、buildRedirectUrl 関数はパラメータで受け取るように変更‼️

const buildRedirectUrl = (apiUrl: string | undefined) => {
  if (!apiUrl) return '';
  // ...
};

[hikahana]

@copilot open a new pull request to apply changes based on this feedback

[Copilot]

letter_openerとletter_opener_webがdevelopmentグループに入ってないよ～😱これだと本番環境にもインストールされちゃうから、ガチでヤバいかも💦

こんな感じで修正してね👇✨

group :development do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'listen', '~> 3.2'
  gem 'r2-oas'
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
  gem 'letter_opener'
  gem 'letter_opener_web'
end

開発専用のgemは必ずdevelopmentグループに入れるのが鉄則だよ～💪🔥

[Copilot]

[nitpick] letter_opener のマウント設定が Rails.env.development? でガードされてるのはめっちゃいいね👏でも、ルートの定義位置がちょっと気になるかも🤔

Railsの慣習的には、開発ツール系のルートは config/routes.rb の一番下か、他のnamespaceの外側に書くことが多いよ💡 今の位置だとちょっと見づらいかもだから、こんな感じで一番下に移動するとキレイになるよ✨

Rails.application.routes.draw do
  # 既存のルート定義
  # ...
  
  namespace :api do
    mount_devise_token_auth_for 'User', at: 'auth', controllers: {
      registrations: 'api/auth/registrations',
      passwords: 'api/auth/passwords'
    }
    namespace :auth do
      resources :sessions
    end
  end
  
  # 開発ツール系は最後に
  if Rails.env.development?
    mount LetterOpenerWeb::Engine, at: '/letter_opener'
  end
end

まあこれはスタイルの話だから、そこまでマストってわけじゃないけどね😊

[Copilot]

[nitpick] READMEに末尾のスペース取っちゃった変更が入ってるね😅 これは多分意図してないやつだと思うから、元に戻した方がいいかも💦

ruby 2.7.1 <br> 

こんな感じで末尾にスペース入れといた方が、マークダウンのフォーマットとして正しいよ～📝✨

Suggested change

	ruby 2.7.1 <br>
	ruby 2.7.1 <br>

[Copilot]

@hikahana I've opened a new pull request, #1982, to work on those changes. Once the pull request is ready, I'll request review from you.