¶ 使用 Guard API 自由切换视图

// React 16 / 17
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-react/normal/src/pages/Embed.tsx
import { useGuard } from "@authing/guard-react";

// React 18
// 代码示例：https://github.com/Authing/Guard/tree/v5/examples/guard-react18/normal/src/pages/Embed.tsx
// import { useGuard } from "@authing/guard-react18";

import React from "react";

export default function Logout() {
  const guard = useGuard();

  const changeViewToPassword = () => {
    guard.changeView('login:password')
  }

  const changeViewToPhoneCode = () => {
    guard.changeView('login:phone-code')
  }

  const changeViewToForgetPassword = () => {
    guard.changeView('forgetPassword')
  }

  const changeViewToRegister_UserName = () => {
    guard.changeView('register:username-password')
  }

  const changeViewToRegister_EmailPassword = () => {
    guard.changeView('register:email-password')
  }

  const changeViewToAppQrcode = () => {
    guard.changeView('login:app-qrcode')
  }

  return (
    <div>
      <button className='authing-button' onClick={changeViewToPassword}>Change View to Password</button>

      <button className='authing-button' onClick={changeViewToPhoneCode}>Change View to PhoneCode</button>

      <button className='authing-button' onClick={changeViewToForgetPassword}>Change View to ForgetPassword</button>

      <button className='authing-button' onClick={changeViewToAppQrcode}>Change View to AppQrcode</button>

      <button className='authing-button' onClick={changeViewToRegister_UserName}>Change View To Register - UserName</button>

      <button className='authing-button' onClick={changeViewToRegister_EmailPassword}>Change View To Register - EmailPassword</button>
    </div>
  );
}