diff --git a/hosting/forms.py b/hosting/forms.py
index 505ecbce..b48a52ef 100644
--- a/hosting/forms.py
+++ b/hosting/forms.py
@@ -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')
diff --git a/hosting/static/hosting/css/user_keys.css b/hosting/static/hosting/css/user_keys.css
index 973b45fb..416b9e44 100644
--- a/hosting/static/hosting/css/user_keys.css
+++ b/hosting/static/hosting/css/user_keys.css
@@ -91,4 +91,145 @@
padding-left: 0;
padding-right: 0;
}
-}
\ No newline at end of file
+}
+.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;
+}
diff --git a/hosting/templates/hosting/choice_ssh_keys.html b/hosting/templates/hosting/choice_ssh_keys.html
new file mode 100644
index 00000000..7da48342
--- /dev/null
+++ b/hosting/templates/hosting/choice_ssh_keys.html
@@ -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%}
+
diff --git a/hosting/templates/hosting/user_key.html b/hosting/templates/hosting/user_key.html
index 061e759e..b98f4b38 100644
--- a/hosting/templates/hosting/user_key.html
+++ b/hosting/templates/hosting/user_key.html
@@ -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 %}
diff --git a/hosting/templates/hosting/user_keys.html b/hosting/templates/hosting/user_keys.html
index 4af8c3d0..0fe50a6f 100644
--- a/hosting/templates/hosting/user_keys.html
+++ b/hosting/templates/hosting/user_keys.html
@@ -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>
diff --git a/hosting/urls.py b/hosting/urls.py
index 495ac312..fc8198ef 100644
--- a/hosting/urls.py
+++ b/hosting/urls.py
@@ -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(),
diff --git a/hosting/views.py b/hosting/views.py
index a5cea6c9..184f170f 100644
--- a/hosting/views.py
+++ b/hosting/views.py
@@ -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