@silexlabs/silex-dashboard
Version:
Dashboard for Silex v3
393 lines (369 loc) • 22.1 kB
HTML
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/css/websites-7843a323acc9c4921d373250c5f647854910ea0913530659823fbe29844ee6b5.css" />
<!-- font google -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;700&display=swap" rel="stylesheet">
<style>
.before-js > * {
visibility: hidden;
opacity: 0;
transition: opacity .5s ease;
}
.before-js[data-gjs-type] > *, /* This is only inside the editor, .before-js needs to be on the body */
.after-js > * {
visibility: visible;
opacity: 1;
}
.before-js:before {
content: 'Loading';
position: absolute;
top: 49%;
left: 49%;
}
.before-js[data-gjs-type]:before, /* This is only inside the editor, .before-js needs to be on the body */
.after-js:before {
content: none;
}
/*BTNS*/
.button, .pointer {
cursor: pointer}
.button{
min-width:110px;
}
details {
max-height: 2em;
display: block;
overflow: hidden;
transition: max-height .75s ease;
}
details[open] {
max-height: 40em;
}
/*BTNS*/
a {
text-decoration: none;
color:#8873FE;
}
a:hover {
text-decoration: underline;
}
.uppercase {
text-transform: uppercase;
}
.underline:hover{
text-decoration: underline;
text-decoration-thickness: from-font;
text-underline-position: under;
}
/*footer position*/
.main-min-height {
min-height: calc(100vh - 560px);
}
/*footer position*/
/*label*/
::placeholder {
color: #8873FE;
}
input:focus {
border: 2px solid #9977FE;
background-color:#ffffff;
}
:focus {
outline: none;
}
/*label*/
.skeleton-anim:after {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
content: "";
background:
linear-gradient(0.25turn, transparent, rgba(255,255,255,.75), transparent),
linear-gradient(transparent, transparent),
radial-gradient(38px circle at 19px 19px, transparent 50%, transparent 51%),
linear-gradient(transparent, transparent);
background-repeat: no-repeat;
background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
background-position: -315px 0, 0 0, 0px 190px, 50px 195px;
animation: loading 1.5s infinite;
}
@keyframes loading {
to {
background-position: 200% 0, 0 0, 0 190px, 50px 195px;
}
}
/*FX ANIMATIONS*/
/*scale-round-inside_pour-BTN*/
.fx-scale-round {
position:relative;
z-index: 10;
overflow: hidden;
}
.fx-scale-round::after {
content: "";
background: #ffffff;
position: absolute;
z-index: -1;
border-radius: 50%;
left: -50%;
right: -50%;
top: -100%;
bottom: -100%;
transform: scale(0, 0);
transform-origin: center bottom;
transition: all 0.3s ease-out;
}
.fx-scale-round:hover {
transform-origin: center bottom;
transform: scale(1.1);
transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
}
.fx-scale-round:hover::after {
transform: scale(1, 1);
transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
}
/*scale-round-inside_pour-BTN*/
/*scale*/
.fx-scale:hover {
transform-origin: center bottom;
transform: scale(1.1);
transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
}
/*flash*/
.fx-flash:hover {
animation: flash-in .25s ;
}
/*flash-in animation*/
@keyframes flash-in{
0% {
opacity:.25;
}
100% {
opacity:1;
}
}
/*flash-in animation*/
/*FX ANIMATIONS*/
</style>
<script src="/js/vue.global.prod.js"></script>
<script src="/js/main.js"></script>
<script type="module">
const CONNECTORS_PATH = '/connectors/'
window.addEventListener('load', function() {
const { createApp } = Vue;
const { api, constants, types } = silex;
const {
ConnectorType,
} = types
const {
setServerUrl,
getUser,
logout,
websiteDelete,
websiteDuplicate,
websiteList,
websiteCreate,
websiteMetaWrite,
} = api
function toSafeId(name) {
return name.replace(/[/\\?%*:|"<>]/g, '_')
}
const App = {
data() {
return {
websites: [],
newWebsiteName: '',
showCreationForm: false,
error: null,
message: null,
loggedIn: false,
loading: true,
storage: null,
user: null,
showMenu: false,
empty: false,
}
},
mounted() {
this.init()
},
methods: {
async init() {
try {
// Init Silex server path
// Go up one level because of the language prefix
setServerUrl(window.location.origin)
// Start
const user = await getUser({type: ConnectorType.STORAGE})
// Escape single quotes in the picture URL and decode the picture URL
if(user) {
user.picture = decodeURIComponent(user.picture).replace(/'/g, "\\'")
this.user = user
this.loggedIn = true
this.websites = await websiteList({connectorId: this.user.storage.connectorId})
this.empty = this.websites.length === 0
this.loading = false
} else {
this.openLogin()
}
} catch (error) {
console.error(error)
this.loading = false
if(error.code === 401 || error.httpStatusCode === 401) {
this.loggedIn = false
this.openLogin()
} else {
this.error = `Failed to start dashboard - ${error.message}`
this.message = ''
}
}
},
openLogin() {
//throw new Error('debug')
const path = `/en${CONNECTORS_PATH}`
console.log(window.location.pathname, window.location.path, path)
if(window.location.pathname === path) return
window.open(path, '_self')
},
openEditor(id) {
window.open(`/?id=${id}&lang=en&connectorId=${this.user.storage.connectorId}`, '_self')
},
async logout() {
await logout({
type: ConnectorType.STORAGE,
connectorId: this.user.storage.connectorId,
})
window.location.reload()
},
async createWebsite() {
try {
if (!this.newWebsiteName) throw new Error('You need to provide a website name')
this.loading = true
const websiteId = toSafeId(this.newWebsiteName)
const result = await websiteCreate({
websiteId,
data: {
name: this.newWebsiteName,
imageUrl: null,
},
connectorId: this.user.storage.connectorId
})
this.message = 'Website created successfully'
this.error = ''
this.newWebsiteName = ''
this.showCreationForm = false;
this.websites = await websiteList({connectorId: this.user.storage.connectorId})
this.empty = this.websites.length === 0
this.loading = false
return result
} catch (error) {
this.loading = false
console.error(error)
this.error = `Failed to create website - ${error.message}`
this.message = ''
}
},
async deleteWebsite(websiteId) {
const ok = confirm('Deleting a website? Are your sure? Really?')
if (!ok) return
this.loading = true
try {
const result = await websiteDelete({websiteId, connectorId: this.user.storage.connectorId})
this.message = 'Website deleted successfully'
this.error = ''
this.websites = await websiteList({connectorId: this.user.storage.connectorId})
this.empty = this.websites.length === 0
this.loading = false
return result
} catch (error) {
this.loading = false
this.error = `Failed to delete website - ${error.message}`
this.message = ''
}
},
async duplicateWebsite(websiteId) {
this.loading = true
try {
await websiteDuplicate({websiteId, connectorId: this.user.storage.connectorId, data: { name }})
this.error = ''
this.websites = await websiteList({connectorId: this.user.storage.connectorId})
this.message = 'Website duplicated successfully'
this.empty = this.websites.length === 0
this.loading = false
} catch (error) {
this.loading = false
this.error = `Failed to duplicate website - ${error.message}`
this.message = ''
}
},
async renameWebsite(websiteId) {
const website = this.websites.find(w => w.websiteId === websiteId)
const name = prompt('New name for this website', website.name)
if (!name) return
this.loading = true
try {
const result = await websiteMetaWrite({websiteId, connectorId: this.user.storage.connectorId, data: { name }})
this.message = 'Website renamed successfully'
this.error = ''
this.websites = await websiteList({connectorId: this.user.storage.connectorId})
this.empty = this.websites.length === 0
this.loading = false
return result
} catch (error) {
this.loading = false
this.error = `Failed to rename website - ${error.message}`
this.message = ''
}
},
},
};
// Prepare elements for vue
document.querySelectorAll('[v-text], [v-html]')
.forEach(el => el.innerText = '')
// Create the app
const app = createApp(App);
// Mount the app
app.mount('.app');
// Remove loading
setTimeout(() => {
document.querySelector('.before-js').classList.add('after-js')
}, 100)
})
</script>
<title></title>
<link rel="icon" href="/assets/favicon-32x32.png" />
<meta name="og:title" property="og:title" content="Silex Dashboard"/>
<link href="https://fonts.googleapis.com" rel="preconnect" ><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin ><link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet" ></head>
<body id="ik0i" class="body loading app before-js"><HEADER id="igrg" class="menu-bar"><A id="igvu43" href="/"><img src="/assets/picto-silex@3x.png" id="iel80b-2-2" class="nav__logo"/></A><NAV id="i9jq" class="nav">
<a id="iels" href="/" class="nav__item uppercase fx-flash nav_item--active" target="">My Sites</a>
<a id="iels" href="http://docs.silex.me/" class="nav__item uppercase fx-flash nav_item--active" target="_blank">Docs</a>
<a id="iels" href="https://short.silex.me/community_en/" class="nav__item uppercase fx-flash nav_item--active" target="_blank">Forum</a>
<a id="iels" href="https://short.silex.me/chat" class="nav__item uppercase fx-flash nav_item--active" target="_blank">Chat</a></NAV>
<div id="i2red7" class="lang"><a href="/en" id="iciz" class="lang__item nav__item uppercase">EN</a></div>
<div id="i2red7" class="lang"><a href="/fr" id="iciz" class="lang__item nav__item uppercase">FR</a></div><div id="i24ew" class="user__wrapper pointer" v-if="user" v-on:click="showMenu = !showMenu"><div id="i5xsbd" class="user-icon__wrapper" v-if="user" v-show="!showMenu || user.storage.disableLogout"><div id="i5wlbq" class="user-icon__image" v-if="user" v-show="!showMenu || user.storage.disableLogout" :style="{ backgroundImage: `url('${user?.picture}')`, backgroundRepeat: 'no-repeat', backgroundSize: 'contain', }"></div></div><div id="ic9eoa" class="" v-show="showMenu && !user.storage.disableLogout" v-on:click="logout"><div id="igv1rf" class="nav__item">Logout</div></div></div></HEADER><HEADER id="iy8ax3" class="bg-silex-purpel"><div id="iisz8f" class="section-top text-centered text-white"><h1 id="ic31o" class="title-40" v-if="!empty">Welcome back!</h1><p id="iyex8" class="subtitle-16" v-if="!empty">Dive into your projects or kickstart a new one</p><h1 id="i4ybc" class="title-40" v-if="empty">Welcome, let's get started</h1><p id="iino6r" class="subtitle-16" v-if="empty">Create your first project, click on "Create a website"</p></div></HEADER><MAIN id="iz63r" class="padding-normal main-min-height website-max-width margin-80"><section id="iqmx38" class="" v-if="empty"></section><div id="ickx4" class="margin-20" v-if="!empty"><button id="ic92g" class="button button--primary rounded top-space-40 fx-scale-round" v-if="!showCreationForm" v-on:click="showCreationForm = !showCreationForm"><span id="igsxoc" class="icon-font">+</span> <span id="ixu14" class="">Create website</span></button><div id="i0ro3" class="button button--secondary rounded">Import</div></div><div id="ihwwxz" class="box top-space-40 padding-30 box_transp" v-if="showCreationForm"><h3 id="i3gd1b" class="box__header text-centered">Create a new website</h3><form method="get" id="i50acf" class="form" v-on:submit.prevent="createWebsite"><div id="igtg1t" class="v-space"><label id="i1nmbc" style="flex-shrink:0;" class="v-space bold color-2B1B63-80">Website name</label><input type="text" id="ij5iwh" placeholder="My project website" class="input full-width" v-model="newWebsiteName"></input></div><div id="ie0xes"><button type="submit" id="i021na" class="button rounded button--primary right-space-20 fx-scale-round">Create</button><button type="reset" class="button rounded button--secondary fx-scale-round" v-on:click="showCreationForm = !showCreationForm" v-if="!empty">Cancel</button></div></form></div><div id="if80m" class="margin-20"><section id="idgvg" class="button-bar loaded__item" v-if="!loading" v-for="(website, index) in websites" :key="index"><h3 id="i69a7" class="right-space-40 color-2B1B63-80 uppercase pointer fx-flash full-width button-bar__title underline" v-on:click="openEditor(website.websiteId)" v-text="website.name || website.id">My first website</h3><p id="i65hn" class="button-bar__item--secondary flex-no-shrink right-space-40" v-text="'Updated ' + new Date(website.updatedAt).toLocaleDateString(undefined, { day: 'numeric', month: 'long', year: 'numeric' })">Updated 1h ago by lexoyo</p><p id="i64qa" class="button-bar__item--secondary flex-no-shrink right-space-40" v-text="'Created ' + new Date(website.createdAt).toLocaleDateString(undefined, { day: 'numeric', month: 'long', year: 'numeric' })">Created 2023-02-16 by lexoyo</p><div id="i3b4tr" class="flex-no-shrink"><button id="ifyf6p" title="Edit" class="button-bar__item--link pointer fx-scale fx-flash button-bar__item--icon" v-on:click="openEditor(website.websiteId)"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="#8873fe" d="M368 80h32v32H368V80zM352 32c-17.7 0-32 14.3-32 32H128c0-17.7-14.3-32-32-32H32C14.3 32 0 46.3 0 64v64c0 17.7 14.3 32 32 32V352c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32H320c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32V384c0-17.7-14.3-32-32-32V160c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32H352zM96 160c17.7 0 32-14.3 32-32H320c0 17.7 14.3 32 32 32V352c-17.7 0-32 14.3-32 32H128c0-17.7-14.3-32-32-32V160zM48 400H80v32H48V400zm320 32V400h32v32H368zM48 112V80H80v32H48z"/></svg></button><button id="ihf6ew" title="Rename" class="button-bar__item--link pointer fx-scale fx-flash button-bar__item--icon" v-on:click="renameWebsite(website.websiteId)"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="#8873fe" d="M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z"/></svg></button><button id="iol4h" title="Duplicate" class="button-bar__item--link pointer fx-flash fx-scale button-bar__item--icon" v-on:click="duplicateWebsite(website.websiteId)"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path fill="#8873fe" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg></button><button id="it5ia" class="button-bar__item--link pointer fx-flash fx-scale" title="Delete" v-on:click="deleteWebsite(website.websiteId)">X</button></div></section><section id="i1fjn" class="button-bar loading__item skeleton-anim skeleton-wrapper" v-if="loading"><H3 id="iwu6a" class="skeleton-text skeleton right-space-40">My first websiteMy first websiteMy first websiteMy first</H3><P id="i26fn" class="button-bar__item--secondary skeleton-text skeleton right-space-40">Updated 1h ago by lexoyo</P><P id="iywbk" class="button-bar__item--secondary skeleton-text skeleton right-space-40">Created 2023-02-16 by lexoyo</P><div id="ixz6c" class="skeleton skeleton-button">Edit</div></section><section id="iwxxo5" class="button-bar loading__item skeleton-anim skeleton-wrapper" v-if="loading"><H3 id="inmp3" class="skeleton-text skeleton right-space-40">My first websiteMy first websiteMy first websiteMy first</H3><P id="icjz8" class="button-bar__item--secondary skeleton-text skeleton right-space-40">Updated 1h ago by lexoyo</P><P id="illbe" class="button-bar__item--secondary skeleton-text skeleton right-space-40">Created 2023-02-16 by lexoyo</P><div id="i9fx3l" class="skeleton skeleton-button">Edit</div></section><section id="isld3r" class="button-bar loading__item skeleton-anim skeleton-wrapper" v-if="loading"><H3 class="button-bar_item button-bar__item--main skeleton-text skeleton right-space-40">My first websiteMy first websiteMy first websiteMy first</H3><P class="button-bar_item button-bar__item--secondary skeleton-text skeleton right-space-40">Updated 1h ago by lexoyo</P><P class="button-bar_item button-bar__item--secondary skeleton-text skeleton right-space-40">Created 2023-02-16 by lexoyo</P><div id="i8oes3" class="button-bar_item skeleton skeleton-button">Edit</div></section></div><div id="ipccl7"><div id="i2fkm9" class="margin-20 empty-image" v-if="empty"></div><div id="i5ydxo" class="box padding-50-30 box--centered" v-if="empty"><p id="ikl1qu" class="text-centered title-26">Such emptyness...</p><h3 id="iwzrqi" class="text-centered title-26">Ready to start your journey?</h3><button id="i2x0l" class="button button--primary rounded top-space-40 fx-scale-round" v-on:click="showCreationForm = !showCreationForm" v-if="!showCreationForm"><span id="ibsgw" class="icon-font">+</span> <span id="itl2n8" class="">Create website</span></button></div></div><div id="i7ej6j" class="flex-between box-message text-white" v-if="error"><h3 id="iv0eyi" class="box-message-text" v-text="error">Insert your text here</h3><div id="i4656n" class="pointer button-bar__item--link text-white" v-on:click="error = null">Dismiss</div></div><div id="ilteie" class="flex-between box-message text-white" v-if="message"><h3 id="i2d31v" class="box-message-text" v-text="message">Insert your text here</h3><div id="i2urco" class="rounded pointer button-bar__item--link text-white" v-on:click="message = null">Dismiss</div></div></MAIN><FOOTER id="ilzpl" class="footer">
<div id="isucae" style="min-height:100px;" class="footer__column"><h3 id="ipa5zg" href="" class="footer__item">Social & community</h3>
<a href="https://www.silex.me/" class="footer__item" target="_blank">About Silex, official website</a>
<a href="mailto:contact+silex-dashboard-footer@silex.me" class="footer__item" target="">Email the team</a>
<a href="https://short.silex.me/sponsors" class="footer__item" target="_blank">Sponsors</a>
<a href="https://short.silex.me/donate" class="footer__item" target="">Donate</a>
<a href="https://short.silex.me/community" class="footer__item" target="_blank">Community forum</a>
<a href="https://news.silex.me/forms/nfrm_weLJnLY5" class="footer__item" target="_blank">Newsletter</a>
<a href="https://events.silex.me/" class="footer__item" target="_blank">Meetups/ Events</a>
<a href="https://short.silex.me/mastodon" class="footer__item" target="_blank">Mastodon</a>
<a href="https://short.silex.me/lemmy" class="footer__item" target="_blank">Lemmy</a></div>
<div id="isucae" style="min-height:100px;" class="footer__column"><h3 id="ipa5zg" href="" class="footer__item">Resources</h3>
<a href="https://short.silex.me/code" class="footer__item" target="_blank">Source code</a>
<a href="http://docs.silex.me/" class="footer__item" target="_blank">Documentation</a>
<a href="https://video.silex.me/my-library/video-playlists" class="footer__item" target="_blank">Videos</a>
<a href="https://short.silex.me/roadmap" class="footer__item" target="_blank">Roadmap</a>
<a href="https://short.silex.me/contribute" class="footer__item" target="_blank">Contribute</a></div>
<div id="isucae" style="min-height:100px;" class="footer__column"><h3 id="ipa5zg" href="" class="footer__item">Articles and reviews</h3>
<a href="https://short.silex.me/alternatives" class="footer__item" target="_blank">Silex alternatives</a>
<a href="https://short.silex.me/reviews" class="footer__item" target="_blank">Silex reviews</a>
<a href="https://short.silex.me/press" class="footer__item" target="_blank">Silex in the press</a></div></FOOTER></body>
</html>