├── babel.config.js
├── src
    ├── assets
    │   ├── logo.png
    │   ├── hedgedoc.png
    │   └── tab-illo.png
    ├── components
    │   ├── ErrorScreen
    │   │   ├── index.js
    │   │   └── ErrorScreen.vue
    │   ├── KaratekFooter
    │   │   ├── index.js
    │   │   └── KaratekFooter.vue
    │   ├── KaratekHeader
    │   │   ├── index.js
    │   │   └── KaratekHeader.vue
    │   ├── InfoSection
    │   │   ├── index.js
    │   │   ├── InfoSection.vue
    │   │   └── InfoCard.vue
    │   ├── ServiceSection
    │   │   ├── index.js
    │   │   ├── ServiceSection.vue
    │   │   └── ServiceCard.vue
    │   └── HelloWorld.vue
    ├── views
    │   ├── LandingPage
    │   │   ├── index.js
    │   │   ├── _mixins.scss
    │   │   └── LandingPage.vue
    │   ├── NotFoundPage
    │   │   ├── index.js
    │   │   └── NotFoundPage.vue
    │   ├── Write
    │   │   ├── Stylusauth
    │   │   │   ├── index.js
    │   │   │   └── Stylusauth.vue
    │   │   └── Introduction
    │   │   │   ├── index.js
    │   │   │   └── WriteIntroduction.vue
    │   ├── AboutView.vue
    │   └── HomeView.vue
    ├── styles
    │   ├── _carbon-utils.scss
    │   ├── _screens.scss
    │   ├── _carbon-fixes.scss
    │   └── _carbon.scss
    ├── mixins
    │   └── titleMixin.js
    ├── App.vue
    ├── router
    │   └── index.js
    ├── main.js
    └── router.js
├── vue.config.js
├── jsconfig.json
├── .gitignore
├── index.html
├── tests
    └── unit
    │   └── example.spec.js
├── README.md
├── public
    └── index.html
└── package.json


/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/cli-plugin-babel/preset"],
3 | };
4 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KaratekHD/school-cloud/main/src/assets/logo.png


--------------------------------------------------------------------------------
/src/assets/hedgedoc.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KaratekHD/school-cloud/main/src/assets/hedgedoc.png


--------------------------------------------------------------------------------
/src/assets/tab-illo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/KaratekHD/school-cloud/main/src/assets/tab-illo.png


--------------------------------------------------------------------------------
/src/components/ErrorScreen/index.js:
--------------------------------------------------------------------------------
1 | import ErrorScreen from "./ErrorScreen";
2 | export { ErrorScreen };
3 | 


--------------------------------------------------------------------------------
/src/views/LandingPage/index.js:
--------------------------------------------------------------------------------
1 | import LandingPage from "./LandingPage";
2 | export default LandingPage;
3 | 


--------------------------------------------------------------------------------
/src/views/NotFoundPage/index.js:
--------------------------------------------------------------------------------
1 | import NotFoundPage from "./NotFoundPage";
2 | export default NotFoundPage;
3 | 


--------------------------------------------------------------------------------
/src/views/Write/Stylusauth/index.js:
--------------------------------------------------------------------------------
1 | import Stylusauth from "./Stylusauth";
2 | export default Stylusauth;
3 | 


--------------------------------------------------------------------------------
/src/components/KaratekFooter/index.js:
--------------------------------------------------------------------------------
1 | import KaratekFooter from "./KaratekFooter";
2 | export default KaratekFooter;
3 | 


--------------------------------------------------------------------------------
/src/components/KaratekHeader/index.js:
--------------------------------------------------------------------------------
1 | import KaratekHeader from "./KaratekHeader";
2 | export default KaratekHeader;
3 | 


--------------------------------------------------------------------------------
/src/views/AboutView.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <h1>This is an about page</h1>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/views/Write/Introduction/index.js:
--------------------------------------------------------------------------------
1 | import WriteIntroduction from "@/views/Write/Introduction/WriteIntroduction";
2 | export default WriteIntroduction;
3 | 


--------------------------------------------------------------------------------
/src/components/InfoSection/index.js:
--------------------------------------------------------------------------------
1 | import InfoSection from "./InfoSection";
2 | import InfoCard from "./InfoCard";
3 | 
4 | export { InfoSection, InfoCard };
5 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require("@vue/cli-service");
2 | module.exports = defineConfig({
3 |   transpileDependencies: true,
4 |   lintOnSave: false,
5 | });
6 | 


--------------------------------------------------------------------------------
/src/components/ServiceSection/index.js:
--------------------------------------------------------------------------------
1 | import ServiceCard from "./ServiceCard";
2 | import ServiceSection from "./ServiceSection";
3 | 
4 | export { ServiceCard, ServiceSection };
5 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": ["src/*"]
 9 |     },
10 |     "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/styles/_carbon-utils.scss:
--------------------------------------------------------------------------------
1 | @import "carbon-components/scss/globals/scss/vendor/@carbon/type/scss/font-family.scss";
2 | @import "carbon-components/scss/globals/scss/vendor/@carbon/layout/scss/breakpoint.scss";
3 | @import "carbon-components/scss/globals/scss/typography.scss";
4 | @import "carbon-components/scss/globals/scss/vars.scss";
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | dist.tar.gz
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/src/mixins/titleMixin.js:
--------------------------------------------------------------------------------
 1 | function getTitle(vm) {
 2 |   const { title } = vm.$options;
 3 |   if (title) {
 4 |     return typeof title === "function" ? title.call(vm) : title;
 5 |   }
 6 | }
 7 | export default {
 8 |   created() {
 9 |     const title = getTitle(this);
10 |     if (title) {
11 |       document.title = title + " - " + "Karatek School Cloud";
12 |     }
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/src/components/ServiceSection/ServiceSection.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="bx--row service-section">
 3 |     <slot />
 4 |   </section>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "ServiceSection",
10 | };
11 | </script>
12 | 
13 | <style lang="scss">
14 | @import "../../styles/carbon-utils";
15 | 
16 | service-section {
17 |   background: #000000;
18 | }
19 | </style>
20 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Sai Development Server</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/tests/unit/example.spec.js:
--------------------------------------------------------------------------------
 1 | import { shallowMount } from "@vue/test-utils";
 2 | import HelloWorld from "@/components/HelloWorld.vue";
 3 | 
 4 | describe("HelloWorld.vue", () => {
 5 |   it("renders props.msg when passed", () => {
 6 |     const msg = "new message";
 7 |     const wrapper = shallowMount(HelloWorld, {
 8 |       propsData: { msg },
 9 |     });
10 |     expect(wrapper.text()).toMatch(msg);
11 |   });
12 | });
13 | 


--------------------------------------------------------------------------------
/src/views/HomeView.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <img alt="Vue logo" src="../assets/logo.png" />
 4 |     <HelloWorld msg="Welcome to Your Vue.js App" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | // @ is an alias to /src
10 | import HelloWorld from "@/components/HelloWorld.vue";
11 | 
12 | export default {
13 |   name: "HomeView",
14 |   components: {
15 |     HelloWorld,
16 |   },
17 | };
18 | </script>
19 | 


--------------------------------------------------------------------------------
/src/views/LandingPage/_mixins.scss:
--------------------------------------------------------------------------------
 1 | @mixin landing-page-background() {
 2 |   background-color: $ui-01;
 3 |   position: relative;
 4 | 
 5 |   &::before {
 6 |     content: "";
 7 |     position: absolute;
 8 |     left: -$spacing-06;
 9 |     top: 0;
10 |     right: -$spacing-06;
11 |     bottom: 0;
12 |     background: $ui-01;
13 |   }
14 | 
15 |   > * {
16 |     /* lift above position absolute */
17 |     position: relative;
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/views/NotFoundPage/NotFoundPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <error-screen
 3 |     title="Yikes. You're not supposed to see this."
 4 |     description="Sorry, we can’t find the page you are looking for. Maybe you mistyped something?"
 5 |     code="404"
 6 |   />
 7 | </template>
 8 | 
 9 | <script>
10 | import { ErrorScreen } from "../../components/ErrorScreen";
11 | export default {
12 |   components: { ErrorScreen },
13 |   title: "NotFoundPage",
14 | };
15 | </script>
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # carbon-landing
 2 | 
 3 | ## Project setup
 4 | 
 5 | ```
 6 | yarn install
 7 | ```
 8 | 
 9 | ### Compiles and hot-reloads for development
10 | 
11 | ```
12 | yarn serve
13 | ```
14 | 
15 | ### Compiles and minifies for production
16 | 
17 | ```
18 | yarn build
19 | ```
20 | 
21 | ### Run your unit tests
22 | 
23 | ```
24 | yarn test:unit
25 | ```
26 | 
27 | ### Lints and fixes files
28 | 
29 | ```
30 | yarn lint
31 | ```
32 | 
33 | ### Customize configuration
34 | 
35 | See [Configuration Reference](https://cli.vuejs.org/config/).
36 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import KaratekHeader from "./components/KaratekHeader";
 3 | import KaratekFooter from "./components/KaratekFooter";
 4 | 
 5 | export default {
 6 |   name: "App",
 7 |   components: {
 8 |     KaratekHeader,
 9 |     KaratekFooter,
10 |   },
11 | };
12 | </script>
13 | 
14 | <template>
15 |   <div id="app">
16 |     <karatek-header />
17 |     <cv-content id="#main-content">
18 |       <router-view />
19 |     </cv-content>
20 |     <karatek-footer />
21 |   </div>
22 | </template>
23 | 
24 | <style lang="scss">
25 | @import "./styles/carbon";
26 | </style>
27 | 


--------------------------------------------------------------------------------
/src/styles/_screens.scss:
--------------------------------------------------------------------------------
 1 | @mixin lg-screen {
 2 |   @media only screen and (max-width: 1170px) {
 3 |     @content;
 4 |   }
 5 | }
 6 | 
 7 | //Medium Screen - 768 to 992 screen size
 8 | @mixin md-screen {
 9 |   @media only screen and (max-width: 992px) {
10 |     @content;
11 |   }
12 | }
13 | 
14 | //Medium Screen - 575 to 767 screen size
15 | @mixin sm-screen {
16 |   @media only screen and (max-width: 767px) {
17 |     @content;
18 |   }
19 | }
20 | 
21 | //Medium Screen - below 575 screen size
22 | @mixin xs-screen {
23 |   @media only screen and (max-width: 575px) {
24 |     @content;
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/styles/_carbon-fixes.scss:
--------------------------------------------------------------------------------
 1 | // Remove overrides once Carbon bugs are fixed upstream.
 2 | 
 3 | /// Need grid option to not add page gutters at large viewports, to also use when nesting grids
 4 | /// @link https://github.com/carbon-design-system/carbon/issues/2792
 5 | @media (min-width: 42rem) {
 6 |   .bx--grid--no-gutter {
 7 |     padding-left: 1rem;
 8 |     padding-right: 1rem;
 9 |   }
10 | }
11 | 
12 | /// Padding was introduced in 10.3.0, needs an option to let grid set the viewport gutter
13 | /// @link https://github.com/carbon-design-system/carbon/issues/3010
14 | .bx--content {
15 |   padding: 0;
16 | }
17 | 


--------------------------------------------------------------------------------
/src/components/InfoSection/InfoSection.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="bx--row info-section">
 3 |     <div class="bx--col-md-8 bx--col-lg-4 bx--col-xlg-3">
 4 |       <h3 class="info-section__heading">{{ heading }}</h3>
 5 |     </div>
 6 |     <slot />
 7 |   </section>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   name: "InfoSection",
13 |   props: {
14 |     heading: String,
15 |   },
16 | };
17 | </script>
18 | 
19 | <style lang="scss">
20 | @import "../../styles/_carbon-utils";
21 | 
22 | .info-section__heading {
23 |   @include carbon--type-style("heading-01");
24 |   margin-left: $spacing-04;
25 | }
26 | </style>
27 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import VueRouter from "vue-router";
 3 | import HomeView from "../views/HomeView.vue";
 4 | 
 5 | Vue.use(VueRouter);
 6 | 
 7 | const routes = [
 8 |   {
 9 |     path: "/",
10 |     name: "home",
11 |     component: HomeView,
12 |   },
13 |   {
14 |     path: "/about",
15 |     name: "about",
16 |     // route level code-splitting
17 |     // this generates a separate chunk (about.[hash].js) for this route
18 |     // which is lazy-loaded when the route is visited.
19 |     component: () =>
20 |       import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
21 |   },
22 | ];
23 | 
24 | const router = new VueRouter({
25 |   routes,
26 | });
27 | 
28 | export default router;
29 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import CarbonComponentsVue from "@carbon/vue";
 2 | import titleMixin from "./mixins/titleMixin";
 3 | Vue.use(CarbonComponentsVue);
 4 | import Vue from "vue";
 5 | import App from "./App.vue";
 6 | import router from "./router";
 7 | import VueKeyCloak from "@dsb-norge/vue-keycloak-js";
 8 | 
 9 | let keycloak_config = {
10 |   config: {
11 |     realm: process.env.VUE_APP_KEYCLOAK_REALM,
12 |     url: process.env.VUE_APP_KEYCLOAK_URL,
13 |     clientId: process.env.VUE_APP_KEYCLOAK_CLIENT_ID,
14 |   },
15 |   init: {
16 |     onLoad: "check-sso",
17 |   },
18 |   logout: {
19 |     redirectUri: process.env.VUE_APP_KEYCLOAK_LOGOUT_REDIRECT_URL,
20 |   },
21 | };
22 | 
23 | Vue.use(VueKeyCloak, keycloak_config);
24 | Vue.mixin(titleMixin);
25 | new Vue({
26 |   router,
27 |   render: (h) => h(App),
28 | }).$mount("#app");
29 | 


--------------------------------------------------------------------------------
/src/views/Write/Introduction/WriteIntroduction.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="bx--grid bx--grid--full-width write-introduction-page">
 3 |     <div class="bx--row write-introduction-page__head">
 4 |       <div class="bx--col-lg-16">
 5 |         <cv-breadcrumb aria-label="Page navigation">
 6 |           <cv-breadcrumb-item>
 7 |             <cv-link to="/">Home</cv-link>
 8 |           </cv-breadcrumb-item>
 9 |           <cv-breadcrumb-item>
10 |             <cv-link href="#" aria-current="page">Write</cv-link>
11 |           </cv-breadcrumb-item>
12 |         </cv-breadcrumb>
13 |         <h1 class="write-introduction-page__heading">Get started with Write</h1>
14 |         <p>If you're just here to get your token, visit</p>
15 |       </div>
16 |     </div>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   name: "WriteIntroduction",
23 | };
24 | </script>
25 | 
26 | <style lang="scss">
27 | @import "../../../styles/carbon-utils";
28 | @import "../../LandingPage/mixins";
29 | 
30 | .write-introduction-page__head {
31 |   padding-left: $spacing-02;
32 |   padding-top: $spacing-05;
33 |   padding-bottom: $spacing-07 * 2;
34 |   @include landing-page-background;
35 | }
36 | 
37 | .write-introduction-page__heading {
38 |   @include carbon--type-style("productive-heading-05");
39 | }
40 | </style>
41 | 


--------------------------------------------------------------------------------
/src/styles/_carbon.scss:
--------------------------------------------------------------------------------
 1 | // We can use this in developement
 2 | //@import 'carbon-components/scss/globals/scss/styles';
 3 | //$feature-flags: (
 4 | //  grid-columns-16: true,
 5 | //);
 6 | // Feature flags
 7 | $css--font-face: true;
 8 | $css--plex: true;
 9 | 
10 | // Global styles
11 | @import "carbon-components/scss/globals/scss/css--font-face";
12 | @import "carbon-components/scss/globals/grid/grid";
13 | 
14 | // Carbon components
15 | @import "carbon-components/scss/components/breadcrumb/breadcrumb";
16 | @import "carbon-components/scss/components/button/button";
17 | @import "carbon-components/scss/components/link/link";
18 | @import "carbon-components/scss/components/ui-shell/ui-shell";
19 | @import "carbon-components/scss/components/tile/tile";
20 | @import "carbon-components/scss/components/notification/toast-notification";
21 | @import "carbon-components/scss/components/notification/inline-notification";
22 | @import "carbon-components/scss/components/data-table/data-table";
23 | @import "carbon-components/scss/components/pagination/pagination";
24 | @import "carbon-components/scss/components/modal/modal";
25 | @import "carbon-components/scss/components/code-snippet/code-snippet";
26 | @import "carbon-components/scss/components/copy-button/copy-button";
27 | @import "carbon-components/scss/components/form/form";
28 | @import "carbon-components/scss/components/inline-loading/inline-loading";
29 | @import "./carbon-fixes";
30 | 
31 | /*
32 | 
33 |  */
34 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <link rel="icon" href="https://karatek.net/assets/img/kouper-breeze.svg" />
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |     <!-- Matomo -->
10 |     <script>
11 |       var _paq = (window._paq = window._paq || []);
12 |       /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
13 |       _paq.push(["trackPageView"]);
14 |       _paq.push(["enableLinkTracking"]);
15 |       (function () {
16 |         var u = "//beans.karatek.net/";
17 |         _paq.push(["setTrackerUrl", u + "matomo.php"]);
18 |         _paq.push(["setSiteId", "4"]);
19 |         var d = document,
20 |           g = d.createElement("script"),
21 |           s = d.getElementsByTagName("script")[0];
22 |         g.async = true;
23 |         g.src = u + "matomo.js";
24 |         s.parentNode.insertBefore(g, s);
25 |       })();
26 |     </script>
27 |     <!-- End Matomo Code -->
28 |   </head>
29 |   <body>
30 |     <noscript>
31 |       <strong
32 |         >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
33 |         properly without JavaScript enabled. Please enable it to
34 |         continue.</strong
35 |       >
36 |     </noscript>
37 |     <div id="app"></div>
38 |     <!-- built files will be auto injected -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Router from "vue-router";
 3 | import LandingPage from "./views/LandingPage";
 4 | 
 5 | Vue.use(Router);
 6 | 
 7 | const router = new Router({
 8 |   mode: "history",
 9 |   routes: [
10 |     {
11 |       path: "/",
12 |       name: "home",
13 |       component: LandingPage,
14 |     },
15 |     {
16 |       path: "/write/auth",
17 |       name: "stylusauth",
18 |       component: () => import("./views/Write/Stylusauth"),
19 |       meta: {
20 |         requiresAuth: true,
21 |       },
22 |     },
23 |     /*{
24 |       path: "/write",
25 |       name: "write",
26 |       component: () => import("./views/Write/Introduction"),
27 |     },
28 |      */
29 |     {
30 |       path: "*",
31 |       name: "404",
32 |       component: () => import("./views/NotFoundPage"),
33 |     },
34 |   ],
35 | });
36 | function sleep(ms) {
37 |   return new Promise((resolve) => setTimeout(resolve, ms));
38 | }
39 | 
40 | router.beforeEach(async (to, from, next) => {
41 |   if (to.matched.some((record) => record.meta.requiresAuth)) {
42 |     // We wait for Keycloak init, then we can call all methods safely
43 |     while (router.app.$keycloak.createLoginUrl === null) {
44 |       await sleep(100);
45 |     }
46 |     if (router.app.$keycloak.authenticated) {
47 |       next();
48 |     } else {
49 |       router.app.$keycloak.login({
50 |         redirectUri: window.location.origin + to.path,
51 |       });
52 |       //const loginUrl = router.app.$keycloak.createLoginUrl();
53 |       //window.location.replace(loginUrl);
54 |     }
55 |   } else {
56 |     next();
57 |   }
58 | });
59 | 
60 | export default router;
61 | 


--------------------------------------------------------------------------------
/src/components/ServiceSection/ServiceCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="service-card bx--col-md-4 bx--col-lg-4 bx--col-xlg-3">
 3 |     <cv-tile class="tile-image" kind="clickable" :href="href">
 4 |       <img class="bx--tile-content" :src="img" />
 5 |     </cv-tile>
 6 |     <cv-tile class="service-tile" kind="clickable" :href="href">
 7 |       <div class="service-tile-content">
 8 |         <h4 class="service-card__heading">
 9 |           {{ heading }}
10 |         </h4>
11 |         <p>{{ description }}</p>
12 |       </div>
13 |       <cv-button class="service-card-button" kind="ghost" :icon="ArrowRight16"
14 |         >Get started</cv-button
15 |       >
16 |     </cv-tile>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | import { ArrowRight16 } from "@carbon/icons-vue";
22 | export default {
23 |   name: "ServiceCard",
24 |   props: {
25 |     heading: String,
26 |     href: String,
27 |     description: String,
28 |     img: Object,
29 |   },
30 |   methods: {
31 |     link(str) {
32 |       location.href = str;
33 |     },
34 |   },
35 |   created() {
36 |     this.ArrowRight16 = ArrowRight16;
37 |   },
38 | };
39 | </script>
40 | 
41 | <style lang="scss">
42 | @import "../../styles/carbon-utils";
43 | @import "../../styles/screens";
44 | 
45 | .service-tile {
46 |   margin-left: 0;
47 | }
48 | .tile-image {
49 |   padding: 0;
50 | }
51 | 
52 | .service-card {
53 |   @include sm-screen {
54 |     margin-left: $spacing-04;
55 |     margin-right: $spacing-04;
56 |     padding-top: $spacing-03;
57 |     padding-bottom: $spacing-03;
58 |   }
59 | 
60 |   @include md-screen {
61 |     padding-top: $spacing-03;
62 |     padding-bottom: $spacing-03;
63 |   }
64 | }
65 | 
66 | .service-card-button {
67 |   margin: $spacing-02;
68 | }
69 | 
70 | .service-tile-content {
71 |   padding: $spacing-04;
72 | }
73 | 
74 | .service-card__heading {
75 |   margin-top: 0;
76 |   margin-bottom: $spacing-02;
77 |   margin-left: $spacing-02;
78 |   margin-right: $spacing-02;
79 | }
80 | </style>
81 | 


--------------------------------------------------------------------------------
/src/components/InfoSection/InfoCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="info-card bx--col-md-4 bx--col-lg-4 bx--col-xlg-3">
 3 |     <h4 class="info-card__heading">
 4 |       {{ splitHeading[0] }}
 5 |       <strong>{{ splitHeading[1] }}</strong>
 6 |     </h4>
 7 |     <p class="info-card__body">{{ body }}</p>
 8 |     <component :is="icon" />
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   name: "InfoCard",
15 |   props: {
16 |     heading: String,
17 |     body: String,
18 |     icon: Object,
19 |   },
20 |   computed: {
21 |     // Take in a phrase and separate the third word in an array
22 |     splitHeading() {
23 |       const splitHeading = this.heading.split(" ");
24 |       const finalWord = splitHeading.pop();
25 |       return [splitHeading.join(" "), finalWord];
26 |     },
27 |   },
28 | };
29 | </script>
30 | 
31 | <style lang="scss">
32 | @import "../../styles/carbon-utils";
33 | @import "../../styles/screens";
34 | .info-card {
35 |   margin-top: $spacing-09;
36 |   display: flex;
37 |   flex-direction: column;
38 |   @include sm-screen {
39 |     margin-left: $spacing-04;
40 |   }
41 |   svg {
42 |     margin-top: $spacing-09;
43 |   }
44 | 
45 |   // top border in only small breakpoints to prevent overrides
46 |   @include carbon--breakpoint-down(md) {
47 |     &:not(:nth-child(2)) {
48 |       border-top: 1px solid $ui-03;
49 |       padding-top: $spacing-09;
50 |     }
51 |   }
52 | 
53 |   // left border in just the 2nd column items
54 |   @include carbon--breakpoint(md) {
55 |     &:nth-child(odd) {
56 |       border-left: 1px solid $ui-03;
57 |     }
58 |   }
59 | 
60 |   // left border in all items
61 |   @include carbon--breakpoint(lg) {
62 |     margin-top: 0;
63 |     border-left: 1px solid $ui-03;
64 | 
65 |     svg {
66 |       margin-top: $layout-06;
67 |     }
68 |   }
69 | }
70 | .info-card__heading {
71 |   @include carbon--type-style("productive-heading-03");
72 | }
73 | 
74 | .info-card__body {
75 |   margin-top: $spacing-06;
76 |   flex-grow: 1; // fill space so icons are bottom aligned
77 |   @include type-style("body-long-01");
78 | 
79 |   // prevent large line lengths between small and medium viewports
80 |   @include carbon--breakpoint-between(321px, md) {
81 |     max-width: 75%;
82 |   }
83 | }
84 | </style>
85 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "carbon-landing",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "test:unit": "vue-cli-service test:unit",
 9 |     "lint": "vue-cli-service lint",
10 |     "dev": "vite"
11 |   },
12 |   "dependencies": {
13 |     "@carbon/icon-helpers": "^10.28.0",
14 |     "@carbon/icons-vue": "^10.47.0",
15 |     "@carbon/vue": "^2.40.0",
16 |     "@dsb-norge/vue-keycloak-js": "^2.1.3-beta",
17 |     "carbon-components": "^10.54.0",
18 |     "core-js": "^3.8.3",
19 |     "keycloak-js": "^17.0.0",
20 |     "vue": "^2.6.14",
21 |     "vue-keycloak": "^0.0.11",
22 |     "vue-meta": "^2.4.0",
23 |     "vue-router": "^3.5.1",
24 |     "vuejs-logger": "^1.5.5"
25 |   },
26 |   "devDependencies": {
27 |     "@babel/core": "^7.12.16",
28 |     "@babel/eslint-parser": "^7.12.16",
29 |     "@vitejs/plugin-vue": "1.0.0",
30 |     "@vue/cli-plugin-babel": "~5.0.0",
31 |     "@vue/cli-plugin-eslint": "~5.0.0",
32 |     "@vue/cli-plugin-router": "~5.0.0",
33 |     "@vue/cli-plugin-unit-jest": "~5.0.0",
34 |     "@vue/cli-service": "~5.0.0",
35 |     "@vue/compiler-sfc": "3.0.4",
36 |     "@vue/test-utils": "^1.1.3",
37 |     "@vue/vue2-jest": "^27.0.0-alpha.2",
38 |     "babel-jest": "^27.0.6",
39 |     "eslint": "^7.32.0",
40 |     "eslint-config-prettier": "^8.3.0",
41 |     "eslint-plugin-prettier": "^4.0.0",
42 |     "eslint-plugin-vue": "^8.0.3",
43 |     "jest": "^27.0.5",
44 |     "prettier": "^2.4.1",
45 |     "sass": "^1.32.7",
46 |     "sass-loader": "^12.0.0",
47 |     "vite": "2.2.4",
48 |     "vue-template-compiler": "^2.6.14"
49 |   },
50 |   "eslintConfig": {
51 |     "root": true,
52 |     "env": {
53 |       "node": true
54 |     },
55 |     "extends": [
56 |       "plugin:vue/essential",
57 |       "eslint:recommended",
58 |       "plugin:prettier/recommended"
59 |     ],
60 |     "parserOptions": {
61 |       "parser": "@babel/eslint-parser"
62 |     },
63 |     "rules": {},
64 |     "overrides": [
65 |       {
66 |         "files": [
67 |           "**/__tests__/*.{j,t}s?(x)",
68 |           "**/tests/unit/**/*.spec.{j,t}s?(x)"
69 |         ],
70 |         "env": {
71 |           "jest": true
72 |         }
73 |       }
74 |     ]
75 |   },
76 |   "browserslist": [
77 |     "> 1%",
78 |     "last 2 versions",
79 |     "not dead"
80 |   ],
81 |   "jest": {
82 |     "preset": "@vue/cli-plugin-unit-jest"
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/src/components/ErrorScreen/ErrorScreen.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="bx--grid bx--grid--full-width error-page">
  3 |     <h1 class="error-header">Yikes. Something went wrong.</h1>
  4 |     <p class="error-description">
  5 |       Sorry, we can’t find the page you are looking for. Maybe you mistyped
  6 |       something?
  7 |     </p>
  8 |     <span class="error-code">404</span>
  9 |   </div>
 10 | </template>
 11 | 
 12 | <script>
 13 | export default {
 14 |   name: "ErrorScreen",
 15 |   props: {
 16 |     title: String,
 17 |     description: String,
 18 |     code: String,
 19 |   },
 20 | };
 21 | </script>
 22 | 
 23 | <style lang="scss">
 24 | @import "../../styles/carbon-utils";
 25 | .error-page {
 26 |   background: black;
 27 |   min-height: 87vh;
 28 | }
 29 | .error-header {
 30 |   color: white;
 31 |   font-size: 1.75rem;
 32 |   font-weight: 400;
 33 |   letter-spacing: 0;
 34 |   line-height: 1.28572;
 35 |   margin-bottom: 1.5rem;
 36 |   padding-top: 1.5rem;
 37 | }
 38 | 
 39 | .error-description {
 40 |   color: white;
 41 |   font-size: 1.25rem;
 42 |   font-weight: var(--cds-body-long-01-font-weight, 400);
 43 |   letter-spacing: var(--cds-body-long-01-letter-spacing, 0.16px);
 44 |   line-height: var(--cds-body-long-01-line-height, 1.42857);
 45 |   line-height: 1.5;
 46 |   margin-bottom: 1.5rem;
 47 |   max-width: 500px;
 48 | }
 49 | 
 50 | .error-code {
 51 |   -webkit-text-fill-color: #0000;
 52 |   animation: FourOhFour-module--gradient--dIxR7 2s ease infinite;
 53 |   background: linear-gradient(35deg, #92eeee, #a66efa);
 54 |   -webkit-background-clip: text;
 55 |   background-size: 200% 200%;
 56 |   display: inline-block;
 57 |   font-size: 2.625rem;
 58 |   font-size: 144px;
 59 |   font-weight: 600;
 60 |   letter-spacing: 0;
 61 |   line-height: 1.19;
 62 |   margin: 2.5rem 0 10rem;
 63 | }
 64 | @media (min-width: 42rem) {
 65 |   .error-code {
 66 |     font-size: 2.625rem;
 67 |     font-size: calc(1.3125rem + 3.125vw);
 68 |   }
 69 | }
 70 | @media (min-width: 66rem) {
 71 |   .error-code {
 72 |     font-size: 3.375rem;
 73 |     font-size: calc(1.82813rem + 2.34375vw);
 74 |   }
 75 | }
 76 | @media (min-width: 82rem) {
 77 |   .error-code {
 78 |     font-size: 3.75rem;
 79 |     font-size: calc(-1.07353rem + 5.88235vw);
 80 |     line-height: 1.16;
 81 |   }
 82 | }
 83 | @media (min-width: 99rem) {
 84 |   .error-code {
 85 |     font-size: 4.75rem;
 86 |     line-height: 1.13;
 87 |   }
 88 | }
 89 | @media (min-width: 42rem) {
 90 |   .error-code {
 91 |     font-size: 25vw;
 92 |   }
 93 | }
 94 | @media (min-width: 66rem) {
 95 |   .error-code {
 96 |     font-size: 300px;
 97 |   }
 98 | }
 99 | </style>
100 | 


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="hello">
  3 |     <h1>{{ msg }}</h1>
  4 |     <p>
  5 |       For a guide and recipes on how to configure / customize this project,<br />
  6 |       check out the
  7 |       <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
  8 |         >vue-cli documentation</a
  9 |       >.
 10 |     </p>
 11 |     <h3>Installed CLI Plugins</h3>
 12 |     <ul>
 13 |       <li>
 14 |         <a
 15 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
 16 |           target="_blank"
 17 |           rel="noopener"
 18 |           >babel</a
 19 |         >
 20 |       </li>
 21 |       <li>
 22 |         <a
 23 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
 24 |           target="_blank"
 25 |           rel="noopener"
 26 |           >router</a
 27 |         >
 28 |       </li>
 29 |       <li>
 30 |         <a
 31 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
 32 |           target="_blank"
 33 |           rel="noopener"
 34 |           >eslint</a
 35 |         >
 36 |       </li>
 37 |       <li>
 38 |         <a
 39 |           href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest"
 40 |           target="_blank"
 41 |           rel="noopener"
 42 |           >unit-jest</a
 43 |         >
 44 |       </li>
 45 |     </ul>
 46 |     <h3>Essential Links</h3>
 47 |     <ul>
 48 |       <li>
 49 |         <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
 50 |       </li>
 51 |       <li>
 52 |         <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
 53 |           >Forum</a
 54 |         >
 55 |       </li>
 56 |       <li>
 57 |         <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
 58 |           >Community Chat</a
 59 |         >
 60 |       </li>
 61 |       <li>
 62 |         <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
 63 |           >Twitter</a
 64 |         >
 65 |       </li>
 66 |       <li>
 67 |         <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
 68 |       </li>
 69 |     </ul>
 70 |     <h3>Ecosystem</h3>
 71 |     <ul>
 72 |       <li>
 73 |         <a href="https://router.vuejs.org" target="_blank" rel="noopener"
 74 |           >vue-router</a
 75 |         >
 76 |       </li>
 77 |       <li>
 78 |         <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
 79 |       </li>
 80 |       <li>
 81 |         <a
 82 |           href="https://github.com/vuejs/vue-devtools#vue-devtools"
 83 |           target="_blank"
 84 |           rel="noopener"
 85 |           >vue-devtools</a
 86 |         >
 87 |       </li>
 88 |       <li>
 89 |         <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
 90 |           >vue-loader</a
 91 |         >
 92 |       </li>
 93 |       <li>
 94 |         <a
 95 |           href="https://github.com/vuejs/awesome-vue"
 96 |           target="_blank"
 97 |           rel="noopener"
 98 |           >awesome-vue</a
 99 |         >
100 |       </li>
101 |     </ul>
102 |   </div>
103 | </template>
104 | 
105 | <script>
106 | export default {
107 |   name: "HelloWorld",
108 |   props: {
109 |     msg: String,
110 |   },
111 | };
112 | </script>
113 | 
114 | <!-- Add "scoped" attribute to limit CSS to this component only -->
115 | <style scoped lang="scss">
116 | h3 {
117 |   margin: 40px 0 0;
118 | }
119 | ul {
120 |   list-style-type: none;
121 |   padding: 0;
122 | }
123 | li {
124 |   display: inline-block;
125 |   margin: 0 10px;
126 | }
127 | a {
128 |   color: #42b983;
129 | }
130 | </style>
131 | 


--------------------------------------------------------------------------------
/src/components/KaratekFooter/KaratekFooter.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <footer class="karatek__footer bx--grid bx--grid--full-width">
  3 |     <div class="bx--row">
  4 |       <div class="bx--col-md-2 bx--col-lg-2">
  5 |         <ul>
  6 |           <li class="karatek__footer_list">
  7 |             <a
  8 |               class="karatek__footer_link"
  9 |               href="https://karatek.net/contact"
 10 |               aria-label="Contact"
 11 |               >Contact</a
 12 |             >
 13 |           </li>
 14 |           <li class="karatek__footer_list">
 15 |             <a
 16 |               class="karatek__footer_link"
 17 |               href="https://karatek.net/Legal/privacy"
 18 |               aria-label="Privacy"
 19 |               >Privacy</a
 20 |             >
 21 |           </li>
 22 |           <li class="karatek__footer_list">
 23 |             <a
 24 |               class="karatek__footer_link"
 25 |               href="https://karatek.net/Legal/disclaimer"
 26 |               aria-label="Disclaimer"
 27 |               >Disclaimer</a
 28 |             >
 29 |           </li>
 30 |           <li class="karatek__footer_list">
 31 |             <a
 32 |               class="karatek__footer_link"
 33 |               href="https://karatek.net/Legal/privacy/de"
 34 |               aria-label="Datenschutz"
 35 |               >Datenschutz</a
 36 |             >
 37 |           </li>
 38 |         </ul>
 39 |       </div>
 40 |       <div class="bx--col-md-2 bx--col-lg-2">
 41 |         <ul>
 42 |           <li class="karatek__footer_list">
 43 |             <a
 44 |               class="karatek__footer_link"
 45 |               href="https://karatek.net/"
 46 |               aria-label="Homepage"
 47 |               >Karatek</a
 48 |             >
 49 |           </li>
 50 |           <li class="karatek__footer_list">
 51 |             <a
 52 |               class="karatek__footer_link"
 53 |               href="https://github.com/KaratekHD/school-cloud"
 54 |               aria-label="Source Code"
 55 |               >Source Code</a
 56 |             >
 57 |           </li>
 58 |           <li class="karatek__footer_list">
 59 |             <a
 60 |               class="karatek__footer_link"
 61 |               href="https://www.carbondesignsystem.com/"
 62 |               aria-label="Designsystem"
 63 |               >Designsystem</a
 64 |             >
 65 |           </li>
 66 |         </ul>
 67 |       </div>
 68 |       <div class="bx--col-md-2 bx--col-lg-2">
 69 |         <ul>
 70 |           <li class="karatek__footer_list">
 71 |             <a
 72 |               class="karatek__footer_link"
 73 |               href="/download"
 74 |               aria-label="Downloads"
 75 |               >Downloads</a
 76 |             >
 77 |           </li>
 78 |         </ul>
 79 |       </div>
 80 |       <div class="bx--col-md-2 bx--col-lg-2">
 81 |         <ul>
 82 |           <p>
 83 |             Made as free software with <Favorite16 /> by
 84 |             <a class="karatek__footer_link" href="https://github.com/KaratekHD"
 85 |               >Karatek</a
 86 |             >
 87 |           </p>
 88 |         </ul>
 89 |       </div>
 90 |     </div>
 91 |     <div class="bx-row">
 92 |       <a href="https://karatek.net"
 93 |         ><img
 94 |           src="https://karatek.net/assets/img/kouper-breeze.svg"
 95 |           alt="Karatek Logo"
 96 |           class="karatek__footer_logo"
 97 |       /></a>
 98 |     </div>
 99 |   </footer>
100 | </template>
101 | 
102 | <style lang="scss">
103 | @import "../../styles/carbon-utils";
104 | .karatek__footer {
105 |   padding: 1rem;
106 |   background-color: $ui-05;
107 |   color: $ui-02;
108 | }
109 | 
110 | .karatek__footer_text {
111 |   text-align: center;
112 |   color: $ui-02;
113 | }
114 | 
115 | .karatek__footer_link {
116 |   color: $ui-02;
117 |   text-decoration: none;
118 | }
119 | 
120 | .karatek__footer_list {
121 |   margin: $spacing-01;
122 |   padding: $spacing-01;
123 | }
124 | 
125 | .karatek__footer_logo {
126 |   margin-top: $spacing-05;
127 | }
128 | </style>
129 | 
130 | <script>
131 | import { Favorite16 } from "@carbon/icons-vue";
132 | export default {
133 |   name: "Karatek-Footer",
134 |   components: { Favorite16 },
135 | };
136 | </script>
137 | 


--------------------------------------------------------------------------------
/src/views/LandingPage/LandingPage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="bx--grid bx--grid--full-width landing-page">
  3 |     <div class="bx--row landing-page__head">
  4 |       <div class="bx--col-lg-16">
  5 |         <cv-breadcrumb aria-label="Page navigation">
  6 |           <cv-breadcrumb-item>
  7 |             <cv-link href="#" aria-current="page">Home</cv-link>
  8 |           </cv-breadcrumb-item>
  9 |         </cv-breadcrumb>
 10 |         <h1 v-if="$keycloak.authenticated" class="landing-page__heading">
 11 |           Welcome to the Karatek School Cloud, {{ $keycloak.fullName }}!
 12 |         </h1>
 13 |         <h1 v-else class="landing-page__heading">
 14 |           Welcome to the Karatek School Cloud!
 15 |         </h1>
 16 |       </div>
 17 |     </div>
 18 |     <div class="bx--row landing-page__r2">
 19 |       <div class="bx--col bx--no-gutter">
 20 |         <div class="bx--grid bx--grid--no-gutter bx--grid--full-width"></div>
 21 |         <br />
 22 |         <service-section>
 23 |           <service-card
 24 |             heading="Files"
 25 |             href="https://cloud.yourkara.tech/apps/files/"
 26 |             description="Upload your documents, notes and more to the cloud. Share them with other users and collaborate on them! All while keeping your data private."
 27 |             img="https://yourkara.tech/assets/img/Files.png"
 28 |           />
 29 |           <service-card
 30 |             heading="Deck"
 31 |             description="Keep track of all the task you need to do, see when they are due, upload solutions and more! You can even share this with other users."
 32 |             href="https://cloud.yourkara.tech/apps/deck/#/board/6"
 33 |             img="https://yourkara.tech/assets/img/deck.png"
 34 |           />
 35 |           <service-card
 36 |             heading="Write"
 37 |             description="Collaborate on hand written notes in real time using the Styluslabs Write application. Avaliable for Linux, Windows, Android and IOS."
 38 |             href="/stylusauth"
 39 |             img="https://yourkara.tech/assets/img/Write.png"
 40 |           />
 41 |           <service-card
 42 |             heading="HedgeDoc"
 43 |             description="Collaborate on Markdown notes in real time. Supports inline LaTeX Code, Tables, Images and much more. Usable for Quick Notes, Presentations etc."
 44 |             href="https://md.yourkara.tech"
 45 |             img="https://cloud.yourkara.tech/s/Nnnmc4pZtf5xeDb/download/hedgedoc.png"
 46 |           />
 47 |         </service-section>
 48 |       </div>
 49 |     </div>
 50 |     <div class="bx--row landing-page__r3">
 51 |       <info-section heading="The Principles" class="landing-page__r3">
 52 |         <info-card
 53 |           heading="It is private."
 54 |           body="Karatek School Cloud is, unlike a lot of comparable proprietary solutions, build with your privacy in mind. For us, privacy is not just an after-thought."
 55 |           :icon="VirtualPrivateCloud32"
 56 |         />
 57 |         <info-card
 58 |           heading="It is open."
 59 |           body="We believe that in order to trust an application, you have to be able to see its internals. That's why Karatek School Cloud is (almost) completely open-source."
 60 |           :icon="Code32"
 61 |         />
 62 |         <info-card
 63 |           heading="It is platform-independent."
 64 |           body="We think that everyone should be able to work the way they like it. We don't force you to use a specific type of device or use a specific company's hardware."
 65 |           :icon="Devices32"
 66 |         />
 67 |       </info-section>
 68 |     </div>
 69 |   </div>
 70 | </template>
 71 | 
 72 | <script>
 73 | import { ServiceSection, ServiceCard } from "../../components/ServiceSection";
 74 | import { InfoSection, InfoCard } from "../../components/InfoSection";
 75 | import { Devices32, VirtualPrivateCloud32, Code32 } from "@carbon/icons-vue";
 76 | 
 77 | export default {
 78 |   components: { ServiceCard, ServiceSection, InfoSection, InfoCard },
 79 |   title: "Home",
 80 |   created() {
 81 |     // Add icons to this
 82 |     Object.assign(this, {
 83 |       Devices32,
 84 |       VirtualPrivateCloud32,
 85 |       Code32,
 86 |     });
 87 |   },
 88 | };
 89 | </script>
 90 | <style lang="scss">
 91 | @import "../../styles/carbon-utils";
 92 | @import "./mixins";
 93 | .landing-page__illo {
 94 |   max-width: 100%;
 95 | }
 96 | .landing-page__head {
 97 |   padding-left: $spacing-02;
 98 |   padding-top: $spacing-05;
 99 |   padding-bottom: $spacing-07 * 2;
100 |   @include landing-page-background;
101 | }
102 | .landing-page__heading {
103 |   @include carbon--type-style("productive-heading-05");
104 | }
105 | 
106 | .landing-page__subheading {
107 |   @include carbon--type-style("productive-heading-03");
108 |   @include carbon--font-weight("semibold");
109 | }
110 | .landing-page__p {
111 |   @include carbon--type-style("productive-heading-03");
112 |   margin-top: $spacing-06;
113 |   margin-bottom: $spacing-08;
114 |   @include carbon--breakpoint-between((320px + 1), md) {
115 |     max-width: 75%;
116 |   }
117 | }
118 | .landing-page__r3 {
119 |   padding-top: $spacing-09;
120 |   padding-bottom: $spacing-09;
121 | }
122 | .landing-page__label {
123 |   @include carbon--type-style("heading-01");
124 | }
125 | </style>
126 | 
127 | <!--
128 | 
129 | -->
130 | 


--------------------------------------------------------------------------------
/src/views/Write/Stylusauth/Stylusauth.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="bx--grid bx--grid--full-width stylusauth-page">
  3 |     <div class="bx--row stylusauth-page__head">
  4 |       <div class="bx--col-lg-16">
  5 |         <cv-breadcrumb aria-label="Page navigation">
  6 |           <cv-breadcrumb-item>
  7 |             <cv-link to="/">Home</cv-link>
  8 |           </cv-breadcrumb-item>
  9 |           <cv-breadcrumb-item>
 10 |             <cv-link to="/write">Write</cv-link>
 11 |           </cv-breadcrumb-item>
 12 |           <cv-breadcrumb-item>
 13 |             <cv-link href="#" aria-current="page">Authentication</cv-link>
 14 |           </cv-breadcrumb-item>
 15 |         </cv-breadcrumb>
 16 |         <h1 class="stylusauth-page__heading">Access Tokens for Write</h1>
 17 |       </div>
 18 |     </div>
 19 | 
 20 |     <cv-toast-notification
 21 |       class="stylusauth-page__notification"
 22 |       v-if="$keycloak.authenticated === false"
 23 |       kind="error"
 24 |       title="Unauthenticated"
 25 |       sub-title="You must be authenticated to access this page."
 26 |       caption="Honestly, I don't even know how you got here."
 27 |       :hide-close-button="true"
 28 |     ></cv-toast-notification>
 29 |     <div class="bx--row">
 30 |       <div class="bx--col bx--no-gutter">
 31 |         <div class="bx--grid bx--grid--no-gutter bx--grid--full-width">
 32 |           <div class="bx--row">
 33 |             <div class="bx--col-md-4">
 34 |               <h2 class="landing-page__subheading">What is this for?</h2>
 35 |               <p class="landing-page__p">
 36 |                 The authentication mechanism included in
 37 |                 <a href="https://github.com/styluslabs/stylusboard"
 38 |                   >Stylusboard</a
 39 |                 >
 40 |                 is pretty basic and lacks support for 2FA and a centralized
 41 |                 login system. This page generates secure, strong and unique
 42 |                 passwords in order to solve this problem. By clicking the button
 43 |                 below, you will receive an access token that is bound to your
 44 |                 Karatek Account. Should you lose this token, you can revoke it
 45 |                 and generate a new one just by clicking the button again.
 46 |               </p>
 47 |               <cv-button :disabled="show_loading" @click="show_creds()"
 48 |                 >Generate Access Token</cv-button
 49 |               ><cv-inline-loading
 50 |                 v-if="show_loading"
 51 |                 ref="loading"
 52 |                 loaded-text="Complete."
 53 |                 :state="loading_state"
 54 |                 loading-text="Your credentials are being generated."
 55 |               ></cv-inline-loading>
 56 |             </div>
 57 |             <div class="bx--col-md-4">
 58 |               <img
 59 |                 class="landing-page__img"
 60 |                 width="75%"
 61 |                 src="@/assets/tab-illo.png"
 62 |                 alt="Stylusboard Authentication"
 63 |               />
 64 |             </div>
 65 |           </div>
 66 |         </div>
 67 |       </div>
 68 |     </div>
 69 |     <div
 70 |       class="bx--row bx--no-gutter stylusauth-page__body"
 71 |       v-if="$keycloak.authenticated"
 72 |     >
 73 |       <div class="bx--col-lg-16">
 74 |         <cv-modal
 75 |           ref="dialog"
 76 |           @modal-shown="actionShown"
 77 |           @modal-hidden="actionHidden"
 78 |         >
 79 |           <template slot="label">Write</template>
 80 |           <template slot="title">Your Credentials are ready.</template>
 81 |           <template slot="content">
 82 |             <cv-inline-notification
 83 |               kind="warning"
 84 |               sub-title="The credendentials below can be used to authenticate your Karatek Account against Write. Treat them like a password and keep them secret!"
 85 |               :hide-close-button="true"
 86 |             ></cv-inline-notification>
 87 |             <cv-data-table
 88 |               class="credentials-table"
 89 |               :columns="['Username', 'Password']"
 90 |               :data="[[$keycloak.userName, this.token]]"
 91 |             ></cv-data-table>
 92 |           </template>
 93 |           <template slot="primary-button">OK</template>
 94 |         </cv-modal>
 95 |         <!--<cv-data-table class="credentials-table" :columns="['Username', 'Password']" :data="[[$keycloak.userName, 'Test']]"></cv-data-table>-->
 96 | 
 97 |         <br />
 98 |       </div>
 99 |     </div>
100 |     <!--<div ref="spacer" class="bx--row bx--no-gutter spacer"></div>-->
101 |   </div>
102 | </template>
103 | 
104 | <script>
105 | export default {
106 |   name: "StylusAuth",
107 |   title: "Stylusauth",
108 |   data() {
109 |     return {
110 |       token: null,
111 |       loading_state: "loading",
112 |       show_loading: false,
113 |     };
114 |   },
115 |   methods: {
116 |     async show_creds() {
117 |       this.loading_state = "loading";
118 |       this.show_loading = true;
119 |       const response = await fetch(
120 |         "http://localhost:8000/stylusauth/get_token/",
121 |         {
122 |           headers: { Authorization: "Bearer " + this.$keycloak.token },
123 |         }
124 |       );
125 |       const json = await response.json();
126 |       console.log(json);
127 |       this.token = json.token;
128 |       this.loading_state = "loaded";
129 |       this.$refs.dialog.show();
130 |     },
131 |     async actionHidden() {
132 |       this.show_loading = false;
133 |     },
134 |   },
135 | };
136 | </script>
137 | 
138 | <style lang="scss">
139 | @import "../../../styles/carbon-utils";
140 | @import "../../LandingPage/mixins";
141 | 
142 | .stylusauth-page__head {
143 |   padding-left: $spacing-02;
144 |   padding-top: $spacing-05;
145 |   padding-bottom: $spacing-07 * 2;
146 |   @include landing-page-background;
147 | }
148 | 
149 | .stylusauth-page__heading {
150 |   @include carbon--type-style("productive-heading-05");
151 | }
152 | 
153 | .stylusauth-page__p {
154 |   @include carbon--type-style("productive-heading-03");
155 |   margin-top: $spacing-06;
156 |   margin-bottom: $spacing-08;
157 |   @include carbon--breakpoint-between((320px + 1), md) {
158 |     max-width: 75%;
159 |   }
160 | }
161 | 
162 | .stylusauth-page__label {
163 |   @include carbon--type-style("heading-01");
164 | }
165 | 
166 | .stylusauth-page__notification {
167 |   // on the top right corner
168 |   position: fixed;
169 |   right: 0;
170 |   top: $spacing-08 + $spacing-04;
171 | }
172 | 
173 | .stylusauth-page__head {
174 |   @include landing-page-background;
175 | }
176 | 
177 | .credentials-table {
178 |   // center the table
179 |   margin-left: auto;
180 |   margin-right: auto;
181 | }
182 | 
183 | .bx--snippet-container {
184 |   width: 100%;
185 | }
186 | 
187 | .karatek__footer {
188 |   position: relative;
189 | }
190 | </style>
191 | 


--------------------------------------------------------------------------------
/src/components/KaratekHeader/KaratekHeader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <cv-header aria-label="Karatek School Cloud">
  3 |     <cv-skip-to-content href="#main-content"
  4 |       >Skip to content</cv-skip-to-content
  5 |     >
  6 |     <cv-header-menu-button aria-label="Header menu" aria-controls="side-nav" />
  7 |     <cv-header-name to="/" prefix="Karatek">School Cloud</cv-header-name>
  8 |     <cv-header-nav>
  9 |       <cv-header-menu title="Nextcloud">
 10 |         <cv-header-menu-item
 11 |           aria-label="Dashboard"
 12 |           href="https://cloud.yourkara.tech/apps/dashboard/"
 13 |           >Dashboard</cv-header-menu-item
 14 |         >
 15 |         <cv-header-menu-item
 16 |           aria-label="Files"
 17 |           href="https://cloud.yourkara.tech/apps/files/"
 18 |           >Files</cv-header-menu-item
 19 |         >
 20 |         <cv-header-menu-item
 21 |           aria-label="Deck"
 22 |           href="https://cloud.yourkara.tech/apps/deck/#/board/6"
 23 |           >Deck</cv-header-menu-item
 24 |         >
 25 |       </cv-header-menu>
 26 |       <cv-header-menu-item
 27 |         aria-label="HedgeDoc"
 28 |         href="https://md.yourkara.tech/"
 29 |         >HedgeDoc</cv-header-menu-item
 30 |       >
 31 |       <cv-header-menu-item
 32 |         aria-label="Chat"
 33 |         href="https://cloud.yourkara.tech/apps/riotchat/"
 34 |         >Chat</cv-header-menu-item
 35 |       >
 36 |       <cv-header-menu-item aria-label="Stylusauth" to="/write/auth"
 37 |         >Stylusauth</cv-header-menu-item
 38 |       >
 39 |       <!--<cv-header-menu-item aria-label="Devel" to="/stylusauth">Devel</cv-header-menu-item>-->
 40 |     </cv-header-nav>
 41 | 
 42 |     <template v-slot:header-global>
 43 |       <cv-header-global-action
 44 |         v-if="$keycloak.authenticated"
 45 |         aria-label="Log Out"
 46 |         label="Log Out"
 47 |         @click="$keycloak.logoutFn()"
 48 |       >
 49 |         <logout-20 />
 50 |       </cv-header-global-action>
 51 |       <cv-header-global-action
 52 |         v-else
 53 |         aria-label="Log In"
 54 |         label="Log In"
 55 |         @click="login()"
 56 |       >
 57 |         <login-20 />
 58 |       </cv-header-global-action>
 59 |       <cv-header-global-action
 60 |         v-if="$keycloak.authenticated"
 61 |         aria-label="My Account"
 62 |         :label="$keycloak.fullName"
 63 |         @click="$keycloak.accountManagement()"
 64 |         href="https://auth.karatek.net/auth/realms/master/account/"
 65 |       >
 66 |         <user-avatar-20 />
 67 |       </cv-header-global-action>
 68 |       <cv-header-global-action
 69 |         aria-label="App switcher"
 70 |         label="App Switcher"
 71 |         aria-controls="switcher-panel"
 72 |       >
 73 |         <app-switcher-20 />
 74 |       </cv-header-global-action>
 75 |     </template>
 76 |     <template v-slot:left-panels>
 77 |       <cv-side-nav id="side-nav" fixed>
 78 |         <cv-side-nav-items>
 79 |           <cv-header-side-nav-items>
 80 |             <cv-header-menu title="Nextcloud">
 81 |               <cv-header-menu-item
 82 |                 aria-label="Dashboard"
 83 |                 href="https://cloud.yourkara.tech/apps/dashboard/"
 84 |                 >Dashboard</cv-header-menu-item
 85 |               >
 86 |               <cv-header-menu-item
 87 |                 aria-label="Files"
 88 |                 href="https://cloud.yourkara.tech/apps/files/"
 89 |                 >Files</cv-header-menu-item
 90 |               >
 91 |               <cv-header-menu-item
 92 |                 aria-label="Deck"
 93 |                 href="https://cloud.yourkara.tech/apps/deck/#/board/6"
 94 |                 >Deck</cv-header-menu-item
 95 |               >
 96 |             </cv-header-menu>
 97 |             <cv-header-menu-item
 98 |               aria-label="HedgeDoc"
 99 |               href="https://md.yourkara.tech/"
100 |               >HedgeDoc</cv-header-menu-item
101 |             >
102 |             <cv-header-menu-item
103 |               aria-label="Chat"
104 |               href="https://cloud.yourkara.tech/apps/riotchat/"
105 |               >Chat</cv-header-menu-item
106 |             >
107 |             <cv-header-menu-item aria-label="Stylusauth" to="/write/auth"
108 |               >Stylusauth</cv-header-menu-item
109 |             >
110 |           </cv-header-side-nav-items>
111 |         </cv-side-nav-items>
112 |       </cv-side-nav>
113 |     </template>
114 |     <template v-slot:right-panels>
115 |       <cv-header-panel id="switcher-panel">
116 |         <cv-switcher>
117 |           <cv-switcher-item>
118 |             <cv-switcher-item-link href="javascript:void(0)" selected>
119 |               Karatek School Cloud
120 |             </cv-switcher-item-link>
121 |           </cv-switcher-item>
122 |           <cv-switcher-item>
123 |             <cv-switcher-item-link
124 |               href="https://cloud.yourkara.tech/apps/files/"
125 |             >
126 |               Files
127 |             </cv-switcher-item-link>
128 |           </cv-switcher-item>
129 |           <cv-switcher-item>
130 |             <cv-switcher-item-link
131 |               href="https://cloud.yourkara.tech/apps/deck/#/board/6"
132 |             >
133 |               Deck
134 |             </cv-switcher-item-link>
135 |           </cv-switcher-item>
136 |           <cv-switcher-item>
137 |             <cv-switcher-item-link
138 |               href="https://cloud.yourkara.tech/apps/riotchat/"
139 |             >
140 |               Matrix
141 |             </cv-switcher-item-link>
142 |           </cv-switcher-item>
143 |           <cv-switcher-item>
144 |             <cv-switcher-item-link href="https://stylus.yourkara.tech/">
145 |               Stylusauth
146 |             </cv-switcher-item-link>
147 |           </cv-switcher-item>
148 |           <cv-switcher-item>
149 |             <cv-switcher-item-link href="https://auth.karatek.net/auth/admin/">
150 |               Administration Console
151 |             </cv-switcher-item-link>
152 |           </cv-switcher-item>
153 |           <cv-switcher-item>
154 |             <cv-switcher-item-link href="https://beans.karatek.net">
155 |               Beans
156 |             </cv-switcher-item-link>
157 |           </cv-switcher-item>
158 |           <cv-switcher-item>
159 |             <cv-switcher-item-link href="https://music.yourkara.tech">
160 |               TS3 Music Bot
161 |             </cv-switcher-item-link>
162 |           </cv-switcher-item>
163 |         </cv-switcher>
164 |       </cv-header-panel>
165 |     </template>
166 |   </cv-header>
167 | </template>
168 | 
169 | <script>
170 | import {
171 |   UserAvatar20,
172 |   AppSwitcher20,
173 |   Login20,
174 |   Logout20,
175 | } from "@carbon/icons-vue";
176 | 
177 | export default {
178 |   name: "Karatek-Header",
179 |   components: { UserAvatar20, AppSwitcher20, Login20, Logout20 },
180 |   methods: {
181 |     link(str) {
182 |       location.href = str;
183 |     },
184 |     login() {
185 |       this.$keycloak.login();
186 |     },
187 |   },
188 | };
189 | </script>
190 | 


--------------------------------------------------------------------------------