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