enhancement/login-page (#79)

frontend/src/api/login.ts

@@ -2,23 +2,21 @@ import axios, { AxiosResponse } from 'axios';
 import Cookies from 'universal-cookie';
 
 export default {
-  login: async (email: string, password: string, symbol: string, diaryUrl: string)
+  register: async (email: string, password: string, symbol: string): Promise<AxiosResponse> => {
-    : Promise<AxiosResponse> => {
     const cookies = new Cookies();
     const response = await axios({
-      method: 'POST',
+      method: 'post',
       url: 'http://localhost:8000/api/login',
       headers: {
         'Content-Type': 'application/json',
-        'X-CSRFToken': cookies.get('csrftoken'),
+        'X-CSRFToken': cookies.get('csrf-token'),
       },
       data: {
         loginName: email,
         Password: password,
         Symbol: symbol,
-        diaryUrl,
+        diaryUrl: 'http://cufs.fakelog.tk/',
       },
-      withCredentials: true,
     });
 
     document.cookie = response.headers['Set-Cookie'];

frontend/src/assets/iconWhite.svg

@@ -0,0 +1,68 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 210 297"
+   version="1.1"
+   id="svg91"
+   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"
+   sodipodi:docname="wulkanowy_only_logo.svg">
+  <defs
+     id="defs85" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35"
+     inkscape:cx="400"
+     inkscape:cy="560"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     inkscape:document-rotation="0"
+     showgrid="false"
+     inkscape:window-width="1677"
+     inkscape:window-height="1030"
+     inkscape:window-x="192"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata88">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Warstwa 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <g
+       style="display:inline"
+       id="layer2"
+       transform="matrix(0.26458333,0,0,0.26458333,-30.389283,3.6285705)">
+      <path
+         style="fill:#ffffff;stroke-width:0.781796"
+         d="m 385.17894,776.98989 c 0.62544,2.03267 0.31272,4.2217 -0.7818,6.01983 l -15.08867,24.47023 c -1.48541,2.42357 -4.2217,3.98716 -7.19253,3.98716 H 220.92351 c -6.56709,0 -10.55425,-6.8798 -7.03616,-12.03966 l 90.92292,-133.92173 c 0.54726,-0.78179 0.85997,-1.64177 1.09451,-2.50174 l 41.66975,-177.93687 c 0.46908,-2.11085 1.87631,-3.90898 3.90898,-5.00349 l 56.4457,-30.95914 c 2.03267,-1.09452 3.43991,-2.89265 3.90899,-5.08168 l 7.58342,-33.06999 c 1.56359,-6.8798 11.41423,-8.36522 15.32321,-2.34538 l 2.73629,4.37806 c 1.17269,1.87631 1.48541,4.2217 0.70362,6.33255 l -51.44221,148.69767 c -0.3909,1.1727 -0.54726,2.42357 -0.31272,3.67445 l 12.82146,71.14347 c 0.23454,1.40723 0.0782,2.89265 -0.54725,4.2217 l -30.56824,68.64172 c -0.70362,1.64178 -0.85998,3.43991 -0.31272,5.08168 z m 417.94836,34.47722 h -97.25548 c -2.81446,0 -5.39439,-1.40723 -6.95798,-3.59626 l -65.43636,-92.01744 c -0.3909,-0.62543 -0.7818,-1.25087 -1.01634,-1.95449 L 600.01659,619.1452 c -0.62544,-1.87631 -2.11085,-3.51809 -3.98716,-4.45624 L 516.59891,574.5828 c -2.18903,-1.09451 -3.75262,-3.12718 -4.2217,-5.39439 l -11.72694,-58.16566 c -0.15636,-0.93815 -0.54726,-1.87631 -1.1727,-2.73628 L 472.5056,468.64939 c -1.48542,-2.18903 -1.71995,-4.84714 -0.62544,-7.19253 l 16.41772,-35.10266 c 1.25088,-2.6581 3.98717,-4.45624 7.11435,-4.6126 l 30.49006,-1.79813 c 1.79813,-0.0782 3.43991,-0.70361 4.76896,-1.79813 l 22.43756,-17.43406 c 4.2217,-3.28354 10.63243,-1.87631 12.89964,2.73629 l 77.31966,157.29744 c 0.31272,0.70361 0.54726,1.40723 0.70362,2.11085 l 9.53792,63.24733 c 0.23453,1.48541 0.85997,2.81446 1.87631,3.90898 l 154.01389,168.5553 c 4.53442,5.0035 0.70362,12.89964 -6.33255,12.89964 z M 424.97238,319.32628 c 0,-17.90314 11.33604,-33.30453 27.59741,-40.49706 -1.1727,-1.95449 -1.87631,-4.06534 -1.87631,-6.33255 0,-8.67794 10.00699,-15.71411 22.2812,-15.71411 0.31271,0 0.54725,0 0.85997,0 5.08168,-8.4434 14.77595,-14.15051 25.87746,-14.15051 0.7818,0 1.5636,0 2.34539,0.0782 1.01634,0.0782 2.03267,-0.3909 2.57993,-1.1727 8.20886,-12.50874 29.00465,-21.42122 53.31851,-21.42122 8.99066,0 17.51224,1.25088 25.09567,3.36173 1.79813,-2.97083 5.78529,-5.0035 10.39789,-5.0035 5.23804,0 9.69428,2.65811 11.02333,6.33255 6.41073,-7.42707 17.2777,-12.2742 29.63008,-12.2742 19.70127,0 35.64992,12.43056 35.64992,27.75377 0,1.87631 -0.23454,3.67444 -0.70362,5.47257 -0.31271,1.25088 0.3909,2.50175 1.71996,2.97083 12.58692,4.6126 21.1085,13.36872 21.1085,23.37571 0,11.41423 -11.02333,21.18669 -26.58108,25.01749 -1.25087,0.31272 -2.03267,1.40723 -2.03267,2.57993 0,0.0782 0,0.15635 0,0.23453 0,8.8343 -8.75612,16.10501 -20.01399,16.88681 0.0782,0.3909 0.0782,0.78179 0.0782,1.25087 0,16.96498 -32.28819,30.64642 -72.08163,30.64642 -8.59976,0 -16.80862,-0.62544 -24.39204,-1.79813 0,0.15636 0,0.23454 0,0.3909 0,7.03616 -9.06884,12.74328 -20.17035,12.74328 -0.62544,0 -1.1727,0 -1.71995,-0.0782 0.78179,1.71995 1.17269,3.51808 1.17269,5.39439 0,10.94515 -13.8378,19.77945 -30.95914,19.77945 -1.87631,0 -3.67444,-0.0782 -5.47257,-0.31272 -1.40724,-0.15635 -2.73629,0.70362 -3.04901,2.03268 -1.48541,5.47257 -6.25437,9.45973 -11.96148,9.45973 -6.87981,0 -12.35239,-5.86347 -12.35239,-13.056 0,-3.36172 1.1727,-6.41073 3.12719,-8.67794 0.70362,-0.78179 0.93816,-1.87631 0.46908,-2.81447 -1.09452,-2.03267 -1.5636,-4.14352 -1.5636,-6.41073 v 0 c 0,-1.25087 -1.01633,-2.26721 -2.2672,-2.57992 -21.18669,-4.69078 -37.13533,-22.35938 -37.13533,-43.46788 z m 179.50045,424.6718 c 0.31272,0.93816 0.3909,1.87632 0.3909,2.89265 l -4.53442,57.30568 c -0.31272,4.06534 -3.90898,7.2707 -8.28704,7.2707 H 445.68998 c -3.12718,0 -6.01983,-1.79813 -7.42707,-4.37806 l -24.1575,-44.87511 c -0.15636,-0.23454 -0.23454,-0.46908 -0.31272,-0.70362 l -22.75028,-55.11664 c -0.85997,-1.95449 -0.70361,-4.2217 0.23454,-6.09802 l 37.76077,-73.87976 c 0.93815,-1.79813 1.09451,-3.90898 0.3909,-5.78529 l -18.4504,-51.12948 c -0.62544,-1.79814 -0.54726,-3.83081 0.23454,-5.55076 l 30.80278,-65.59272 c 3.12718,-6.56709 13.36872,-6.01983 15.55775,0.85998 l 9.61609,29.86462 29.31737,78.49236 c 0.78179,2.18903 2.6581,3.90898 5.00349,4.69078 l 62.54372,21.34304 c 2.42357,0.85998 4.29988,2.65811 5.08167,4.92532 z"
+         id="XMLID_42_" />
+      <g
+         id="text4752"
+         style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:341.333px;line-height:1.25;font-family:Roboto;-inkscape-font-specification:'Roboto Light';letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none"
+         aria-label="WULKANOWY" />
+    </g>
+  </g>
+</svg>

frontend/src/assets/wulkanowy.svg

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+5<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"

frontend/src/components/Login/Baner.vue

@@ -1,56 +1,32 @@
 <template>
-    <div class="card" style="float: left;">
+  <div>
-        <v-col>
+    <div class="pa-1 text-center justify-center">
-           <v-row align="center">
+      <img
-              <v-card dark color="#d32f2f" style="height: 524px; margin-right: 35px; width: 350px;">
+        src="../../assets/iconWhite.svg"
-                <v-card-text>
-                  <div style="width: 140; height: 140;">
-                    <img src="../../assets/wulkanowy.svg"
         width="140"
-                    class="logo"/>
+        style="text-shadow: -1px 2px 0px rgba(157,0,0,0.73);"
+      />
     </div>
-                <div id="headlineRed">Wulkanowy</div>
+    <v-card-title
-                <div id="headlineTwo">Nieoficjalna aplikacja przeglądarkowa ucznia i
+      style="text-shadow: -1px 2px 0px rgba(157,0,0,0.73);"
+      class="white--text text-center justify-center pa-2 headline"
+    >Wulkanowy</v-card-title>
+    <v-card-text class="white--text text-center pa-2">
+      Nieoficjalna aplikacja przeglądarkowa ucznia i
       rodzica dla dziennika Vulcan UONET+
-                  </div>
-                <br><br><br>
-                <a href="#" target="_blank" style="color: white;">Polityka prywatności</a>
-                <br>
-                <div id="headlineTwo">v 0.1.0</div>
     </v-card-text>
-              </v-card>
+    <br><br><br>
-           </v-row>
+    <v-card-subtitle
-        </v-col>
+      class="white--text"
+      style="position: absolute; bottom: 0px;"
+    >
+      v 0.1.0
+      <v-icon class="white--text">mdi-circle-small</v-icon>
+      <a
+        href="#"
+        target="_blank"
+        class="white--text"
+      >Polityka prywatności</a>
+    </v-card-subtitle>
   </div>
 </template>
-<style>
-.cardTwo{
-  float: left;
-  height: 500px;
-  top: 5%;
-  margin-bottom: 50px;
-  width: 450px;
-}
-#headlineRed{
-  text-align: center;
-  font-weight: 300;
-  font-size: 2pc;
-  margin-bottom: 1pc;
-  color: white;
-  font-weight: 400;
-  text-shadow: -1px 2px 0px rgba(157,0,0,0.73);
-  margin-top: 10px;
-}
-
-#headlineTwo{
-  text-align: center;
-  font-weight: 300;
-  font-size: 1pc;
-  margin-bottom: 1.5pc;
-  color: white;
-  padding: 10px;
-}
-.logo img{
-  text-shadow: -1px 2px 0px rgba(157,0,0,0.73);
-}
-</style>

frontend/src/components/Login/Loading.vue

@@ -1,19 +1,14 @@
 <template>
-<div id="App" style="height: 476px; margin: 0;">
+<div>
-  <v-row align="center">
+  <v-row
-    <v-col cols="12">
+    align="center"
+    justify="center"
+  >
     <v-progress-circular
       indeterminate
       color="red"
-      style="margin-top: 200px;"
+      style="position: absolute; top: 50%; bottom: 50%;"
     ></v-progress-circular>
-    </v-col>
   </v-row>
 </div>
 </template>
-
-<script>
-export default {
-  name: 'Loading',
-};
-</script>

frontend/src/components/Login/SelectStudent.vue

@@ -1,8 +1,10 @@
 <template>
-<div id="App" style="min-height: 476px; margin: 0;">
+<div>
   <v-row align="center">
     <v-col cols="12">
-      <div id="nag">Wybierz ucznia</div>
+      <p class="justify-center text-center headline font-weight-light">Wybierz Ucznia</p>
+    </v-col>
+    <v-col cols="12">
       <v-radio-group>
         <v-radio
           v-model="selectedStudent"
@@ -13,8 +15,12 @@
       </v-radio-group>
     </v-col>
     <v-col cols="12">
-      <v-btn id="buttonTwo" dark color="red" elevation="2"
+      <v-btn
-        @click="chooseClicked()" :disabled="inputDisabled"
+        dark
+        color="red"
+        elevation="2"
+        @click="chooseClicked()"
+        :disabled="inputDisabled"
       >Wybierz</v-btn>
     </v-col>
   </v-row>
@@ -49,22 +55,3 @@ export default {
   },
 };
 </script>
-
-<style>
-  #nag{
-    text-align: center;
-    font-weight: 300;
-    font-size: 1.3pc;
-    margin-bottom: 1pc;
-  }
-
-  #App{
-    padding: 10px;
-  }
-
-  #buttonTwo{
-    margin-top: auto;
-    margin-left: auto;
-    display: flex;
-  }
-</style>

frontend/src/components/Login/UserLogin.vue

@@ -1,48 +1,69 @@
 <template>
-  <div id="App" style="height: 476px; margin: 0;">
+  <div>
-    <v-row align="center">
     <v-col cols="12">
-              <div id="nag">Zaloguj się za pomocą konta ucznia lub rodzica</div>
+      <p class="justify-center text-center headline font-weight-light">
-              <v-text-field color="red" v-model="login" :disabled="inputDisabled"
+        Zaloguj się za pomocą konta ucznia lub rodzica
-              label="E-mail" outlined></v-text-field>
+      </p>
-              <v-text-field color="red" v-model="password" :disabled="inputDisabled"
+    </v-col>
-              label="Hasło" outlined type="password"></v-text-field>
+    <v-col cols="12">
-              <v-text-field color="red" v-model="symbol" :disabled="inputDisabled"
+      <v-text-field
-              label="Symbol" outlined></v-text-field>
+        color="red"
-              <v-select color="red" v-model="selectedSymbol" :disabled="inputDisabled"
+        v-model="login"
-              label="Wybierz odmianę dziennika UONET+" outlined :items="item"
+        :disabled="inputDisabled"
-              v-on:change="fakelog()"
+        label="E-mail"
-              item-color="red"></v-select>
+        outlined
-              <v-btn id="buttonTwo" dark color="red" elevation="2"
+      />
-              @click="loginUser()">Zaloguj się</v-btn>
+      <v-text-field
+        color="red"
+        v-model="password"
+        :disabled="inputDisabled"
+        label="Hasło"
+        outlined
+        type="password"
+      />
+      <v-text-field
+        color="red"
+        v-model="symbol"
+        :disabled="inputDisabled"
+        label="Symbol"
+        outlined
+      />
+      <v-select
+        color="red"
+        v-model="selectedSymbol"
+        :disabled="inputDisabled"
+        label="Wybierz odmianę dziennika UONET+"
+        outlined
+        :items="domains"
+        v-on:change="fakelog()"
+        item-color="red"
+      />
+    </v-col>
+    <v-col cols="12">
+      <v-btn
+        dark
+        color="red"
+        elevation="2"
+        @click="loginUser()"
+        class="justify-end"
+      >Zaloguj się</v-btn>
     </v-col>
-    </v-row>
   </div>
 </template>
-<script lang="ts">
+<script>
 import Vue from 'vue';
 import login from '../../api/login';
-import diary from '../../assets/data/diary.json';
 
-interface Login {
+export default {
-  login: string
-  password: string
-  diaryNames: Array<string>
-  selectedDiary: string,
-  selectedSymbol: string,
-  symbol: string
-}
-
-export default Vue.extend({
   name: 'UserLogin',
   data() {
     return {
       inputDisabled: false,
       login: '',
       password: '',
-      selectedSymbol: '',
+      selectedSymbols: '',
-      symbol: '',
+      symbols: '',
-      item: [
+      domains: [
         'Vulcan',
         'Fakelog',
       ],
@@ -71,7 +92,7 @@ export default Vue.extend({
       }
     },
   },
-});
+};
 </script>
 <style>
   #App{

frontend/src/components/Panel/Drawer.vue

@@ -99,22 +99,6 @@
             </v-list-item-icon>
             <v-list-item-title>School</v-list-item-title>
           </v-list-item>
-
-          <v-divider></v-divider>
-
-          <v-list-item @click="clickMenu(settings)">
-            <v-list-item-icon>
-              <v-icon>mdi-cog</v-icon>
-            </v-list-item-icon>
-            <v-list-item-title>Settings</v-list-item-title>
-          </v-list-item>
-
-          <v-list-item @click="clickMenu(about)">
-            <v-list-item-icon>
-              <v-icon>mdi-information-outline</v-icon>
-            </v-list-item-icon>
-            <v-list-item-title>About</v-list-item-title>
-          </v-list-item>
        </v-list-item-group>
       </v-list>
     </v-navigation-drawer>

frontend/src/plugins/vuetify.ts

@@ -8,7 +8,7 @@ export default new Vuetify({
   theme: {
     themes: {
       light: {
-        primary: colors.red.darken1, // #E53935
+        primary: colors.red.darken2, // #E53935
         secondary: colors.red.lighten4, // #FFCDD2
         accent: colors.indigo.base, // #3F51B5
       },

frontend/src/props/LoginForm.ts

@@ -0,0 +1,6 @@
+interface LoginForm {
+  login: String,
+  password: String,
+  domains: Array<String>,
+  selectedSymbol: String
+}

frontend/src/router/index.ts

@@ -10,14 +10,6 @@ const routes: Array<RouteConfig> = [
     name: 'Login',
     component: Login,
   },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
-  },
   {
     path: '/user',
     name: 'User',

frontend/src/views/Login.vue

@@ -1,15 +1,21 @@
 <template>
   <div id="login">
     <v-main style="width: 100%;">
-      <div style="clear: both;"></div>
       <v-card
         elevation="10"
         id="login-form"
         class="mx-auto"
+        :tile="window.width < 900"
         >
-        <Baner v-if="window.width > 900"></Baner>
+        <v-row no-gutters>
-        <div class="card">
+          <v-col
-          <v-col>
+            class="red darken-2 rounded-l-sm"
+            cols="12"
+            md="5"
+            style="min-height: 500px;"
+            v-if="window.width > 900"
+          ><Baner v-if="window.width > 900"></Baner></v-col>
+          <v-col cols="12" md="7">
             <form>
               <v-container>
                 <UserLogin
@@ -22,7 +28,7 @@
               </v-container>
             </form>
           </v-col>
-        </div>
+        </v-row>
       </v-card>
     </v-main>
   </div>
@@ -80,13 +86,14 @@ export default {
   overflow: hidden;
   background-image: url("../assets/wallpaper.jpg");
   background-size: cover;
-  height: 100%;
+  min-height: 100vh;
   width: 100%;
 }
 #login-form {
   top: 15%;
   width: 850px;
   margin-bottom: 200px;
+  min-height: 500px;
 }
 .login-input {
   margin: 10px;
@@ -94,4 +101,13 @@ export default {
 .login-button {
   margin: 10px;
 }
+
+@media only screen and (max-width: 900px) {
+  #login-form {
+    top: 0%;
+    margin: 0;
+    width: 100vw;
+    min-height: 100vh;
+  }
+}
 </style>

frontend/src/views/Panel.vue

@@ -1,9 +1,10 @@
 <template>
-<div id="App" style="margin: 0;">
+<div>
   <div id="appbar">
     <Appbar></Appbar>
     <Drawer></Drawer>
   </div>
+  <v-main></v-main>
 </div>
 </template>
 
@@ -19,6 +20,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-</style>

frontend/tsconfig.json

@@ -9,7 +9,6 @@
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "resolveJsonModule": true,
     "sourceMap": true,
     "baseUrl": ".",
     "types": [