125 lines
6.0 KiB
Vue
125 lines
6.0 KiB
Vue
<template>
|
|
<Modal class="bd-installModal" :headertext="modal.title" :closing="modal.closing" @close="modal.close" :noheader="true" :class="{'bd-err': !verifying && !verified, 'bd-installModalDone': installed, 'bd-installModalFail': err}">
|
|
<template v-if="!installed && !err">
|
|
<div slot="body" class="bd-installModalBody">
|
|
<div class="bd-installModalTop">
|
|
<div class="bd-installModalIcon">
|
|
<div v-if="modal.icon" class="bd-installModalCi" :style="{backgroundImage: `url(${modal.icon})`}" />
|
|
<MiExtension v-else />
|
|
</div>
|
|
<div class="bd-installModalInfo">
|
|
<span>{{modal.config.info.name}} v{{modal.config.info.version}} by {{modal.config.info.authors.map(a => a.name).join(', ')}}</span>
|
|
<div class="bd-installModalDesc">
|
|
{{modal.config.info.description}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bd-installModalBottom">
|
|
<div v-for="(perm, i) in modal.config.permissions" :key="`perm-${i}`" class="bd-permScope">
|
|
<div class="bd-permAllow">
|
|
<div class="bd-permCheck">
|
|
<div class="bd-permCheckInner"></div>
|
|
</div>
|
|
<div class="bd-permInner">
|
|
<div class="bd-permName">{{perm.HEADER}}</div>
|
|
<div class="bd-permDesc">{{perm.BODY}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="verifying" slot="footer" class="bd-installModalFooter">
|
|
<span class="bd-installModalStatus">Verifying {{modal.contentType}}</span>
|
|
</div>
|
|
<div v-else-if="!verified" slot="footer" class="bd-installModalFooter">
|
|
<span class="bd-installModalStatus bd-err">Not verified!</span>
|
|
<div class="bd-button bd-installModalUpload" @click="modal.confirm(0); modal.close();" v-if="modal.canUpload">Upload</div>
|
|
<div class="bd-button bd-err" @click="install" v-if="allowUnsafe">{{ !alreadyInstalled ? 'Install' : 'Update' }}</div>
|
|
</div>
|
|
<div v-else-if="alreadyInstalled && upToDate" slot="footer" class="bd-installModalFooter">
|
|
<span class="bd-installModalStatus">Up to date version already installed!</span>
|
|
<div class="bd-button bd-installModalUpload" @click="modal.confirm(0); modal.close();" v-if="modal.canUpload">Upload</div>
|
|
</div>
|
|
<div v-else slot="footer" class="bd-installModalFooter">
|
|
<span class="bd-installModalStatus bd-ok">Verified!</span>
|
|
<div class="bd-button bd-installModalUpload" @click="modal.confirm(0); modal.close();" v-if="modal.canUpload">Upload</div>
|
|
<div class="bd-button bd-ok" @click="install">{{ !alreadyInstalled ? 'Install' : 'Update' }}</div>
|
|
</div>
|
|
</template>
|
|
<template v-else-if="err">
|
|
<div slot="body" class="bd-installModalBody">
|
|
<h3>Something went wrong :(</h3>
|
|
<MiError />
|
|
</div>
|
|
<div slot="footer" class="bd-installModalFooter bd-installModalErrMsg">
|
|
{{err.message}}
|
|
<span>Ctrl+Shift+I</span>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div slot="body" class="bd-installModalBody">
|
|
<h3>{{alreadyInstalled ? 'Succesfully Updated!' : 'Successfully Installed!'}}</h3>
|
|
<MiSuccessCircle/>
|
|
</div>
|
|
<div slot="footer" class="bd-installModalFooter">
|
|
<div class="bd-button bd-ok" v-if="installed.hasSettings" @click="showSettingsModal">Settings</div>
|
|
<div class="bd-button bd-ok" @click="modal.confirm(); modal.close();">OK</div>
|
|
</div>
|
|
</template>
|
|
</Modal>
|
|
</template>
|
|
<script>
|
|
// Imports
|
|
import { Modal, MiExtension, MiSuccessCircle, MiError } from '../../common';
|
|
import { PluginManager, ThemeManager, PackageInstaller, Settings } from 'modules';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
installing: false,
|
|
verifying: true,
|
|
alreadyInstalled: false,
|
|
upToDate: true,
|
|
allowUnsafe: Settings.getSetting('security', 'default', 'unsafe-content').value,
|
|
installed: false,
|
|
err: null
|
|
}
|
|
},
|
|
props: ['modal'],
|
|
components: {
|
|
Modal, MiExtension, MiSuccessCircle, MiError
|
|
},
|
|
mounted() {
|
|
const { contentType, config } = this.modal;
|
|
const alreadyInstalled = contentType === 'plugin' ? PluginManager.getPluginById(config.info.id) : ThemeManager.getContentById(config.info.id);
|
|
|
|
if (alreadyInstalled) {
|
|
this.alreadyInstalled = true;
|
|
if (config.info.version > alreadyInstalled.version) {
|
|
this.upToDate = false;
|
|
}
|
|
}
|
|
this.verify();
|
|
},
|
|
methods: {
|
|
async verify() {
|
|
const verified = await PackageInstaller.verifyPackage(this.modal.filePath);
|
|
this.verified = verified;
|
|
this.verifying = false;
|
|
},
|
|
async install() {
|
|
try {
|
|
const installed = await PackageInstaller.installPackage(this.modal.filePath, this.modal.config.info.id || this.modal.config.info.name, this.modal.contentType, this.alreadyInstalled);
|
|
this.installed = installed;
|
|
} catch (err) {
|
|
console.log(err);
|
|
this.err = err;
|
|
}
|
|
},
|
|
showSettingsModal() {
|
|
this.installed.showSettingsModal();
|
|
}
|
|
}
|
|
}
|
|
</script>
|