next-chat/app/components/auth.tsx

import styles from "./auth.module.scss";
import { IconButton } from "./button";

import { useNavigate } from "react-router-dom";
import { Path } from "../constant";
import { useAccessStore } from "../store";
import Locale from "../locales";

import BotIcon from "../icons/bot.svg";
import { useEffect } from "react";
import { getClientConfig } from "../config/client";

export function AuthPage() {
  const navigate = useNavigate();
  const accessStore = useAccessStore();

  const goHome = () => navigate(Path.Home);
  const goChat = () => navigate(Path.Chat);
  const resetAccessCode = () => {
    accessStore.update((access) => {
      access.openaiApiKey = "";
      access.accessCode = "";
    });
  }; // Reset access code to empty string

  useEffect(() => {
    if (getClientConfig()?.isApp) {
      navigate(Path.Settings);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <div className={styles["auth-page"]}>
      <div className={`no-dark ${styles["auth-logo"]}`}>
        <BotIcon />
      </div>

      <div className={styles["auth-title"]}>{Locale.Auth.Title}</div>
      <div className={styles["auth-tips"]}>{Locale.Auth.Tips}</div>

      <input
        className={styles["auth-input"]}
        type="password"
        placeholder={Locale.Auth.Input}
        value={accessStore.accessCode}
        onChange={(e) => {
          accessStore.update(
            (access) => (access.accessCode = e.currentTarget.value),
          );
        }}
      />
      {/*{!accessStore.hideUserApiKey ? (*/}
      {/*  <>*/}
      {/*    <div className={styles["auth-tips"]}>{Locale.Auth.SubTips}</div>*/}
      {/*    <input*/}
      {/*      className={styles["auth-input"]}*/}
      {/*      type="password"*/}
      {/*      placeholder={Locale.Settings.Access.OpenAI.ApiKey.Placeholder}*/}
      {/*      value={accessStore.openaiApiKey}*/}
      {/*      onChange={(e) => {*/}
      {/*        accessStore.update(*/}
      {/*          (access) => (access.openaiApiKey = e.currentTarget.value),*/}
      {/*        );*/}
      {/*      }}*/}
      {/*    />*/}
      {/*    <input*/}
      {/*      className={styles["auth-input"]}*/}
      {/*      type="password"*/}
      {/*      placeholder={Locale.Settings.Access.Google.ApiKey.Placeholder}*/}
      {/*      value={accessStore.googleApiKey}*/}
      {/*      onChange={(e) => {*/}
      {/*        accessStore.update(*/}
      {/*          (access) => (access.googleApiKey = e.currentTarget.value),*/}
      {/*        );*/}
      {/*      }}*/}
      {/*    />*/}
      {/*  </>*/}
      {/*) : null}*/}

      <div className={styles["auth-actions"]}>
        <IconButton
          text={Locale.Auth.Confirm}
          type="primary"
          onClick={goChat}
        />
        <IconButton
          text={Locale.Auth.Later}
          onClick={() => {
            resetAccessCode();
            goHome();
          }}
        />
      </div>
    </div>
  );
}