Added new page(Choice ssh key generate/upload), changed design of generate ssh form
This commit is contained in:
Siarhei Puhach
parent
f49d6b398f
commit
7cc70a95ac
7 changed files with 249 additions and 22 deletions
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -92,3 +92,144 @@
|
|||
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
70
hosting/templates/hosting/choice_ssh_keys.html
Normal 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%}
|
||||
|
||||
|
|
@ -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,19 +20,21 @@
|
|||
{% 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 %}
|
||||
</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">
|
||||
|
|
@ -41,7 +43,6 @@
|
|||
</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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue