Allows user to set gitlab canary

Renders an HTML page with a switch that allows the user to use either canary or production by setting up a cookie

Allows user to set gitlab canary
c7037eaf · Filipa Lacerda · c7037eaf · c7037eaf · c7037eaf · c7037eaf
Commit c7037eaf authored 6 years ago by Filipa Lacerda
--- a/.gitignore
+++ b/.gitignore
+
+# Created by https://www.gitignore.io/api/git,macos,windows,visualstudiocode
+# Edit at https://www.gitignore.io/?templates=git,macos,windows,visualstudiocode
+
+### Git ###
+# Created by git for backups. To disable backups in Git:
+# $ git config --global mergetool.keepBackup false
+*.orig
+
+# Created by git when using merge tools for conflicts
+*.BACKUP.*
+*.BASE.*
+*.LOCAL.*
+*.REMOTE.*
+*_BACKUP_*.txt
+*_BASE_*.txt
+*_LOCAL_*.txt
+*_REMOTE_*.txt
+
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# End of https://www.gitignore.io/api/git,macos,windows,visualstudiocode
\ No newline at end of file
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
+image: alpine:latest
+
+pages:
+  stage: deploy
+  script:
+  - echo 'Nothing to do...'
+  artifacts:
+    paths:
+    - public
+  only:
+  - master
--- a/public/index.html
+++ b/public/index.html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="generator" content="Choose GitLab Version" />
+    <title>GitLab Version</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Open+Sans:300,700,400"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <section class="wrapper">
+      <div class="container">
+        <h1>
+          Which version of <a href="https://gitlab.com">GitLab</a> are you
+          using?
+        </h1>
+
+        <div class="settings">
+          <div class="text-switch">
+            Current
+          </div>
+          <div class="switch">
+            <input
+              id="next-switch"
+              class="cmn-toggle cmn-toggle-round"
+              type="checkbox"
+            />
+            <label for="next-switch"></label>
+          </div>
+          <div class="text-switch">
+            Next
+          </div>
+        </div>
+      </div>
+    </section>
+    <script src="index.js"></script>
+  </body>
+</html>
--- a/public/index.js
+++ b/public/index.js
+document.addEventListener("DOMContentLoaded", function() {
+  // Fetch the cookie value
+  if (document.cookie.indexOf('gitlab_canary=true') >= 0) {
+    document.querySelector("#next-switch").setAttribute("checked", true);
+  }
+
+  document.querySelector("#next-switch").addEventListener('change', function () {
+    document.cookie = "gitlab_canary="+ this.checked +";domain=.gitlab.com;path=/;expires=" + new Date(Date.now() + 31536000000).toUTCString();
+  });
+});
--- a/public/style.css
+++ b/public/style.css
+* {
+  font-family: "Open Sans", serif;
+}
+html, body {
+  height: 100%;
+}
+body {
+  margin: 0;
+}
+
+.wrapper {
+  padding: 80px 20px;
+  flex-wrap: wrap;
+  margin: auto;
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+h1 {
+  line-height: 1.2;
+  font-weight: 400;
+  font-size: 2.2em;
+  color: #2e2e2e;
+  text-align: center;
+}
+
+a {
+ color: #6e49cb;
+}
+
+.settings {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.settings .text-switch {
+  font-family: "Open Sans", serif;
+  font-size: 1.5em;
+  display: flex;
+  align-self: center;
+  color: #2e2e2e;
+}
+
+.settings .switch {
+  vertical-align: middle;
+  padding: 10px;
+  margin: 0px 20px;
+}
+
+/* ============================================================
+  COMMON
+============================================================ */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+.cmn-toggle + label {
+  display: block;
+  position: relative;
+  cursor: pointer;
+  outline: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+/* ============================================================
+  SWITCH 1 - ROUND
+============================================================ */
+input.cmn-toggle-round + label {
+  padding: 2px;
+  width: 120px;
+  height: 60px;
+  background-color: #dddddd;
+  -webkit-border-radius: 60px;
+  -moz-border-radius: 60px;
+  -ms-border-radius: 60px;
+  -o-border-radius: 60px;
+  border-radius: 60px;
+}
+
+input.cmn-toggle-round + label:before, input.cmn-toggle-round + label:after {
+  display: block;
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  bottom: 1px;
+  content: "";
+}
+
+input.cmn-toggle-round + label:before {
+  right: 1px;
+  background-color: #f1f1f1;
+  -webkit-border-radius: 60px;
+  -moz-border-radius: 60px;
+  -ms-border-radius: 60px;
+  -o-border-radius: 60px;
+  border-radius: 60px;
+  -webkit-transition: background 0.4s;
+  -moz-transition: background 0.4s;
+  -o-transition: background 0.4s;
+  transition: background 0.4s;
+}
+
+input.cmn-toggle-round + label:after {
+  width: 58px;
+  background-color: #fff;
+  -webkit-border-radius: 100%;
+  -moz-border-radius: 100%;
+  -ms-border-radius: 100%;
+  -o-border-radius: 100%;
+  border-radius: 100%;
+  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+  -webkit-transition: margin 0.4s;
+  -moz-transition: margin 0.4s;
+  -o-transition: margin 0.4s;
+  transition: margin 0.4s;
+}
+
+input.cmn-toggle-round:checked + label:before {
+  background-color: #fca121;
+}
+
+input.cmn-toggle-round:checked + label:after {
+  margin-left: 64px;
+}
+