amal
/
uncloud
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[bootstrap] update to bootstrap5

This commit is contained in:
Nico Schottelius 2021-02-13 18:50:28 +01:00
parent c8ce7dbb40
commit 49f52fd41d
5 changed files with 176 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
requirements.txt
View File

@ -2,7 +2,7 @@
django django
djangorestframework djangorestframework
django-auth-ldap django-auth-ldap
django-bootstrap4 django-bootstrap-v5
psycopg2 psycopg2
ldap3 ldap3

2
uncloud/settings.py
View File

@ -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',

72
uncloud/templates/uncloud/base.html
View File

@ -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>

235
uncloud/templates/uncloud/index.html
View File

@ -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 %}

34
uncloud_pay/templates/uncloud_pay/register_stripe.html
View File

@ -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 -->