LepotrikCore upload

package.json

@@ -26,7 +26,11 @@
     "@coreui/utils": "^1.3.1",
     "@coreui/vue": "^4.5.0",
     "@coreui/vue-chartjs": "2.0.1",
+    "@vuelidate/core": "^2.0.2",
+    "@vuelidate/validators": "^2.0.2",
+    "axios": "^1.4.0",
     "core-js": "^3.26.1",
+    "pinia": "^2.1.3",
     "vue": "^3.2.45",
     "vue-router": "^4.1.6",
     "vuex": "^4.1.0"

src/App.vue

@@ -5,4 +5,5 @@
 <style lang="scss">
 // Import Main styles for this application
 @import 'styles/style';
+@import '../src/assets/main.css';
 </style>

src/assets/main.css

@@ -0,0 +1,74 @@
+.glassbackground form {
+  background: rgba( 255, 255, 255, 0.4 );
+  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+  backdrop-filter: blur( 20px );
+  -webkit-backdrop-filter: blur( 20px );
+  border-radius: 10px;
+  border: 1px solid rgba( 255, 255, 255, 0.18 );
+  text-align: center;
+  height: 450px;
+  width: 350px;
+}
+
+.glassbackground {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  width: 100vw;
+  min-height: 100vh;
+  background: url(backround.jpg) no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
+*{
+  margin: 0; padding: 0;
+  box-sizing: border-box;
+  font-family: 'Mona Sans';
+  transition: all .2s linear;
+}
+
+
+@font-face {
+  font-family: 'Mona Sans';
+  src:
+    url('Mona-Sans.woff2') format('woff2 supports variations'),
+    url('Mona-Sans.woff2') format('woff2-variations');
+  font-weight: 200 900;
+  font-stretch: 75% 125%;
+}
+
+
+.glassbackground form input{
+  height: 40px;
+  width: 15vw;
+  margin:2px 0;
+  margin:auto;
+  align-items: center;
+  background: rgba(255, 254, 254, 0.644);
+  backdrop-filter: blur( 20px );
+  -webkit-backdrop-filter: blur( 20px );
+  border-radius: 10px;
+  border: 2px solid rgba( 255, 255, 255, 0.18 );
+  text-align: center;
+
+}
+
+.glassbackground form button{
+  height: 40px;
+  width: 15vw;
+}
+
+a:link { text-decoration: none; }
+
+a:visited { text-decoration: none; }
+
+a:hover { text-decoration: none; }
+
+a:active { text-decoration: none; }
+
+@font-face{
+  font-family: 'Mona Sans';
+  src:url('./SFProDisplay-Regular.woff2');
+  unicode-range: U+0400-04FF;
+}

src/main.js

@@ -2,18 +2,19 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-
+import { createPinia } from 'pinia'
 import CoreuiVue from '@coreui/vue'
 import CIcon from '@coreui/icons-vue'
 import { iconsSet as icons } from '@/assets/icons'
 import DocsExample from '@/components/DocsExample'
 
+const pinia = createPinia()
 const app = createApp(App)
 app.use(store)
 app.use(router)
 app.use(CoreuiVue)
 app.provide('icons', icons)
 app.component('CIcon', CIcon)
 app.component('DocsExample', DocsExample)
-
+app.use(pinia)
 app.mount('#app')

src/pages/login/Forgot.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="glassbackground">
+    <form>
+      <br />
+      <h2>Забули пароль</h2>
+      <br />
+      <div class="form-outline mb-4">
+        <h5>Електронна пошта</h5>
+        <input
+          type="email"
+          id="loginmail"
+          class="form-control"
+          v-model="mail"
+          :class="{ 'is-invalid': v$?.mail?.$error }"
+          placeholder="example@gmail.com"
+          aria-describedby="forgotPassword"
+        />
+        <div id="forgotPassword" class="form-text">
+          Код буде надіслано на вашу електронну пошту
+        </div>
+      </div>
+      <br />
+      <button
+        type="button"
+        v-if="codeSent == false"
+        @click="resetpass"
+        class="btn btn-primary"
+      >
+        Надіслати код
+      </button>
+      <button
+        type="button"
+        v-if="codeSent == true"
+        @click="resetpass"
+        disabled
+        class="btn btn-primary"
+      >
+        Код було надіслано!
+      </button>
+    </form>
+  </div>
+</template>
+
+<script>
+import { useVuelidate } from '@vuelidate/core'
+import { email, required } from '@vuelidate/validators'
+
+export default {
+  setup() {
+    return { v$: useVuelidate() }
+  },
+  data() {
+    return {
+      mail: '',
+      codeSent: false,
+    }
+  },
+  validations() {
+    return {
+      mail: {
+        email,
+        required,
+      },
+    }
+  },
+  computed: {
+    mailErrors() {
+      const errors = []
+      if (!this.v$.$dirty) return errors
+      if (!this.v$.$invalid) return errors
+      if (!this.v$?.mail?.email)
+        errors.push('Please enter valid email address.')
+      if (!this.v$?.mail?.required) errors.push('Please fill this line.')
+      return errors
+    },
+  },
+  methods: {
+    resetpass() {
+      this.v$.$touch()
+      if (this.v$.$invalid) return
+      this.codeSent = true
+    },
+  },
+}
+</script>

src/pages/login/Login.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="glassbackground">
+    <form>
+      <br />
+      <h1>Ввійти</h1>
+      <br />
+      <div class="form-outline mb-4">
+        <h5>Електронна пошта</h5>
+        <input
+          type="email"
+          id="loginmail"
+          class="form-control"
+          v-model="mail"
+          :class="{ 'is-invalid': v$?.mail?.$error }"
+          placeholder="example@gmail.com"
+        />
+      </div>
+      <div class="form-outline mb-4">
+        <h4>Пароль</h4>
+        <input
+          type="password"
+          aria-label="password"
+          class="form-control"
+          v-model="password"
+          :class="{ 'is-invalid': v$?.password?.$error }"
+          placeholder="Вашпароль123"
+          aria-describedby="forgotPassword"
+        />
+        <div id="forgotPassword" class="form-text">
+          <a href="google.com">Скинути пароль</a>
+        </div>
+      </div>
+      <br />
+      <button type="button" @click="login" class="btn btn-primary">
+        Ввійти
+      </button>
+    </form>
+  </div>
+</template>
+
+<script>
+import { useVuelidate } from '@vuelidate/core'
+import {
+  minLength,
+  maxLength,
+  email,
+  required,
+  helpers,
+} from '@vuelidate/validators'
+
+export default {
+  setup() {
+    return { v$: useVuelidate() }
+  },
+  data() {
+    return {
+      mail: '',
+      password: '',
+    }
+  },
+  validations() {
+    return {
+      mail: {
+        email: helpers.withMessage('Please enter only valid mails!', email),
+        required: helpers.withMessage("This fill can't be empty", required),
+      },
+      password: {
+        minLength: minLength(6),
+        maxLength: maxLength(24),
+        required,
+      },
+    }
+  },
+  computed: {
+    mailErrors() {
+      const errors = []
+      if (!this.v$.$dirty) return errors
+      if (!this.v$.$invalid) return errors
+      if (!this.v$?.mail?.email)
+        errors.push('Please enter valid email address.')
+      if (!this.v$?.mail?.required) errors.push('Please fill this line.')
+      return errors
+    },
+    passwordErrors() {
+      const errors = []
+      if (!this.v$.$dirty) return errors
+      if (!this.v$.$invalid) return errors
+      if (!this.v$?.password?.minLength)
+        errors.push('Please enter at least 6 characters')
+      if (!this.v$?.password?.maxLength)
+        errors.push('Please enter at most 24 characters')
+      if (!this.v$?.password?.required) errors.push('Please fill this line.')
+      return errors
+    },
+  },
+  methods: {
+    login() {
+      this.v$.$touch()
+      if (this.v$.$invalid) return
+    },
+  },
+}
+</script>