sanghee/dynamicweb
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

btn syles copied to add key page

Browse source
This commit is contained in:
ARvind Tiwari 2017-08-02 23:51:44 +05:30
parent 3772788ffe
commit 0a858f8aa7
5 changed files with 179 additions and 173 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
hosting/static/hosting/css/bootstrap.min.css vendored
View file

File diff suppressed because one or more lines are too long

61
hosting/static/hosting/css/user_keys.css
View file

@ -1,9 +1,9 @@
/* ssh_keys_choice */ /* ssh_keys_choice */
.dashboard-choice-container h1 { .h1-thin {
font-family: Lato, sans-serif; font-family: Lato, sans-serif;
font-weight: 300; font-weight: 300;
} }
.dashboard-choice-container .page-header { .dashboard-container .page-header {
border: 0; border: 0;
margin-top: 0; margin-top: 0;
} }
@ -54,14 +54,8 @@
} }
@media (max-width: 767px) { @media (max-width: 767px) {
.mob-only { .h1-thin {
display: initial; font-size: 27px;
}
.pc-only {
display: none;
}
.dashboard-choice-container h1 {
font-size: 30px;
} }
.dashboard-choice-container h2 { .dashboard-choice-container h2 {
font-size: 20px; font-size: 20px;
@ -178,6 +172,7 @@
} }
.form_key_name{ .form_key_name{
width:60%; width:60%;
min-width: 215px;
} }
.form_public_key{ .form_public_key{
resize: none; resize: none;
@ -219,43 +214,52 @@
} }
.form_public_key::-webkit-input-placeholder{ .form_public_key::-webkit-input-placeholder{
position: relative; position: absolute;
top: 80%; bottom: 5px;
font-size: 20px; font-size: 20px;
font-weight:200; font-weight: 200;
font-family: 'Lato-Light', sans-serif; font-family: 'Lato-Light', sans-serif;
} }
.form_public_key::-moz-input-placeholder{ .form_public_key::-moz-input-placeholder{
position: relative; position: absolute;
top: 80%; bottom: 5px;
font-size: 20px; font-size: 20px;
font-family: 'Lato-Light', sans-serif; font-family: 'Lato-Light', sans-serif;
font-weight:200; font-weight:200;
} }
.form_public_key:-moz-input-placeholder{ .form_public_key:-moz-input-placeholder{
position: relative; position: absolute;
top: 80%; bottom: 5px;
font-size: 20px; font-size: 20px;
font-weight:200; font-weight:200;
font-family: 'Lato-Light', sans-serif; font-family: 'Lato-Light', sans-serif;
} }
.form_public_key:-ms-input-placeholder { .form_public_key:-ms-input-placeholder {
position: relative; position: absolute;
top: 80%; bottom: 5px;
font-size: 20px; font-size: 20px;
font-weight:200; font-weight:200;
font-family: 'Lato-Light', sans-serif; font-family: 'Lato-Light', sans-serif;
} }
.underform-contaner{ .underform-contaner{
display: flex;
vertical-align: middle;
align-items: center;
justify-content: space-between;
flex-direction: row;
margin-bottom: 20px; margin-bottom: 20px;
} }
@media (min-width: 767px) {
.underform-contaner {
display: flex;
vertical-align: middle;
align-items: center;
justify-content: space-between;
flex-direction: row;
}
}
@media (max-width: 767px) {
.underform-contaner .btn-container {
text-align: right;
}
}
.underform-contaner h4{ .underform-contaner h4{
font-family: 'Lato-Light', sans-serif; font-family: 'Lato-Light', sans-serif;
} }
@ -264,6 +268,7 @@
font-weight: 600; font-weight: 600;
min-width: 120px; min-width: 120px;
height: 35px; height: 35px;
margin-top: 0;
} }
.underform-contaner .btn-default{ .underform-contaner .btn-default{
background-color: #ccc; background-color: #ccc;
@ -298,4 +303,12 @@
} }
.mob-only { .mob-only {
display: none; display: none;
}
@media (max-width: 767px) {
.mob-only {
display: initial;
}
.pc-only {
display: none;
}
} }

6
hosting/templates/hosting/choice_ssh_keys.html
View file

@ -5,7 +5,7 @@
<div class="container virtual-machine-container dashboard-container dashboard-choice-container"> <div class="container virtual-machine-container dashboard-container dashboard-choice-container">
<div class="wide440"> <div class="wide440">
<div class="page-header"> <div class="page-header">
<h1><i class="fa fa-key" aria-hidden="true"></i>&nbsp;{% trans "SSH Key"%}</h1> <h1 class="h1-thin"><i class="fa fa-key" aria-hidden="true"></i>&nbsp;{% trans "SSH Key"%}</h1>
<p>{% trans "Choose a key option in order to access your VM" %}.</p> <p>{% trans "Choose a key option in order to access your VM" %}.</p>
</div> </div>
{% if messages %} {% if messages %}
@ -22,7 +22,7 @@
<form class="text-right" action="" method="post"> <form class="text-right" action="" method="post">
{% csrf_token %} {% csrf_token %}
<button type="submit" class="btn choice-btn choice-btn-faded"> <button type="submit" class="btn choice-btn choice-btn-faded">
{% trans "Generate"%} {% trans "Generate" %}
</button> </button>
</form> </form>
@ -32,7 +32,7 @@
<p>{% trans "I want to use my existing public key"%}.</p> <p>{% trans "I want to use my existing public key"%}.</p>
<form class="text-right" action="{% url 'hosting:create_ssh_key' %}"> <form class="text-right" action="{% url 'hosting:create_ssh_key' %}">
<button type="submit" class="btn choice-btn"> <button type="submit" class="btn choice-btn">
{% trans "Upload"%} {% trans "Upload" %}
</button> </button>
</form> </form>
</div> </div>

72
hosting/templates/hosting/user_key.html
View file

@ -2,53 +2,53 @@
{% load staticfiles bootstrap3 i18n %} {% load staticfiles bootstrap3 i18n %}
{% block content %} {% block content %}
<div> <div>
<div class="virtual-machine-container dashboard-container "> <div class="virtual-machine-container dashboard-container">
<div class="row"> <div class="row">
<div class="container-table col-md-9 col-md-offset-2"> <div class="col-md-9 col-md-offset-2">
<div class="col-sm-12"> <form method="POST" action="" novalidate class="form-ssh">
<form method="POST" action="" novalidate class="form-ssh"> {% csrf_token %}
{% csrf_token %} <div class="page-header">
<h3><i class="fa fa-key fa-separate" aria-hidden="true"></i>{% trans "Add your public SSH key" %}</h3> <h1 class="h1-thin"><i class="fa fa-key" aria-hidden="true"></i>&nbsp;{% trans "Add your public SSH key" %}</h1>
{% if messages %} </div>
{% if messages %}
<div class="alert alert-warning"> <div class="alert alert-warning">
{% for message in messages %} {% for message in messages %}
<span>{{ message }}</span> <span>{{ message }}</span>
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
{% for field in form %} {% for field in form %}
{% bootstrap_field field %} {% bootstrap_field field %}
{% endfor %} {% endfor %}
{% buttons %} {% buttons %}
<div class="underform-contaner"> <div class="underform-contaner">
<h4>{% trans "Use your created key to access to the VM" %}.</h4> <h4>{% trans "Use your created key to access to the VM" %}.</h4>
<button type="submit" name='add_ssh' class="btn btn-success custom_form_button"> <div class="btn-container">
{% trans "Add SSH key"%} <button type="submit" name="add_ssh" class="btn choice-btn">
{% trans "Add SSH Key" %}
</button> </button>
</div> </div>
<div class="underform-contaner"> </div>
<h4>{% trans "Or you can generate a new key pair"%}.</h4> <div class="underform-contaner">
<button type="submit" name='generate' class="btn btn-default custom_form_button">{% trans "Generate"%} <h4>{% trans "Or you can generate a new key pair"%}.</h4>
</button> <div class="btn-container">
<button type="submit" name="generate" class="btn choice-btn choice-btn-faded">
{% trans "Generate" %}
</button>
</div> </div>
</div>
{% endbuttons %}
</form>
{% if private_key %}
{% endbuttons %} <div class="alert alert-warning">
</form> <strong>{% trans "Warning!"%}</strong>{% trans "You can download your SSH private key once. Don't loose your key" %}
</div>
{% if private_key %} <div class="form-group">
<div class="alert alert-warning"> <textarea class="form-control" rows="6" id="ssh_key" type="hidden" style="display:none">{{private_key}}</textarea>
</div>
<strong>{% trans "Warning!"%}</strong>{% trans "You can download your SSH private key once. Don't loose your key" %} {% endif %}
</div>
<div class="form-group">
<textarea class="form-control" rows="6" id="ssh_key" type="hidden" style="display:none">{{private_key}}</textarea>
</div>
{% endif %}
<div class="clearfix"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

211
hosting/templates/hosting/user_keys.html
View file

@ -3,120 +3,113 @@
{% block content %} {% block content %}
<div> <div>
<div class="container virtual-machine-container dashboard-container "> <div class="container virtual-machine-container dashboard-container ">
<div class="row"> <h2><i class="fa fa-key" aria-hidden="true"></i>&nbsp;{% trans "Your SSH Keys"%}</h2>
<div class="col-md-12"> {% if messages %}
<div class="col-sm-12"> <div class="alert alert-warning">
<h2><i class="fa fa-key" aria-hidden="true"></i>&nbsp;{% trans "Your SSH Keys"%}</h2> {% for message in messages %}
{% if messages %} <span>{{ message }}</span>
<div class="alert alert-warning"> {% endfor %}
{% for message in messages %} </div>
<span>{{ message }}</span> {% endif %}
{% endfor %} <div class="ssh-header-container">
</div> <p>{% trans "To generate a new key pair or to upload your existing key, click 'Add Key'" %}</p>
{% endif %} <a class="btn btn-primary btn-custom-download" href="{% url 'hosting:choice_ssh_keys' %}" >
<div class="ssh-header-container"> <span class="fa fa-plus"></span>&nbsp;&nbsp;{% trans "Add SSH Key"%}
<p>{% trans "To generate a new key pair or to upload your existing key, click 'Add Key'" %}</p> </a>
<a class="btn btn-primary btn-custom-download" href="{% url 'hosting:choice_ssh_keys' %}" > </div>
<span class="fa fa-plus"></span>&nbsp;&nbsp;{% trans "Add SSH Key"%}
</a>
</div>
<table class="table borderless table-hover ssh-keys-table"> <table class="table borderless table-hover ssh-keys-table">
<br/> <br/>
<thead> <thead>
<tr> <tr>
<th>{% trans "Name"%}</th> <th>{% trans "Name"%}</th>
<th>{% trans "Delete Key"%}</th> <th>{% trans "Delete Key"%}</th>
<th>{% trans "Public Key"%}</th> <th>{% trans "Public Key"%}</th>
<th>{% trans "Private Key"%}</th> <th>{% trans "Private Key"%}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for user_key in keys %} {% for user_key in keys %}
<tr> <tr>
<td scope="row">{{user_key.name}}</td> <td scope="row">{{user_key.name}}</td>
<td> <td>
<button type="button" class="btn btn-default btn-custom-delete" data-toggle="modal" <button type="button" class="btn btn-default btn-custom-delete" data-toggle="modal"
data-target="#Modal{{ user_key.id }}" style="color: #717274"> data-target="#Modal{{ user_key.id }}" style="color: #717274">
{% trans "Delete"%} {% trans "Delete"%}
</button> </button>
<div class="modal fade" id="Modal{{user_key.id }}" tabindex="-1" role="dialog"> <div class="modal fade" id="Modal{{user_key.id }}" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document"> <div class="modal-dialog" role="document">
<div class="modal-content"> <div class="modal-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" <button type="button" class="close" data-dismiss="modal"
aria-label="Confirm"><span aria-label="Confirm"><span
aria-hidden="true">&times;</span> aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<h4 class="modal-title" id="ModalLabel">{% trans "Do You want to delete this key?"%}</h4>
<form method="post" action="{% url 'hosting:delete_ssh_key' user_key.id %}">
{% csrf_token %}
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
{% trans "Close"%}
</button>
<button type="submit" class="btn btn-primary">{% trans "Delete"%}
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</td>
<td>
<p type="button" data-toggle="modal" style="margin: 0" data-target="#Modal_public_key{{ user_key.id }}">
<a href="#">{% trans "Show"%}</a>
</p>
<div class="modal fade" id="Modal_public_key{{user_key.id }}" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Confirm"><span
aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="ModalLabel_Public_Key">{% trans "Public ssh key"%}</h4>
</div>
<div class="modal-body">
<p>{{ user_key.public_key }}</p>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
{% trans "Close"%}
</button>
</div>
</div>
</div>
</div>
</div>
</td>
</td>
<td>
{% if user_key.private_key %}
<form action="{{ user_key.private_key.url }}">
<button style="color: #717274" type="submit" class="btn btn-default" data-toggle="modal"
>
<span class="pc-only">{% trans "Download"%}</span>
<span class="mob-only"><i class="fa fa-download"></i></span>
</button> </button>
</form> </div>
{% endif %} <div class="modal-body">
</td> <h4 class="modal-title" id="ModalLabel">{% trans "Do You want to delete this key?"%}</h4>
</tr> <form method="post" action="{% url 'hosting:delete_ssh_key' user_key.id %}">
{% endfor %} {% csrf_token %}
</tbody> <div class="modal-footer">
</table> <button type="button" class="btn btn-default"
<div class="clearfix"></div> data-dismiss="modal">
</div> {% trans "Close"%}
</div> </button>
</div> <button type="submit" class="btn btn-primary">{% trans "Delete"%}
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</td>
<td>
<p type="button" data-toggle="modal" style="margin: 0" data-target="#Modal_public_key{{ user_key.id }}">
<a href="#">{% trans "Show"%}</a>
</p>
<div class="modal fade" id="Modal_public_key{{user_key.id }}" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Confirm"><span
aria-hidden="true">&times;</span>
</button>
<h4 class="modal-title" id="ModalLabel_Public_Key">{% trans "Public ssh key"%}</h4>
</div>
<div class="modal-body">
<p>{{ user_key.public_key }}</p>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
{% trans "Close"%}
</button>
</div>
</div>
</div>
</div>
</div>
</td>
</td>
<td>
{% if user_key.private_key %}
<form action="{{ user_key.private_key.url }}">
<button style="color: #717274" type="submit" class="btn btn-default" data-toggle="modal"
>
<span class="pc-only">{% trans "Download"%}</span>
<span class="mob-only"><i class="fa fa-download"></i></span>
</button>
</form>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div> </div>
</div> </div>