chore: improve anonymization form (#81)

public/partials/anonymize.htm

@@ -17,6 +17,7 @@
           <h6 class="card-subtitle mb-2 text-muted">
             Fill the information to anonymize! It will only take 5min.
           </h6>
+          <h2>Source</h2>
           <!-- repoUrl -->
           <div class="form-group">
             <label for="repoUrl">Type the url of your repository</label>
@@ -54,7 +55,7 @@
               class="invalid-feedback"
               ng-show="anonymize.repoUrl.$error.used"
             >
-              {{repoUrl}} is already d
+              {{repoUrl}} is already anonymized
             </div>
           </div>
           <!-- select repo -->
@@ -92,7 +93,7 @@
             <!-- Branch -->
             <div class="form-group">
               <label for="branch">Branch</label>
-              <div class="input-group mb-3">
+              <div class="input-group mb-1">
                 <select
                   class="form-control"
                   id="branch"
@@ -117,9 +118,26 @@
                   </button>
                 </div>
               </div>
-              <small class="form-text text-muted"
+              <small class="form-text text-muted">
-                >The branch to anonymize</small
+                The branch to anonymize
-              >
+              </small>
+            </div>
+            <div class="form-group">
+              <div class="form-check">
+                <input
+                  class="form-check-input"
+                  type="checkbox"
+                  id="update"
+                  name="update"
+                  ng-model="options.update"
+                />
+                <label class="form-check-label" for="update">Auto update</label>
+                <small id="updateHelp" class="form-text text-muted"
+                  >Automatically update the anonymized repository with the
+                  latest commit of the repository. The repository is updated
+                  once per hour maximum.</small
+                >
+              </div>
             </div>
             <!-- Commit -->
             <div class="form-group">
@@ -128,14 +146,55 @@
                 class="form-control"
                 id="commit"
                 name="commit"
+                pattern="[a-fA-Z0-9]{6,}"
                 ng-model="source.commit"
                 required
                 ng-class="{'is-invalid': anonymize.commit.$invalid}"
               />
               <small class="form-text text-muted"
-                >The commit to anonymize.</small
+                >The SHA of the commit to anonymize.</small
               >
+              <div
+                class="invalid-feedback"
+                ng-show="anonymize.commit.$error.pattern"
+              >
+                The commit SHA is not valid. It should respect this pattern
+                [a-fA-Z0-9]{6,}.
+              </div>
             </div>
+            <h2>Conference</h2>
+            <!-- Conference -->
+            <div class="form-group">
+              <label for="conference"
+                >Conference <span class="text-muted">Optional</span></label
+              >
+              <input
+                class="form-control"
+                id="conference"
+                name="conference"
+                ng-model="conference"
+                ng-class="{'is-invalid': anonymize.conference.$invalid}"
+              />
+              <small class="form-text text-muted" ng-show="conference_data"
+                ><a ng-href="{{conference_data.url}}" target="_target"
+                  >{{conference_data.name}}</a
+                >
+                will expire on {{conference_data.endDate | date}}.</small
+              >
+
+              <div
+                class="invalid-feedback"
+                ng-show="anonymize.conference.$error.activated"
+              >
+                The conference is not activated.
+              </div>
+              <small class="form-text text-muted" ng-show="!conference_data">
+                Use the conference ID that your conference provided you. This
+                will update automatically the anonymization options based on the
+                conference preferences.
+              </small>
+            </div>
+            <h2>Anonymization Options</h2>
             <!-- Repo ID -->
             <div class="form-group">
               <label for="repoId">Anonymize repository id</label>
@@ -187,34 +246,54 @@
                 Terms are in an invalid format
               </div>
             </div>
-            <!-- Conference -->
+
             <div class="form-group">
-              <label for="conference"
+              <label for="expiration">Expiration strategy</label>
-                >Conference <span class="text-muted">Optional</span></label
+              <select
+                class="form-control"
+                id="expiration"
+                name="expiration"
+                ng-model="options.expirationMode"
+              >
+                <option value="never" selected>Never expire</option>
+                <option value="redirect">
+                  Redirect to GitHub when expired
+                </option>
+                <option value="remove">Remove when expired</option>
+              </select>
+              <small class="form-text text-muted"
+                >Define the expiration strategy for the anonymized
+                repository.</small
+              >
+            </div>
+            <div
+              class="form-group"
+              id="expiration-date-form"
+              ng-hide="options.expirationMode=='never'"
+            >
+              <label for="expirationDate"
+                >Expiration date of the anonymized repository</label
               >
               <input
                 class="form-control"
-                id="conference"
+                type="date"
-                name="conference"
+                name="expirationDate"
-                ng-model="conference"
+                id="expirationDate"
-                ng-class="{'is-invalid': anonymize.conference.$invalid}"
+                ng-model="options.expirationDate"
               />
-              <small class="form-text text-muted" ng-show="!conference_data"
+              <small
-                >In which conference the paper will be submitted.</small
+                class="form-text text-muted"
+                ng-show="options.expirationMode=='remove'"
+                >After {{options.expirationDate | date}}, the repository will be
+                removed and the visitor will not be able to see the content of
+                the repository.</small
               >
-              <small class="form-text text-muted" ng-show="conference_data"
+              <small
-                ><a ng-href="{{conference_data.url}}" target="_target"
+                class="form-text text-muted"
-                  >{{conference_data.name}}</a
+                ng-show="options.expirationMode=='redirect'"
-                >
+                >After {{options.expirationDate | date}}, the visitors of the
-                will expire on {{conference_data.endDate | date}}.</small
+                anonymized repository will be redirected to {{repoUrl}}.</small
               >
-
-              <div
-                class="invalid-feedback"
-                ng-show="anonymize.conference.$error.activated"
-              >
-                The conference is not activated.
-              </div>
             </div>
 
             <div class="accordion mb-3" id="options">
@@ -229,7 +308,7 @@
                       aria-expanded="true"
                       aria-controls="collapseOne"
                     >
-                      Rendering options
+                      Advance options
                     </button>
                   </h2>
                 </div>
@@ -299,72 +378,29 @@
                           >Display Notebooks</label
                         >
                       </div>
-                    </div>
+
-                  </div>
+                      <div class="form-group">
-                </div>
+                        <label for="mode">Proxy mode</label>
-              </div>
+                        <select
-              <div class="card">
+                          class="form-control"
-                <div class="card-header" id="headingTwo">
+                          id="mode"
-                  <h2 class="mb-0">
+                          name="mode"
-                    <button
+                          ng-model="source.type"
-                      class="btn btn-block text-left collapsed"
-                      type="button"
-                      data-toggle="collapse"
-                      data-target="#collapseTwo"
-                      aria-expanded="false"
-                      aria-controls="collapseTwo"
-                    >
-                      Features
-                    </button>
-                  </h2>
-                </div>
-                <div
-                  id="collapseTwo"
-                  class="collapse"
-                  aria-labelledby="headingTwo"
-                  data-parent="#options"
-                >
-                  <div class="card-body">
-                    <div class="form-group">
-                      <div class="form-check">
-                        <input
-                          class="form-check-input"
-                          type="checkbox"
-                          id="update"
-                          name="update"
-                          ng-model="options.update"
-                        />
-                        <label class="form-check-label" for="update"
-                          >Auto update</label
                         >
-                        <small id="termsHelp" class="form-text text-muted"
+                          <option value="GitHubStream" selected>Stream</option>
-                          >Automatically update the anonymized repository with
+                          <option value="GitHubDownload">Download</option>
-                          the latest commit of the repository. The repository is
+                        </select>
-                          updated once per hour maximum.</small
+                        <small class="form-text text-muted"
+                          >How the repository will be anonymized. Stream mode
+                          will request the content on the flight. This is the
+                          only option for repositories bigger than
+                          {{site_options.MAX_REPO_SIZE * 1024| humanFileSize}}.
+                          Download will download the repository the repository
+                          on the anonymous.4open.science server, it is faster
+                          and offer more features.</small
                         >
                       </div>
                     </div>
-                    <div class="form-group">
-                      <label for="mode">Proxy mode</label>
-                      <select
-                        class="form-control"
-                        id="mode"
-                        name="mode"
-                        ng-model="source.type"
-                      >
-                        <option value="GitHubStream" selected>Stream</option>
-                        <option value="GitHubDownload">Download</option>
-                      </select>
-                      <small class="form-text text-muted"
-                        >How the repository will be anonymized. Stream mode will
-                        request the content on the flight. This is the only
-                        option for repositories bigger than
-                        {{site_options.MAX_REPO_SIZE * 1024| humanFileSize}}.
-                        Download will download the repository the repository on
-                        the anonymous.4open.science server, it is faster and
-                        offer more features.</small
-                      >
-                    </div>
                     <div class="form-group">
                       <div class="form-check">
                         <input
@@ -389,80 +425,6 @@
                   </div>
                 </div>
               </div>
-              <div class="card">
-                <div class="card-header" id="headingThree">
-                  <h2 class="mb-0">
-                    <button
-                      class="btn btn-block text-left collapsed"
-                      type="button"
-                      data-toggle="collapse"
-                      data-target="#collapseThree"
-                      aria-expanded="false"
-                      aria-controls="collapseThree"
-                    >
-                      Expiration
-                    </button>
-                  </h2>
-                </div>
-                <div
-                  id="collapseThree"
-                  class="collapse"
-                  aria-labelledby="headingThree"
-                  data-parent="#options"
-                >
-                  <div class="card-body">
-                    <div class="form-group">
-                      <label for="expiration">Expiration options</label>
-                      <select
-                        class="form-control"
-                        id="expiration"
-                        name="expiration"
-                        ng-model="options.expirationMode"
-                      >
-                        <option value="never" selected>Never expire</option>
-                        <option value="redirect">
-                          Redirect to GitHub when expired
-                        </option>
-                        <option value="remove">Remove when expired</option>
-                      </select>
-                      <small class="form-text text-muted"
-                        >Define the expiration strategy for the repository
-                        expiration.</small
-                      >
-                    </div>
-                    <div
-                      class="form-group"
-                      id="expiration-date-form"
-                      ng-hide="options.expirationMode=='never'"
-                    >
-                      <label for="expirationDate"
-                        >Expiration date of the anonymized repository</label
-                      >
-                      <input
-                        class="form-control .form-control-lg"
-                        type="date"
-                        name="expirationDate"
-                        id="expirationDate"
-                        ng-model="options.expirationDate"
-                      />
-                      <small
-                        class="form-text text-muted"
-                        ng-show="options.expirationMode=='remove'"
-                        >After {{options.expirationDate | date}}, the repository
-                        will be removed and the visitor will not be able to see
-                        the content of the repository.</small
-                      >
-                      <small
-                        class="form-text text-muted"
-                        ng-show="options.expirationMode=='redirect'"
-                        >After {{options.expirationDate | date}}, the visitors
-                        of the anonymized repository will be redirected to
-                        {{repoUrl}}.</small
-                      >
-                    </div>
-                  </div>
-                </div>
-              </div>
             </div>
           </div>
           <div

public/script/app.js

@@ -892,6 +892,42 @@ angular
       };
       $('[data-toggle="tooltip"]').tooltip();
 
+      $scope.$watch("options.update", (v) => {
+        if (v) {
+          $scope.anonymize.commit.$$element[0].disabled = true;
+        } else {
+          $scope.anonymize.commit.$$element[0].disabled = false;
+        }
+      })
+      $scope.$watch("source.branch", async () => {
+        const selected = $scope.branches.filter(
+          (f) => f.name == $scope.source.branch
+        )[0];
+        if ($scope.details && $scope.details.hasPage) {
+          $scope.anonymize.page.$$element[0].disabled = false;
+          if ($scope.details.pageSource.branch != $scope.source.branch) {
+            $scope.anonymize.page.$$element[0].disabled = true;
+          }
+        }
+
+        if (selected) {
+          $scope.source.commit = selected.commit;
+          $scope.readme = selected.readme;
+          await getReadme();
+          anonymize();
+          $scope.$apply();
+        }
+      });
+
+      $scope.$watch("options.mode", (v) => {
+        if (v == "GitHubStream") {
+          $scope.options.page = false;
+          $scope.anonymize.page.$$element[0].disabled = true;
+        } else {
+          $scope.anonymize.page.$$element[0].disabled = false;
+        }
+      });
+
       $scope.getBranches = async (force) => {
         const o = parseGithubUrl($scope.repoUrl);
         const branches = await $http.get(
@@ -1145,6 +1181,7 @@ angular
       $scope.$watch("conference", async (v) => {
         getConference();
       });
+
       $scope.$watch("source.branch", async (v) => {
         const selected = $scope.branches.filter(
           (f) => f.name == $scope.source.branch
@@ -1533,7 +1570,6 @@ angular
       getPlans();
       const start = new Date();
       start.setDate(1);
-      console.log(start);
       start.setMonth(start.getMonth() + 1);
       const end = new Date();
       end.setMonth(start.getMonth() + 7, 0);
@@ -1555,7 +1591,6 @@ angular
       $scope.plan = null;
 
       $scope.$watch("options.plan.planID", () => {
-        console.log($scope.plans, $scope.options);
         $scope.plan = $scope.plans.filter(
           (f) => f.id == $scope.options.plan.planID
         )[0];