@tapni/auth 0.0.2 → 0.0.3

package/src/styles/style.css

@@ -0,0 +1,618 @@
+@charset "utf-8";
+
+@font-face {
+  font-family: 'Inter', sans-serif;
+  src: url(./inter.ttf) format('truetype');
+}
+
+.footer-logo {
+  height: 25px;
+  background-size: 120px 23px;
+}
+
+.footer-light .footer-logo {
+  background-image: url(https://cdn.tapni.co/images/logo-dark-app.png);
+}
+
+.footer-dark .footer-logo {
+  background-image: url(https://cdn.tapni.co/images/logo-light-color.png);
+}
+
+.menu-dark.menu-large .menu-logo {
+  background-image: url(https://cdn.tapni.co/images/logo-light-color.png);
+}
+
+.menu-light.menu-large .menu-logo {
+  background-image: url(https://cdn.tapni.co/images/logo-dark-app.png);
+}
+
+.menu-large .menu-logo {
+  background-size: 105px 40px;
+}
+
+.menu-thumbnails .menu-logo .menu-logo-image {
+  height: 20px;
+  background-size: 100px 19px;
+}
+
+.menu-dark.menu-thumbnails .menu-logo .menu-logo-image {
+  background-image: url(https://cdn.tapni.co/images/logo-light-color.png);
+}
+
+.menu-light.menu-thumbnails .menu-logo .menu-logo-image {
+  background-image: url(https://cdn.tapni.co/images/logo-dark-app.png);
+}
+
+.preloader-dark h1 {
+  background: url(https://cdn.tapni.co/images/logo-dark-app.png) center center no-repeat;
+}
+
+.preloader-light h1 {
+  background: url(https://cdn.tapni.co/images/logo-light-color.png) center center no-repeat;
+}
+
+.profile-logo {
+  background-image: url(https://cdn.tapni.co/images/logo-dark-app.png);
+  background-size: 74px 14px;
+  height: 55px;
+}
+
+
+/*----Preloader----*/
+.preloader-dark {
+  background: linear-gradient(#000000, #107be5) !important;
+}
+
+.preloader-dark .cp1,
+.preloader-dark .cp2 {
+  opacity: 0.05;
+  background-color: #FFFFFF !important;
+}
+
+.preloader-dark em {
+  color: rgba(255, 255, 255, 0.3);
+}
+
+.preloader-light {
+  background-color: #FFFFFF !important;
+}
+
+.preloader-light .cp1,
+.preloader-dark .cp2 {
+  opacity: 0.05;
+  background-color: #000000 !important;
+}
+
+.preloader-light em {
+  color: rgba(0, 0, 0, 0.8);
+}
+
+#preloader h1 {
+  width: 100%;
+  height: 132px;
+  margin-top: 110px;
+}
+
+#preloader em {
+  position: fixed;
+  width: 100%;
+  max-width: 500px;
+  bottom: 20px;
+  font-style: normal;
+  color: #ffffff;
+  text-align: center;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+#preloader p {
+  text-align: center;
+  color: #bcd3e8;
+  top: 60px;
+  font-size: 17px;
+}
+
+#preloader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #000;
+  z-index: 999999999 !important;
+  pointer-events: none;
+  opacity: 1;
+  transition: all 500ms ease;
+}
+
+#preload-spinner,
+.preload-spinner {
+  animation: preload-spin1 1.2s ease infinite;
+  clip: rect(0, 40px, 40px, 20px);
+  height: 40px;
+  width: 40px;
+  position: absolute;
+  left: 50%;
+  margin-left: -20px;
+  top: 65%;
+  margin-top: -20px;
+}
+
+#preload-spinner:after,
+.preload-spinner:after {
+  animation: preload-spin2 1.2s ease-in-out infinite;
+  clip: rect(0, 40px, 40px, 20px);
+  content: '';
+  border-radius: 50%;
+  height: 40px;
+  width: 40px;
+  position: absolute;
+  box-shadow: inset #000000 0 0 0 1px;
+
+}
+
+@keyframes preload-spin1 {
+  25% {
+    transform: rotate(0deg)
+  }
+
+  100% {
+    transform: rotate(185deg)
+  }
+}
+
+@keyframes preload-spin2 {
+  0% {
+    transform: rotate(-175deg);
+  }
+
+  100% {
+    transform: rotate(175deg);
+  }
+}
+
+.regtype {
+  display: block;
+  width: 100%;
+  height: 20px;
+}
+
+.regtype>a {
+  font-size: 16px;
+  color: #444;
+}
+
+.dot-left:before {
+  content: "\2022";
+  color: #05668D;
+}
+
+.dot-right:after {
+  content: "\2022";
+  color: #05668D;
+}
+
+.register {
+  overflow: hidden;
+  min-width: 270px;
+  max-width: 450px;
+  margin: 0px auto 30px auto;
+}
+
+.lazy-scroll {
+  /*
+  overflow: scroll;
+  -webkit-overflow-scrolling: touch;
+  */
+  /* lets it scroll lazy */
+}
+
+.vue-rate-it-rating {
+  margin: 0 auto;
+}
+
+@media only screen and (min-width: 450px) {
+  .circle-green-button {
+    width: 300px;
+    height: 60px;
+    bottom: 30px;
+    left: 50%;
+    margin-top: -120px;
+    margin-left: -150px;
+    border-radius: 16px !important;
+    cursor: pointer;
+  }
+
+  .circle-green-button:before {
+    content: "Internet";
+    font-size: 20px;
+    margin: -5px 15px 10px 30px;
+    line-height: 30px;
+  }
+}
+
+.pulse-border {
+  border-radius: 23%;
+}
+
+.pulse {
+  box-shadow: 0 0 0 rgba(33, 255, 11, 0.9);
+  animation: pulse 1.5s infinite;
+}
+
+.pulse:hover,
+.pulse:active,
+.pulse:focus {
+  animation: pulse 1.5s infinite;
+}
+
+@-webkit-keyframes pulse {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
+  }
+
+  70% {
+    -webkit-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
+  }
+
+  100% {
+    -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
+  }
+}
+
+@keyframes pulse {
+  0% {
+    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
+    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
+  }
+
+  70% {
+    -moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
+    box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
+  }
+
+  100% {
+    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
+    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
+  }
+}
+
+/* Button like */
+.button-like {
+  position: relative;
+  text-align: center;
+  color: #8a8a8a;
+  transition: all ease 0.4s;
+}
+
+.button-like .fa,
+.button-like span {
+  transition: all ease 0.4s;
+}
+
+.liked .fa,
+.liked span {
+  color: #e74c3c;
+}
+
+.button-like-card {
+  width: 54px;
+  height: 54px;
+  border-radius: 60px;
+  position: absolute;
+  background-color: #e7e7e7;
+  right: 15px;
+  z-index: 15;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong {
+  color: #1d1d1d;
+  ;
+}
+
+.back-button {
+  padding: 12px;
+  text-align: center;
+  color: #3e5674;
+  width: 60%;
+  border-radius: 14px;
+  margin: 10px auto 20px;
+  background-color: rgba(0, 0, 0, 0);
+
+}
+
+.back-button:before {
+  content: "\f104";
+  font-size: 20px;
+  vertical-align: bottom;
+  margin-right: 15px;
+  margin-left: -15px;
+}
+
+@media only screen and (max-width: 450px) {
+  .link-grid .user-link-img {
+    width: 100%;
+    display: inline-block;
+  }
+}
+
+@media only screen and (max-width: 400px) {
+  .link-grid .user-link-img {
+    width: 100%;
+    display: inline-block;
+  }
+}
+
+@media only screen and (max-width: 380px) {
+  .link-grid .user-link-img {
+    width: 100%;
+    display: inline-block;
+  }
+
+  /* Home */
+  .user-name {
+    margin-top: 10px !important;
+  }
+
+  .user-username {
+    margin-top: 50px !important;
+  }
+
+  .user-bio {
+    font-size: 14px !important;
+    width: 100% !important;
+    padding: 7px 10px;
+    color: #1d1d1d;
+    border-radius: 12px !important;
+  }
+
+  .user-work {
+    margin-top: 10px;
+    font-size: 14px !important;
+  }
+
+  .user-location {
+    margin-top: 5px !important;
+    font-size: 14px !important;
+    padding-left: 25px !important;
+  }
+
+  .post-text {
+    font-size: 11px !important;
+  }
+
+  .post-title {
+    font-size: 14px !important;
+  }
+
+
+  .photo-upload {
+    font-size: 10px !important;
+    margin-top: -30px !important;
+    margin-left: 65px !important;
+    height: 25px !important;
+    line-height: 16px !important;
+  }
+
+  #public-section h5 {
+    font-size: 14px !important;
+  }
+
+  #public-section p {
+    font-size: 12px !important;
+  }
+
+  #direct-section {
+    height: 90px !important;
+  }
+
+  #direct-section h5 {
+    font-size: 14px !important;
+  }
+
+  #direct-section p {
+    font-size: 12px !important;
+  }
+
+  /* Company Page */
+  .company-name-company {
+    font-size: 19px !important;
+  }
+
+  .company-logo-company {
+    width: 90px !important;
+    height: 90px !important;
+  }
+
+  .company-short-desc-company {
+    font-size: 13px !important;
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity .5s;
+}
+
+.fade-enter,
+.fade-leave-to
+
+/* .fade-leave-active below version 2.1.8 */
+  {
+  opacity: 0;
+}
+
+.user-tag {
+  padding: 0 10px;
+  text-align: center;
+  display: inline-block;
+}
+
+.user-tag-img {
+  width: 150px;
+  max-width: 80%;
+  border-radius: 10px;
+  margin: 0 auto;
+  box-shadow: 0px 2px 10px rgba(200, 200, 200, 0.8);
+}
+
+/* Safari input color */
+input[disabled],
+textarea[disabled],
+select[disabled='disabled'] {
+  -webkitf-text-fill-color: rgba(0, 0, 0, 1);
+  -webkit-opacity: 1;
+  color: rgba(0, 0, 0, 1);
+}
+
+#bodyId {
+  padding-top: 3%;
+  max-width: 550px !important;
+  margin: auto;
+  height: 95%!important;
+  margin-top: 1.5%;
+  border-radius: 20px;
+}
+
+.body-box-shadow {
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.22);
+}
+
+.user-photo {
+  border-radius: 50%;
+  border: 1px solid #dddddd;
+  height: 100%;
+  object-fit: cover;
+}
+
+.transform-z {
+  transform: translate3d(0, 0, 0);
+  -webkit-transform: translate3d(0, 0, 0);
+  -webkit-overflow-scrolling: touch;
+  -webkit-backface-visibility: hidden;
+  -webkit-perspective: 1000;
+}
+
+
+.red-text {
+  color: #FF0000FF;
+}
+
+.underline {
+  text-decoration: underline;
+  text-underline-position: under;
+}
+
+.button--loading::after {
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  border: 4px solid transparent;
+  border-top-color: #ffffff;
+  border-radius: 50%;
+  animation: button-loading-spinner 1s ease infinite;
+}
+
+.button--loading-black::after {
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  border: 4px solid #eeeeee;
+  border-top-color: #0c1117;
+  border-radius: 50%;
+  animation: button-loading-spinner 1s ease infinite;
+}
+
+.button__loader {
+  font: bold 20px "Quicksand", san-serif;
+  color: #ffffff;
+  transition: all 0.2s;
+}
+
+.action-button {
+  height: 50px;
+  width: 95%;
+  text-align: center;
+  margin: 0 auto;
+}
+
+.float-button {
+  z-index: 999;
+  position: fixed;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+  width: 90%;
+  background: rgba(238, 238, 238, 0.7);
+  border: 2px solid #E4E4E4;
+  backdrop-filter: blur(15px);
+  -webkit-backdrop-filter: blur(25px);
+  max-width: 460px;
+}
+.bounce-button {
+  animation: 5s linear 0s infinite normal none running bounce;
+}
+
+.nv {
+  /* prevent vibration | reserved class | do not delete */
+}
+
+@keyframes button-loading-spinner {
+  from {
+    transform: rotate(0turn);
+  }
+
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+
+@keyframes bounce {
+  4.16% {
+    transform: translateY(4px);
+  }
+  8.33% {
+    transform: translateY(-3px);
+  }
+  12.48% {
+    transform: translateY(2px);
+  }
+  16.66% {
+    transform: translateY(-1px);
+  }
+  20.81% {
+    transform: translateY(1px);
+  }
+  25% {
+    transform: translateY(0px);
+  }
+}
+
+.user-image img {
+  overflow: hidden;
+  text-indent: -10000px;
+}
+
+.input-disabled {
+  background-color: #eeeeee !important;
+}

package/src/views/Callback.vue

@@ -0,0 +1,47 @@
+<template>
+ <div>
+   <h5 v-if="($route.query.platform ==='android' || $route.query.platform ==='ios') && !isNative" style="text-align: center; width: 80%; margin: 0 auto; margin-top: 260px; ">
+       {{ssoLang[this.appLang].you_will_be_redirected}}<br>
+       {{ssoLang[this.appLang].if_redirect_not_directly}}, <span @click="inAppRedirect" style="color: blue; cursor: pointer">{{ssoLang[this.appLang].click_here}}</span>.</h5>
+   <h4 v-else style="text-align: center; width: 80%; margin: 0 auto; margin-top: 260px; ">{{ssoLang[this.appLang].please_wait}}</h4>
+ </div>
+</template>
+
+<script>
+/* eslint-disable */
+import OktaMixin from "../mixins/okta.mixin";
+import SamlMixin from "../mixins/saml.mixin";
+import AuthMixin from "../mixins/auth.mixin";
+import { sanitizeUrl } from '@braintree/sanitize-url';
+export default {
+  name: "AuthCallback",
+  mixins: [OktaMixin, SamlMixin, AuthMixin],
+
+  data() {
+    return {
+
+    };
+  },
+
+  async mounted() {
+    if(this.$route.path === '/callback/auth') {
+        this.exchangeAuthCode({
+            code: this.$route.query.code
+        })
+    }
+    if(this.$route.path === '/callback/okta') return await this.handleOktaRedirect();
+    if(this.$route.path === '/callback/saml') return await this.handleSamlRedirect();
+  },
+  methods: {
+    inAppRedirect() {
+      let url = sanitizeUrl(location.href);
+      url = url.replace('http', 'tapni')
+      url = url.replace('https', 'tapni')
+      return window.open(url);
+    }
+  },
+
+};
+</script>
+
+<style scoped></style>