Merge branch 'develop' into migrate/profile_view_PR-1

app/styles/app.css

@@ -48,6 +48,7 @@
 @import url("image-upload.css");
 @import url("login.module.css");
 @import url("identity.module.css");
+@import url("discord.module.css");
 
 * {
   margin: 0;

app/styles/discord.module.css

@@ -0,0 +1,189 @@
+* {
+  --base-unit: 4px;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.dark {
+  opacity: 1;
+}
+
+.mx-auto {
+  margin: 0 auto;
+}
+
+.my-same {
+  margin: calc(var(--base-unit) * 5) 0;
+}
+
+.discord {
+  width: 50%;
+  margin: 0 auto;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  min-height: 100vh;
+  padding: calc(var(--base-unit) * 4);
+  padding-top: calc(var(--base-unit) * 20);
+}
+
+.line {
+  border-bottom: dashed calc(var(--base-unit)) black;
+}
+
+.horizontal-flex {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.vertical-flex {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.logo {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--base-unit) * 2);
+  border-radius: calc(var(--base-unit) * 2);
+  background-color: var(--color-light-gray);
+  box-shadow: var(--color-black-shadow-3);
+  margin-bottom: calc(var(--base-unit) * 3);
+  transition: all 0.3s ease;
+}
+
+.heading {
+  margin: calc(var(--base-unit) * 5) auto;
+  font-weight: 700;
+}
+
+.discord-card {
+  border-radius: calc(var(--base-unit) * 3);
+  box-shadow: calc(var(--base-unit)) calc(var(--base-unit))
+    calc(var(--base-unit) * 2) var(--color-black-59);
+  max-width: 620px;
+  width: 100%;
+  padding: calc(var(--base-unit) * 4);
+}
+
+.profile-card {
+  background-color: var(--color-gray-37);
+  border-radius: calc(var(--base-unit) * 2);
+  padding: var(--base-unit);
+  width: 30%;
+}
+
+.username {
+  font-weight: 700;
+  font-size: larger;
+}
+
+.discord__success,
+.discord__error {
+  text-align: center;
+  margin-top: calc(var(--base-unit) * 10);
+}
+
+.success__text,
+.error__text {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin: 1rem;
+  padding: 0;
+}
+
+.discord__title {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 1rem;
+  padding: 0;
+}
+
+.discord__card {
+  display: flex;
+  align-items: center;
+}
+
+.discord__card-data {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 1rem;
+  padding: 1rem;
+  border: 2px solid var(--color-black-40);
+  border-radius: 8px;
+}
+
+.card-data__img {
+  border-radius: 50%;
+}
+
+.card-data__username {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin: 0.5rem;
+}
+
+.card-data__account {
+  font-size: 1.1rem;
+  font-weight: 400;
+  margin: 0;
+}
+
+.discord__arrow {
+  font-size: 5rem;
+  font-weight: 700;
+}
+
+.button {
+  color: var(--color-white);
+  background-color: var(--color-blue-primary);
+  border: none;
+  padding: 1rem 2rem;
+  margin: 1rem;
+  font-size: 1.25rem;
+  font-weight: 700;
+  border-radius: 8px;
+}
+
+.btn-enabled {
+  color: var(--color-white);
+  background-color: var(--color-blue-primary);
+}
+
+.btn-disabled {
+  color: var(--color-white);
+  background-color: var(--color-gray-medium);
+}
+
+.TnC {
+  text-align: left;
+  margin-left: 3.5rem;
+  padding: calc(var(--base-unit) * 2);
+}
+
+@media screen and (width >= 1280px) {
+  .discord {
+    width: 30%;
+  }
+}
+
+@media screen and (width <= 640px) {
+  .discord {
+    width: 90%;
+  }
+}

app/styles/variables.css

@@ -70,4 +70,9 @@
   --color-black-shadow-3: 3px 3px 3px 0 rgb(0 0 0 / 25%);
   --color-black-shadow-8: 0 4px 8px 0 rgb(0 0 0 / 25%);
   --color-navy-link: #0000af;
+  --color-blue-primary: #0034a5;
+  --color-gray-medium: #808080;
+  --color-black-40: #00000040;
+  --color-black-59: rgb(0 0 0 / 58.9%);
+  --color-gray-37: rgb(158 158 158 / 36.8%);
 }

app/templates/discord.hbs

@@ -0,0 +1,138 @@
+{{page-title 'Discord'}}
+
+<section class='discord vertical-flex mx-auto' id='discord'>
+  {{#if @model.isTokenExpired }}
+    <p class='error__text testing'>Token Expired. Please generate a new token using
+      slash commands</p>
+  {{else}}
+    {{#if (or this.isLinkingInProgress)}}
+      <div class='loading'>
+         <FaIcon @icon="spinner" @size="0.5x" class="fa-spin" />
+      </div>
+    {{else}}
+      {{#if
+        (or
+          (eq @model.userData.roles.archived false)
+          (eq this.linkStatus 'linked')
+        )
+      }}
+        <div class='discord__success'>
+          <p class='success__text'>Your Discord account has been successfully
+            linked.</p>
+          <p class='success__text'>You can close this tab now.</p>
+        </div>
+      {{else if (eq this.linkStatus 'failure')}}
+        <div class='discord__error'>
+          <p class='error__text'>Something went wrong. Please try again.</p>
+        </div>
+      {{else if (eq this.linkStatus 'not-linked')}}
+        <header class='header horizontal-flex w-100' data-test-header>
+          <img
+            src='/assets/images/rds-logo.png'
+            alt='real_dev_squad'
+            class='logo'
+            data-test-rds-logo
+          />
+          <div class='line w-100' data-test-platform-link-line></div>
+          <img
+            src='/assets/images/discord-logo.png'
+            alt='discord'
+            class='logo'
+            data-test-discord-logo
+          />
+        </header>
+
+        <h2 class='heading' data-test-heading>Authorize Bot</h2>
+
+        <main class='discord-card vertical-flex w-100' data-test-main-content>
+
+          <p class='my-same' data-test-card-header><strong>Real Dev Squad</strong>
+            wants to access your
+            <strong>Discord</strong>.</p>
+
+          <hr class='w-100 dark mx-auto' />
+
+          <div class='profiles horizontal-flex w-100'>
+            <div
+              class='profile-card vertical-flex'
+              data-test-discord-profile-card
+            >
+              <img
+                class='logo'
+                data-test-discord-profile-image
+                src={{if
+                  @model.externalAccountData.attributes.userAvatar
+                  @model.externalAccountData.attributes.userAvatar
+                  'assets/images/profile.png'
+                }}
+                alt='Discord Avatar'
+              />
+              <p class='username' data-test-discord-username>
+                {{@model.externalAccountData.attributes.userName}}#{{@model.externalAccountData.attributes.discriminator}}</p>
+              <p class='account' data-test-discord-account>Discord</p>
+            </div>
+
+            <img
+              src='/assets/images/discord-connector.svg'
+              class='logo'
+              alt='connectingline'
+              data-test-profile-connector
+            />
+
+            <div
+              class='profile-card vertical-flex my-same'
+              data-test-rds-profile-card
+            >
+              <img
+                class='logo'
+                data-test-rds-profile-image
+                src={{if
+                  @model.userData.picture.url
+                  @model.userData.picture.url
+                  '/assets/images/profile.png'
+                }}
+                alt='Real Dev Squad Avatar'
+              />
+              <p
+                class='username'
+                data-test-rds-username
+              >{{@model.userData.username}}</p>
+              <p class='account' data-test-rds-account>Real Dev Squad</p>
+            </div>
+          </div>
+
+          <hr class='w-100 dark mx-auto' />
+
+          <div class='TnC w-100 my-same' data-test-tnc>
+            <p>By authorizing us you allow us to:</p>
+            <ul class='mx-auto' data-test-tnc-points>
+              <li>Change your name within our server.</li>
+              <li>Read/process your messages.</li>
+            </ul>
+          </div>
+
+          <hr class='w-100 dark mx-auto' />
+
+          <div class='my-same' data-test-consent>
+            <input
+              data-test-consent-checkbox
+              name='authorize'
+              id='authorize'
+              type='checkbox'
+              {{on 'input' this.setConsent}}
+            />
+            <label for='authorize' data-test-consent-label>I Accept the above
+              mentioned clauses</label>
+          </div>
+          <button
+            data-test-authorize-button
+            type='button'
+            class='button my-same
+              {{if this.consent "btn-enabled" "btn-disabled"}}'
+            {{on 'click' this.linkDiscordAccount}}
+          >Authorize</button>
+        </main>
+      {{/if}}
+    {{/if}}
+  {{/if}}
+</section>