btn syles copied to add key page
This commit is contained in:
ARvind Tiwari
parent
3772788ffe
commit
0a858f8aa7
5 changed files with 179 additions and 173 deletions
2
hosting/static/hosting/css/bootstrap.min.css
vendored
2
hosting/static/hosting/css/bootstrap.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,9 +1,9 @@
|
|||
/* ssh_keys_choice */
|
||||
.dashboard-choice-container h1 {
|
||||
.h1-thin {
|
||||
font-family: Lato, sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
.dashboard-choice-container .page-header {
|
||||
.dashboard-container .page-header {
|
||||
border: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
|
@ -54,14 +54,8 @@
|
|||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.mob-only {
|
||||
display: initial;
|
||||
}
|
||||
.pc-only {
|
||||
display: none;
|
||||
}
|
||||
.dashboard-choice-container h1 {
|
||||
font-size: 30px;
|
||||
.h1-thin {
|
||||
font-size: 27px;
|
||||
}
|
||||
.dashboard-choice-container h2 {
|
||||
font-size: 20px;
|
||||
|
|
@ -178,6 +172,7 @@
|
|||
}
|
||||
.form_key_name{
|
||||
width:60%;
|
||||
min-width: 215px;
|
||||
}
|
||||
.form_public_key{
|
||||
resize: none;
|
||||
|
|
@ -219,43 +214,52 @@
|
|||
}
|
||||
|
||||
.form_public_key::-webkit-input-placeholder{
|
||||
position: relative;
|
||||
top: 80%;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
font-size: 20px;
|
||||
font-weight:200;
|
||||
font-weight: 200;
|
||||
font-family: 'Lato-Light', sans-serif;
|
||||
|
||||
}
|
||||
.form_public_key::-moz-input-placeholder{
|
||||
position: relative;
|
||||
top: 80%;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
font-size: 20px;
|
||||
font-family: 'Lato-Light', sans-serif;
|
||||
font-weight:200;
|
||||
|
||||
}
|
||||
.form_public_key:-moz-input-placeholder{
|
||||
position: relative;
|
||||
top: 80%;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
font-size: 20px;
|
||||
font-weight:200;
|
||||
font-family: 'Lato-Light', sans-serif;
|
||||
}
|
||||
.form_public_key:-ms-input-placeholder {
|
||||
position: relative;
|
||||
top: 80%;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
font-size: 20px;
|
||||
font-weight:200;
|
||||
font-family: 'Lato-Light', sans-serif;
|
||||
}
|
||||
.underform-contaner{
|
||||
display: flex;
|
||||
vertical-align: middle;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
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{
|
||||
font-family: 'Lato-Light', sans-serif;
|
||||
}
|
||||
|
|
@ -264,6 +268,7 @@
|
|||
font-weight: 600;
|
||||
min-width: 120px;
|
||||
height: 35px;
|
||||
margin-top: 0;
|
||||
}
|
||||
.underform-contaner .btn-default{
|
||||
background-color: #ccc;
|
||||
|
|
@ -299,3 +304,11 @@
|
|||
.mob-only {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
.mob-only {
|
||||
display: initial;
|
||||
}
|
||||
.pc-only {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="container virtual-machine-container dashboard-container dashboard-choice-container">
|
||||
<div class="wide440">
|
||||
<div class="page-header">
|
||||
<h1><i class="fa fa-key" aria-hidden="true"></i> {% trans "SSH Key"%}</h1>
|
||||
<h1 class="h1-thin"><i class="fa fa-key" aria-hidden="true"></i> {% trans "SSH Key"%}</h1>
|
||||
<p>{% trans "Choose a key option in order to access your VM" %}.</p>
|
||||
</div>
|
||||
{% if messages %}
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
<form class="text-right" action="" method="post">
|
||||
{% csrf_token %}
|
||||
<button type="submit" class="btn choice-btn choice-btn-faded">
|
||||
{% trans "Generate"%}
|
||||
{% trans "Generate" %}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
<p>{% trans "I want to use my existing public key"%}.</p>
|
||||
<form class="text-right" action="{% url 'hosting:create_ssh_key' %}">
|
||||
<button type="submit" class="btn choice-btn">
|
||||
{% trans "Upload"%}
|
||||
{% trans "Upload" %}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,53 +2,53 @@
|
|||
{% load staticfiles bootstrap3 i18n %}
|
||||
{% block content %}
|
||||
<div>
|
||||
<div class="virtual-machine-container dashboard-container ">
|
||||
<div class="virtual-machine-container dashboard-container">
|
||||
<div class="row">
|
||||
<div class="container-table col-md-9 col-md-offset-2">
|
||||
<div class="col-sm-12">
|
||||
<form method="POST" action="" novalidate class="form-ssh">
|
||||
{% csrf_token %}
|
||||
<h3><i class="fa fa-key fa-separate" aria-hidden="true"></i>{% trans "Add your public SSH key" %}</h3>
|
||||
{% if messages %}
|
||||
<div class="col-md-9 col-md-offset-2">
|
||||
<form method="POST" action="" novalidate class="form-ssh">
|
||||
{% csrf_token %}
|
||||
<div class="page-header">
|
||||
<h1 class="h1-thin"><i class="fa fa-key" aria-hidden="true"></i> {% trans "Add your public SSH key" %}</h1>
|
||||
</div>
|
||||
{% if messages %}
|
||||
<div class="alert alert-warning">
|
||||
{% for message in messages %}
|
||||
<span>{{ message }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% for field in form %}
|
||||
{% bootstrap_field field %}
|
||||
{% endfor %}
|
||||
{% buttons %}
|
||||
<div class="underform-contaner">
|
||||
<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">
|
||||
{% trans "Add SSH key"%}
|
||||
{% endif %}
|
||||
{% for field in form %}
|
||||
{% bootstrap_field field %}
|
||||
{% endfor %}
|
||||
{% buttons %}
|
||||
<div class="underform-contaner">
|
||||
<h4>{% trans "Use your created key to access to the VM" %}.</h4>
|
||||
<div class="btn-container">
|
||||
<button type="submit" name="add_ssh" class="btn choice-btn">
|
||||
{% trans "Add SSH Key" %}
|
||||
</button>
|
||||
</div>
|
||||
<div class="underform-contaner">
|
||||
<h4>{% trans "Or you can generate a new key pair"%}.</h4>
|
||||
<button type="submit" name='generate' class="btn btn-default custom_form_button">{% trans "Generate"%}
|
||||
</button>
|
||||
</div>
|
||||
<div class="underform-contaner">
|
||||
<h4>{% trans "Or you can generate a new key pair"%}.</h4>
|
||||
<div class="btn-container">
|
||||
<button type="submit" name="generate" class="btn choice-btn choice-btn-faded">
|
||||
{% trans "Generate" %}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endbuttons %}
|
||||
</form>
|
||||
|
||||
|
||||
{% endbuttons %}
|
||||
</form>
|
||||
|
||||
{% if private_key %}
|
||||
<div class="alert alert-warning">
|
||||
|
||||
<strong>{% trans "Warning!"%}</strong>{% trans "You can download your SSH private key once. Don't loose your key" %}
|
||||
</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>
|
||||
{% if private_key %}
|
||||
<div class="alert alert-warning">
|
||||
<strong>{% trans "Warning!"%}</strong>{% trans "You can download your SSH private key once. Don't loose your key" %}
|
||||
</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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,120 +3,113 @@
|
|||
{% block content %}
|
||||
<div>
|
||||
<div class="container virtual-machine-container dashboard-container ">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="col-sm-12">
|
||||
<h2><i class="fa fa-key" aria-hidden="true"></i> {% trans "Your SSH Keys"%}</h2>
|
||||
{% if messages %}
|
||||
<div class="alert alert-warning">
|
||||
{% for message in messages %}
|
||||
<span>{{ message }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="ssh-header-container">
|
||||
<p>{% trans "To generate a new key pair or to upload your existing key, click 'Add Key'" %}</p>
|
||||
<a class="btn btn-primary btn-custom-download" href="{% url 'hosting:choice_ssh_keys' %}" >
|
||||
<span class="fa fa-plus"></span> {% trans "Add SSH Key"%}
|
||||
</a>
|
||||
</div>
|
||||
<h2><i class="fa fa-key" aria-hidden="true"></i> {% trans "Your SSH Keys"%}</h2>
|
||||
{% if messages %}
|
||||
<div class="alert alert-warning">
|
||||
{% for message in messages %}
|
||||
<span>{{ message }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="ssh-header-container">
|
||||
<p>{% trans "To generate a new key pair or to upload your existing key, click 'Add Key'" %}</p>
|
||||
<a class="btn btn-primary btn-custom-download" href="{% url 'hosting:choice_ssh_keys' %}" >
|
||||
<span class="fa fa-plus"></span> {% trans "Add SSH Key"%}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<table class="table borderless table-hover ssh-keys-table">
|
||||
<br/>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% trans "Name"%}</th>
|
||||
<th>{% trans "Delete Key"%}</th>
|
||||
<th>{% trans "Public Key"%}</th>
|
||||
<th>{% trans "Private Key"%}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for user_key in keys %}
|
||||
<tr>
|
||||
<td scope="row">{{user_key.name}}</td>
|
||||
<table class="table borderless table-hover ssh-keys-table">
|
||||
<br/>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% trans "Name"%}</th>
|
||||
<th>{% trans "Delete Key"%}</th>
|
||||
<th>{% trans "Public Key"%}</th>
|
||||
<th>{% trans "Private Key"%}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for user_key in keys %}
|
||||
<tr>
|
||||
<td scope="row">{{user_key.name}}</td>
|
||||
|
||||
<td>
|
||||
<button type="button" class="btn btn-default btn-custom-delete" data-toggle="modal"
|
||||
data-target="#Modal{{ user_key.id }}" style="color: #717274">
|
||||
<td>
|
||||
<button type="button" class="btn btn-default btn-custom-delete" data-toggle="modal"
|
||||
data-target="#Modal{{ user_key.id }}" style="color: #717274">
|
||||
|
||||
{% trans "Delete"%}
|
||||
</button>
|
||||
{% trans "Delete"%}
|
||||
</button>
|
||||
|
||||
<div class="modal fade" id="Modal{{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">×</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">×</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>
|
||||
<div class="modal fade" id="Modal{{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">×</span>
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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">×</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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue