（四）小案例银行家应用程序-实现登录功能

未登录的界面如下：

未登录下面的页面是看不到的，然后通过输入用户名和pin来实现登录，之后才能看到用户的银行数据；

● 首先我们应该通过点击时间去获取验证用户名和密码

let currentAccount;   //将数组放在外面，方便后面使用
btnLogin.addEventListener('click', function (e) {  //点击事件
  e.preventDefault();  //阻止表单立马提交
  currentAccount = accounts.find(   
    acc => acc.username === inputLoginUsername.value  //通过用户输入的用户名和数组中的匹配，来返回数组中的数据
  );
  console.log(currentAccount);

  if (currentAccount?.pin === Number(inputLoginPin.value)) {  //上面如果找到用户输入的用户名，currentAccount是被赋值未一个对象，通过对象中的pin值去判断
    console.log('Login');
  }
});

● 现在用户登录逻辑出来了，我们只需要在用户正确输入用户名和密码之后显示UI和欢迎信息就可以了

● 首先我们将用户欢迎词和界面显示出来

let currentAccount;
btnLogin.addEventListener('click', function (e) {
  e.preventDefault();
  currentAccount = accounts.find(
    acc => acc.username === inputLoginUsername.value
  );
  console.log(currentAccount);

  if (currentAccount?.pin === Number(inputLoginPin.value)) {
    //显示欢迎词和UI
    labelWelcome.textContent = `Welcome back ${
      currentAccount.owner.split(' ')[0]
    }`;

    containerApp.style.opacity = 100;
  }
});

● 之后我们在显示用户的账号变化、总余额，取钱数，存钱数，利息啥的调用一下，之前函数都写过了，调用该一下即可

let currentAccount;
btnLogin.addEventListener('click', function (e) {
  e.preventDefault();
  currentAccount = accounts.find(
    acc => acc.username === inputLoginUsername.value
  );

  if (currentAccount?.pin === Number(inputLoginPin.value)) {
    //显示欢迎词和UI
    labelWelcome.textContent = `Welcome back ${
      currentAccount.owner.split(' ')[0]
    }`;

    containerApp.style.opacity = 100;

    displayMovements(currentAccount.movements);
    calcDisplayBalance(currentAccount.movements);
    calcDisplaySummary(currentAccount.movements);
  }
});

● 但是还有一个小问题，登录成功之后需要将input输入框中的文本进行清空

et currentAccount;
btnLogin.addEventListener('click', function (e) {
  e.preventDefault();
  currentAccount = accounts.find(
    acc => acc.username === inputLoginUsername.value
  );

  if (currentAccount?.pin === Number(inputLoginPin.value)) {
    //显示欢迎词和UI
    labelWelcome.textContent = `Welcome back ${
      currentAccount.owner.split(' ')[0]
    }`;

    containerApp.style.opacity = 100;
    inputLoginUsername.value = inputLoginPin.value = '';
    displayMovements(currentAccount.movements);
    calcDisplayBalance(currentAccount.movements);
    calcDisplaySummary(currentAccount.movements);
  }
});

● 但是又强迫症患者还可以看到，有些浏览器虽然输入框清空了，但是还是有光标

let currentAccount;
btnLogin.addEventListener('click', function (e) {
  e.preventDefault();
  currentAccount = accounts.find(
    acc => acc.username === inputLoginUsername.value
  );

  if (currentAccount?.pin === Number(inputLoginPin.value)) {
    //显示欢迎词和UI
    labelWelcome.textContent = `Welcome back ${
      currentAccount.owner.split(' ')[0]
    }`;

    containerApp.style.opacity = 100;
    inputLoginUsername.value = inputLoginPin.value = '';
    inputLoginPin.blur();
    displayMovements(currentAccount.movements);
    calcDisplayBalance(currentAccount.movements);
    calcDisplaySummary(currentAccount.movements);
  }
});

● 但是不知道小伙伴记不记得，当时我们写计算利息的时候，所有账号的利息都是1.2，但是实际每个账号的利率都

● 所以我们得修改一下计算利息得代码

const calcDisplaySummary = function (acc) {
  const incomes = acc.movements
    .filter(mov => mov > 0)
    .reduce((acc, mov) => acc + mov, 0);
  labelSumIn.textContent = `${incomes}€`;

  const out = acc.movements
    .filter(mov => mov < 0)
    .reduce((acc, mov) => acc + mov, 0);
  labelSumOut.textContent = `${Math.abs(out)}€`;

  const interest = movements
    .filter(mov => mov > 0)
    .map(deposit => (deposit * acc.interestRate) / 100)
    .filter(int => int >= 1)
    .reduce((acc, int) => acc + int, 0);
  labelSumInterest.textContent = `${interest}€`;
};

● 接着调用这个函数就直接调用账户

let currentAccount;
btnLogin.addEventListener('click', function (e) {
  e.preventDefault();
  currentAccount = accounts.find(
    acc => acc.username === inputLoginUsername.value
  );

  if (currentAccount?.pin === Number(inputLoginPin.value)) {
    //显示欢迎词和UI
    labelWelcome.textContent = `Welcome back ${
      currentAccount.owner.split(' ')[0]
    }`;

    containerApp.style.opacity = 100;
    inputLoginUsername.value = inputLoginPin.value = '';
    inputLoginPin.blur();
    displayMovements(currentAccount.movements);
    calcDisplayBalance(currentAccount.movements);
    calcDisplaySummary(currentAccount);
  }
});