seasponge/app/views/draw.html

<div>

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="https://github.com/mozilla/seasponge" target="_blank">SeaSponge</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <a class="dropdown-toggle"
                        data-toggle="dropdown" role="button" aria-expanded="false">
                            <span class="glyphicon glyphicon-floppy-disk"></span> File <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#/create">
                                <i class="glyphicon glyphicon-plus"></i>
                                New Model
                            </a></li>
                            <li class="divider"></li>
                            <li><a ng-click="saveModel()">
                                <i class="glyphicon glyphicon-floppy-save"></i>
                                Save Model
                            </a></li>
                            <li><a href="#/load">
                                <i class="glyphicon glyphicon-floppy-open"></i>
                                Load Model
                            </a></li>
                            <li class="divider"></li>
                            <li><a ng-click="exportDiagram()">
                                <i class="glyphicon glyphicon-export"></i>
                                Export Diagram as Image
                            </a></li>
                            <li class="divider"></li>
                            <li><a ng-click="">
                                <i class="glyphicon glyphicon-export"></i>
                                Export Report as PDF
                            </a></li>
                            <li><a ng-click="">
                                <i class="glyphicon glyphicon-export"></i>
                                Export Diagram as HTML
                            </a></li>
                        </ul>
                    </li>

                </ul>
                <ul class="nav navbar-nav">
                    <li><a class="" ng-click="zoomInDiagram()">
                        <i class="glyphicon glyphicon-zoom-in"></i>
                        Zoom-In
                    </a></li>
                    <li><a class="" ng-click="zoomOutDiagram()">
                        <i class="glyphicon glyphicon-zoom-out"></i>
                        Zoom-Out
                    </a></li>
                </ul>

                <ul class="nav navbar-nav">
                    <li>
                        <a type="button" class="" ng-click="openModelInfo()">
                            {{model.title}}
                        </a>
                    </li>
                </ul>

                <div class="navbar-right">
                    <ul class="nav navbar-nav">
                        <li>
                            <form class="navbar-form" role="search">
                                <button type="button" class="btn btn-default"
                                ng-click="shareModel()">
                                    <span class="glyphicon glyphicon-share"></span>
                                    Refresh Sharable Link
                                </button>
                                <div class="form-group">
                                    <input type="text"
                                    class="form-control" placeholder="Share link"
                                    id="share-link" name="modelLink"
                                    ng-model="shareLink">
                                </div>
                            </form>
                        </li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                <i class="glyphicon glyphicon-question-sign"></i> Help <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <a href="#/about">
                                        About SeaSponge
                                    </a>
                                </li>
                                <li><a target="_blank" href="https://github.com/mozilla/seasponge/wiki">
                                    Documentation
                                </a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

  <!-- Main Content -->
  <div class="row">

    <!-- Left sidebar controls -->
    <div class="content-left">

      <accordion close-others="false">

        <!-- Model Info -->
        <accordion-group is-open="menu.modelOpen">

          <accordion-heading>
            Model Information <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menu.modelOpen, 'glyphicon-chevron-right': !menu.modelOpen}"></i>
          </accordion-heading>

          <form class="form" role="form" name="modelForm">

            <div class="form-group">
              <label for="model-title" class="">Model Title</label>
              <input type="text"
              class="form-control" placeholder="Model Title"
              id="model-title" name="modelTitle"
              ng-model="model.title" required ng-required=true
              ng-minlength=2>

              <span class="text-danger"
              ng-show="modelForm.modelTitle.$error.required">
                  Model Title is required!
              </span>
              <span class="text-danger"
              ng-show="modelForm.modelTitle.$error.minlength">
                  Too short!
              </span>
            </div>

            <div class="form-group">
              <label for="model-version" class="">Version</label>
              <input type="text" class="form-control"
              placeholder="Model Version"
              id="model-version" name="modelVersion"
              ng-model="model.version"
              ng-required=true
              ng-pattern=semverRegex>

              <span class="text-danger"
              ng-show="modelForm.modelVersion.$error.required">
                  Model Version is required!
              </span>
              <span class="text-danger"
              ng-show="modelForm.modelVersion.$error.pattern">
                  Please follow <a href="http://semver.org/" target="_blank"
                  class=" btn-link">semver</a>.
              </span>
            </div>

            <div class="form-group">
              <label for="model-authors" class="">Authors</label>
              <input type="text"
              class="form-control" placeholder="Model Authors"
              id="model-authors" name="modelAuthors"
              ng-required=true
              ng-minlength=2
              ng-model="model.authors">

              <span class="text-danger"
              ng-show="modelForm.modelAuthors.$error.required">
                  Model Authors is required!
              </span>
              <span class="text-danger"
              ng-show="modelForm.modelAuthors.$error.minlength">
                  Too short!
              </span>

            </div>

            <div class="form-group">
                <label for="model-assumptions" class="">Assumptions</label>
            </div>
            <div class="well">
                <div class="form-group"
                ng-repeat="assumption in model.assumptions"
                >
                    <ng-form class="form" role="form" name="assumptionForm">
                        <div class="form-group">
                            <label for="model-assumptions-title" class="">Title</label>
                            <input type="text"
                            class="form-control" id="model-assumptions-title"
                            placeholder="Enter assumption title"
                            name="assumptionTitle"
                            ng-required=true
                            ng-minlength=2
                            ng-model="assumption.title">
                            <span class="text-danger"
                            ng-show="assumptionForm.assumptionTitle.$error.required">
                                Assumption Title is required!
                            </span>
                            <span class="text-danger"
                            ng-show="assumptionForm.assumptionTitle.$error.minlength">
                                Too short!
                            </span>
                        </div>
                        <div class="form-group">
                            <label for="model-assumptions-details" class="">Details</label>
                            <input type="text"
                            class="form-control" id="model-assumptions-details"
                            placeholder="Enter assumption details"
                            name="assumptionDetails"
                            ng-required=true
                            ng-minlength=2
                            ng-model="assumption.details">
                            <span class="text-danger"
                            ng-show="assumptionForm.assumptionDetails.$error.required">
                                Assumption Details are required!
                            </span>
                            <span class="text-danger"
                            ng-show="assumptionForm.assumptionDetails.$error.minlength">
                                Too short!
                            </span>
                        </div>
                        <div class="form-group">
                            <button class="form-control btn btn-danger"
                            ng-click="model.removeAssumption(assumption)"
                            >
                                <span class="glyphicon glyphicon-trash"></span>
                            </button>
                        </div>
                        <hr/>
                    </ng-form>
                </div>
                <button class="btn btn-primary form-control"
                ng-click="model.addAssumption()">
                    <span class="glyphicon glyphicon-plus"></span>
                    Add Assumption
                </button>
            </div>


          </form>

        </accordion-group>

        <!-- Diagram Information -->
        <accordion-group is-open="menu.diagramOpen">

          <accordion-heading>
            Diagram Information <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menu.diagramOpen, 'glyphicon-chevron-right': !menu.diagramOpen}"></i>
          </accordion-heading>

          <div class="lead" ng-show="!selectedDiagram">
            Select a Diagram to view its information
          </div>

          <form class="form" role="form"
          name="diagramForm" ng-show="selectedDiagram">

            <div class="form-group">
              <label for="diagram-title" class="">Diagram Title</label>
              <input type="text"
              class="form-control" placeholder="Diagram Title"
              id="diagram-title" name="diagramTitle"
              ng-model="selectedDiagram.title" required ng-required=true
              ng-minlength=2>

              <span class="text-danger"
              ng-show="diagramForm.diagramTitle.$error.required">
                  Diagram Title is required!
              </span>
              <span class="text-danger"
              ng-show="diagramForm.diagramTitle.$error.minlength">
                  Too short!
              </span>
            </div>

            <div class="form-group">
              <label class=""># of Elements</label>
              <span>{{selectedDiagram.elements.length}}</span>
            </div>

            <div class="form-group">
              <label class=""># of Flows</label>
              <span>{{selectedDiagram.flows.length}}</span>
            </div>

            <div class="form-group">
              <label class=""># of Boundaries</label>
              <span>{{selectedDiagram.boundaries.length}}</span>
            </div>

          </form>

        </accordion-group>

        <!-- Threats -->
            <!-- New -->
        <accordion-group is-open="menu.newThreatOpen">

          <accordion-heading>
            New Threat <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menu.newThreatOpen, 'glyphicon-chevron-right': !menu.newThreatOpen}"></i>
          </accordion-heading>

          <form class="form" role="form" name="newThreatForm">

            <div class="form-group">
              <label for="threat-name" class="">Threat Name</label>
              <input type="text"
              class="form-control" placeholder="Threat Name"
              id="threat-name" name="threatName"
              ng-model="newThreat.name" required ng-required=true
              ng-minlength=2>

              <span class="text-danger"
              ng-show="newThreatForm.threatName.$error.required">
                  Threat Name is required!
              </span>
              <span class="text-danger"
              ng-show="newThreatForm.threatName.$error.minlength">
                  Too short!
              </span>
            </div>

            <div class="form-group">
              <label for="newThreat-severity" class="">Severity</label>
              <select class="form-control" id="newThreat-severity"
              ng-options="severity for severity in config.severityOptions"
              ng-model="newThreat.severity">
              </select>
            </div>

            <div class="form-group">
              <label for="newThreat-description" class="">Description</label>
              <textarea
              class="form-control" id="newThreat-description" placeholder="Describe the threat" ng-model="newThreat.description"></textarea>
            </div>

            <div class="form-group">
              <button class="btn btn-sm btn-primary" ng-click="generateThreat()">
                  <span class="glyphicon glyphicon-plus"></span>
                  Add Threat
              </button>
            </div>

          </form>

        </accordion-group>
            <!-- Existing -->
        <accordion-group is-open="menu.threatsOpen">

          <accordion-heading>
            Threat Information <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menu.threatsOpen, 'glyphicon-chevron-right': !menu.threatsOpen}"></i>
          </accordion-heading>

          <p class="lead" ng-hide="model.threatLength()">
            Add threats first
          </p>

          <div class="panel panel-default" ng-repeat-start="item in model.threats">
            <div class="panel-heading">
              <span class="label label-danger">{{item.severity}}</span> {{item.name}}
              <button class="btn btn-danger btn-xs pull-right" ng-click="model.removeThreat(item)"><span class="glyphicon glyphicon-trash"></span></button>
            </div>
            <div class="panel-body">
              {{item.description}}
            </div>
          </div>
          <br ng-repeat-end>

        </accordion-group>

        <!-- Stencils -->
        <accordion-group class="stencils-container" is-open="menu.stencilsOpen">

          <accordion-heading>
            Stencils <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menu.stencilsOpen, 'glyphicon-chevron-right': !menu.stencilsOpen}"></i>
          </accordion-heading>

          <div class="all-stencils row">
            <input type="text" class="form-control stencil-search" ng-model="stencilQuery" placeholder="Search Stencils">
            <div data-ng-repeat="stencil in filterFn(stencilQuery, stencils)">
                <div class="stencil col-xs-6 col-md-4 col-lg-4"
                draggable="true" data-drag="true" jqyoui-draggable ng-model="stencil"
                data-jqyoui-options="{helper: 'clone', animate: true, placeholder: 'keep'}">
                  <a href="" class="thumbnail stencil-item" ng-click="addStencil(stencil)">
                    <!-- <img ng-src="{{stencil.icon}}" ng-alt="{{stencil.title}}"> -->
                    <span class="stencil-name">{{stencil.title}}</span>
                    <br/>
                    <span class="stencil-type label label-info">{{stencil.category}}</span>
                  </a>
                </div>
            </div>

          </div>
        </accordion-group>

        <!-- Selected Element Properties -->
        <accordion-group is-open="menu.propertiesOpen">

          <accordion-heading>

            <div ng-hide="selectedStencil || selectedFlow">
                Properties
            </div>

            <div ng-show="selectedStencil">
                Stencil Properties
                <small>- {{selectedStencil.constructor.title}}
                <span class="label label-info">{{selectedStencil.constructor.category}}</span>
                </small>
            </div>

            <div ng-show="selectedFlow">
              Flow Properties
              <small>- {{selectedFlow.properties.label}}
              </small>
            </div>

            <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menu.propertiesOpen, 'glyphicon-chevron-right': !menu.propertiesOpen}"></i>
          </accordion-heading>

          <form class="form" role="form" ng-show="selectedStencil" onkeypress="return event.keyCode != 13;">

            <div class="form-group">
                <button class="btn btn-danger form-control" ng-click="deleteElement(selectedStencil)">
                    <i class="glyphicon glyphicon-trash"></i>
                    Delete Element
                </button>
            </div>

            <div class="form-group">
              <label for="properties-title" class="">Title</label>
              <br/>
              <input type="text"
              class="form-control" id="properties-title" placeholder="Element instance title"
              ng-model="selectedStencil.title" ng-change="selectedStencil.refreshTitle()">
            </div>

            <div class="form-group">
              <label for="properties-category" class="">Category</label>
              <br/>
              {{selectedStencil.constructor.category}}
            </div>

            <div class="form-group">
              <label for="properties-tags" class="">Tags</label>
              <input type="text"
              class="form-control" id="properties-tags" placeholder="Comma separated tags"
              ng-model="selectedStencil.tags">
            </div>

            <div class="form-group">
                <label for="properties-icon" class="">Icon</label>
                <input type="text"
                class="form-control" id="properties-icon" placeholder="URL to Icon Image"
                ng-model="selectedStencil.icon" ng-change="selectedStencil.refreshIcon()">
            </div>

            <div class="form-group">
              <label for="properties-codeType" class="">Code Type</label>
              <select class="form-control" id="properties-codeType"
              ng-options="codeType for codeType in config.codeTypeOptions"
              ng-model="selectedStencil.codeType">
              </select>
            </div>

            <div class="form-group">
              <label for="properties-runningAs" class="">Running As</label>
              <select class="form-control" id="properties-runningAs"
              ng-model="selectedStencil.runningAs"
              ng-options="runningAs for runningAs in config.runningAsOptions">
              </select>
            </div>

            <div class="form-group">
              <label for="properties-acceptsInput" class="">Accepts Input From</label>
              <select class="form-control" id="properties-acceptsInput"
              ng-model="selectedStencil.acceptsInput"
              ng-options="acceptsInput for acceptsInput in config.acceptsInputOptions">
              </select>
            </div>

            <div class="form-group">
              <label for="properties-authenticationScheme-uses" class="">Has Authentication Scheme</label>
              <input type="checkbox"
              class="form-control" id="properties-authenticationScheme-uses"
              ng-model="selectedStencil.authenticationScheme.uses">
            </div>

            <div class="form-group" ng-if="selectedStencil.authenticationScheme.uses">
              <label for="properties-authenticationScheme-description" class="">Authentication Scheme Description</label>
              <input type="text"
              class="form-control" id="properties-authenticationScheme-description" placeholder="Value"
              ng-model="selectedStencil.authenticationScheme.description">
            </div>

            <div class="form-group">
              <label for="properties-communicationProtocol-uses" class="">Has Communication Protocol</label>
              <input type="checkbox"
              class="form-control" id="properties-communicationProtocol-uses"
              ng-model="selectedStencil.communicationProtocol.uses">
            </div>

            <div class="form-group" ng-if="selectedStencil.communicationProtocol.uses">
              <label for="properties-communicationProtocol-description" class="">Communication Protocol Description</label>
              <input type="text"
              class="form-control" id="properties-communicationProtocol-description" placeholder="Value"
              ng-model="selectedStencil.communicationProtocol.description">
            </div>

            <div class="form-group">
              <label for="properties-authorizationScheme-uses" class="">Has Authorization Scheme</label>
              <input type="checkbox"
              class="form-control" id="properties-authorizationScheme-uses"
              ng-model="selectedStencil.authorizationScheme.uses">
            </div>

            <div class="form-group" ng-if="selectedStencil.authorizationScheme.uses">
              <label for="properties-authorizationScheme-description" class="">Authorization Scheme Description</label>
              <input type="text"
              class="form-control" id="properties-authorizationScheme-description" placeholder="Value"
              ng-model="selectedStencil.authorizationScheme.description">
            </div>

            <div class="form-group">
              <label for="properties-notes" class="">Notes</label>
              <textarea
              class="form-control" id="properties-notes" placeholder="Notes"></textarea
              ng-model="selectedStencil.notes">
            </div>

            <div class="form-group">
                <label for="properties-dataClassifications" class="">Data Classifications</label>
            </div>
            <div class="well">
                <div class="form-group"
                ng-repeat="dataClassification in selectedStencil.dataClassifications"
                >
                    <div class="form-group">
                        <label for="properties-dataClassification-title" class="">Title</label>
                        <input type="text"
                        class="form-control" id="properties-dataClassification-title" placeholder="Value"
                        ng-model="dataClassification.title">
                    </div>
                    <div class="form-group">
                        <label for="properties-dataClassification-type" class="">Type</label>
                        <select class="form-control" id="properties-dataClassification-type"
                        ng-model="dataClassification.type"
                        ng-options="dataClassificationOption for dataClassificationOption in config.dataClassificationOptions">
                        </select>
                    </div>
                    <div class="form-group">
                        <button class="form-control btn btn-danger"
                        ng-click="selectedStencil.removeDataClassification(dataClassification)"
                        >
                            <span class="glyphicon glyphicon-trash"></span>
                        </button>
                    </div>
                    <hr/>
                </div>
                <button class="btn btn-primary form-control"
                ng-click="selectedStencil.addDataClassification()">
                    <span class="glyphicon glyphicon-plus"></span>
                    Add Data Classification
                </button>
            </div>

            <div class="form-group">
                <label for="properties-securityControlOptions" class="">Security Controls</label>
            </div>
            <div class="well">
                <div
                class="form-group"
                ng-repeat="securityControl in selectedStencil.securityControls"
                >
                    <div class="form-group">
                        <label for="properties-securityControl-title" class="">Title</label>
                        <input type="text"
                        class="form-control" id="properties-securityControl-title" placeholder="Value"
                        ng-model="securityControl.title">
                    </div>
                    <div class="form-group">
                        <label for="properties-securityControl-type" class="">Type</label>
                        <select class="form-control" id="properties-securityControl-type"
                        ng-model="securityControl.type"
                        ng-options="securityControlOption for securityControlOption in config.securityControlOptions">
                        </select>
                    </div>
                    <div class="form-group">
                        <button class="form-control btn btn-danger"
                        ng-click="selectedStencil.removeSecurityControl(securityControl)"
                        >
                            <span class="glyphicon glyphicon-trash"></span>
                        </button>
                    </div>
                    <hr/>
                </div>
                <button class="btn btn-primary form-control"
                ng-click="selectedStencil.addSecurityControl()">
                    <span class="glyphicon glyphicon-plus"></span>
                    Add Security Control
                </button>
            </div>

          </form>

          <form class="form" role="form" ng-show="selectedFlow" onkeypress="return event.keyCode != 13;">

            <div class="form-group">
                <button class="btn btn-danger form-control" ng-click="deleteFlow(selectedFlow)">
                    <i class="glyphicon glyphicon-trash"></i>
                    Delete Flow
                </button>
            </div>

            <div class="form-group">
              <label for="properties-title" class="">Label</label>
              <br/>
              <input type="text"
              class="form-control" id="properties-title" placeholder="Flow label"
              ng-model="selectedFlow.properties.label" ng-change="selectedFlow.refreshLabel()">
            </div>

            <div class="form-group">
              <label for="properties-tags" class="">Tags</label>
              <input type="text"
              class="form-control" id="properties-tags" placeholder="Comma separated tags"
              ng-model="selectedFlow.tags">
            </div>

          <div class="lead" ng-hide="selectedStencil || selectedFlow">
            Select an element to view its properties
          </div>

        </accordion-group>

      </accordion>

    </div>

    <!-- Right content -->
    <div class="content-right">

      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li ng-repeat="diagram in model.diagrams"
        ng-class="{active: diagram.selected}">
            <a href="" ng-click="loadDiagram(diagram)" role="tab" data-toggle="tab">{{diagram.title}}</a>
        </li>
        <li>
            <a href="" ng-click="model.addDiagram()" class="">
                <i class="glyphicon glyphicon-plus"></i>
                Diagram
            </a>
        </li>
        <li class="pull-right"><a href="#report" role="tab" data-toggle="tab">Reports</a></li>
      </ul>

      <!-- Tab panes -->
      <div class="drawing-panel" data-drop="true"
      jqyoui-droppable="{onDrop:'dropStencil'}">
        <div class="tab-content">
          <div class="tab-pane active">
            <div class="diagram-contents">
                <!-- KEEP THIS EMPTY -->
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>

</div>