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

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,
+    public_key = forms.CharField(widget=forms.Textarea(
-                                 help_text=_('Paste here your public key'))
+        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')

hosting/static/hosting/css/user_keys.css

@@ -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;
+}

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%}
+

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. "%} 
+                                {% trans "Add SSH key"%}
-                            </button>
-<br />
-<br />
-							{% trans "Or generate a new key pair."%} <br />
-<br />
-                                <button class="btn btn-success">{% trans "Generate Key Pair"%} </a>
                             </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 %}

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>

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(),

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