Skip to content
This repository has been archived by the owner on Oct 8, 2022. It is now read-only.

Commit

Permalink
Interface design changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@bostrot
bostrot committed Nov 24, 2018
1 parent e04de1d commit 5af4fb6
Show file tree
Hide file tree
Showing 8 changed files with 107 additions and 86 deletions.
2 changes: 1 addition & 1 deletion views/auth.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
</span>

<span class="login100-form-description p-b-26">
Do you want to authorize the application {{ client.name }} to
Do you want to authorize the application <b>{{ client.name }}</b> to
<ul class="mt-1">
{% for desc in scope_description %}
<li>{{ desc }}</li>
Expand Down
9 changes: 6 additions & 3 deletions views/dashboard.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,20 @@
<span class="login100-form-title p-b-26">
Welcome to EOSconnect
</span>
<span class="p-b-26 login100-form-description">v0.4Beta</span>
<span class="p-b-26 login100-form-description">v0.6-Beta</span>
<span class="login100-form-title p-b-48">
<img src="/api/v1/app/eosconnect.logo">
<img src="/assets/img/eos_color.svg">
</span>
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<a href="{{ login_url }}"
class="btn-eosconnect login100-form-btn">
<img src="/api/v1/app/eosconnect.logo">
<img style="width: 1.1em; margin-right: 1em;" src="/assets/img/eos_white.svg">
Login with EOSconnect
</a>
</div>
</div>
<div class="text-center mt-2">
<small>See source code on <br><a target="_blank" href="https://github.com/bostrot/eosconnect-web" id="sourceCode">GitHub</a></small>
</div>
{% endblock %}
17 changes: 5 additions & 12 deletions views/int/app_edit.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,24 +21,17 @@
<small>Max length: 32</small>
</div>
<div class="form-group">
<label for="tags">App Logo (Optimal resolution: 1024x1024. Max. filesize: 5MB)</label>
<div class="input-group">
<input required type="url" class="form-control" value="{{ app.logo }}" id="previewimage"
name="previewimage" readonly="" aria-label="Preview Image">
<div class="input-group-append">
<button id="upload_now" class="upldr-btn btn btn-sm btn-gradient-primary" type="button">
Select Image
</button>
</div>
</div>
<input accept="image/*" id="upload_select" type="file" class="d-none">
<label for="tags">App Logo (optimal resolution: 1024x1024)</label>
<input required type="url" maxlength="128" minlength="4" value="{{ app.logo }}" class="form-control" id="previewimage" name="previewimage"
type="text" aria-label="Preview Image"/>
<small>Must start with https.</small>
</div>
<div class="form-group">
<label class="control-label" for="name">
Redirect Urls
</label>
<textarea required class="form-control" rows="5" id="name" name="redirect_uris"
type="text">{{ app.redirect_uri|join('\r\n') }}</textarea>
type="text">{{ app.redirect_uri }}</textarea>
<small>One per line. Must start with http or https</small>
</div>
<div class="form-group">
Expand Down
90 changes: 62 additions & 28 deletions views/int/app_new.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,65 +10,99 @@
<div class="col">
<div class="alert alert-info">
<i class="fa fa-info-circle"></i>
To prevent fraud we will charge you a small service fee of 6.99€. This is a one time payment and all
To prevent fraud we will charge you a small service fee of $5. This is a one time payment and all
your data are securely submitted over https.
</div>
</div>
</div>
<div class="row">
<div class="col">
<form action="/int/apps/new" method="post">
<form id="newapp_form" action="https://www.coinpayments.net/index.php" method="post">
<div class="form-group">
<label class="control-label" for="name">
App Name
</label>
<input required maxlength="12" minlength="4" class="form-control" id="name" name="app_name"
<input required maxlength="12" minlength="4" class="form-control" id="app_name" name="custom"
type="text"/>
<small>Min length: 4, Max length: 12, Must be unique</small>
</div>
<div class="form-group">
<label class="control-label" for="name">
Description
</label>
<textarea required maxlength="32" rows="5" class="form-control" name="description"
<textarea required maxlength="32" rows="5" class="form-control" name="custom" id="description"
type="text"></textarea>
<small>Max length: 32</small>
</div>
<div class="form-group">
<label for="tags">App Logo (Optimal resolution: 1024x1024. Max. filesize: 5MB)</label>
<div class="input-group">
<input required type="url" class="form-control" value="" id="previewimage" name="previewimage"
readonly="" aria-label="Preview Image">
<div class="input-group-append">
<button id="upload_now" class="upldr-btn btn btn-sm btn-gradient-primary" type="button">
Select Image
</button>
</div>
</div>
<input accept="image/*" id="upload_select" type="file" class="d-none">
<label for="tags">App Logo (optimal resolution: 1024x1024)</label>
<input required type="url" maxlength="128" minlength="4" value="" class="form-control" id="previewimage" name="custom"
type="text" aria-label="Preview Image"/>
<small>Must start with https.</small>
</div>
<div class="form-group">
<label class="control-label" for="name">
Redirect Urls
</label>
<textarea required class="form-control" rows="5" id="name" name="redirect_uris"
<textarea required class="form-control" rows="5" id="redirect_uris" name="custom"
type="text"></textarea>
<small>One per line. Must start with http or https</small>
<p id="error-msg" style="color: red;"></p>
</div>
<div class="form-group">
<script
src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_live_cTcbcvamTZb1wRHdJmKuwmY9"
data-amount="699"
data-name="EOSconnect"
data-description="A new Oauth2 App for EOSconnect."
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto"
data-zip-code="true"
data-label="Create New App"
data-currency="eur">
</script>
<input type="hidden" name="cmd" value="_pay_simple">
<input type="hidden" name="reset" value="1">
<input type="hidden" name="merchant" value="0d9b49af27896d6194b251c7b88d67f7">
<input type="hidden" name="item_name" value="EOSconnect App">
<input type="hidden" name="item_desc" value="To prevent fraud we will charge you a small service. This is a one time payment and all your data are securely submitted over https.">
<input type="hidden" name="currency" value="USD">
<input type="hidden" name="amountf" value="5.00000000">
<input type="hidden" name="want_shipping" value="0">
<input type="hidden" name="success_url" value="https://eosconnect.me/int/apps?tx=loading">
<input type="hidden" name="cancel_url" value="https://eosconnect.me/int/apps">
<input type="hidden" name="custom" value="{{ username }}">
<img id="sendBTN" src="https://www.coinpayments.net/images/pub/buynow-wide-blue.png" alt="Jetzt kaufen mit CoinPayments.net">
</div>
<script>
var customFields = document.getElementsByName('custom');
document.getElementById('sendBTN').onclick = function() {
var custom = [];
for (var i = 0; i < 5; i++) {
custom.push(customFields[i].value)
};
customFields[4].value = custom;
console.log(custom);
fetch("/int/apps/new",
{
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
app_name: custom[0],
description: custom[1],
previewimage: custom[2],
redirect_uris: custom[3]
})
})
.then(function(res){ return res.json(); })
.then(function(data){
console.log(data);
console.log(data.status);
if (data.status === "success") {
document.getElementById('newapp_form').submit(function(event){
// cancels the form submission
event.preventDefault();
console.log("all ok")
// do whatever you want here
});
} else {
document.getElementById('error-msg').innerText = "Check your input, server returned: " + data.error;
}
})
};
</script>
</form>
</div>
</div>
Expand Down
4 changes: 3 additions & 1 deletion views/int/apps.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@
<div class="row">
<div class="col">
<h2>My Apps
<small>This are my apps</small>
</h2>
</div>
</div>
{% if tx is defined %}
<p> Your transaction is processing, check back later... </p>
{% endif %}
<div class="row">
<div class="col">
<ul class="list-group">
Expand Down
10 changes: 6 additions & 4 deletions views/int/authorized.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,19 @@
<div class="row">
<div class="col">
<h2>Authorized Apps
<small>This apps have access to my account. To revoke its' access just click its' name.</small>
<small>Click to revoke an app.</small>
</h2>
</div>
</div>
<div class="row">
<div class="col">
<ul class="list-group">
{% for app in apps %}
<li class="list-group-item">
<a href="/int/authorized/{{ app.client_id }}/revoke">{{ app.client_id }}</a>
</li>
{% if app.client_id %}
<li class="list-group-item">
<a href="/int/authorized/{{ app.client_id }}/revoke">{{ app.client_id }}</a>
</li>
{% endif %}
{% endfor %}
{% if apps.length == 0 %}
<li class="list-group-item">
Expand Down
4 changes: 2 additions & 2 deletions views/int/dashboard.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</div>
<div class="row">
{% for app in apps %}
<div class="col-3">
<div class="col-md-3">
<div class="card ">
<div class="card-header ">
<h4 class="card-title">{{ app.name }}</h4>
Expand All @@ -27,7 +27,7 @@
<div class="card-footer ">
<hr>
<div class="stats">
<i class="fab fa-ethereum"></i> This application is secured by EOSconnect.
<i class="fab fa-ethereum"></i>This app is secured by EOSconnect.
</div>
</div>
</div>
Expand Down
57 changes: 22 additions & 35 deletions views/int/layout.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@

<body>
<div class="wrapper">
<div class="sidebar" data-color="blue" data-image="/assets/img/sidebar-4.jpg">
<div class="sidebar">
<div class="sidebar-wrapper">
<div class="logo">
<a href="/int" class="simple-text">
Expand All @@ -32,32 +32,41 @@
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="/int">
<i class="nc-icon nc-chart-pie-35"></i>
<i class="fas fa-tachometer-alt"></i>
<p>Dashboard</p>
</a>
</li>
<li>
<a class="nav-link" href="/int/apps">
<i class="nc-icon nc-notes"></i>
<i class="fas fa-clipboard-list"></i>
<p>My Apps</p>
</a>
</li>
<li>
<a class="nav-link" href="/int/authorized">
<i class="nc-icon nc-paper-2"></i>
<i class="fas fa-newspaper"></i>
<p>Authorized Apps</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Support</a>
</li>
<li class="nav-item">
<a class="nav-link active" target="_blank" href="https://discord.gg/fZvGq3D">
<i class="fab fa-discord"></i>
<p>Discord</p>
</a>
</li>
<li>
<a class="nav-link" href="https://www.npmjs.com/package/@wehmoen/ec-sdk" target="_blank">
<i class="nc-icon nc-atom"></i>
<p>NPM Package & Docs</p>
<a class="nav-link" href="https://discuss.bostrot.com/" target="_blank">
<i class="fas fa-comments"></i>
<p>Forum</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link active" target="_blank" href="https://discord.gg/JZAab7U">
<i class="nc-icon nc-alien-33"></i>
<p>Support</p>
<li>
<a class="nav-link" href="https://github.com/bostrot/eosconnect-web" target="_blank">
<i class="fab fa-github"></i>
<p>Source code on GitHub</p>
</a>
</li>
</ul>
Expand Down Expand Up @@ -106,34 +115,12 @@
<footer class="footer">
<div class="container">
<nav>
<ul class="footer-menu">
<li>
<a href="/int">
Home
</a>
</li>
<li>
<a href="/int/apps">
My Apps
</a>
</li>
<li>
<a href="/int/authorized">
Authorized Apps
</a>
</li>
<li>
<a href="https://eosconnect.docs.apiary.io/#" target="_blank">
Documentation
</a>
</li>
</ul>
<p class="copyright text-center">
©
<script>
document.write(new Date().getFullYear())
</script>
<a href="https://eosconnect.app">EOSconnect</a>
<a href="https://eosconnect.me">EOSconnect</a>
</p>
</nav>
</div>
Expand All @@ -154,7 +141,7 @@
<script src="/assets/js/plugins/chartist.min.js"></script>
<!-- Notifications Plugin -->
<script src="/assets/js/plugins/bootstrap-notify.js"></script>
<script src="https://wehmoen.github.io/pixelhosting-js-sdk/pixelhosting.js"></script>
<!--script src="https://wehmoen.github.io/pixelhosting-js-sdk/pixelhosting.js"></script-->
<script src="/assets/js/main.js"></script>
<!-- Control Center for Light Bootstrap Dashboard: scripts for the example pages etc -->
<script src="/assets/js/light-bootstrap-dashboard.js?v=2.0.1" type="text/javascript"></script>
Expand Down

0 comments on commit 5af4fb6

Please sign in to comment.