AdminSettings.vue 86 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572
  1. <template>
  2. <div v-if="loaded">
  3. <div class="header bg-primary pb-2 mt-n4">
  4. <div class="container-fluid">
  5. <div class="header-body">
  6. <div class="row align-items-center py-4">
  7. <div class="col-lg-6 col-7">
  8. <p class="display-1 text-white d-inline-block mb-0">Settings</p>
  9. <p class="h3 text-white font-weight-light">Manage your server settings</p>
  10. </div>
  11. </div>
  12. </div>
  13. </div>
  14. </div>
  15. <div class="container">
  16. <div class="row">
  17. <div class="col-12 col-md-3">
  18. <div class="nav-wrapper">
  19. <div class="nav flex-column nav-pills" id="tabs-icons-text" role="tablist" aria-orientation="vertical">
  20. <div v-for="tab in tabs" class="nav-item">
  21. <a class="nav-link mb-sm-3" :class="{ active: tabIndex === tab.id }" href="#" @click.prevent="toggleTab(tab.id)">
  22. <i :class="tab.icon"></i>
  23. <span class="ml-2">{{ tab.title }}</span>
  24. </a>
  25. </div>
  26. </div>
  27. </div>
  28. </div>
  29. <div class="col-12 col-md-9">
  30. <div class="card shadow mt-3">
  31. <div class="card-body">
  32. <div class="tab-content">
  33. <div v-if="tabIndex === 1" class="tab-pane fade show active">
  34. <tab-header title="Settings" :saving="isSubmitting" :saved="isSubmittingTimeout" @save="handleSave('overview')" />
  35. <div class="row">
  36. <div class="col-12 col-md-6">
  37. <div class="card shadow-none border card-body" style="padding: 1.1rem 1.6rem">
  38. <div class="form-group mb-0">
  39. <label for="form-summary" class="font-weight-bold">Registration Status</label>
  40. <select v-model="features.registration_status" class="form-control form-control-muted">
  41. <option value="open" >Open - Anyone can register</option>
  42. <option value="filtered">Filtered - Anyone can apply (Curated Onboarding)</option>
  43. <option value="closed">Closed - Nobody can register</option>
  44. </select>
  45. </div>
  46. </div>
  47. <checkbox
  48. name="Cloud Storage"
  49. :value="features.cloud_storage"
  50. description="Store photos and videos on S3 compatible object storage providers."
  51. @change="handleChange($event, 'features', 'cloud_storage')"
  52. />
  53. <checkbox
  54. name="ActivityPub"
  55. :value="features.activitypub_enabled"
  56. description="ActivityPub federation, compatible with Pixelfed, Mastodon and other projects."
  57. @change="handleChange($event, 'features', 'activitypub_enabled')"
  58. />
  59. <checkbox
  60. name="Authorized Fetch Mode"
  61. :value="features.authorized_fetch"
  62. description="Strictly enforce domain restrictions by enabling Authorized Fetch mode."
  63. @change="handleChange($event, 'features', 'authorized_fetch')"
  64. />
  65. <checkbox
  66. name="Account Migration"
  67. :value="features.account_migration"
  68. description="Allow local accounts to migrate to other local or remote accounts."
  69. @change="handleChange($event, 'features', 'account_migration')"
  70. />
  71. </div>
  72. <div class="col-12 col-md-6">
  73. <checkbox
  74. name="Mobile APIs"
  75. :value="features.mobile_apis"
  76. description="Enable apis required for official mobile app support and 3rd party apps."
  77. @change="handleChange($event, 'features', 'mobile_apis')"
  78. />
  79. <checkbox
  80. name="Stories"
  81. :value="features.stories"
  82. description="Allow users to share federated ephemeral Stories that disappear after 24 hours."
  83. @change="handleChange($event, 'features', 'stories')"
  84. />
  85. <checkbox
  86. name="Instagram Import"
  87. :value="features.instagram_import"
  88. description="Enable users to use the <span class='font-weight-bold'>experimental</span> Instagram Import support."
  89. @change="handleChange($event, 'features', 'instagram_import')"
  90. />
  91. <!-- <checkbox
  92. name="Allowlist Mode"
  93. :value="features.activitypub_enabled"
  94. description="Permit interactions only with instances you specifically authorize, both for sending and receiving."
  95. @change="handleChange($event, 'features', 'activitypub_enabled')"
  96. /> -->
  97. <checkbox
  98. name="Spam detection"
  99. :value="features.autospam_enabled"
  100. description="Detect and remove spam from timelines using the automated Autospam detection."
  101. @change="handleChange($event, 'features', 'autospam_enabled')"
  102. />
  103. </div>
  104. </div>
  105. </div>
  106. <div v-else-if="tabIndex === 'landing'" class="tab-pane fade show active" role="tabpanel">
  107. <tab-header title="Landing" :saving="isSubmitting" :saved="isSubmittingTimeout" @save="handleSave('landing')" />
  108. <div class="row">
  109. <div class="col-12 col-md-6">
  110. <div class="card shadow-none border card-body" style="padding: 1.1rem 1.6rem">
  111. <div class="form-group mb-0">
  112. <label for="form-summary" class="font-weight-bold">Admin Account</label>
  113. <select v-model="landing.current_admin" class="form-control form-control-muted">
  114. <option disabled="" value="0">Select a designated admin</option>
  115. <option v-for="(acct, index) in landing.admins" :key="'pfc-' + acct + index" :value="acct.profile_id">{{ acct.username }}</option>
  116. </select>
  117. </div>
  118. </div>
  119. <checkbox
  120. name="Show Directory"
  121. :value="landing.show_directory"
  122. description="Show the account directory on the landing page for guest users."
  123. @change="handleChange($event, 'landing', 'show_directory')"
  124. />
  125. </div>
  126. <div class="col-12 col-md-6">
  127. <checkbox
  128. name="Show Explore Feed"
  129. :value="landing.show_explore"
  130. description="Show the explore feed of popular posts on the landing page for guest users."
  131. @change="handleChange($event, 'landing', 'show_explore')"
  132. />
  133. </div>
  134. </div>
  135. </div>
  136. <div v-else-if="tabIndex === 'branding'" class="tab-pane fade show active" role="tabpanel">
  137. <tab-header title="Branding" :saving="isSubmitting" :saved="isSubmittingTimeout" @save="handleSave('branding')" />
  138. <div class="row">
  139. <div class="col-12 col-md-8">
  140. <div class="card shadow-none border card-body" style="padding: 1.1rem 1.6rem">
  141. <div class="form-group mb-1">
  142. <label for="form-summary" class="font-weight-bold">Server Name</label>
  143. <input
  144. class="form-control form-control-muted"
  145. placeholder="Pixelfed"
  146. v-model="branding.name" />
  147. </div>
  148. <p class="help-text small text-muted mb-0">
  149. The instance name used in titles, metadata and apis.
  150. </p>
  151. </div>
  152. <div class="card shadow-none border card-body">
  153. <div class="form-group mb-1">
  154. <label for="form-summary" class="font-weight-bold">Short Description</label>
  155. <textarea
  156. class="form-control form-control-muted"
  157. placeholder="Pixelfed"
  158. rows="4"
  159. v-model="branding.short_description"></textarea>
  160. </div>
  161. <p class="help-text small text-muted mb-0">
  162. Short description of instance used on various pages and apis.
  163. </p>
  164. </div>
  165. <div class="card shadow-none border card-body">
  166. <div class="form-group mb-1">
  167. <label for="form-summary" class="font-weight-bold">Long Description</label>
  168. <textarea
  169. class="form-control form-control-muted"
  170. placeholder="Pixelfed"
  171. rows="8"
  172. v-model="branding.long_description"></textarea>
  173. </div>
  174. <p class="help-text small text-muted mb-0">
  175. Longer description of instance used on about page.
  176. </p>
  177. </div>
  178. </div>
  179. <div class="col-12 col-md-4">
  180. <p>
  181. <a class="btn btn-dark btn-block" href="/i/admin/settings/custom-css">Edit Custom CSS</a>
  182. </p>
  183. </div>
  184. </div>
  185. </div>
  186. <div v-else-if="tabIndex === 'media'" class="tab-pane fade show active" role="tabpanel">
  187. <tab-header title="Media" :saving="isSubmitting" :saved="isSubmittingTimeout" @save="handleSave('media')" />
  188. <div class="row">
  189. <div class="col-12 col-md-6">
  190. <div class="card shadow-none border card-body">
  191. <div class="form-group mb-1">
  192. <label class="font-weight-bold text-muted">Max Media Size</label>
  193. <div class="input-group mb-0">
  194. <input
  195. type="text"
  196. class="form-control"
  197. placeholder="15000"
  198. aria-label="Max media size"
  199. aria-describedby="maxMediaSize"
  200. v-model="media.max_photo_size">
  201. <div class="input-group-append">
  202. <span class="input-group-text" id="maxMediaSize">= {{ maxMediaSizeToMb }}</span>
  203. </div>
  204. </div>
  205. </div>
  206. <p class="help-text small text-muted mb-0">
  207. Maximum file upload size in KB
  208. </p>
  209. </div>
  210. <checkbox
  211. name="Optimize Images"
  212. :value="media.optimize_image"
  213. description="Enable to optimize images and generate thumbnails for local image media uploads."
  214. @change="handleChange($event, 'media', 'optimize_image')"
  215. />
  216. <checkbox
  217. name="Optimize Video"
  218. :value="media.optimize_video"
  219. description="Enable to generate video thumbnails for local video media uploads."
  220. @change="handleChange($event, 'media', 'optimize_video')"
  221. />
  222. <div class="card shadow-none border card-body">
  223. <div class="form-group mb-1">
  224. <label class="font-weight-bold text-muted">Media Types</label>
  225. <div class="list-group">
  226. <div v-for="(mediaType, key) in mediaTypes" class="list-group-item py-2">
  227. <div class="custom-control custom-checkbox">
  228. <input
  229. type="checkbox"
  230. class="custom-control-input"
  231. :name="key"
  232. :id="key"
  233. v-model="mediaTypes[key]">
  234. <label class="custom-control-label font-weight-bold" :for="key">{{ key }}</label>
  235. </div>
  236. </div>
  237. </div>
  238. </div>
  239. <p class="help-text small text-muted mb-0">
  240. Supported mime types for media uploads
  241. </p>
  242. </div>
  243. </div>
  244. <div class="col-12 col-md-6">
  245. <div class="card shadow-none border card-body">
  246. <div class="form-group mb-1">
  247. <label class="font-weight-bold text-muted">Photo Album Limit</label>
  248. <input
  249. type="number"
  250. min="1"
  251. max="20"
  252. class="form-control"
  253. name="max_album_length"
  254. v-model="media.max_album_length">
  255. </div>
  256. <p class="help-text small text-muted mb-0">
  257. The maximum number of photos or videos per album
  258. </p>
  259. </div>
  260. <transition name="fade">
  261. <div v-if="media.optimize_image" class="card shadow-none border card-body">
  262. <div class="form-group mb-1">
  263. <label class="font-weight-bold text-muted">Image Quality</label>
  264. <input
  265. type="number"
  266. min="20"
  267. max="100"
  268. class="form-control"
  269. name="image_quality"
  270. v-model="media.image_quality">
  271. </div>
  272. <p class="help-text small text-muted mb-0">
  273. Image optimization quality from 0-100%.
  274. </p>
  275. </div>
  276. </transition>
  277. </div>
  278. </div>
  279. </div>
  280. <div v-else-if="tabIndex === 'platform'" class="tab-pane fade show active" role="tabpanel">
  281. <tab-header title="Platform" :saving="isSubmitting" :saved="isSubmittingTimeout" @save="handleSave('platform')" />
  282. <div class="row">
  283. <div class="col-12 col-md-6">
  284. <checkbox
  285. name="Allow Profile Embeds"
  286. :value="platform.allow_profile_embeds"
  287. description="Allow anyone to embed public profiles on other websites."
  288. @change="handleChange($event, 'platform', 'allow_profile_embeds')"
  289. />
  290. <div class="card shadow-none border card-body">
  291. <div class="form-group mb-0">
  292. <div class="custom-control custom-checkbox">
  293. <input
  294. type="checkbox"
  295. name="allow_app_registrations"
  296. class="custom-control-input"
  297. id="platform1"
  298. :disabled="features.registration_status !== 'open'"
  299. v-model="platform.allow_app_registration">
  300. <label class="custom-control-label font-weight-bold" for="platform1">Allow App Registrations</label>
  301. </div>
  302. <p v-if="features.registration_status !== 'open'" class="mb-0 small text-muted">Requires open registration to be enabled.</p>
  303. <p v-else class="mb-0 small">Allow users to register via the official Pixelfed mobile application.</p>
  304. </div>
  305. </div>
  306. <checkbox
  307. name="Custom Emoji"
  308. :value="platform.custom_emoji_enabled"
  309. description="Enable federated custom emoji that is compatible with Mastodon, Pleroma and others."
  310. @change="handleChange($event, 'platform', 'custom_emoji_enabled')"
  311. />
  312. <template v-if="features.registration_status === 'open' && features.allow_app_registration">
  313. <div class="card shadow-none border card-body">
  314. <div class="form-group mb-1">
  315. <label class="font-weight-bold text-muted">app_registration_rate_limit_attempts</label>
  316. <input
  317. type="number"
  318. class="form-control"
  319. name="app_registration_rate_limit_attempts"
  320. v-model="platform.app_registration_rate_limit_attempts">
  321. </div>
  322. <p class="help-text small text-muted mb-0">
  323. app_registration_rate_limit_attempts.
  324. </p>
  325. </div>
  326. <div class="card shadow-none border card-body">
  327. <div class="form-group mb-1">
  328. <label class="font-weight-bold text-muted">app_registration_rate_limit_decay</label>
  329. <input
  330. type="number"
  331. class="form-control"
  332. name="app_registration_rate_limit_decay"
  333. v-model="platform.app_registration_rate_limit_decay">
  334. </div>
  335. <p class="help-text small text-muted mb-0">
  336. app_registration_rate_limit_decay
  337. </p>
  338. </div>
  339. </template>
  340. </div>
  341. <div class="col-12 col-md-6">
  342. <checkbox
  343. name="Allow Post Embeds"
  344. :value="platform.allow_post_embeds"
  345. description="Allow anyone to embed public posts on other websites."
  346. @change="handleChange($event, 'platform', 'allow_post_embeds')"
  347. />
  348. <div class="card shadow-none border card-body">
  349. <div class="form-group mb-1">
  350. <div class="custom-control custom-checkbox">
  351. <input
  352. type="checkbox"
  353. name="hcaps"
  354. class="custom-control-input"
  355. id="hcp"
  356. v-model="platform.captcha_enabled">
  357. <label class="custom-control-label font-weight-bold" for="hcp">Enable hCaptcha</label>
  358. </div>
  359. </div>
  360. <template v-if="platform.captcha_enabled">
  361. <hr class="my-2">
  362. <div class="row">
  363. <div class="col-12 col-md-6">
  364. <div class="form-group my-1">
  365. <label class="text-muted small">hCaptcha Secret</label>
  366. <input
  367. type="text"
  368. class="form-control"
  369. name="captcha_secret"
  370. v-model="platform.captcha_secret">
  371. </div>
  372. </div>
  373. <div class="col-12 col-md-6">
  374. <div class="form-group my-1">
  375. <label class="text-muted small">hCaptcha Sitekey</label>
  376. <input
  377. type="text"
  378. class="form-control"
  379. name="captcha_sitekey"
  380. v-model="platform.captcha_sitekey">
  381. </div>
  382. </div>
  383. </div>
  384. <hr class="mt-2 mb-4">
  385. <div class="row">
  386. <div class="col-12 col-lg-6">
  387. <div class="custom-control custom-checkbox">
  388. <input
  389. type="checkbox"
  390. name="captcha_on_login"
  391. class="custom-control-input"
  392. id="captcha_on_login"
  393. v-model="platform.captcha_on_login">
  394. <label class="custom-control-label font-weight-bold" for="captcha_on_login">Login Captcha</label>
  395. </div>
  396. </div>
  397. <div class="col-12 col-lg-6">
  398. <div class="custom-control custom-checkbox">
  399. <input
  400. type="checkbox"
  401. name="captcha_on_register"
  402. class="custom-control-input"
  403. id="captcha_on_register"
  404. v-model="platform.captcha_on_register">
  405. <label class="custom-control-label font-weight-bold" for="captcha_on_register">Register Captcha</label>
  406. </div>
  407. </div>
  408. </div>
  409. <hr class="mt-4 mb-2">
  410. </template>
  411. <p class="help-text small text-muted mb-0">
  412. Enable hCaptcha on login and register pages
  413. </p>
  414. </div>
  415. <template v-if="features.registration_status === 'open' && features.allow_app_registration">
  416. <div class="card shadow-none border card-body">
  417. <div class="form-group mb-1">
  418. <label class="font-weight-bold text-muted">app_registration_confirm_rate_limit_attempts</label>
  419. <input
  420. type="number"
  421. class="form-control"
  422. name="app_registration_confirm_rate_limit_attempts"
  423. v-model="platform.app_registration_confirm_rate_limit_attempts">
  424. </div>
  425. <p class="help-text small text-muted mb-0">
  426. app_registration_confirm_rate_limit_attempts.
  427. </p>
  428. </div>
  429. <div class="card shadow-none border card-body">
  430. <div class="form-group mb-1">
  431. <label class="font-weight-bold text-muted">app_registration_confirm_rate_limit_decay</label>
  432. <input
  433. type="number"
  434. class="form-control"
  435. name="app_registration_confirm_rate_limit_decay"
  436. v-model="platform.app_registration_confirm_rate_limit_decay">
  437. </div>
  438. <p class="help-text small text-muted mb-0">
  439. app_registration_confirm_rate_limit_decay.
  440. </p>
  441. </div>
  442. </template>
  443. </div>
  444. </div>
  445. </div>
  446. <div v-else-if="tabIndex === 'posts'" class="tab-pane fade show active" role="tabpanel">
  447. <tab-header title="Posts" :saving="isSubmitting" :saved="isSubmittingTimeout" @save="handleSave('posts')" />
  448. <div class="row">
  449. <div class="col-12 col-md-6">
  450. <div class="card shadow-none border card-body">
  451. <div class="form-group mb-1">
  452. <label class="font-weight-bold text-muted">Max Caption Length</label>
  453. <input
  454. type="number"
  455. min="1"
  456. max="10000"
  457. class="form-control"
  458. name="max_caption_limit"
  459. v-model="posts.max_caption_length">
  460. </div>
  461. <p class="help-text small text-muted mb-0">
  462. The maximum character count of post captions. We recommend a limit between 500-2000.
  463. </p>
  464. </div>
  465. </div>
  466. <div class="col-12 col-md-6">
  467. <div class="card shadow-none border card-body">
  468. <div class="form-group mb-1">
  469. <label class="font-weight-bold text-muted">Max Alttext Length</label>
  470. <input
  471. type="number"
  472. min="1"
  473. max="10000"
  474. class="form-control"
  475. name="max_altext_length"
  476. v-model="posts.max_altext_length">
  477. </div>
  478. <p class="help-text small text-muted mb-0">
  479. The maximum character count of post media alttext captions. We recommend a limit between 2000-10000.
  480. </p>
  481. </div>
  482. </div>
  483. </div>
  484. </div>
  485. <div v-else-if="tabIndex === 'rules'" class="tab-pane fade show active" role="tabpanel">
  486. <tab-header title="Rules" :saving="isSubmitting" :saved="isSubmittingTimeout" @save="handleSave('rules')" />
  487. <div class="row">
  488. <div class="col-12 mb-3">
  489. <div v-if="hasDuplicateRulesComputed" class="alert alert-danger">
  490. <p class="font-weight-bold mb-0">Duplicate rules detected, you should fix this!</p>
  491. </div>
  492. <div class="position-relative">
  493. <div class="card shadow-none border">
  494. <div class="card-header py-2 bg-primary text-white font-weight-bold text-center">Active Rules</div>
  495. <div class="list-group list-group-flush">
  496. <div
  497. v-for="(rule, idx) in rulesComputed"
  498. class="list-group-item">
  499. <div class="d-flex justify-content-between align-items-start">
  500. <div class="d-flex gap-1 align-items-start">
  501. <div class="rule-badge">
  502. <div class="rule-badge-inner">{{ idx + 1 }}</div>
  503. </div>
  504. <admin-read-more
  505. :key="rule"
  506. class="text-dark rule-text"
  507. :content="rule"
  508. :maxLength="140"
  509. :initialLimit="30"
  510. fontSize="13" />
  511. </div>
  512. <button
  513. class="btn btn-link btn-sm"
  514. :disabled="isDeletingRule"
  515. @click.prevent="handleDeleteRule(rule, idx, $event)">
  516. <i class="fas fa-trash-alt text-danger"></i>
  517. </button>
  518. </div>
  519. </div>
  520. <div v-if="!rules || !rules.length" class="list-group-item">
  521. <p class="text-center mb-0">No rules set!</p>
  522. </div>
  523. </div>
  524. </div>
  525. <div v-if="!showAllRules && rules.length > 2" class="d-flex justify-content-center" style="position:absolute;width: 100%;padding-top: 10rem;bottom:0;background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1));">
  526. <button class="btn btn-dark font-weight-bold rounded-pill btn-block" @click.prevent="showAllRules = true">Show all rules</button>
  527. </div>
  528. </div>
  529. </div>
  530. <div class="col-12 col-md-6">
  531. <div class="card shadow-none border card-body">
  532. <div class="form-group mb-1">
  533. <label class="font-weight-bold text-muted">Add New Rule</label>
  534. <textarea
  535. type="text"
  536. class="form-control"
  537. name="new_rule"
  538. rows="5"
  539. minlength="5"
  540. maxlength="1000"
  541. placeholder="Add your new rule here..."
  542. :disabled="isSubmittingNewRule || isDeletingRule"
  543. v-model="newRule"></textarea>
  544. </div>
  545. <div class="d-flex justify-content-between align-items-center">
  546. <p class="help-text small text-muted mb-0">
  547. Add a new rule
  548. </p>
  549. <p class="help-text small text-muted mb-0">
  550. {{ newRule && newRule.length ? newRule.length : 0 }}/1000
  551. </p>
  552. </div>
  553. <hr class="my-2">
  554. <p class="mb-0">
  555. <button
  556. class="btn btn-primary btn-sm btn-block font-weight-bold rounded-pill"
  557. :disabled="!newRule || !newRule.length || isSubmittingNewRule || isDeletingRule"
  558. @click.prevent="handleAddRule">Add Rule</button>
  559. </p>
  560. </div>
  561. <button v-if="rules && rules.length" class="btn btn-outline-danger rounded-pill btn-block btn-sm" @click.prevent="handleDeleteAllRules">Delete all rules</button>
  562. </div>
  563. <div v-if="suggestedRulesComputed && suggestedRulesComputed.length" class="col-12 col-md-6">
  564. <div class="border-bottom pb-2 mb-3 d-flex justify-content-between align-items-center">
  565. <p class="font-weight-bold mb-0">Suggested Rules</p>
  566. <a v-if="!rules.length" class="font-weight-bold small" href="#" @click.prevent="importAllDefaultRules">Import All</a>
  567. </div>
  568. <div class="list-group">
  569. <a
  570. v-for="rule in suggestedRulesComputed"
  571. class="list-group-item small"
  572. href="#"
  573. @click.prevent="addSuggestedRule(rule, $event)">{{ rule }}</a>
  574. </div>
  575. </div>
  576. </div>
  577. </div>
  578. <div v-else-if="tabIndex === 'storage'" class="tab-pane fade show active" role="tabpanel">
  579. <tab-header title="Storage" :saving="isSubmitting" :saved="isSubmittingTimeout" @save="handleSave('storage')" />
  580. <div class="row">
  581. <div class="col-12 col-md-6">
  582. <div class="card shadow-none border card-body" style="padding: 1.1rem 1.6rem">
  583. <div class="form-group mb-0">
  584. <label for="form-summary" class="font-weight-bold">Primary Storage Disk</label>
  585. <select v-model="storage.primary_disk" class="form-control form-control-muted">
  586. <option value="local" >Local</option>
  587. <option value="cloud">Cloud/S3</option>
  588. </select>
  589. </div>
  590. <p class="help-text small text-muted mt-2 mb-0">
  591. The storage disk where avatars and media uploads are stored.
  592. </p>
  593. </div>
  594. </div>
  595. <div class="col-12 col-md-6">
  596. <div class="card border">
  597. <div class="card-header bg-gradient-primary">
  598. <p class="text-center mb-0 text-white font-weight-bold">Cloud Disk Config</p>
  599. </div>
  600. <div v-if="!showDiskConfig" class="card-body">
  601. <p class="text-center mb-0">
  602. <a
  603. class="btn btn-primary bg-gradient-primary shadow-lg rounded-pill"
  604. href="#"
  605. @click.prevent="showDiskConfig = true">
  606. View/Edit
  607. </a>
  608. </p>
  609. </div>
  610. <div v-else class="card-body">
  611. <div class="form-group mb-4 d-flex align-items-center gap-1">
  612. <label for="form-summary" class="font-weight-bold mb-0">Disk</label>
  613. <select v-model="storage.disk_config.driver" class="form-control form-control-muted mb-0">
  614. <option value="s3" >S3</option>
  615. <option value="spaces">DigitalOcean Spaces</option>
  616. </select>
  617. </div>
  618. <form-input
  619. name="Key"
  620. :value="storage.disk_config.key"
  621. description=""
  622. :isCard="false"
  623. :isInline="true"
  624. @change="handleSubChange($event, 'storage', 'disk_config', 'key')"
  625. />
  626. <form-input
  627. name="Secret"
  628. :value="storage.disk_config.secret"
  629. description=""
  630. :isCard="false"
  631. :isInline="true"
  632. @change="handleSubChange($event, 'storage', 'disk_config', 'secret')"
  633. />
  634. <form-input
  635. name="Region"
  636. :value="storage.disk_config.region"
  637. description=""
  638. :isCard="false"
  639. :isInline="true"
  640. @change="handleSubChange($event, 'storage', 'disk_config', 'region')"
  641. />
  642. <form-input
  643. name="Bucket"
  644. :value="storage.disk_config.bucket"
  645. description=""
  646. :isCard="false"
  647. :isInline="true"
  648. @change="handleSubChange($event, 'storage', 'disk_config', 'bucket')"
  649. />
  650. <form-input
  651. name="Endpoint"
  652. :value="storage.disk_config.endpoint"
  653. description=""
  654. :isCard="false"
  655. :isInline="true"
  656. @change="handleSubChange($event, 'storage', 'disk_config', 'endpoint')"
  657. />
  658. <form-input
  659. name="Visibility"
  660. :value="storage.disk_config.visibility"
  661. description=""
  662. :isCard="false"
  663. :isInline="true"
  664. :isDisabled="true"
  665. @change="handleSubChange($event, 'storage', 'disk_config', 'visibility')"
  666. />
  667. <form-input
  668. name="Url"
  669. :value="storage.disk_config.url"
  670. description=""
  671. :isCard="false"
  672. :isInline="true"
  673. @change="handleSubChange($event, 'storage', 'disk_config', 'url')"
  674. />
  675. </div>
  676. </div>
  677. </div>
  678. </div>
  679. </div>
  680. <div v-else-if="tabIndex === 'users'" class="tab-pane fade show active" role="tabpanel">
  681. <tab-header title="Users" :saving="isSubmitting" :saved="isSubmittingTimeout" @save="handleSave('users')" />
  682. <div class="row">
  683. <div class="col-12 col-md-6">
  684. <checkbox
  685. name="Require Email Verifications"
  686. :value="users.require_email_verification"
  687. description="Require users to verify their email address is valid before they can use the account."
  688. @change="handleChange($event, 'users', 'require_email_verification')"
  689. />
  690. <form-input
  691. name="Max User Blocks"
  692. :value="users.max_user_blocks.toString()"
  693. description="The max number of account blocks per user."
  694. @change="handleChange($event, 'users', 'max_user_blocks')"
  695. />
  696. <form-input
  697. name="Max User Mutes"
  698. :value="users.max_user_mutes.toString()"
  699. description="The max number of account mutes per user."
  700. @change="handleChange($event, 'users', 'max_user_mutes')"
  701. />
  702. <form-input
  703. name="Max User Domain Blocks"
  704. :value="users.max_domain_blocks.toString()"
  705. description="The max number of domain blocks per user."
  706. @change="handleChange($event, 'users', 'max_domain_blocks')"
  707. />
  708. </div>
  709. <div class="col-12 col-md-6">
  710. <div class="card shadow-none border card-body">
  711. <div class="form-group mb-0">
  712. <div class="custom-control custom-checkbox">
  713. <input type="checkbox" name="enforce_account_limit" class="custom-control-input" id="users2" v-model="users.enforce_account_limit">
  714. <label class="custom-control-label font-weight-bold" for="users2">Enforce Account Limit</label>
  715. </div>
  716. <p class="mb-0 small">Set a storage limit per user account for all uploaded media (photo + video).</p>
  717. </div>
  718. <transition name="fade">
  719. <div v-if="users.enforce_account_limit">
  720. <hr class="my-2">
  721. <div class="form-group mb-1">
  722. <div class="input-group mb-0">
  723. <input
  724. type="text"
  725. class="form-control"
  726. placeholder="15000"
  727. aria-label="Max account size"
  728. aria-describedby="maxMediaSize"
  729. v-model="users.max_account_size">
  730. <div class="input-group-append">
  731. <span class="input-group-text">= {{maxAccountSizeToMb }}</span>
  732. </div>
  733. </div>
  734. </div>
  735. <p class="help-text small text-muted mb-0">
  736. Maximum file storage limit per user account.
  737. </p>
  738. </div>
  739. </transition>
  740. </div>
  741. <div class="card shadow-none border">
  742. <div class="card-body">
  743. <div class="form-group mb-0">
  744. <div class="custom-control custom-checkbox">
  745. <input type="checkbox" name="admin_autofollow" class="custom-control-input" id="users4" v-model="users.admin_autofollow">
  746. <label class="custom-control-label font-weight-bold" for="users4">Autofollow Accounts</label>
  747. </div>
  748. <p class="mb-0 small">Force new accounts to follow accounts you specify below</p>
  749. </div>
  750. </div>
  751. <transition name="fade">
  752. <div v-if="users.admin_autofollow" class="list-group list-group-flush">
  753. <div v-if="users.admin_autofollow_accounts?.length">
  754. <div v-for="user in users.admin_autofollow_accounts" class="list-group-item">
  755. <div class="d-flex justify-content-between align-items-center">
  756. <p class="font-weight-bold mb-0">&commat;{{ user }}</p>
  757. <button class="btn btn-link p-0" @click.prevent="removeAutofollow(user, $event)"><i class="fas fa-trash-alt text-danger"></i></button>
  758. </div>
  759. </div>
  760. </div>
  761. <div v-else class="list-group-item">
  762. <p class="text-center mb-0">No autofollow accounts active.</p>
  763. </div>
  764. </div>
  765. </transition>
  766. <transition name="fade">
  767. <div v-if="users.admin_autofollow && (users.admin_autofollow_accounts && users.admin_autofollow_accounts.length < 5)" class="card-footer">
  768. <button
  769. class="btn btn-primary btn-block rounded-pill"
  770. @click.prevent="addAutofollow">Add Autofollow Account</button>
  771. </div>
  772. </transition>
  773. </div>
  774. </div>
  775. </div>
  776. </div>
  777. </div>
  778. </div>
  779. </div>
  780. </div>
  781. </div>
  782. </div>
  783. </div>
  784. <div v-else>
  785. <div class="container my-5 py-5 text-center">
  786. <div class="spinner-border text-primary" role="status">
  787. <span class="sr-only">Loading...</span>
  788. </div>
  789. </div>
  790. </div>
  791. </template>
  792. <script type="text/javascript">
  793. import AdminReadMore from "./partial/AdminReadMore.vue";
  794. import AdminSettingsTabHeader from "./partial/AdminSettingsTabHeader.vue";
  795. import Checkbox from "./partial/AdminSettingsCheckbox.vue";
  796. import FormInput from "./partial/AdminSettingsInput.vue";
  797. export default {
  798. components: {
  799. "admin-read-more": AdminReadMore,
  800. "tab-header": AdminSettingsTabHeader,
  801. "checkbox": Checkbox,
  802. "form-input": FormInput
  803. },
  804. data() {
  805. return {
  806. loaded: false,
  807. initialData: {},
  808. tabIndex: 1,
  809. tabbies: [
  810. 'landing',
  811. 'branding',
  812. 'media',
  813. 'posts',
  814. 'platform',
  815. 'rules',
  816. 'users',
  817. 'storage'
  818. ],
  819. tabs: [
  820. { id: 1, title: "Overview", icon: "far fa-home" },
  821. // { id: 2, title: "Status", icon: "far fa-asterisk" },
  822. { id: 'landing', title: "Landing", icon: "far fa-info-circle" },
  823. { id: 'branding', title: "Branding", icon: "far fa-user-crown" },
  824. { id: 'media', title: "Media", icon: "far fa-image" },
  825. { id: 'platform', title: "Platform", icon: "far fa-database" },
  826. { id: 'posts', title: "Posts", icon: "far fa-heart" },
  827. { id: 'rules', title: "Rules", icon: "far fa-eye-slash" },
  828. { id: 'storage', title: "Storage", icon: "far fa-hdd" },
  829. { id: 'users', title: "Users", icon: "far fa-users" },
  830. ],
  831. isSubmitting: false,
  832. isSubmittingTimeout: false,
  833. isSubmittingTimeoutHandler: undefined,
  834. features: [],
  835. landing: {
  836. current_admin: 0,
  837. },
  838. branding: [],
  839. media: [],
  840. mediaTypes: {
  841. jpeg: false,
  842. png: false,
  843. gif: false,
  844. webp: false,
  845. avif: false,
  846. heic: false,
  847. mp4: false,
  848. mov: false,
  849. },
  850. rules: [],
  851. users: [],
  852. posts: [],
  853. platform: [],
  854. storage: [],
  855. newRule: undefined,
  856. isSubmittingNewRule: false,
  857. isDeletingRule: false,
  858. suggestedRules: [],
  859. hasDuplicateRules: false,
  860. showAllRules: false,
  861. showDiskConfig: false,
  862. }
  863. },
  864. computed: {
  865. maxMediaSizeToMb: {
  866. get() {
  867. if(!this.media || !this.media.max_photo_size) {
  868. return '0.00 MB';
  869. }
  870. return (this.media.max_photo_size / 1000).toFixed(2) + ' MB';
  871. }
  872. },
  873. maxAccountSizeToMb: {
  874. get() {
  875. if(!this.users || !this.users.max_account_size) {
  876. return '0.00 MB';
  877. }
  878. const mb = (this.users.max_account_size / 1024);
  879. if(mb > 1000000) {
  880. return (mb / 1000000).toFixed(1) + 'TB';
  881. }
  882. if(mb > 1000) {
  883. return (mb / 1024).toFixed(2) + 'GB';
  884. }
  885. return (this.users.max_account_size / 1024).toFixed(2) + ' MB';
  886. }
  887. },
  888. rulesComputed: {
  889. get() {
  890. if(!this.rules || !this.rules.length) {
  891. return [];
  892. }
  893. if(this.rules.length > 2) {
  894. if(!this.showAllRules) {
  895. return this.rules.slice(0, 2);
  896. }
  897. }
  898. return this.rules;
  899. }
  900. },
  901. suggestedRulesComputed: {
  902. get() {
  903. if(!this.rules || !this.rules.length) {
  904. return this.suggestedRules;
  905. }
  906. return this.suggestedRules.filter(rule => {
  907. if(this.rules.includes(rule)) {
  908. return false;
  909. }
  910. return true;
  911. });
  912. }
  913. },
  914. hasDuplicateRulesComputed: {
  915. get() {
  916. if(!this.rules || !this.rules.length) {
  917. return false;
  918. }
  919. const array = this.rules;
  920. const duplicates = array.filter((item, index) => array.indexOf(item) !== index);
  921. return duplicates.length;
  922. }
  923. },
  924. activeMediaTypes: {
  925. get() {
  926. let res = '';
  927. if(this.mediaTypes.jpeg) {
  928. res += 'image/jpeg,'
  929. }
  930. if(this.mediaTypes.png) {
  931. res += 'image/png,'
  932. }
  933. if(this.mediaTypes.gif) {
  934. res += 'image/gif,'
  935. }
  936. if(this.mediaTypes.webp) {
  937. res += 'image/webp,'
  938. }
  939. if(this.mediaTypes.mp4) {
  940. res += 'video/mp4'
  941. }
  942. if(this.mediaTypes.avif) {
  943. res += 'image/avif'
  944. }
  945. if(res.endsWith(',')) {
  946. res = res.slice(0, -1);
  947. }
  948. return res;
  949. }
  950. }
  951. },
  952. mounted() {
  953. this.fetchInitialData();
  954. const params = new URL(window.location.href);
  955. if(params.searchParams.has('t')) {
  956. const tab = params.searchParams.get('t');
  957. if(this.tabbies.includes(tab)) {
  958. this.tabIndex = tab;
  959. } else {
  960. window.history.pushState(null, null, '/i/admin/settings')
  961. }
  962. }
  963. },
  964. methods: {
  965. toggleTab(idx) {
  966. clearTimeout(this.isSubmittingTimeoutHandler)
  967. this.isSubmittingTimeout = false;
  968. this.tabIndex = idx;
  969. this.showAllRules = false;
  970. if(this.tabbies.includes(idx)) {
  971. window.history.pushState(null, null, '/i/admin/settings?t=' + idx);
  972. } else {
  973. window.history.pushState(null, null, '/i/admin/settings');
  974. }
  975. },
  976. fetchInitialData() {
  977. axios.get('/i/admin/api/settings/fetch')
  978. .then(res => {
  979. this.initialData = res.data;
  980. this.features = res.data.features;
  981. this.landing = res.data.landing;
  982. this.branding = res.data.branding;
  983. this.media = res.data.media;
  984. this.setMediaTypes();
  985. this.rules = res.data.rules;
  986. this.users = res.data.users;
  987. this.suggestedRules = res.data['suggested_rules'];
  988. this.posts = res.data.posts;
  989. this.platform = res.data.platform;
  990. this.storage = res.data.storage;
  991. })
  992. .then(() => {
  993. this.loaded = true;
  994. })
  995. },
  996. setMediaTypes() {
  997. const types = this.media.media_types.split(',');
  998. if(types && types.length) {
  999. types.forEach((type) => {
  1000. let mime = type.split('/')[1];
  1001. if(['jpeg', 'png', 'gif', 'webp', 'mp4', 'avif'].includes(mime)) {
  1002. this.mediaTypes[mime] = true;
  1003. }
  1004. })
  1005. }
  1006. },
  1007. formatCount(c) {
  1008. return window.App.util.format.count(c);
  1009. },
  1010. formatDateTime(ts) {
  1011. let date = new Date(ts);
  1012. return new Intl.DateTimeFormat('en-US', {dateStyle: 'medium', timeStyle: 'short'}).format(date);
  1013. },
  1014. formatDate(ts) {
  1015. let date = new Date(ts);
  1016. return new Intl.DateTimeFormat('en-US', {month: 'short', year: 'numeric'}).format(date);
  1017. },
  1018. formatTimestamp(ts) {
  1019. return window.App.util.format.timeAgo(ts);
  1020. },
  1021. handleSave(type) {
  1022. this.isSubmitting = true;
  1023. switch(type) {
  1024. case 'overview':
  1025. return this.saveHome();
  1026. break;
  1027. case 'landing':
  1028. return this.saveLanding();
  1029. break;
  1030. case 'branding':
  1031. return this.saveBranding();
  1032. break;
  1033. case 'posts':
  1034. return this.savePosts();
  1035. break;
  1036. case 'media':
  1037. return this.saveMedia();
  1038. break;
  1039. case 'platform':
  1040. return this.savePlatform();
  1041. break;
  1042. case 'users':
  1043. return this.saveUsers();
  1044. break;
  1045. case 'storage':
  1046. return this.saveStorage();
  1047. break;
  1048. }
  1049. },
  1050. handleAddRule($event) {
  1051. $event.currentTarget?.blur();
  1052. this.isSubmittingNewRule = true;
  1053. axios.post('/i/admin/api/settings/rules/add', {
  1054. rule: this.newRule
  1055. }).then(res => {
  1056. this.rules.push(this.newRule);
  1057. this.newRule = undefined;
  1058. this.isSubmittingNewRule = false;
  1059. this.showAllRules = true;
  1060. })
  1061. .catch(err => {
  1062. if(err.response.data && err.response.data?.message) {
  1063. swal('Error', err.response.data.message, 'error');
  1064. }
  1065. this.isSubmittingNewRule = false;
  1066. })
  1067. },
  1068. addSuggestedRule(rule, $event) {
  1069. $event.currentTarget?.blur();
  1070. this.newRule = rule;
  1071. },
  1072. importAllDefaultRules($event) {
  1073. $event.currentTarget?.blur();
  1074. this.isSubmittingNewRule = true;
  1075. this.showAllRules = true;
  1076. for (var i = this.suggestedRules.length - 1; i >= 0; i--) {
  1077. const rule = this.suggestedRules[i]
  1078. setTimeout(() => {
  1079. axios.post('/i/admin/api/settings/rules/add', {
  1080. rule: rule
  1081. }).then(res => {
  1082. this.rules.push(rule);
  1083. })
  1084. }, (i * 300))
  1085. }
  1086. this.isSubmittingNewRule = false;
  1087. },
  1088. handleDeleteRule(rule, idx, $event) {
  1089. $event.currentTarget?.blur();
  1090. this.isDeletingRule = true;
  1091. axios.post('/i/admin/api/settings/rules/delete', {
  1092. rule: rule,
  1093. }).then(res => {
  1094. this.isDeletingRule = false;
  1095. this.rules = res.data;
  1096. })
  1097. .catch(err => {
  1098. })
  1099. },
  1100. handleDeleteAllRules($event) {
  1101. $event.currentTarget?.blur();
  1102. this.isDeletingRule = true;
  1103. swal({
  1104. title: 'Confirm',
  1105. text: 'Are you sure you want to delete all rules?',
  1106. buttons: true,
  1107. dangerMode: true,
  1108. }).then(res => {
  1109. if(res === true) {
  1110. axios.post('/i/admin/api/settings/rules/delete/all')
  1111. .then(res => {
  1112. this.isDeletingRule = false;
  1113. this.rules = []
  1114. })
  1115. .catch(err => {
  1116. })
  1117. } else {
  1118. this.isDeletingRule = false;
  1119. }
  1120. })
  1121. },
  1122. removeAutofollow(username, $event) {
  1123. $event.currentTarget?.blur();
  1124. axios.post('/i/admin/api/settings/autofollow/delete', {
  1125. username: username
  1126. }).then(res => {
  1127. this.users.admin_autofollow_accounts = res.data.accounts;
  1128. }).catch(err => {
  1129. swal("Oops!", "An error occurred, please try again later!", "error");
  1130. });
  1131. },
  1132. addAutofollow($event) {
  1133. $event.currentTarget?.blur();
  1134. swal({
  1135. text: 'Enter account username',
  1136. content: "input",
  1137. button: {
  1138. text: "Add Autofollow",
  1139. closeModal: false,
  1140. },
  1141. }).then(username => {
  1142. if (!username) throw null;
  1143. axios.post('/i/admin/api/settings/autofollow/add', {
  1144. username: username
  1145. })
  1146. .then(res => {
  1147. if(!res.data.accounts.map(acc => acc.toLowerCase()).includes(username.toLowerCase())) {
  1148. swal("Oops!", "The account you attempted to add does not exist or cannot be added!", "error");
  1149. }
  1150. this.users.admin_autofollow_accounts = res.data.accounts;
  1151. swal.stopLoading();
  1152. swal.close();
  1153. })
  1154. .catch(err => {
  1155. if(err.response.data && err.response.data.message) {
  1156. swal('Error', err.response.data.message, 'error');
  1157. } else {
  1158. swal("Oops!", "The account you attempted to add does not exist or cannot be added!", "error");
  1159. }
  1160. swal.stopLoading();
  1161. swal.close();
  1162. });
  1163. })
  1164. },
  1165. saveHome() {
  1166. axios.post('/i/admin/api/settings/update/home', {
  1167. registration_status: this.features.registration_status,
  1168. cloud_storage: this.features.cloud_storage,
  1169. activitypub_enabled: this.features.activitypub_enabled,
  1170. account_migration: this.features.account_migration,
  1171. mobile_apis: this.features.mobile_apis,
  1172. stories: this.features.stories,
  1173. instagram_import: this.features.instagram_import,
  1174. autospam_enabled: this.features.autospam_enabled,
  1175. authorized_fetch: this.features.authorized_fetch,
  1176. }).then(res => {
  1177. this.isSubmitting = false;
  1178. this.isSubmittingTimeout = true;
  1179. this.isSubmittingTimeoutHandler = setTimeout(() => {
  1180. this.isSubmittingTimeout = false;
  1181. }, 4000);
  1182. })
  1183. },
  1184. saveLanding() {
  1185. axios.post('/i/admin/api/settings/update/landing', {
  1186. current_admin: this.landing.current_admin,
  1187. show_directory: this.landing.show_directory,
  1188. show_explore: this.landing.show_explore
  1189. }).then(res => {
  1190. this.isSubmitting = false;
  1191. this.isSubmittingTimeout = true;
  1192. this.isSubmittingTimeoutHandler = setTimeout(() => {
  1193. this.isSubmittingTimeout = false;
  1194. }, 4000);
  1195. })
  1196. },
  1197. saveBranding() {
  1198. axios.post('/i/admin/api/settings/update/branding', {
  1199. name: this.branding.name,
  1200. short_description: this.branding.short_description,
  1201. long_description: this.branding.long_description
  1202. }).then(res => {
  1203. this.isSubmitting = false;
  1204. this.isSubmittingTimeout = true;
  1205. this.isSubmittingTimeoutHandler = setTimeout(() => {
  1206. this.isSubmittingTimeout = false;
  1207. }, 4000);
  1208. })
  1209. },
  1210. savePosts() {
  1211. axios.post('/i/admin/api/settings/update/posts', {
  1212. max_caption_length: this.posts.max_caption_length,
  1213. max_altext_length: this.posts.max_altext_length,
  1214. }).then(res => {
  1215. this.posts = res.data;
  1216. this.isSubmitting = false;
  1217. this.isSubmittingTimeout = true;
  1218. this.isSubmittingTimeoutHandler = setTimeout(() => {
  1219. this.isSubmittingTimeout = false;
  1220. }, 4000);
  1221. })
  1222. .catch(err => {
  1223. this.isSubmitting = false;
  1224. if(err.response.data && err.response.data.message) {
  1225. swal('Error', err.response.data.message, 'error');
  1226. } else {
  1227. swal('Oops!', 'An error occured', 'error');
  1228. }
  1229. })
  1230. },
  1231. saveMedia() {
  1232. axios.post('/i/admin/api/settings/update/media', {
  1233. image_quality: this.media.image_quality,
  1234. max_album_length: this.media.max_album_length,
  1235. max_photo_size: this.media.max_photo_size,
  1236. media_types: this.activeMediaTypes,
  1237. optimize_image: this.media.optimize_image,
  1238. optimize_video: this.media.optimize_video,
  1239. }).then(res => {
  1240. this.isSubmitting = false;
  1241. this.isSubmittingTimeout = true;
  1242. this.isSubmittingTimeoutHandler = setTimeout(() => {
  1243. this.isSubmittingTimeout = false;
  1244. }, 4000);
  1245. }).catch(err => {
  1246. this.isSubmitting = false;
  1247. if(err.response.data && err.response.data.message) {
  1248. swal('Error', err.response.data.message, 'error');
  1249. } else {
  1250. swal('Oops!', 'An error occured', 'error');
  1251. }
  1252. })
  1253. },
  1254. savePlatform() {
  1255. axios.post('/i/admin/api/settings/update/platform', {
  1256. allow_app_registration: this.platform.allow_app_registration,
  1257. app_registration_rate_limit_attempts: this.platform.app_registration_rate_limit_attempts,
  1258. app_registration_rate_limit_decay: this.platform.app_registration_rate_limit_decay,
  1259. app_registration_confirm_rate_limit_attempts: this.platform.app_registration_confirm_rate_limit_attempts,
  1260. app_registration_confirm_rate_limit_decay: this.platform.app_registration_confirm_rate_limit_decay,
  1261. allow_post_embeds: this.platform.allow_post_embeds,
  1262. allow_profile_embeds: this.platform.allow_profile_embeds,
  1263. captcha_enabled: this.platform.captcha_enabled,
  1264. captcha_secret: this.platform.captcha_secret,
  1265. captcha_sitekey: this.platform.captcha_sitekey,
  1266. captcha_on_login: this.platform.captcha_on_login,
  1267. captcha_on_register: this.platform.captcha_on_register,
  1268. custom_emoji_enabled: this.platform.custom_emoji_enabled,
  1269. }).then(res => {
  1270. this.platform = res.data;
  1271. this.isSubmitting = false;
  1272. this.isSubmittingTimeout = true;
  1273. this.isSubmittingTimeoutHandler = setTimeout(() => {
  1274. this.isSubmittingTimeout = false;
  1275. }, 4000);
  1276. })
  1277. .catch(err => {
  1278. this.isSubmitting = false;
  1279. if(err.response.data && err.response.data.message) {
  1280. swal('Error', err.response.data.message, 'error');
  1281. } else {
  1282. swal('Oops!', 'An error occured', 'error');
  1283. }
  1284. })
  1285. },
  1286. saveUsers() {
  1287. axios.post('/i/admin/api/settings/update/users', {
  1288. require_email_verification: this.users.require_email_verification,
  1289. enforce_account_limit: this.users.enforce_account_limit,
  1290. max_account_size: this.users.max_account_size,
  1291. admin_autofollow: this.users.admin_autofollow,
  1292. admin_autofollow_accounts: this.users.admin_autofollow_accounts,
  1293. max_user_blocks: this.users.max_user_blocks,
  1294. max_user_mutes: this.users.max_user_mutes,
  1295. max_domain_blocks: this.users.max_domain_blocks,
  1296. }).then(res => {
  1297. this.isSubmitting = false;
  1298. this.isSubmittingTimeout = true;
  1299. this.isSubmittingTimeoutHandler = setTimeout(() => {
  1300. this.isSubmittingTimeout = false;
  1301. }, 4000);
  1302. }).catch(err => {
  1303. if(err.response.data.message) {
  1304. swal('Error', err.response.data.message, 'error');
  1305. } else {
  1306. swal('Error', 'An unexpected error occurred, please try again!', 'error');
  1307. }
  1308. this.isSubmitting = false;
  1309. })
  1310. },
  1311. saveStorage() {
  1312. let data = this.showDiskConfig ?
  1313. {
  1314. primary_disk: this.storage.primary_disk,
  1315. update_disk: true,
  1316. disk_config: this.storage.disk_config,
  1317. } : {
  1318. primary_disk: this.storage.primary_disk,
  1319. }
  1320. axios.post('/i/admin/api/settings/update/storage', data)
  1321. .then(res => {
  1322. this.features.cloud_storage = res.data.primary_disk === 'cloud';
  1323. this.isSubmitting = false;
  1324. this.isSubmittingTimeout = true;
  1325. this.isSubmittingTimeoutHandler = setTimeout(() => {
  1326. this.isSubmittingTimeout = false;
  1327. }, 4000);
  1328. }).catch(err => {
  1329. if(err.response.data.error) {
  1330. if(err.response.data.s3_vce) {
  1331. let el = document.createElement('div');
  1332. el.classList.add('text-left');
  1333. el.innerHTML = err.response.data.message;
  1334. let wrapper = document.createElement('div');
  1335. wrapper.appendChild(el);
  1336. swal({
  1337. title: 'Invalid S3 Credentials',
  1338. content: wrapper,
  1339. icon: 'error'
  1340. });
  1341. } else {
  1342. swal('Error', err.response.data.message, 'error');
  1343. }
  1344. }
  1345. this.isSubmitting = false;
  1346. })
  1347. },
  1348. handleChange($event, cat, type) {
  1349. switch(cat) {
  1350. case 'features':
  1351. this.features[type] = $event;
  1352. break;
  1353. case 'landing':
  1354. this.landing[type] = $event;
  1355. break;
  1356. case 'platform':
  1357. this.platform[type] = $event;
  1358. break;
  1359. case 'media':
  1360. this.media[type] = $event;
  1361. break;
  1362. case 'users':
  1363. this.users[type] = $event;
  1364. break;
  1365. case 'storage':
  1366. this.storage[type] = $event;
  1367. break;
  1368. }
  1369. console.log($event)
  1370. console.log(type)
  1371. },
  1372. handleSubChange($event, cat, type, sub) {
  1373. switch(cat) {
  1374. case 'features':
  1375. this.features[type][sub] = $event;
  1376. break;
  1377. case 'landing':
  1378. this.landing[type][sub] = $event;
  1379. break;
  1380. case 'platform':
  1381. this.platform[type][sub] = $event;
  1382. break;
  1383. case 'media':
  1384. this.media[type][sub] = $event;
  1385. break;
  1386. case 'users':
  1387. this.users[type][sub] = $event;
  1388. break;
  1389. case 'storage':
  1390. this.storage[type][sub] = $event;
  1391. break;
  1392. }
  1393. console.log($event)
  1394. console.log(type)
  1395. },
  1396. },
  1397. watch: {
  1398. }
  1399. }
  1400. </script>
  1401. <style lang="scss" scoped>
  1402. .rule-badge {
  1403. display: flex;
  1404. width: 34px;
  1405. height: 34px;
  1406. justify-content: center;
  1407. align-items: center;
  1408. background-color: #fff;
  1409. border-radius: 34px;
  1410. border: 2px solid var(--primary);
  1411. &-inner {
  1412. display: flex;
  1413. justify-content: center;
  1414. align-items: center;
  1415. width: 26px;
  1416. height: 26px;
  1417. border-radius: 26px;
  1418. background-color: var(--primary);
  1419. color: #fff;
  1420. font-weight: bold;
  1421. font-size: 13px;
  1422. }
  1423. }
  1424. .rule-text {
  1425. max-width: 90%;
  1426. margin-bottom: 0px;
  1427. font-size: 14px;
  1428. }
  1429. .gap-1 {
  1430. gap: 1rem;
  1431. }
  1432. </style>