diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index cf9ce487..6ff72043 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -1,105 +1,72 @@ -image: "node:15-slim" stages: - test - - artifact - release -before_script: - # Install dependencies - - apt-get update - - apt-get install -y git python3 build-essential libxtst6 - - # Prepare Chrome for puppeteer - - apt-get install -y wget gnupg - - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - - - sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' - - apt-get update - - apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf libxss1 --no-install-recommends - # Build Send, run npm tests test: stage: test + image: "node:16-slim" + only: + - api + - branches + - chat + - merge_requests + - pushes + - schedules + - tags + - triggers + - web + before_script: + # Install dependencies + - apt-get update + - apt-get install -y git python3 build-essential libxtst6 + + # Prepare Chrome for puppeteer + - apt-get install -y wget gnupg + - wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - + - sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' + - apt-get update + - apt-get install -y gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils + - apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf libxss1 --no-install-recommends script: - npm ci - npm run lint - npm test -# Build Docker image, export Docker image artifact -artifact-docker: - stage: artifact - image: docker:latest - needs: [] - services: - - docker:dind - variables: - IMG_FILE: "send:git-$CI_COMMIT_SHORT_SHA.tar" - IMG_NAME: "send:git-$CI_COMMIT_SHORT_SHA" - before_script: [] - script: - - docker build -t $IMG_NAME . - - docker image save -o $IMG_FILE $IMG_NAME - artifacts: - name: artifact-docker - paths: - - $IMG_FILE - expire_in: 1 week - -# Release public Docker image for the master branch -release-docker-master: - stage: release - image: docker:latest - dependencies: - - artifact-docker - services: - - docker:dind - only: - - master - variables: - IMG_IMPORT_FILE: "send:git-$CI_COMMIT_SHORT_SHA.tar" - IMG_IMPORT_NAME: "send:git-$CI_COMMIT_SHORT_SHA" - IMG_NAME: "registry.gitlab.com/timvisee/send:master-$CI_COMMIT_SHORT_SHA" - before_script: [] - script: - # Login in to registry - - 'docker login registry.gitlab.com -u $DOCKER_USER -p $DOCKER_PASS' - - # Load existing, retag for new image images - - docker image load -i $IMG_IMPORT_FILE - - docker tag $IMG_IMPORT_NAME $IMG_NAME - - # Publish tagged image - - docker push $IMG_NAME - - - 'echo "Docker image artifact published, available as:" && echo " docker pull $IMG_NAME"' - -# Release public Docker image for a version tag release-docker: stage: release image: docker:latest - dependencies: - - artifact-docker services: - docker:dind only: - - /^v(\d+\.)*\d+$/ - variables: - IMG_IMPORT_FILE: "send:git-$CI_COMMIT_SHORT_SHA.tar" - IMG_IMPORT_NAME: "send:git-$CI_COMMIT_SHORT_SHA" - IMG_NAME: "registry.gitlab.com/timvisee/send:$CI_COMMIT_REF_NAME" - IMG_NAME_LATEST: "registry.gitlab.com/timvisee/send:latest" - before_script: [] + - api + - branches + - chat + - merge_requests + - pushes + - schedules + - tags + - triggers + - web script: - # Login in to registry - - 'docker login registry.gitlab.com -u $DOCKER_USER -p $DOCKER_PASS' - - # Load existing, retag for new image images - - docker image load -i $IMG_IMPORT_FILE - - docker tag $IMG_IMPORT_NAME $IMG_NAME - - docker tag $IMG_IMPORT_NAME $IMG_NAME_LATEST - - # Publish tagged image - - docker push $IMG_NAME - - docker push $IMG_NAME_LATEST - - - 'echo "Docker image artifact published, available as:" && echo " docker pull $IMG_NAME_LATEST" && echo " docker pull $IMG_NAME"' + - docker login "$CI_REGISTRY" -u "$CI_REGISTRY_USER" -p "$CI_REGISTRY_PASSWORD" + - docker buildx create --name sendBuilder + - docker buildx use sendBuilder + - | + if [ "$CI_PIPELINE_SOURCE" == "merge_request_event" ]; then + IMAGE_NAMES="$CI_REGISTRY_IMAGE/mr:$CI_MERGE_REQUEST_IID" + elif [ "$CI_COMMIT_TAG" != "" ]; then + IMAGE_NAMES="$CI_REGISTRY_IMAGE:$CI_COMMIT_TAG $CI_REGISTRY_IMAGE:latest" + else + IMAGE_NAMES="$CI_REGISTRY_IMAGE/$CI_COMMIT_BRANCH:$CI_COMMIT_SHORT_SHA" + fi + - | + for image in $IMAGE_NAMES; do + docker buildx build --platform linux/amd64,linux/arm64 -t $image . --push + done + - | + echo "Container image pushed. You can pull it with"; + for image in $IMAGE_NAMES; do + echo "docker pull $image" + done diff --git a/.stylelintrc b/.stylelintrc index 0af67b03..afc9e08d 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -11,3 +11,5 @@ rules: selector-list-comma-newline-after: null value-list-comma-newline-after: null at-rule-no-unknown: null + # Conflicts with prettier + string-quotes: null diff --git a/Dockerfile b/Dockerfile index 502db71b..53220098 100644 --- a/Dockerfile +++ b/Dockerfile @@ -4,41 +4,57 @@ # License https://gitlab.com/timvisee/send/blob/master/LICENSE ## - # Build project FROM node:16.13-alpine3.13 AS builder + +RUN set -x \ + # Change node uid/gid + && apk --no-cache add shadow \ + && groupmod -g 1001 node \ + && usermod -u 1001 -g 1001 node + RUN set -x \ # Add user - && addgroup --gid 10001 app \ + && addgroup --gid 1000 app \ && adduser --disabled-password \ --gecos '' \ --ingroup app \ --home /app \ - --uid 10001 \ + --uid 1000 \ app + COPY --chown=app:app . /app + USER app WORKDIR /app + RUN set -x \ # Build && PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true npm ci \ && npm run build - # Main image FROM node:16.13-alpine3.13 + +RUN set -x \ + # Change node uid/gid + && apk --no-cache add shadow \ + && groupmod -g 1001 node \ + && usermod -u 1001 -g 1001 node + RUN set -x \ # Add user - && addgroup --gid 10001 app \ + && addgroup --gid 1000 app \ && adduser --disabled-password \ --gecos '' \ --ingroup app \ --home /app \ - --uid 10001 \ + --uid 1000 \ app USER app WORKDIR /app + COPY --chown=app:app package*.json ./ COPY --chown=app:app app app COPY --chown=app:app common common diff --git a/README.md b/README.md index 7de7726d..b05f668f 100644 --- a/README.md +++ b/README.md @@ -152,7 +152,7 @@ AWS example using Ubuntu Server `20.04`: [docs/AWS.md](docs/AWS.md) - Web: _this repository_ - Command-line: [`ffsend`](https://github.com/timvisee/ffsend) - Android: _see [Android](#android) section_ -- Thunderbird: [FileLink provider for Send](https://addons.thunderbird.net/en-US/thunderbird/addon/filelink-provider-for-send/) +- Thunderbird: [FileLink provider for Send](https://addons.thunderbird.net/thunderbird/addon/filelink-provider-for-send/) #### Android diff --git a/app/api.js b/app/api.js index f271ea2e..2d1238c2 100644 --- a/app/api.js +++ b/app/api.js @@ -43,7 +43,7 @@ function post(obj, bearerToken) { 'Content-Type': 'application/json' }; if (bearerToken) { - h['Authentication'] = `Bearer ${bearerToken}`; + h['Authorization'] = `Bearer ${bearerToken}`; } return { method: 'POST', diff --git a/app/archive.js b/app/archive.js index 340164e8..683cc370 100644 --- a/app/archive.js +++ b/app/archive.js @@ -17,6 +17,7 @@ export default class Archive { constructor(files = [], defaultTimeLimit = 86400, defaultDownloadLimit = 1) { this.files = Array.from(files); this.defaultTimeLimit = defaultTimeLimit; + this.defaultDownloadLimit = defaultDownloadLimit; this.timeLimit = defaultTimeLimit; this.dlimit = defaultDownloadLimit; this.password = null; @@ -76,7 +77,7 @@ export default class Archive { clear() { this.files = []; - this.dlimit = 1; + this.dlimit = this.defaultDownloadLimit; this.timeLimit = this.defaultTimeLimit; this.password = null; } diff --git a/app/experiments.js b/app/experiments.js index 8b7a19ee..8e432e0a 100644 --- a/app/experiments.js +++ b/app/experiments.js @@ -7,7 +7,7 @@ const experiments = { return true; }, variant: function() { - return ['white-blue', 'blue', 'white-violet', 'violet'][ + return ['white-primary', 'primary', 'white-violet', 'violet'][ Math.floor(Math.random() * 4) ]; }, diff --git a/app/locale.js b/app/locale.js index ff8925fb..23dfdb7c 100644 --- a/app/locale.js +++ b/app/locale.js @@ -1,8 +1,8 @@ -import { FluentBundle } from '@fluent/bundle'; +import { FluentBundle, FluentResource } from '@fluent/bundle'; function makeBundle(locale, ftl) { const bundle = new FluentBundle(locale, { useIsolating: false }); - bundle.addMessages(ftl); + bundle.addResource(new FluentResource(ftl)); return bundle; } @@ -19,7 +19,7 @@ export async function getTranslator(locale) { return function(id, data) { for (let bundle of bundles) { if (bundle.hasMessage(id)) { - return bundle.format(bundle.getMessage(id), data); + return bundle.formatPattern(bundle.getMessage(id).value, data); } } }; diff --git a/app/main.css b/app/main.css index 8beaab8c..6a42290e 100644 --- a/app/main.css +++ b/app/main.css @@ -7,17 +7,14 @@ html { @tailwind components; :not(input) { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } :root { --violet-gradient: linear-gradient( -180deg, - rgba(144, 89, 255, 0.8) 0%, - rgba(144, 89, 255, 0.4) 100% + rgb(144 89 255 / 80%) 0%, + rgb(144 89 255 / 40%) 100% ); } @@ -39,7 +36,7 @@ body { } .btn { - @apply bg-blue-60; + @apply bg-primary; @apply text-white; @apply cursor-pointer; @apply py-4; @@ -48,11 +45,11 @@ body { } .btn:hover { - @apply bg-blue-70; + @apply bg-primary_accent; } .btn:focus { - @apply bg-blue-70; + @apply bg-primary_accent; } .checkbox { @@ -71,7 +68,7 @@ body { .checkbox > label::before { /* @apply bg-grey-10; */ - @apply border; + @apply border-default; @apply rounded-sm; content: ''; @@ -82,16 +79,16 @@ body { } .checkbox > label:hover::before { - @apply border-blue-50; + @apply border-primary; } .checkbox > input:focus + label::before { - @apply border-blue-50; + @apply border-primary; } .checkbox > input:checked + label::before { - @apply bg-blue-50; - @apply border-blue-50; + @apply bg-primary; + @apply border-primary; background-image: url('../assets/lock.svg'); background-position: center; @@ -104,8 +101,8 @@ body { } .checkbox > input:disabled + label::before { - @apply bg-blue-50; - @apply border-blue-50; + @apply bg-primary; + @apply border-primary; background-image: url('../assets/lock.svg'); background-position: center; @@ -153,16 +150,16 @@ footer li a:hover { white-space: nowrap; } -.link-blue { - @apply text-blue-60; +.link-primary { + @apply text-primary; } -.link-blue:hover { - @apply text-blue-70; +.link-primary:hover { + @apply text-primary_accent; } -.link-blue:focus { - @apply text-blue-70; +.link-primary:focus { + @apply text-primary_accent; } .main-header img { @@ -170,6 +167,22 @@ footer li a:hover { width: auto; } +.text-underline { + text-decoration: underline; +} + +.d-block { + display: block; +} + +.d-inline-block { + display: inline-block; +} + +.align-middle { + vertical-align: middle; +} + .main { display: flex; position: relative; @@ -204,19 +217,18 @@ progress::-webkit-progress-value { background-image: -webkit-linear-gradient( -45deg, transparent 20%, - rgba(255, 255, 255, 0.4) 20%, - rgba(255, 255, 255, 0.4) 40%, + rgb(255 255 255 / 40%) 20%, + rgb(255 255 255 / 40%) 40%, transparent 40%, transparent 60%, - rgba(255, 255, 255, 0.4) 60%, - rgba(255, 255, 255, 0.4) 80%, + rgb(255 255 255 / 40%) 60%, + rgb(255 255 255 / 40%) 80%, transparent 80% ), - -webkit-linear-gradient(left, #0a84ff, #0a84ff); + -webkit-linear-gradient(left, var(--color-primary), var(--color-primary)); /* stylelint-enable */ border-radius: 2px; background-size: 21px 20px, 100% 100%, 100% 100%; - -webkit-animation: animate-stripes 1s linear infinite; } progress::-moz-progress-bar { @@ -224,27 +236,21 @@ progress::-moz-progress-bar { background-image: -moz-linear-gradient( 135deg, transparent 20%, - rgba(255, 255, 255, 0.4) 20%, - rgba(255, 255, 255, 0.4) 40%, + rgb(255 255 255 / 40%) 20%, + rgb(255 255 255 / 40%) 40%, transparent 40%, transparent 60%, - rgba(255, 255, 255, 0.4) 60%, - rgba(255, 255, 255, 0.4) 80%, + rgb(255 255 255 / 40%) 60%, + rgb(255 255 255 / 40%) 80%, transparent 80% ), - -moz-linear-gradient(left, #0a84ff, #0a84ff); + -moz-linear-gradient(left, var(--color-primary), var(--color-primary)); /* stylelint-enable */ border-radius: 2px; background-size: 21px 20px, 100% 100%, 100% 100%; animation: animate-stripes 1s linear infinite; } -@-webkit-keyframes animate-stripes { - 100% { - background-position: -21px 0; - } -} - @keyframes animate-stripes { 100% { background-position: -21px 0; @@ -283,28 +289,28 @@ select { } .btn { - @apply bg-blue-40; + @apply bg-primary; @apply text-white; } .btn:hover { - @apply bg-blue-50; + @apply bg-primary_accent; } .btn:focus { - @apply bg-blue-50; + @apply bg-primary_accent; } - .link-blue { - @apply text-blue-40; + .link-primary { + @apply text-primary; } - .link-blue:hover { - @apply text-blue-50; + .link-primary:hover { + @apply text-primary_accent; } - .link-blue:focus { - @apply text-blue-50; + .link-primary:focus { + @apply text-primary_accent; } .main > section { @@ -313,7 +319,7 @@ select { @screen md { .main > section { - @apply border; + @apply border-default; @apply border-grey-80; } } @@ -323,13 +329,12 @@ select { @responsive { .shadow-light { - box-shadow: 0 0 8px 0 rgba(12, 12, 13, 0.1); + box-shadow: 0 0 8px 0 rgb(12 12 13 / 10%); } .shadow-big { - box-shadow: 0 12px 18px 2px rgba(34, 0, 51, 0.04), - 0 6px 22px 4px rgba(7, 48, 114, 0.12), - 0 6px 10px -4px rgba(14, 13, 26, 0.12); + box-shadow: 0 12px 18px 2px rgb(34 0 51 / 4%), + 0 6px 22px 4px rgb(7 48 114 / 12%), 0 6px 10px -4px rgb(14 13 26 / 12%); } } @@ -363,20 +368,20 @@ select { /* begin signin button color experiment */ -.white-blue { - @apply border-blue-60; +.white-primary { + @apply border-primary; @apply border-2; - @apply text-blue-60; + @apply text-primary; } -.white-blue:hover, -.white-blue:focus { - @apply bg-blue-60; +.white-primary:hover, +.white-primary:focus { + @apply bg-primary; @apply text-white; } -.blue { - @apply bg-blue-60; +.primary { + @apply bg-primary; @apply text-white; } diff --git a/app/ui/account.js b/app/ui/account.js index 7f6430ec..9845a3a1 100644 --- a/app/ui/account.js +++ b/app/ui/account.js @@ -69,7 +69,7 @@ class Account extends Component { return html` + ${notice} ${sponsor} `; @@ -590,10 +633,10 @@ module.exports.downloading = function(state) { const progressPercent = percent(progress); return html` ${archiveInfo(archive)} -
+
${progressPercent}
${progressPercent} diff --git a/app/ui/copyDialog.js b/app/ui/copyDialog.js index fcd96189..5f1f779e 100644 --- a/app/ui/copyDialog.js +++ b/app/ui/copyDialog.js @@ -21,7 +21,7 @@ module.exports = function(name, url) { @@ -42,7 +42,7 @@ module.exports = function(name, url) { ${state.translate('copyLinkButton')}