feat: add Backblaze B2 support with recommendations and styling updates

webapp/src/components/backup-center/BackupDestinationDetail.tsx

@@ -127,6 +127,30 @@ function renderRecommendedProviderDetails(provider: RecommendedProvider) {
           </div>
         </div>
       );
+    case 'backblaze-b2':
+      return (
+        <div className="backup-recommendation-steps">
+          <div className="backup-recommendation-step">
+            <strong>1.</strong> {t('txt_backup_recommend_backblaze_step_1')}
+          </div>
+          <div className="backup-recommendation-step">
+            <strong>2.</strong> {t('txt_backup_recommend_backblaze_step_2_prefix')}{' '}
+            <a href={provider.bucketsUrl} target="_blank" rel="noreferrer">Buckets</a>
+            {t('txt_backup_recommend_backblaze_step_2_suffix')}
+          </div>
+          <div className="backup-recommendation-step">
+            <strong>3.</strong> {t('txt_backup_recommend_backblaze_step_3')}
+          </div>
+          <div className="backup-recommendation-step">
+            <strong>4.</strong> {t('txt_backup_recommend_backblaze_step_4_prefix')}{' '}
+            <a href={provider.applicationKeysUrl} target="_blank" rel="noreferrer">Application Keys</a>
+            {t('txt_backup_recommend_backblaze_step_4_suffix')}
+          </div>
+          <div className="backup-recommendation-step">
+            <strong>5.</strong> {t('txt_backup_recommend_backblaze_step_5')}
+          </div>
+        </div>
+      );
   }
 }
 
@@ -147,6 +171,7 @@ export function BackupDestinationDetail(props: BackupDestinationDetailProps) {
               <div className="backup-inline-note">
                 {props.selectedRecommendedProvider.id === 'infinicloud' ? t('txt_backup_recommend_infinicloud_summary')
                   : props.selectedRecommendedProvider.id === 'koofr' ? t('txt_backup_recommend_koofr_summary')
+                    : props.selectedRecommendedProvider.id === 'backblaze-b2' ? t('txt_backup_recommend_backblaze_summary')
                     : t('txt_backup_recommend_pcloud_summary')}
               </div>
             </div>

webapp/src/lib/backup-recommendations.ts

@@ -4,7 +4,7 @@ export interface RecommendedStorageLink {
 }
 
 export interface RecommendedProviderBase {
-  id: 'infinicloud' | 'koofr' | 'pcloud';
+  id: 'infinicloud' | 'koofr' | 'pcloud' | 'backblaze-b2';
   name: string;
   capacity: string;
   protocol: 'webdav' | 's3';
@@ -28,7 +28,13 @@ export interface PcloudProvider extends RecommendedProviderBase {
   id: 'pcloud';
 }
 
-export type RecommendedProvider = InfinicloudProvider | KoofrProvider | PcloudProvider;
+export interface BackblazeB2Provider extends RecommendedProviderBase {
+  id: 'backblaze-b2';
+  bucketsUrl: string;
+  applicationKeysUrl: string;
+}
+
+export type RecommendedProvider = InfinicloudProvider | KoofrProvider | PcloudProvider | BackblazeB2Provider;
 
 export const RECOMMENDED_PROVIDERS: RecommendedProvider[] = [
   {
@@ -61,6 +67,15 @@ export const RECOMMENDED_PROVIDERS: RecommendedProvider[] = [
     signupUrl: 'https://u.pcloud.com/#/register?invite=GITx7ZvEU1N7',
     hasAffiliateLink: true,
   },
+  {
+    id: 'backblaze-b2',
+    name: 'Backblaze B2',
+    capacity: '10G',
+    protocol: 's3',
+    signupUrl: 'https://secure.backblaze.com/user_signin.htm',
+    bucketsUrl: 'https://secure.backblaze.com/b2_buckets.htm',
+    applicationKeysUrl: 'https://secure.backblaze.com/app_keys.htm',
+  },
 ];
 
 export function hasLinkedStorages(provider: RecommendedProvider): provider is KoofrProvider {

webapp/src/lib/i18n/locales/en.ts

@@ -85,6 +85,14 @@ const en: Record<string, string> = {
   "txt_backup_recommend_pcloud_step_1": "Register a pCloud account with just your email address.",
   "txt_backup_recommend_pcloud_step_2": "Use https://webdav.pcloud.com/ as the WebDAV server URL.",
   "txt_backup_recommend_pcloud_step_3": "Use your registration email as the WebDAV username and your account password as the WebDAV password.",
+  "txt_backup_recommend_backblaze_summary": "S3-compatible object storage with a 10 GB free allowance. Use the B2 S3 endpoint, bucket name, region, keyID, and applicationKey.",
+  "txt_backup_recommend_backblaze_step_1": "Register or sign in to a Backblaze account.",
+  "txt_backup_recommend_backblaze_step_2_prefix": "Open",
+  "txt_backup_recommend_backblaze_step_2_suffix": ", click Create a Bucket, enter only the bucket name, leave the other settings unchanged, and create it.",
+  "txt_backup_recommend_backblaze_step_3": "After creation, use the displayed Endpoint as the S3 endpoint, the bucket name as the bucket, and the middle part of the endpoint such as us-west-004 as the region.",
+  "txt_backup_recommend_backblaze_step_4_prefix": "Open",
+  "txt_backup_recommend_backblaze_step_4_suffix": ", click Add a New Application Key, enter any Name of Key, leave the other settings unchanged, and create it.",
+  "txt_backup_recommend_backblaze_step_5": "Use keyID as the access key and applicationKey as the secret key.",
   "txt_backup_add_destination": "Add Destination",
   "txt_backup_schedule_panel_title": "Automatic Schedule",
   "txt_backup_schedule_panel_note": "Each destination can keep its own daily backup schedule.",

webapp/src/lib/i18n/locales/es.ts

@@ -85,6 +85,14 @@ const es: Record<string, string> = {
   "txt_backup_recommend_pcloud_step_1": "Registre una cuenta pCloud solo con su dirección de correo.",
   "txt_backup_recommend_pcloud_step_2": "Use https://webdav.pcloud.com/ como URL del servidor WebDAV.",
   "txt_backup_recommend_pcloud_step_3": "Use su correo de registro como nombre de usuario WebDAV y su contraseña de cuenta como contraseña WebDAV.",
+  "txt_backup_recommend_backblaze_summary": "Almacenamiento de objetos compatible con S3 con 10 GB gratis. Use el endpoint S3 de B2, el nombre del bucket, la región, keyID y applicationKey.",
+  "txt_backup_recommend_backblaze_step_1": "Registre o inicie sesión en una cuenta de Backblaze.",
+  "txt_backup_recommend_backblaze_step_2_prefix": "Abra",
+  "txt_backup_recommend_backblaze_step_2_suffix": ", haga clic en Create a Bucket, introduzca solo el nombre del bucket, deje lo demás sin cambios y créelo.",
+  "txt_backup_recommend_backblaze_step_3": "Después de crearlo, use el Endpoint mostrado como endpoint S3, el nombre del bucket como bucket y la parte central del endpoint, como us-west-004, como región.",
+  "txt_backup_recommend_backblaze_step_4_prefix": "Abra",
+  "txt_backup_recommend_backblaze_step_4_suffix": ", haga clic en Add a New Application Key, introduzca cualquier Name of Key, deje lo demás sin cambios y créelo.",
+  "txt_backup_recommend_backblaze_step_5": "Use keyID como clave de acceso y applicationKey como clave secreta.",
   "txt_backup_add_destination": "Añadir destino",
   "txt_backup_schedule_panel_title": "Programación automática",
   "txt_backup_schedule_panel_note": "Cada destino puede mantener su propia programación de copia de seguridad diaria.",

webapp/src/lib/i18n/locales/ru.ts

@@ -86,6 +86,14 @@ const ru: Record<string, string> = {
   "txt_backup_recommend_pcloud_step_1": "Зарегистрируйте учетную запись pCloud, используя только свой адрес электронной почты.",
   "txt_backup_recommend_pcloud_step_2": "Используйте https://webdav.ploud.com/ в качестве URL-адреса сервера WebDAV.",
   "txt_backup_recommend_pcloud_step_3": "Используйте свой регистрационный адрес электронной почты в качестве имени пользователя WebDAV и пароль своей учетной записи в качестве пароля WebDAV.",
+  "txt_backup_recommend_backblaze_summary": "S3-совместимое объектное хранилище с бесплатными 10 ГБ. Используйте S3 endpoint B2, имя bucket, регион, keyID и applicationKey.",
+  "txt_backup_recommend_backblaze_step_1": "Зарегистрируйте учетную запись Backblaze или войдите в нее.",
+  "txt_backup_recommend_backblaze_step_2_prefix": "Откройте",
+  "txt_backup_recommend_backblaze_step_2_suffix": ", нажмите Create a Bucket, введите только имя bucket, оставьте остальные настройки без изменений и создайте его.",
+  "txt_backup_recommend_backblaze_step_3": "После создания используйте показанный Endpoint как S3 endpoint, имя bucket как bucket, а среднюю часть endpoint, например us-west-004, как регион.",
+  "txt_backup_recommend_backblaze_step_4_prefix": "Откройте",
+  "txt_backup_recommend_backblaze_step_4_suffix": ", нажмите Add a New Application Key, введите любое Name of Key, оставьте остальные настройки без изменений и создайте ключ.",
+  "txt_backup_recommend_backblaze_step_5": "Используйте keyID как ключ доступа, а applicationKey как секретный ключ.",
   "txt_backup_add_destination": "Добавить пункт назначения",
   "txt_backup_schedule_panel_title": "Автоматическое расписание",
   "txt_backup_schedule_panel_note": "Каждый пункт назначения может иметь собственный ежедневный график резервного копирования.",

webapp/src/lib/i18n/locales/zh-CN.ts

@@ -85,6 +85,14 @@ const zhCN: Record<string, string> = {
   "txt_backup_recommend_pcloud_step_1": "先用邮箱注册一个 pCloud 账号。",
   "txt_backup_recommend_pcloud_step_2": "WebDAV 地址填写 https://webdav.pcloud.com/ 。",
   "txt_backup_recommend_pcloud_step_3": "注册邮箱用作 WebDAV 用户名，注册密码用作 WebDAV 密码。",
+  "txt_backup_recommend_backblaze_summary": "兼容 S3 的对象存储，免费容量 10 GB，无需信用卡。",
+  "txt_backup_recommend_backblaze_step_1": "先注册或登录 Backblaze 账号。",
+  "txt_backup_recommend_backblaze_step_2_prefix": "打开",
+  "txt_backup_recommend_backblaze_step_2_suffix": "，点击创建一个桶，只输入桶名字，其他地方不修改，然后创建。",
+  "txt_backup_recommend_backblaze_step_3": "创建后显示的 Endpoint 填到 S3端点URL；桶名名称 填到 储桶名称；区域填写 Endpoint 中间的区域值，例如 us-west-004。",
+  "txt_backup_recommend_backblaze_step_4_prefix": "打开",
+  "txt_backup_recommend_backblaze_step_4_suffix": "，点击 Add a New Application Key，随便输入 Name of Key，其他地方不动，然后创建。",
+  "txt_backup_recommend_backblaze_step_5": "生成结果里的 keyID 填到 访问 ID，applicationKey 填到 访问密码。",
   "txt_backup_add_destination": "新增地点",
   "txt_backup_schedule_panel_title": "自动备份计划",
   "txt_backup_schedule_panel_note": "每个备份地点都可以单独配置自己的每日自动备份计划。",
@@ -266,15 +274,15 @@ const zhCN: Record<string, string> = {
   "txt_backup_webdav_username": "WebDAV 用户名",
   "txt_backup_webdav_password": "WebDAV 密码",
   "txt_backup_webdav_path": "远程目录",
-  "txt_backup_s3_endpoint": "S3 端点",
-  "txt_backup_s3_addressing_style": "S3 寻址方式",
+  "txt_backup_s3_endpoint": "S3 端点 URL",
+  "txt_backup_s3_addressing_style": "寻址方式",
   "txt_backup_s3_addressing_path_style": "path-style（默认）",
   "txt_backup_s3_addressing_virtual_hosted_style": "virtual-hosted-style",
-  "txt_backup_s3_bucket": "存储桶",
+  "txt_backup_s3_bucket": "存储桶名称",
   "txt_backup_s3_region": "区域",
-  "txt_backup_s3_access_key": "访问密钥",
-  "txt_backup_s3_secret_key": "秘密密钥",
-  "txt_backup_s3_path": "远程路径",
+  "txt_backup_s3_access_key": "访问 ID",
+  "txt_backup_s3_secret_key": "访问密码",
+  "txt_backup_s3_path": "路径前缀",
   "txt_backup_reserved_name": "预留类型名称",
   "txt_backup_reserved_notes": "预留备注",
   "txt_backup_reserved_notes_placeholder": "给下一个备份地点先留个说明",

webapp/src/lib/i18n/locales/zh-TW.ts

@@ -85,6 +85,14 @@ const zhTW: Record<string, string> = {
   "txt_backup_recommend_pcloud_step_1": "先用郵箱註冊一個 pCloud 賬號。",
   "txt_backup_recommend_pcloud_step_2": "WebDAV 地址填寫 https://webdav.pcloud.com/ 。",
   "txt_backup_recommend_pcloud_step_3": "註冊郵箱用作 WebDAV 用戶名，註冊密碼用作 WebDAV 密碼。",
+  "txt_backup_recommend_backblaze_summary": "兼容 S3 的對象儲存，免費容量 10 GB。需要填寫 B2 的 S3 端點、桶名、區域、keyID 和 applicationKey。",
+  "txt_backup_recommend_backblaze_step_1": "先註冊或登入 Backblaze 賬號。",
+  "txt_backup_recommend_backblaze_step_2_prefix": "打開",
+  "txt_backup_recommend_backblaze_step_2_suffix": "，點擊創建一個桶，只輸入桶名字，其他地方不修改，然後創建。",
+  "txt_backup_recommend_backblaze_step_3": "創建後顯示的 Endpoint 就是 S3 端點；桶名字就是儲存桶；區域填寫 Endpoint 中間的區域值，例如 us-west-004。",
+  "txt_backup_recommend_backblaze_step_4_prefix": "打開",
+  "txt_backup_recommend_backblaze_step_4_suffix": "，點擊 Add a New Application Key，隨便輸入 Name of Key，其他地方不動，然後創建。",
+  "txt_backup_recommend_backblaze_step_5": "生成結果裡的 keyID 填存取金鑰，applicationKey 填秘密金鑰。",
   "txt_backup_add_destination": "新增地點",
   "txt_backup_schedule_panel_title": "自動備份計劃",
   "txt_backup_schedule_panel_note": "每個備份地點都可以單獨配置自己的每日自動備份計劃。",

webapp/src/styles/dark.css

@@ -351,6 +351,15 @@
   color: var(--muted);
 }
 
+:root[data-theme='dark'] .backup-recommendation-step a {
+  color: var(--primary);
+}
+
+:root[data-theme='dark'] .backup-recommendation-step a:hover,
+:root[data-theme='dark'] .backup-recommendation-step a:focus-visible {
+  color: var(--primary-strong);
+}
+
 :root[data-theme='dark'] .restore-progress-overlay {
   background: var(--overlay-strong);
   backdrop-filter: blur(8px);

webapp/src/styles/management.css

@@ -193,6 +193,18 @@
   line-height: 1.5;
 }
 
+.backup-recommendation-step a {
+  color: #1d4ed8;
+  font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.backup-recommendation-step a:hover,
+.backup-recommendation-step a:focus-visible {
+  color: #1742b0;
+}
+
 .backup-recommendation-inline-note {
   color: #475467;
   line-height: 1.5;