Permalink
Cannot retrieve contributors at this time
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
273 lines (256 sloc)
10.5 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{% extends "saas/base_dashboard.html" %} | |
<!-- Dashboard User Profile Page --> | |
{% block saas_title %} | |
{% if organization %} | |
{% trans organization=organization.printable_name %}{{organization}} Profile{% endtrans %} | |
{% elif user %} | |
{% trans user=user.full_name %}{{user}} Profile{% endtrans %} | |
{% else %} | |
{% trans %}Profile{% endtrans %} | |
{% endif %} | |
{% endblock %} | |
{% block saas_page_layout %} | |
<{% if urls.user %}user{% else %}profile{% endif %}-update inline-template id="profile-container"> | |
<div> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-6"> | |
{# We use the hidden input to pass the picture URL to the Vue component. #} | |
<input name="picture" value="{% if form.instance.picture %}{{form.instance.picture}}{% else %}{{'/static/img/default-user.png'}}{% endif %}" type="hidden"> | |
<img :src="formFields.picture" width="100" height="100" data-toggle="modal" data-target="#upload-picture-modal"> | |
</div> | |
<div class="col-6"> | |
{% block saas_help %} | |
{% trans %}Update your contact information, password, etc.{% endtrans %} | |
{% endblock %} | |
</div> | |
</div> | |
<div class="row pb-3"> | |
<div class="col-md-6"> | |
{% include "saas/profile/_form.html" %} | |
</div> | |
</div> | |
</div> | |
<!-- End Form Inputs --> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-md-12"> | |
<hr class="my-0" /> | |
</div> | |
</div> | |
</div> | |
<div class="container"> | |
<div class="row"> | |
{% if urls.user %} | |
<div class="col-md-6 mt-4"> | |
<div class="card border-secondary"> | |
<div class="card-body text-secondary"> | |
<!-- Update Password --> | |
{% if urls.user.password_change %} | |
<div class="row align-items-center mb-3"> | |
<div class="col-md-12"> | |
<a id="change-password" class="btn btn-secondary btn-block mb-2" href="{{urls.user.password_change}}">{% trans %}Change Password{% endtrans %}</a> | |
</div> | |
<div class="col-md-12"> | |
{% trans %}Use a new password to login.{% endtrans %} | |
</div> | |
</div> | |
{% endif %} | |
{% if urls.user.api_generate_keys %} | |
<div class="row align-items-center" style="margin-top:15px;"> | |
<div class="col-md-12"> | |
<button id="generate-key-open" class="btn btn-secondary btn-block mb-2" data-toggle="modal" data-target="#generate-key">{% trans %}Reset API Key{% endtrans %}</button> | |
</div> | |
<div class="col-md-12"> | |
{% trans %}Obtain a new API Key to authenticate.{% endtrans %} | |
</div> | |
</div> | |
{% endif %} | |
{% if urls.user.api_activate %} | |
<div class="row align-items-center"> | |
<div class="col-sm-5"> | |
<button id="activate-user" class="btn btn-secondary btn-block" @click="activate">{% trans %}Activate{% endtrans %}</button> | |
</div> | |
<div class="col-sm-7"> | |
{% trans %}Send an activation e-mail to the user.{% endtrans %} | |
</div> | |
</div> | |
{% endif %} | |
</div> | |
</div> | |
</div> | |
{% endif %} | |
<!-- Danger Zone --> | |
<div class="col-md-6 mt-4"> | |
<div class="card border-danger h-100"> | |
<div class="card-header"> | |
{% trans %}Danger Zone{% endtrans %} | |
</div> | |
<div class="card-body text-danger"> | |
<div class="row align-items-center"> | |
<div class="col-md-12"> | |
<button id="delete-action-open" | |
class="btn btn-danger btn-block mb-3" | |
data-toggle="modal" | |
data-target="#delete-action">{% trans %}Delete{% endtrans %}</button> | |
</div> | |
<div class="col-md-12"> | |
{% trans %}This operation cannot be reversed.{% endtrans %} | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- *** --> | |
<!-- Start Modal Dialogs --> | |
<!-- *** --> | |
<!-- Modal dialog to upload a picture --> | |
<div id="upload-picture-modal" | |
class="upload-picture modal fade" | |
title="{% trans %}Upload picture ...{% endtrans %}" | |
tabindex="-1" role="dialog" | |
aria-labelledby="{% trans %}Upload picture ...{% endtrans %}" | |
aria-hidden="true"> | |
<div class="modal-dialog"> | |
<div class="modal-content"> | |
<div class="modal-header"> | |
<h4 class="modal-title">{% trans %}Upload picture ...{% endtrans %}</h4> | |
<button type="button" class="close" | |
data-dismiss="modal" aria-hidden="true">×</button> | |
</div> | |
<div class="modal-body"> | |
<div class="text-center" style="border: 1px solid grey;"> | |
<croppa v-model="picture" :width="300" :height="300"></croppa> | |
</div> | |
</div> | |
<div class="modal-footer"> | |
<button type="button" | |
class="btn btn-secondary" | |
data-dismiss="modal"> | |
{% trans %}Cancel{% endtrans %}</button> | |
<button type="submit" class="btn btn-primary" data-dismiss="modal" @click="uploadProfilePicture">{% trans %}Save picture{% endtrans %}</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- modal dialog to delete organization. --> | |
<div class="modal fade" | |
id="delete-action" tabindex="-1" role="dialog" | |
aria-labelledby="{% trans %}Delete Profile{% endtrans %}" aria-hidden="true"> | |
<form class="modal-dialog"> | |
<div class="modal-content"> | |
<div class="modal-header"> | |
<h5 class="modal-title">{% trans %}Delete Profile{% endtrans %} ...</h5> | |
<button type="button" class="close" | |
data-dismiss="modal" aria-hidden="true">×</button> | |
</div> | |
<div class="modal-body"> | |
<p> | |
{% if organization %} | |
{% trans profile_name=organization.printable_name %}You are about to delete the profile and account for {{profile_name}}.{% endtrans %} | |
{% elif user %} | |
{% trans profile_name=user.full_name %}You are about to delete the profile and account for {{profile_name}}.{% endtrans %} | |
{% endif %} | |
{% trans %}This operation cannot be reversed.{% endtrans %} | |
</p> | |
<p> | |
{% trans %}Are you sure you want to continue?{% endtrans %} | |
</p> | |
</div> | |
<div class="modal-footer"> | |
<button id="cancel-delete" | |
data-dismiss="modal" | |
class="btn btn-secondary">{% trans %}Cancel{% endtrans %}</button> | |
<button type="button" id="delete-organization-btn" | |
class="btn btn-danger" | |
data-dismiss="modal" | |
@click="deleteProfile">{% trans %}Delete{% endtrans %}</button> | |
</div> | |
</div> | |
</form> | |
</div><!-- end modal to delete profile --> | |
{% if urls.user %} | |
<!-- modal dialog asking for password before generating API keys --> | |
<div id="generate-key" class="modal fade" | |
tabindex="-1" role="dialog" | |
aria-labelledby="{% trans %}Ask for password{% endtrans %}" aria-hidden="true"> | |
<form class="modal-dialog" method="POST" @submit.prevent="generateKey"> | |
<div class="modal-content"> | |
<div class="modal-header"> | |
<h5 class="modal-title">{% trans %}Please re-enter your password ...{% endtrans %}</h5> | |
<button type="button" class="close" | |
data-dismiss="modal" aria-hidden="true">×</button> | |
</div> | |
<div class="modal-body"> | |
<div class="form-group mb-0"> | |
<input class="form-control" | |
name="password" placeholder="{% trans %}Password{% endtrans %}" type="password" | |
v-model="password" /> | |
</div> | |
<div class="form-group mt-3 mb-0" v-show="apiKey != 'Generating ...'"> | |
<input class="form-control" | |
name="key" placeholder="{% trans %}Generating{% endtrans %} ..." type="text" | |
v-model="apiKey"> | |
<small class="form-text text-muted text-center"> | |
{% trans %}This is your secret API key.{% endtrans %} | |
</small> | |
</div> | |
</div> | |
<div class="modal-footer"> | |
<button class="btn btn-primary" | |
type="submit">{% trans %}Submit{% endtrans %}</button> | |
</div> | |
</div> | |
</form> | |
</div> | |
<!-- modal dialog to generate API keys --> | |
<div id="show-key" class="modal fade" | |
tabindex="-1" role="dialog" | |
aria-labelledby="{% trans %}API Key{% endtrans %}" aria-hidden="true"> | |
<div class="modal-dialog"> | |
<div class="modal-content"> | |
<div class="modal-header"> | |
<button type="button" class="close" | |
data-dismiss="modal" aria-hidden="true">×</button> | |
<h4 class="modal-title">{% trans %}API Key{% endtrans %}</h4> | |
</div> | |
<div class="modal-body"> | |
<div class="form-group"> | |
<div class="controls"> | |
<input class="form-control" | |
name="key" maxlength="128" | |
type="text" disabled placeholder="{% trans %}Generating{% endtrans %} ..." | |
v-model="apiKey" /> | |
</div> | |
</div> | |
<div class="form-group"> | |
<input class="form-control" | |
name="password" maxlength="128" | |
type="password" placeholder="{% trans %}Password{% endtrans %}" | |
v-model="password" /> | |
</div> | |
<div> | |
<p> | |
{% trans %}This is the API key you can use to authenticate with the service.{% endtrans %} | |
</p> | |
<p> | |
{% trans %}The key will only be displayed once. Keep it secure.{% endtrans %} | |
</p> | |
</div> | |
</div> | |
<div class="modal-footer"> | |
<button id="regenerate-key" class="btn btn-secondary" type="button" | |
data-toggle="modal" data-target="#generate-key" | |
data-dismiss="modal">{% trans %}Generate{% endtrans %}</button> | |
<button class="btn btn-primary" | |
data-dismiss="modal">{% trans %}OK{% endtrans %}</button> | |
</div> | |
</div> | |
</div> | |
</div><!-- end of modal dialog to generate API keys --> | |
{% endif %} | |
</div> | |
</{% if urls.user %}user{% else %}profile{% endif %}-update> | |
{% endblock %} |