xray_outbound_modal.html 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. {{define "outModal"}}
  2. <a-modal id="out-modal" v-model="outModal.visible" :title="outModal.title" @ok="outModal.ok"
  3. :confirm-loading="outModal.confirmLoading" :closable="true" :mask-closable="false"
  4. :ok-button-props="{ props: { disabled: !outModal.isValid } }" style="overflow: hidden;"
  5. :ok-text="outModal.okText" cancel-text='{{ i18n "close" }}' :class="themeSwitcher.currentTheme">
  6. {{template "form/outbound"}}
  7. </a-modal>
  8. <script>
  9. const outModal = {
  10. title: '',
  11. visible: false,
  12. confirmLoading: false,
  13. okText: '{{ i18n "sure" }}',
  14. isEdit: false,
  15. confirm: null,
  16. outbound: new Outbound(),
  17. jsonMode: false,
  18. link: '',
  19. cm: null,
  20. duplicateTag: false,
  21. isValid: true,
  22. activeKey: '1',
  23. tags: [],
  24. ok() {
  25. ObjectUtil.execute(outModal.confirm, outModal.outbound.toJson());
  26. },
  27. show({ title='', okText='{{ i18n "sure" }}', outbound, confirm=(outbound)=>{}, isEdit=false, tags=[] }) {
  28. this.title = title;
  29. this.okText = okText;
  30. this.confirm = confirm;
  31. this.jsonMode = false;
  32. this.link = '';
  33. this.activeKey = '1';
  34. this.visible = true;
  35. this.outbound = isEdit ? Outbound.fromJson(outbound) : new Outbound();
  36. this.isEdit = isEdit;
  37. this.tags = tags;
  38. this.check()
  39. },
  40. close() {
  41. outModal.visible = false;
  42. outModal.loading(false);
  43. },
  44. loading(loading=true) {
  45. outModal.confirmLoading = loading;
  46. },
  47. check(){
  48. if(outModal.outbound.tag == '' || outModal.tags.includes(outModal.outbound.tag)){
  49. this.duplicateTag = true;
  50. this.isValid = false;
  51. } else {
  52. this.duplicateTag = false;
  53. this.isValid = true;
  54. }
  55. },
  56. toggleJson(jsonTab) {
  57. textAreaObj = document.getElementById('outboundJson');
  58. if(jsonTab){
  59. if(this.cm != null) {
  60. this.cm.toTextArea();
  61. this.cm=null;
  62. }
  63. textAreaObj.value = JSON.stringify(this.outbound.toJson(), null, 2);
  64. this.cm = CodeMirror.fromTextArea(textAreaObj, app.cmOptions);
  65. this.cm.on('change',editor => {
  66. value = editor.getValue();
  67. if(this.isJsonString(value)){
  68. this.outbound = Outbound.fromJson(JSON.parse(value));
  69. this.check();
  70. }
  71. });
  72. this.activeKey = '2';
  73. } else {
  74. if(this.cm != null) {
  75. this.cm.toTextArea();
  76. this.cm=null;
  77. }
  78. this.activeKey = '1';
  79. }
  80. },
  81. isJsonString(str) {
  82. try {
  83. JSON.parse(str);
  84. } catch (e) {
  85. return false;
  86. }
  87. return true;
  88. },
  89. };
  90. new Vue({
  91. delimiters: ['[[', ']]'],
  92. el: '#out-modal',
  93. data: {
  94. outModal: outModal,
  95. get outbound() {
  96. return outModal.outbound;
  97. },
  98. },
  99. methods: {
  100. streamNetworkChange() {
  101. if (this.outModal.outbound.protocol == Protocols.VLESS && !outModal.outbound.canEnableTlsFlow()) {
  102. delete this.outModal.outbound.settings.flow;
  103. }
  104. },
  105. canEnableTls() {
  106. return this.outModal.outbound.canEnableTls();
  107. },
  108. convertLink(){
  109. newOutbound = Outbound.fromLink(outModal.link);
  110. if(newOutbound){
  111. this.outModal.outbound = newOutbound;
  112. this.outModal.toggleJson(true);
  113. this.outModal.check();
  114. this.$message.success('Link imported successfully...');
  115. outModal.link = '';
  116. } else {
  117. this.$message.error('Wrong Link!');
  118. outModal.link = '';
  119. }
  120. },
  121. },
  122. });
  123. </script>
  124. {{end}}