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">×</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">×</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 %}