バリデーション通知を追加

以前作ったログイン機能のバリデーションエラー通知をalertからtoastrに変更

変更後のapp.js

// ログインフォームの処理
if (document.getElementById('loginForm')) {  //HTMLの'loginForm'を確認
    document.getElementById('loginForm').addEventListener('submit', function(e) {  //'loginForm'があった場合のイベントを追加
        e.preventDefault();                 //デフォルトの動作をキャンセルする
        const email = document.getElementById('email').value;  //ユーザーが入力したemailを取得
        const password = document.getElementById('password').value;  //ユーザーが入力したpasswordを取得

        const storedEmail = getCookie('email');    //クッキーに保存されたemailを取得
        const storedPassword = getCookie('password');    //クッキーに保存されたpasswordを取得

        //JavaScript ファイルのアラート部分をトースト通知で置き換える
        if (email === storedEmail && password === storedPassword) {
            window.location.href = 'profile.html';  // 一致している場合 profile.html へリダイレクト
        } else {
            toastr.error('メールアドレスまたはパスワードが正しくありません。');  // トースト通知でエラーメッセージを表示
        }

        // if (email === storedEmail && password === storedPassword) {   //ユーザーが入力したemailとpasswordがクッキーに保存されている情報と一致しているか確認
        //     window.location.href = 'profile.html';  //一致している場合profile.htmファイルに移動
        // } else {
        //     alert('Incorrect email or password');  //一致していない場合アラートが表示
        // }
    });
}

// アカウント作成フォームの処理
if (document.getElementById('accountForm')) {    //HTMLの'accountForm'を確認
    document.getElementById('accountForm').addEventListener('submit', function(e) {     //'accountFormがあった場合のイベントを追加
        e.preventDefault();              //デフォルトの動作をキャンセルする

        const email = document.getElementById('newEmail').value;    //ユーザーが入力したemailを取得
        const password = document.getElementById('newPassword').value;    //ユーザーが入力したpasswordを取得
        const username = document.getElementById('username').value;    //ユーザーが入力したユーザー名を取得
        const userIcon = document.getElementById('userIcon').files[0];    //ユーザーが入力したアイコンを取得

        if (userIcon && userIcon.type === 'image/jpeg') {    //ユーザーがアップロードしたアイコンがjpegか確認
            const reader = new FileReader();      //画像を読み込む
            reader.onload = function(e) {     //読み込みが終えたら実行する処理（クッキーに保存）
                setCookie('email', email, 7);     //ユーザーが入力したemailをクッキーに保存
                setCookie('password', password, 7);     //ユーザーが入力したpasswordをクッキーに保存
                setCookie('username', username, 7);     //ユーザーが入力したをユーザー名クッキーに保存
                setCookie('userIcon', e.target.result, 7);     //ユーザーが入力したアイコンをクッキーに保存
                alert('Account created successfully');     //アカウントが作成されたことを表示
                window.location.href = 'login.html';     //アカウント作成後login.htmlページにに移動
            };
            reader.readAsDataURL(userIcon);     //ユーザーがアップロードした画像データを使えるようにする
        } else {
            toastr.error('JPEG画像をアップロードしてください。');     //トースト通知でエラーメッセージを表示
        }
    });
}

// プロファイルページでユーザー情報を表示
if (window.location.pathname.includes('profile.html')) {     
    const username = getCookie('username');     //クッキーに保存されたユーザー名を取得
    const userIcon = getCookie('userIcon');     //クッキーに保存されたアイコンを取得

    if (username && userIcon) {     //ユーザー名とアイコンが存在するか確認
        document.getElementById('displayName').textContent = username;     //クッキーから取得したユーザー名を表示
        document.getElementById('displayIcon').src = userIcon;     //クッキーから取得したアイコンを表示
    } else {
        window.location.href = 'login.html';     //クッキーに情報がない場合'login.html'ページに移動
    }
}

// Cookieを設定する関数
function setCookie(name, value, days) {     //クッキーを設定するための関数(ユーザー名, 値, 保存期間)
    const date = new Date();     //Dateオブジェクトを作成
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));     //クッキーの有効期限を設定
    const expires = "expires=" + date.toUTCString();     //クッキーの有効期限をexpiresに変換 //日時を文字列に変換
    document.cookie = name + "=" + value + ";" + expires + ";path=/";     //クッキーを作成(名前、値、有効期限、サイト全体で有効であることを指定)
}

// Cookieを取得する関数
function getCookie(name) {     //クッキーの名前を引数として受け取る
    const nameEQ = name + "=";     //クッキーの名前を作る
    const ca = document.cookie.split(';');     //クッキー全体を分割
    for (let i = 0; i < ca.length; i++) {     //各クッキーをループで確認
        let c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);     //クッキー名が一致するか確認
    }     //ループが終えてもクッキーが届かなかった場合nullを返す

    return null;
}

変更部分１

alert('Incorrect email or password');  //一致していない場合アラートが表示

以下に変更

toastr.error('メールアドレスまたはパスワードが正しくありません。');  // トースト通知でエラーメッセージを表示

変更部分２

alert('Please upload a JPEG image');     //ユーザーがアップロードしたアイコンがjpegではなかったに場合エラー表示する

以下に変更

toastr.error('JPEG画像をアップロードしてください。');     //トースト通知でエラーメッセージを表示

その他のバリテーションに関してはHTMLで設定済みのため省略