[bootstrap] update to bootstrap5
This commit is contained in:
Nico Schottelius
parent
c8ce7dbb40
commit
49f52fd41d
5 changed files with 176 additions and 169 deletions
|
|
@ -2,7 +2,7 @@
|
||||||
django
|
django
|
||||||
djangorestframework
|
djangorestframework
|
||||||
django-auth-ldap
|
django-auth-ldap
|
||||||
django-bootstrap4
|
django-bootstrap-v5
|
||||||
|
|
||||||
psycopg2
|
psycopg2
|
||||||
ldap3
|
ldap3
|
||||||
|
|
|
||||||
|
|
@ -51,7 +51,7 @@ INSTALLED_APPS = [
|
||||||
'django.contrib.staticfiles',
|
'django.contrib.staticfiles',
|
||||||
'django_extensions',
|
'django_extensions',
|
||||||
'rest_framework',
|
'rest_framework',
|
||||||
'bootstrap4',
|
'bootstrap5',
|
||||||
'uncloud',
|
'uncloud',
|
||||||
'uncloud_pay',
|
'uncloud_pay',
|
||||||
'uncloud_auth',
|
'uncloud_auth',
|
||||||
|
|
|
||||||
|
|
@ -1,51 +1,27 @@
|
||||||
{% extends 'bootstrap4/bootstrap4.html' %}
|
{% extends 'bootstrap5/bootstrap5.html' %}
|
||||||
|
{% block bootstrap5_before_content %}
|
||||||
|
|
||||||
{% load bootstrap4 %}
|
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
|
||||||
|
<div class="container">
|
||||||
|
<a class="navbar-brand" href="{% url 'uncloudindex' %}">uncloud</a>
|
||||||
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
|
<span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
|
||||||
<!doctype html>
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||||
<html lang="en">
|
<ul class="navbar-nav mr-auto">
|
||||||
<head>
|
{% if user.is_authenticated %}
|
||||||
<!-- Required meta tags -->
|
<span class="navbar-text">Logged in as {{ user }}.</span>
|
||||||
<meta charset="utf-8">
|
<li class="nav-item">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
<a class="nav-link" href="{% url 'logout' %}">Logout</a>
|
||||||
|
</li>
|
||||||
{% block bootstrap4_title %}{% block title %}Welcome to uncloud{% endblock %}{% endblock %}
|
{% else %}
|
||||||
|
<li class="nav-item">
|
||||||
{% block header %}{% endblock %}
|
<a class="nav-link" href="{% url 'login' %}">Login</a>
|
||||||
</head>
|
</li>
|
||||||
<body>
|
{% endif %}
|
||||||
{% block bootstrap4_content %}
|
</ul>
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
</div>
|
||||||
<a class="navbar-brand" href="{% url 'uncloudindex' %}">uncloud</a>
|
</div>
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
</nav>
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
||||||
<ul class="navbar-nav mr-auto">
|
|
||||||
<!-- <li class="nav-item"> -->
|
|
||||||
<!-- <a class="nav-link" href="/random/">Generate random prefix</a> -->
|
|
||||||
<!-- </li> -->
|
|
||||||
{% if user.is_authenticated %}
|
|
||||||
<span class="navbar-text">Logged in as {{ user }}.</span>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="{% url 'logout' %}">Logout</a>
|
|
||||||
</li>
|
|
||||||
{% else %}
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="{% url 'login' %}">Login</a>
|
|
||||||
</li>
|
|
||||||
{% endif %}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="container">
|
|
||||||
{% block body %}{% endblock %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% autoescape off %}{% bootstrap_messages %}{% endautoescape %}
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
|
||||||
|
|
@ -1,119 +1,148 @@
|
||||||
{% extends 'uncloud/base.html' %}
|
{% extends 'uncloud/base.html' %}
|
||||||
{% block title %}{% endblock %}
|
{% block title %}Welcome to uncloud [beta]{% endblock %}
|
||||||
|
|
||||||
{% block body %}
|
{% block bootstrap5_content %}
|
||||||
<div id="content">
|
<div class="container">
|
||||||
|
<div id="content">
|
||||||
<div id="intro" class="row">
|
<div id="intro" class="row">
|
||||||
<div class=col>
|
<div class=col>
|
||||||
<h1>Welcome to uncloud</h1>
|
<h1>Welcome to uncloud [beta]</h1>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div id="intro" class="row">
|
<div id="about" class="row">
|
||||||
<div class="col"><h3>About uncloud</h3></div>
|
<div class="col"><h3>About uncloud</h3></div>
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<p>
|
<p>
|
||||||
Welcome to uncloud, the Open Source cloud management
|
Welcome to uncloud, the Open Source cloud management
|
||||||
system by <a href="https://ungleich.ch">ungleich</a>.
|
system by <a href="https://ungleich.ch">ungleich</a>.
|
||||||
It is an <a href="{% url 'api-root' %}">API</a> driven system with
|
It is an <a href="{% url 'api-root' %}">API</a> driven system with
|
||||||
some convience views provided by
|
some convience views provided by
|
||||||
the <a href="https://www.django-rest-framework.org/">Django Rest
|
the <a href="https://www.django-rest-framework.org/">Django Rest
|
||||||
Framework</a>. You can
|
Framework</a>. You can
|
||||||
freely <a href="https://code.ungleich.ch/uncloud/uncloud/">access
|
freely <a href="https://code.ungleich.ch/uncloud/uncloud/">access
|
||||||
the source code of uncloud</a>.
|
the source code of uncloud</a>.
|
||||||
</p>
|
<strong>This is a BETA service.</strong> As such, some
|
||||||
|
functionality might not be very sophisticated.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div id="howto" class="row">
|
||||||
<div id="howto" class="row">
|
<div class="col"><h3>Getting started</h3></div>
|
||||||
<div class="col"><h3>Getting started</h3></div>
|
<div class="col-8">
|
||||||
<div class="col-8">
|
<p>uncloud is designed to be as easy as possible to use. However,
|
||||||
<p>uncloud is designed to be as easy as possible to use. However,
|
there are some "real world" requirements that need to be met to
|
||||||
there are some "real world" requirements that need to be met to
|
start using uncloud:
|
||||||
start using uncloud:
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li>First you need
|
<li>First you need
|
||||||
to <a href="https://account.ungleich.ch">register an
|
to <a href="https://account.ungleich.ch">register an
|
||||||
account</a>. If you already have one, you can
|
account</a>. If you already have one, you can
|
||||||
<a href="{% url 'login' %}">login</a>.
|
<a href="{% url 'login' %}">login</a>.
|
||||||
<li>If you have forgotten your password or other issues with
|
<li>If you have forgotten your password or other issues with
|
||||||
logging in, you can contact the ungleich support
|
logging in, you can contact the ungleich support
|
||||||
via <strong>support at ungleich.ch</strong>.
|
via <strong>support at ungleich.ch</strong>.
|
||||||
|
|
||||||
<li>Secondy you will need to
|
<li>Secondy you will need to
|
||||||
<a href="{% url 'billingaddress-list' %}">create a billing
|
<a href="{% url 'billingaddress-list' %}">create a billing
|
||||||
address</a>. This is required for determining the correct
|
address</a>. This is required for determining the correct
|
||||||
tax.
|
tax.
|
||||||
<li>Next you will need to
|
<li>Next you will need to
|
||||||
<a href="{% url 'cc_register' %}">register a credit card</a>
|
<a href="{% url 'cc_register' %}">register a credit card</a>
|
||||||
from which payments can be made. Your credit card will not
|
from which payments can be made. Your credit card will not
|
||||||
be charged without your consent.
|
be charged without your consent.
|
||||||
</ul>
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div id="howto" class="row">
|
||||||
|
<div class="col"><h3>Introduction to uncloud concepts</h3></div>
|
||||||
<div id="creditcards" class="row">
|
<div class="col-8">
|
||||||
<div class="col"><h3>Credit cards</h3></div>
|
<p>We plan to offer many services on uncloud ranging from
|
||||||
<div class="col-8">
|
for free, for a small amount or regular charges. As transfer
|
||||||
<p>
|
fees are a major challenge for our business, we based uncloud
|
||||||
Credit cards are registered with stripe. We only save a the
|
on the <strong>pre-paid account model</strong>. Which means
|
||||||
last 4 digits and the expiry date of the card to make
|
that you can charge your account and then use your balance to
|
||||||
identification for you easier.
|
pay for product usage.</p>
|
||||||
</p>
|
</div>
|
||||||
<ul>
|
|
||||||
<li><a href="{% url 'cc_register' %}">Register a credit card</a>
|
|
||||||
(this is required to be done via Javascript so that we never see
|
|
||||||
your credit card, but it is sent directly to stripe)
|
|
||||||
<li><a href="{% url 'stripecreditcard-list' %}">You can list your
|
|
||||||
credit cards</a>
|
|
||||||
By default the first credit card is used for charging
|
|
||||||
("active: true") and later added cards will not be
|
|
||||||
used. To change this, first disable the active flag and
|
|
||||||
then set it on another credit card.
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div id="pay" class="row">
|
|
||||||
<div class="col"><h3>Billing Address, Payments and Balance</h3></div>
|
|
||||||
<div class="col-8">
|
|
||||||
<p>Billing addresses behave similar to credit cards: you can
|
|
||||||
have many of them, but only one can be active. The active
|
|
||||||
billing address is taken for creating new orders.</p>
|
|
||||||
|
|
||||||
<p>In uncloud we use the pre-paid model: you can add money to
|
<div id="creditcards" class="row">
|
||||||
your account via payments. You can always check your
|
<div class="col"><h3>Credit cards</h3></div>
|
||||||
balance. The products you use will automatically be charged from
|
<div class="col-8">
|
||||||
your existing balance.
|
<p>
|
||||||
</p>
|
Credit cards are registered with stripe. We only save a the
|
||||||
|
last 4 digits and the expiry date of the card to make
|
||||||
<p>In the future you will be able opt-in to automatically
|
identification for you easier.
|
||||||
recharging your account at a certain time frame or whenever it
|
</p>
|
||||||
is below a certain amount</p>
|
<ul>
|
||||||
|
<li><a href="{% url 'cc_register' %}">Register a credit card</a>
|
||||||
|
(this is required to be done via Javascript so that we never see
|
||||||
<ul>
|
your credit card, but it is sent directly to stripe)
|
||||||
<li><a href="{% url 'billingaddress-list' %}">Create or list
|
<li><a href="{% url 'stripecreditcard-list' %}">You can list your
|
||||||
your billing addresses</a>
|
credit cards</a>
|
||||||
<li><a href="{% url 'payment-list' %}">Make a payment or list your payments</a>
|
By default the first credit card is used for charging
|
||||||
<li><a href="{% url 'payment-balance-list' %}">Show your balance</a>
|
("active: true") and later added cards will not be
|
||||||
</ul>
|
used. To change this, first disable the active flag and
|
||||||
|
then set it on another credit card.
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div id="pay" class="row">
|
||||||
|
<div class="col"><h3>Billing Address, Payments and Balance</h3></div>
|
||||||
|
<div class="col-8">
|
||||||
|
<p>Billing addresses behave similar to credit cards: you can
|
||||||
|
have many of them, but only one can be active. The active
|
||||||
|
billing address is taken for creating new orders.</p>
|
||||||
|
|
||||||
<div id="net" class="row">
|
<p>In uncloud we use the pre-paid model: you can add money to
|
||||||
<div class="col"><h3>Networking</h3></div>
|
your account via payments. You can always check your
|
||||||
<div class="col-8">
|
balance. The products you use will automatically be charged from
|
||||||
<p>
|
your existing balance.
|
||||||
With uncloud you can use a variety of network related
|
</p>
|
||||||
services.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<ul>
|
<p>In the future you will be able opt-in to automatically
|
||||||
<li>You can <a href="{% url 'wireguardvpnnetwork-list' %}">list or
|
recharging your account at a certain time frame or whenever it
|
||||||
create VPNs</a> based on wireguard
|
is below a certain amount</p>
|
||||||
<li>You can also <a href="{% url 'wireguardvpnnetworksizes-list'
|
|
||||||
%}">list which network sizes are available</a>
|
|
||||||
</ul>
|
<ul>
|
||||||
|
<li><a href="{% url 'billingaddress-list' %}">Create or list
|
||||||
|
your billing addresses</a>
|
||||||
|
<li><a href="{% url 'payment-list' %}">Make a payment or list your payments</a>
|
||||||
|
<li><a href="{% url 'payment-balance-list' %}">Show your balance</a>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="net" class="row">
|
||||||
|
<div class="col"><h3>Networking</h3></div>
|
||||||
|
<div class="col-8">
|
||||||
|
<p>
|
||||||
|
With uncloud you can use a variety of network related
|
||||||
|
services.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>You can <a href="{% url 'wireguardvpnnetwork-list' %}">list or
|
||||||
|
create VPNs</a> based on wireguard
|
||||||
|
<ul>
|
||||||
|
<li>Checkout
|
||||||
|
<a href="{% url 'wireguardvpnnetworksizes-list' %}">which
|
||||||
|
network sizes are available</a> at the moment.
|
||||||
|
</ul>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="net" class="row">
|
||||||
|
<div class="col"><h3>Current limitations</h3></div>
|
||||||
|
<div class="col-8">
|
||||||
|
<ul>
|
||||||
|
<li>Payments are only possible in CHF.
|
||||||
|
<li>Bills are not yet visible (payments are, though)
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,30 @@
|
||||||
{% extends 'uncloud/base.html' %}
|
{% extends 'uncloud/base.html' %}
|
||||||
|
|
||||||
{% block header %}
|
{% block bootstrap5_extra_head %}
|
||||||
<script src="https://js.stripe.com/v3/"></script>
|
<script src="https://js.stripe.com/v3/"></script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block body %}
|
{% block bootstrap5_content %}
|
||||||
<div id="content">
|
<div class="container">
|
||||||
<h1>Register Credit Card with Stripe</h1>
|
|
||||||
<p>
|
<div id="content">
|
||||||
By submitting I authorise to send instructions to
|
<h1>Register Credit Card with Stripe</h1>
|
||||||
the financial institution that issued my card to take
|
<p>
|
||||||
payments from my card account in accordance with the
|
By submitting I authorise to send instructions to
|
||||||
|
the financial institution that issued my card to take
|
||||||
|
payments from my card account in accordance with the
|
||||||
terms of my agreement with you.
|
terms of my agreement with you.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<span id="message"></span>
|
<span id="message"></span>
|
||||||
<div id="card-element"></div>
|
<div id="card-element"></div>
|
||||||
<button type='button' id="card-button">Save</button>
|
<button type='button' id="card-button">Save</button>
|
||||||
<div id="ungleichmessage">The card will be registered with stripe.</div>
|
<div id="ungleichmessage">The card will be registered with stripe.</div>
|
||||||
|
|
||||||
<div id="goback" style="display: none;">
|
<div id="goback" style="display: none;">
|
||||||
<a href="{% url 'uncloudindex' %}">Go back to main page</a>
|
<a href="{% url 'uncloudindex' %}">Go back to main page</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Enable Stripe from UI elements - standard code -->
|
<!-- Enable Stripe from UI elements - standard code -->
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue