Improve the alias forms

admin/freeposte/admin/forms.py

@@ -57,7 +57,7 @@ class UserReplyForm(Form):
 
 class AliasCreateForm(Form):
     localpart = fields.StringField('Alias', [validators.DataRequired()])
-    destination = fields.StringField('Destination', widget=widgets.TextArea())
+    destination = fields.StringField('Destination')
     comment = fields.StringField('Comment')
     submit = fields.SubmitField('Create')
 

admin/freeposte/admin/models.py

@@ -115,6 +115,13 @@ class User(Address):
         else:
             return self.admin_of
 
+    def get_managed_addresses(self):
+        addresses = []
+        for domain in self.get_managed_domains():
+            addresses.extend(domain.users)
+            addresses.extend(domain.aliases)
+        return addresses
+
     @classmethod
     def login(cls, email, password):
         user = cls.get_by_email(email)

admin/freeposte/admin/static/app.css

@@ -0,0 +1,4 @@
+.bootstrap-tagsinput {
+  display: block;
+  border-radius: 0px;
+}

admin/freeposte/admin/static/bootstrap-tagsinput/css/bootstrap-tagsinput.css

@@ -0,0 +1,55 @@
+.bootstrap-tagsinput {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  display: inline-block;
+  padding: 4px 6px;
+  color: #555;
+  vertical-align: middle;
+  border-radius: 4px;
+  max-width: 100%;
+  line-height: 22px;
+  cursor: text;
+}
+.bootstrap-tagsinput input {
+  border: none;
+  box-shadow: none;
+  outline: none;
+  background-color: transparent;
+  padding: 0 6px;
+  margin: 0;
+  width: auto;
+  max-width: inherit;
+}
+.bootstrap-tagsinput.form-control input::-moz-placeholder {
+  color: #777;
+  opacity: 1;
+}
+.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
+  color: #777;
+}
+.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
+  color: #777;
+}
+.bootstrap-tagsinput input:focus {
+  border: none;
+  box-shadow: none;
+}
+.bootstrap-tagsinput .tag {
+  margin-right: 2px;
+  color: white;
+}
+.bootstrap-tagsinput .tag [data-role="remove"] {
+  margin-left: 8px;
+  cursor: pointer;
+}
+.bootstrap-tagsinput .tag [data-role="remove"]:after {
+  content: "x";
+  padding: 0px 2px;
+}
+.bootstrap-tagsinput .tag [data-role="remove"]:hover {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}

admin/freeposte/admin/templates/alias/create.html

@@ -1,4 +1,4 @@
-{% extends "form.html" %}
+{% extends "base.html" %}
 
 {% block title %}
 Create alias
@@ -7,3 +7,21 @@ Create alias
 {% block subtitle %}
 {{ domain }}
 {% endblock %}
+
+{% block box_content %}
+<form class="form" method="post" role="form">
+  {{ form.hidden_tag() }}
+  {{ macros.form_field(form.localpart, append='<span class="input-group-addon">@'+domain.name+'</span>') }}
+  {{ macros.form_field(form.destination, id='destination') }}
+  {{ macros.form_field(form.comment) }}
+  {{ macros.form_field(form.submit) }}
+  <script>
+    $("#destination").tagsinput({
+      confirmKeys: [13, 32],
+      typeahead: {
+        source: {{ current_user.get_managed_addresses()|map('string')|list|tojson }}
+      }
+    });
+  </script>
+</form>
+{% endblock %}

admin/freeposte/admin/templates/base.html

@@ -7,6 +7,18 @@
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
 <link rel="stylesheet" href="{{ url_for('.static', filename='adminlte/css/AdminLTE.min.css') }}">
 <link rel="stylesheet" href="{{ url_for('.static', filename='adminlte/css/skin-blue.min.css') }}">
+<link rel="stylesheet" href="{{ url_for('.static', filename='bootstrap-tagsinput/css/bootstrap-tagsinput.css') }}">
+<link rel="stylesheet" href="{{ url_for('.static', filename='app.css') }}">
+{% endblock %}
+
+{% block head %}
+{{super()}}
+{% block scripts %}
+{{super()}}
+<script src="{{ url_for('.static', filename='bootstrap-tagsinput/js/bootstrap-tagsinput.min.js') }}"></script>
+<script src="{{ url_for('.static', filename='typeahead/js/typeahead.bundle.js') }}"></script>
+<script src="{{ url_for('.static', filename='adminlte/js/app.min.js') }}"></script>
+{% endblock %}
 {% endblock %}
 
 {% block body_attribs %}
@@ -65,10 +77,5 @@ class="hold-transition skin-blue sidebar-mini"
       <a class="white-text" href="https://almsaeedstudio.com/preview">AdminLTE</a>
       <span class="pull-right"><i class="fa fa-code-fork"></i> on <a class="white-text" href="https://github.com/kaiyou/freeposte.io">Github</a></a>
     </footer>
-
-    {% block scripts %}
-    {{super()}}
-    <script src="{{ url_for('.static', filename='adminlte/js/app.min.js') }}"></script>
-    {% endblock %}
   </div>
 {% endblock %}