docs: update casdoor-app doc and announcement bar (#640)

docs/how-to-connect/totp-authenticator-app.md

@@ -0,0 +1,98 @@
+---
+title: Totp Authenticator App
+description: Store totp code in Casdoor
+keywords: [authenticator, 2fa, password manager, totp, multi-factor authentication]
+authors: [IZUMI-Zu]
+---
+
+## Overview
+
+We are excited to introduce the Casdoor Authenticator App, a mobile application built using React Native that provides multi-factor authentication with TOTP for both iOS and Android platforms. This app allows users to store TOTP (Time-based One-Time Password) codes securely in Casdoor, offering a comprehensive solution for managing two-factor authentication (2FA) needs directly from mobile devices.
+
+### Key Features
+
+- **Multi-Factor Authentication**: Generate secure TOTP-based codes for enhanced account protection
+- **Offline Mode**: Generate TOTP codes without an internet connection
+- **Account Synchronization**: Securely sync your accounts across multiple devices
+- **Privacy-Focused**: All data is encrypted and stored securely
+- **User-Friendly Interface**: Simple and intuitive design for easy navigation
+
+| Android App | iOS App |
+| ----------- | ------- |
+| ![android](/img/totp-authenticator-app/android.png) | ![ios](/img/totp-authenticator-app/ios.png) |
+
+## What is TOTP?
+
+TOTP stands for Time-based One-Time Passwords and is a common form of two-factor authentication (2FA). Unique numeric passwords are generated with a standardized [algorithm](https://tools.ietf.org/html/rfc6238) that uses the current time as an input. These time-based passwords:
+
+- Change every 30 seconds for enhanced security
+- Are available offline
+- Are widely supported by many services and apps
+- Provide user-friendly, increased account security as a second factor
+
+## How to use the Casdoor Authenticator App?
+
+### Step 0: Install the Casdoor Authenticator App
+
+The Casdoor Authenticator App is currently available for Android devices. You can download the app from the following sources:
+
+1. Official GitHub Releases: [Casdoor Authenticator App Latest Release](https://github.com/casdoor/casdoor-app/releases/latest)
+2. Source Code: [Casdoor Authenticator App GitHub Repository](https://github.com/casdoor/casdoor-app)
+3. Documentation Site: [Casdoor App Documentation](https://app.casdoor.org)
+
+For developers interested in building the app from source, you can find the source code and build instructions in the [Casdoor App GitHub Repository](https://github.com/casdoor/casdoor-app#building-from-source).
+
+### Step 1: Enable Totp Account storage in Casdoor Server (Optional)
+
+This setup is optional for users who want to store their TOTP codes in the Casdoor server. Before using the Casdoor Authenticator App, you need to make sure that the MFA accounts setting is enabled in the Casdoor server.
+
+![Mfa account setting](/img/totp-authenticator-app/mfa-account-setting.png)
+
+### Step 2: Log in to the Casdoor Authenticator App
+
+After installing the Casdoor Authenticator App and enabling the MFA accounts setting in the Casdoor server, you have three convenient ways to connect to your Casdoor server:
+
+1. **Manual Configuration**
+   - Tap "Enter Server Manually"
+   - Enter your server URL, client ID, and organization name
+   - Log in with your Casdoor account credentials
+
+2. **QR Code Scan**
+   - Tap "Scan QR Code"
+   - Use your device's camera to scan the QR code from your Casdoor server
+   - The QR code can be found in "My Account" -> "MFA accounts" section
+   - The app will automatically configure the connection
+
+3. **Demo Server**
+   - Tap "Try Demo Server" to connect to a pre-configured demo instance
+   - Useful for testing the app's functionality without setting up your own server
+
+![Login](/img/totp-authenticator-app/login.png)
+
+Once connected, you can view your TOTP codes and manage your 2FA settings directly from the Casdoor Authenticator App like other authenticator apps.
+
+## Migration from Other Authenticator Apps
+
+### Migration from Google Authenticator
+
+Select the "Transfer Accounts" option in the menu of Google Authenticator and choose the accounts you want to transfer. Then, click the "Export" button to generate a QR code.
+
+![Export TOTP data](/img/totp-authenticator-app/google-export.png)
+
+In the Casdoor Authenticator App, scan the QR code generated by Google Authenticator to import your TOTP data. The app will automatically add the accounts to your Casdoor Authenticator App, allowing you to manage your TOTP codes securely.
+
+![Import TOTP data from Google Authenticator](/img/totp-authenticator-app/import-totp-google.gif)
+
+### Migration from Microsoft Authenticator (requires root access)
+
+If you are using Microsoft Authenticator, you can migrate your TOTP data to the Casdoor Authenticator App using the Microsoft Authenticator's database backup. Here's how:
+
+1. On your Android device with Microsoft Authenticator installed, locate the app's data directory:
+   `/data/data/com.azure.authenticator/databases/`
+2. You will need root access to extract the `PhoneFactor` database file.
+3. In the Casdoor Authenticator App, go to the import section
+4. Select "Import from Microsoft Authenticator"
+5. Choose the extracted `PhoneFactor` database file
+6. The app will automatically import all your TOTP accounts from Microsoft Authenticator
+
+![Import TOTP data from Microsoft Authenticator](/img/totp-authenticator-app/import-totp-microsoft.gif)

docusaurus.config.js

@@ -211,8 +211,14 @@ var _hmt = _hmt || [];
     },
     announcementBar: {
       id: "announcement", // ID of the announcement bar
-      content:
-      "<a target=\"_blank\" rel=\"noreferrer\" href=\"https://casbin.org/\">💖 Looking for an open-source and cross-platform authorization solution that supports ACL, RBAC, ABAC? Learn more about: Casbin</a>",
+      content: `
+        <script>
+          document.write(Math.random() < 0.5 ? 
+            '<a target="_blank" rel="noreferrer" href="https://casbin.org/">💖 Looking for an open-source and cross-platform authorization solution that supports ACL, RBAC, ABAC? Learn more about: Casbin</a>' :
+            '<a target="_blank" rel="noreferrer" href="https://app.casdoor.org/">🔐 Looking for an open-source and cross-platform multi-factor authentication solution? Learn more about: Casdoor-App</a>'
+          );
+        </script>
+      `,
       isCloseable: true,
     },
     docs: {

sidebars.js

@@ -95,7 +95,7 @@ module.exports = {
         },
         "how-to-connect/face-id",
         "how-to-connect/webauthn",
-        "how-to-connect/casdoor-authenticator-app",
+        "how-to-connect/totp-authenticator-app",
       ],
     },
     {