From de0bada84a56df3ec640bfed0e63aff3eadc8f9f Mon Sep 17 00:00:00 2001
From: Siarhei Puhach <siarhei.puhach@itechart-group.com>
Date: Tue, 4 Jul 2017 15:00:08 +0300
Subject: [PATCH] SSH key change design init

---
 hosting/static/hosting/css/user_keys.css  |   5 +
 hosting/templates/hosting/base_short.html |   7 +-
 hosting/templates/hosting/user_keys.html  | 121 ++++++++++++----------
 3 files changed, 75 insertions(+), 58 deletions(-)
 create mode 100644 hosting/static/hosting/css/user_keys.css

diff --git a/hosting/static/hosting/css/user_keys.css b/hosting/static/hosting/css/user_keys.css
new file mode 100644
index 00000000..3b3c9c63
--- /dev/null
+++ b/hosting/static/hosting/css/user_keys.css
@@ -0,0 +1,5 @@
+.ssh-key-header {
+    line-height: 35px;
+}
+.ssh-container{
+}
diff --git a/hosting/templates/hosting/base_short.html b/hosting/templates/hosting/base_short.html
index e1a6a027..96c313a4 100644
--- a/hosting/templates/hosting/base_short.html
+++ b/hosting/templates/hosting/base_short.html
@@ -18,6 +18,7 @@
 
     <!-- Custom CSS -->
     <link href="{% static 'hosting/css/landing-page.css' %}" rel="stylesheet">
+    <link href="{% static 'hosting/css/user_keys.css' %}" rel="stylesheet">
     <link href="{% static 'hosting/css/payment.css' %}" rel="stylesheet">
     <link href="{% static 'hosting/css/order.css' %}" rel="stylesheet">
     <link href="{% static 'hosting/css/orders.css' %}" rel="stylesheet">
@@ -46,7 +47,7 @@
 
 
     <!-- Navigation -->
-    
+
     <nav class="navbar navbar-default  navbar-fixed-top topnav" role="navigation">
         <div class="container topnav">
             <!-- Brand and toggle get grouped for better mobile display -->
@@ -90,7 +91,7 @@
                             <li><a href="{% url 'hosting:logout' %}"><i class="glyphicon glyphicon-lock"></i>{% trans "Logout"%} </a></li>
                           </ul>
                         </li>
-                        <!-- 
+                        <!--
                         <li>
                             <a href="{{ request.session.hosting_url}}#how">{% trans "How it works"%}</a>
                         </li>
@@ -105,7 +106,7 @@
                         </li>
                         <li>
                             <a href="{{ request.session.hosting_url }}#contact">{% trans "Contact"%}</a>
-                        </li>  
+                        </li>
                         <li>
                             <a href="{% url 'hosting:login' %}?next={{request.current_path}}">{% trans "Login"%}</a>
                         </li>  -->
diff --git a/hosting/templates/hosting/user_keys.html b/hosting/templates/hosting/user_keys.html
index 1dc45e54..f8a75616 100644
--- a/hosting/templates/hosting/user_keys.html
+++ b/hosting/templates/hosting/user_keys.html
@@ -1,12 +1,12 @@
 {% extends "hosting/base_short.html" %}
 {% load staticfiles bootstrap3 i18n %}
-{% block content %} 
+{% block content %}
 <div>
 	<div class="container virtual-machine-container dashboard-container ">
 		<div class="row">
-			<div class="col-md-9 col-md-offset-2">
+			<div class="col-md-12">
 				 <div  class="col-sm-12">
-                    <h3><i class="fa fa-key" aria-hidden="true"></i>{% trans "Access Key"%} </h3>
+                    <h2><i class="fa fa-key" aria-hidden="true"></i>{% trans "Your SSH Key"%} </h2>
                     {% if messages %}
                     <div class="alert alert-warning">
                         {% for message in messages %}
@@ -14,66 +14,77 @@
                         {% endfor %}
                     </div>
                     {% endif %}
-                    <p class="pull-right">
-                        <a class="btn btn-success" href="{% url 'hosting:create_ssh_key' %}" >{% trans "Add Key"%} </a>
-                    </p>
-                    <h5> Use your created key to access to the machine. If you lost it, contact us. </h5>
-                    <table class="table borderless table-hover"> 
+                     <div class="ssh-container">
+                         <p class="pull-right">
+                             <a class="btn btn-primary" href="{% url 'hosting:create_ssh_key' %}" >
+                                 <b>+</b> {% trans "Add Key"%}
+                             </a>
+                         </p>
+                         <h5 class="ssh-key-header">To generate a new key pair or to upload your existing key, click "Add Key"</h5>
+                     </div>
+
+                    <table class="table borderless table-hover">
                         <br/>
-                        <thead> 
-                        <tr> 
+                        <thead>
+                        <tr>
                             <th>{% trans "Name"%}</th>
-                            <th>{% trans "Created at"%} </th>
-                            <th>{% trans "Status"%} </th>
-                            <th></th>
+                            <th>{% trans "Delete Key"%}</th>
+                            <th>{% trans "Public Key"%}</th>
+                            <th>{% trans "Private Key"%}</th>
                         </tr>
                         </thead>
-                        <tbody> 
+                        <tbody>
                             {% for user_key in keys %}
-                            <tr> 
-                                <td scope="row">{{user_key.name}}</td> 
+                            <tr>
+                                <td scope="row">{{user_key.name}}</td>
 
-                                <td><span id="ssh-created_at-{{user_key.id}}">{{user_key.created_at|date:'Y-m-d H:i' }}</span></td> 
                                 <td>
-                                    <span class="h3 label label-success"><strong>Active</strong></span>
-                                </td> 
-                                <td> 
-                                <button type="button" class="btn btn-default" data-toggle="modal"
-                                        data-target="#Modal{{ user_key.id }}"><a
-                                        href="#">{% trans "Delete Key"%}</a>
-                                </button>
+                                    <button type="button" class="btn btn-default" data-toggle="modal"
+                                            data-target="#Modal{{ user_key.id }}">
+                                        <a href="#">
+                                            {% trans "Delete"%}</a>
+                                    </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">&times;</span>
-                    </button>
-                </div>
-                <div class="modal-body">
-                    <h4 class="modal-title" id="ModalLabel">{% trans "Do You want to delete this key?"%}</h4>
+                                    <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">&times;</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>
+                                                    <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>
+                                    <span class="h3">Show</span>
+                                </td>
+                                <td>
+                                    <button type="button" class="btn btn-default" data-toggle="modal"
+                                            ><a
+                                            href="#">{% trans "Download"%}</a>
+                                    </button>
+                                </td>
                             </tr>
                             {% endfor %}
-                                </tbody> 
+                                </tbody>
                             </table>
 
 
@@ -84,17 +95,17 @@
 
 	    </div>
 	</div>
-    
+
 </div>
 
 {% if next_url %}
-    <script type="text/javascript"> 
+    <script type="text/javascript">
         window.location.href = '{{next_url}}';
     </script>
 {% endif %}
 
- 
-<script type="text/javascript"> 
+
+<script type="text/javascript">
 
     window.onload = function () {
         {% for user_key in keys %}