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

Added new page(Choice ssh key generate/upload), changed design of generate ssh form

Browse source
This commit is contained in:
Siarhei Puhach 2017-07-05 16:57:49 +03:00
commit 7cc70a95ac
7 changed files with 249 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

10
hosting/forms.py
View file

@ -58,15 +58,19 @@ class HostingUserSignupForm(forms.ModelForm):
class UserHostingKeyForm(forms.ModelForm):
private_key = forms.CharField(widget=forms.HiddenInput(), required=False)
public_key = forms.CharField(widget=forms.Textarea(), required=False,
help_text=_('Paste here your public key'))
public_key = forms.CharField(widget=forms.Textarea(
attrs={'class': 'form_public_key', 'placeholder': 'Paste here your public key'}),
required=False,
)
user = forms.models.ModelChoiceField(queryset=CustomUser.objects.all(),
required=False, widget=forms.HiddenInput())
name = forms.CharField(required=True)
name = forms.CharField(required=True, widget=forms.TextInput(
attrs={'class': 'form_key_name', 'placeholder': 'Give a name to your key',}))
def __init__(self, *args, **kwargs):
self.request = kwargs.pop("request")
super(UserHostingKeyForm, self).__init__(*args, **kwargs)
self.fields['name'].label = "Key name"
def clean_name(self):
return self.data.get('name')

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

@ -91,4 +91,145 @@
padding-left: 0;
padding-right: 0;
}
}
}
.choice-container{
margin-top: 30px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.choice-container div:first-of-type{
border-right: 1px solid #c9c6c6;
}
.choice-container div{
padding-top: 30px;
padding-bottom: 30px;
display: flex;
align-items: center;
flex-direction: column;
width: 50%;
}
.choice-container div h3{
margin: auto;
width: 95%;
text-align: center;
}
.choice-container div h3 img:hover{
cursor: pointer;
}
.dashboard-container {
max-width: 930px !important;
}
.choice-button{
width: 192px;
height: 45px;
border-radius: 0;
color: white;
margin-top: 70px;
}
.choice-button a{
color: white;
font-size: 20px;
}
.upload-btn{
background-color: #337ab7;
}
.form_public_key,
.form_key_name{
border:none;
border-bottom: 1px solid grey;
box-shadow: none;
border-radius: 0;
font-family: 'Lato-Light', sans-serif;
font-size: 20px;
}
.form_key_name::-webkit-input-placeholder{
position: relative;
left:-10px;
font-size: 20px;
font-weight:100;
font-family: 'Lato-Light', sans-serif;
}
.form_key_name::-moz-input-placeholder{
left:-10px;
font-size: 20px;
font-weight:200;
font-family: 'Lato-Light', sans-serif;
}
.form_key_name:-moz-input-placeholder{
left:-10px;
font-family: 'Lato-Light', sans-serif;
font-size: 20px;
font-weight:200;
}
.form_key_name:-ms-input-placeholder {
left:-10px;
font-size: 20px;
font-family: 'Lato-Light', sans-serif;
font-weight:200;
}
.form_public_key::-webkit-input-placeholder{
position: relative;
top: 80%;
left:-10px;
font-size: 20px;
font-weight:200;
font-family: 'Lato-Light', sans-serif;
}
.form_public_key::-moz-input-placeholder{
position: relative;
top: 80%;
left:-10px;
font-size: 20px;
font-family: 'Lato-Light', sans-serif;
font-weight:200;
}
.form_public_key:-moz-input-placeholder{
position: relative;
top: 80%;
left:-10px;
font-size: 20px;
font-weight:200;
font-family: 'Lato-Light', sans-serif;
}
.form_public_key:-ms-input-placeholder {
position: relative;
top: 80%;
left:-10px;
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;
}
.underform-contaner h4{
font-family: 'Lato-Light', sans-serif;
}
.underform-contaner button{
width: 120px;
height: 35px;
}
.control-label{
font-family: 'Lato-Light', sans-serif;
font-size: 20px;
font-weight:200;
}
.form-ssh h3{
margin-bottom: 40px;
}

70
hosting/templates/hosting/choice_ssh_keys.html Normal file
View file

@ -0,0 +1,70 @@
{% extends "hosting/base_short.html" %}
{% load staticfiles bootstrap3 i18n %}
{% 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 " SSH Key"%} </h2>
<h4>Choose a key option in order to access your VMs.</h4>
{% if messages %}
<div class="alert alert-warning">
{% for message in messages %}
<span>{{ message }}</span>
{% endfor %}
</div>
{% endif %}
<div class="choice-container">
<div class="left-choice-container">
<h3>I want to generate a new key pair.
<sup><sup><img src="{% static 'hosting/img/g222.png' %}"/></sup></sup>
</h3>
<button type="button" class="btn btn-success choice-button generate-btn">
<a href="#">{% trans "Generate"%}</a>
</button>
</div>
<div class="right-choice-container">
<h3>I want to use my existing public key.
<sup><sup><img src="{% static 'hosting/img/g222.png' %}"/></sup></sup>
</h3>
<button type="button" class="btn btn-primary choice-button upload-btn">
<a href="{% url 'hosting:create_ssh_key' %}">{% trans "Upload"%}</a>
</button>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
{% if next_url %}
<script type="text/javascript">
window.location.href = '{{next_url}}';
</script>
{% endif %}
<script type="text/javascript">
window.onload = function () {
{% for user_key in keys %}
// var locale_date = new Date(document.getElementById("ssh-created_at-{{user_key.id}}").textContent).toISOString();
var locale_date = moment.utc(document.getElementById("ssh-created_at-{{user_key.id}}").textContent,'YYYY-MM-DD HH:mm').toDate();
locale_date = moment(locale_date).format("YYYY-MM-DD h:mm:ss a");
document.getElementById('ssh-created_at-{{user_key.id}}').innerHTML = locale_date;
{% endfor %}
};
</script>
{%endblock%}

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

@ -1,6 +1,6 @@
{% extends "hosting/base_short.html" %}
{% load staticfiles bootstrap3 i18n %}
{% block content %}
{% block content %}
<div>
<div class="virtual-machine-container dashboard-container ">
<div class="row">
@ -8,7 +8,7 @@
<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 "Access Key"%} </h3>
<h3><i class="fa fa-key fa-separate" aria-hidden="true"></i>{% trans "Add you public SSH key"%} </h3>
{% if messages %}
<div class="alert alert-warning">
{% for message in messages %}
@ -20,28 +20,29 @@
{% bootstrap_field field %}
{% endfor %}
{% buttons %}
<div class="underform-contaner">
<h4> {% trans "Use your created key to access to the machine." %} </h4>
<button type="submit" class="btn btn-success">
{% trans "Upload your own key. "%}
</button>
<br />
<br />
{% trans "Or generate a new key pair."%} <br />
<br />
<button class="btn btn-success">{% trans "Generate Key Pair"%} </a>
{% trans "Add SSH key"%}
</button>
</div>
<div class="underform-contaner">
<h4>{% trans "Or you can generate a new key pair."%}</h4>
<button class="btn btn-success">{% trans "Generate"%}
</button>
</div>
{% endbuttons %}
{% endbuttons %}
</form>
<h5> Use your created key to access to the machine. If you lost it, contact us. </h5>
{% if private_key %}
<div class="alert alert-warning">
<strong>{% trans "Warning!"%}</strong>{% trans "You can download your SSH private key once. Don't lost your key"%}
<strong>{% trans "Warning!"%}</strong>{% trans "You can download your SSH private key once. Don't lost 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>
@ -54,7 +55,7 @@
{% if private_key %}
<!-- Force to download ssh key on page load -->
<script type="text/javascript">
<script type="text/javascript">
var key = window.document.getElementById('ssh_key');
@ -75,7 +76,7 @@
{%endif%}
{% if next_url %}
<script type="text/javascript">
<script type="text/javascript">
window.location.href = '{{next_url}}';
</script>
{% endif %}

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

@ -16,7 +16,7 @@
{% endif %}
<div class="ssh-header-container">
<p>
<a class="btn btn-primary btn-custom-download" href="{% url 'hosting:create_ssh_key' %}" >
<a class="btn btn-primary btn-custom-download" href="{% url 'hosting:choice_ssh_keys' %}" >
<span class="button-plus">✚</span> {% trans "Add Key"%}
</a>
</p>

4
hosting/urls.py
View file

@ -6,7 +6,7 @@ from .views import DjangoHostingView, RailsHostingView, PaymentVMView,\
VirtualMachineView, OrdersHostingDeleteView, NotificationsView, \
MarkAsReadNotificationView, PasswordResetView, PasswordResetConfirmView, HostingPricingView,\
CreateVirtualMachinesView, HostingBillListView, HostingBillDetailView, \
SSHKeyDeleteView, SSHKeyCreateView, SSHKeyListView
SSHKeyDeleteView, SSHKeyCreateView, SSHKeyListView, SSHKeyChoiceView
urlpatterns = [
url(r'index/?$', IndexView.as_view(), name='index'),
@ -26,6 +26,8 @@ urlpatterns = [
name='virtual_machines'),
url(r'ssh_keys/?$', SSHKeyListView.as_view(),
name='ssh_keys'),
url(r'ssh_keys_choice/?$', SSHKeyChoiceView.as_view(),
name='choice_ssh_keys'),
url(r'delete_ssh_key/(?P<pk>\d+)/?$', SSHKeyDeleteView.as_view(),
name='delete_ssh_key'),
url(r'create_ssh_key/?$', SSHKeyCreateView.as_view(),

9
hosting/views.py
View file

@ -368,6 +368,15 @@ class SSHKeyListView(LoginRequiredMixin, ListView):
return super(SSHKeyListView, self).render_to_response(context, **response_kwargs)
class SSHKeyChoiceView(LoginRequiredMixin, View):
template_name = "hosting/choice_ssh_keys.html"
login_url = reverse_lazy('hosting:login')
def get(self, request, *args, **kwargs):
context = {}
return render(request, self.template_name, context)
class SSHKeyCreateView(LoginRequiredMixin, FormView):
form_class = UserHostingKeyForm
model = UserHostingKey