Коммит 2dcfd6dc создал по автору Anton Medvedev's avatar Anton Medvedev
Просмотр файлов

Merge branch 'main' into 'main' 

#18 Подключена авторизация

See merge request teknokomo/universo-monorepo!18
владельцы 6c86d92e bb0d5d12
Скрыть пробелы
Построчно Рядом
universo-frontend/src/layouts/StartLayout.vue
Просмотр файла @ 2dcfd6dc
...@@ -55,7 +55,7 @@ export default defineComponent({ ...@@ -55,7 +55,7 @@ export default defineComponent({
...mapActions(useAuthStore, ['getLocalStorage']), ...mapActions(useAuthStore, ['getLocalStorage']),
}, },
mounted() { mounted() {
this.getMe();
this.getLocalStorage() this.getLocalStorage()
.then(() => this.getMe()) .then(() => this.getMe())
.catch(() => { .catch(() => {
......
universo-frontend/src/pages/RegistrationPage.vue
Просмотр файла @ 2dcfd6dc
import { LocalStorage } from 'quasar'
<template> <template>
<q-layout> <div class="registration-page">
<q-page-container> <q-card class="registration-card">
<q-page class="flex bg-image flex-center"> <q-card-title class="registration-title">
<q-card v-bind:style="$q.screen.lt.sm?{'width': '80%'}:{'width':'30%'}"> <div class="registration-color2" >
<q-card-section> <span class="text-h6 " >Вход в Universo</span>
<q-avatar size="103px" class="absolute-center shadow-10"> </div>
<img src="https://img.freepik.com/free-photo/glowing-spaceship-orbits-planet-in-starry-galaxy-generated-by-ai_188544-9655.jpg?w=740&t=st=1690464256~exp=1690464856~hmac=f54129b3d446065615f6e8602c35056df42ad5eeb0f3c7a858da1d51d9673b52"> <div class="registration-color" >
</q-avatar> <span class="q-pt-none">Страница авторизации</span>
</q-card-section> </div>
<q-card-section> </q-card-title>
<div class="text-center q-pt-lg"> <div class="registration-line"></div>
<div class="col text-h6 ellipsis"> <v-divider ></v-divider>
Log in
</div> <q-card-text class="registration-title-text">
</div> <div class="registration-color" >
</q-card-section> <span class="q-pt-none" style="margin-left: 20px;">Укажите адрес электронной почты</span>
<q-card-section> </div>
<q-form <q-input
class="q-gutter-md" v-model="email"
> type="email"
<q-input label="Введите Email"
filled outlined
v-model="username" class="q-mb-md registration-input"
label="Username" style="margin-left: 20px;"
lazy-rules />
/> <div class="registration-color" >
<span class="q-pt-none" style="margin-left: 20px;">Укажите пароль</span>
<q-input </div>
type="password" <q-input
filled v-model="password"
v-model="password" type="password"
label="Password" label="Введите пароль"
lazy-rules outlined
class="q-mb-md registration-input"
/> style="margin-left: 20px;"
/>
<div> </q-card-text>
<q-btn label="Login" to="/" type="button" color="primary"/>
</div> <v-divider class="registration-line"></v-divider>
</q-form>
</q-card-section> <q-card-actions class="registration-actions">
</q-card> <q-btn to="/zareg" outline color="green" label="Зарегистрировать аккаунт" dense />
</q-page> <q-btn outline color="blue" label="Войти" dense @click="onLogin"/>
</q-page-container>
</q-layout> </q-card-actions>
</template> </q-card>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'; <script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({ import { useAuthStore } from 'src/stores/auth.js';
setup() { import { mapActions } from 'pinia';
const username = ref(''); export default defineComponent({
const password = ref(''); name: 'RegistrationPage',
data() {
return { return {
username, email: '',
password, password: '',
}; };
},
methods: {
...mapActions(useAuthStore, ['login']),
onLogin(){
this.login(
this.email , this.password , true
) .then(
()=>{ this.$router.push('/')}
)
.catch(
(error)=>{console.log(error.message)}
)
},
}, },
}); });
</script> </script>
<style scoped>
.registration-page {
display: flex;
justify-content: center;
align-items: center;
height: center;
margin-top: 30px;
}
.registration-card {
width: 700px;
position: relative;
flex-direction: column;
align-items: flex-start;
}
.registration-title {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 10px;
margin-left: 20px;
margin-block-end: 15px;
}
.registration-title-text {
font-size: 15px;
}
.registration {
margin-top:100 px;
margin-bottom: px;
}
.registration-input {
width: 95%;
}
.registration-actions {
margin: 10px;
display: flex;
justify-content: space-between;
}
<style scoped> .registration-button {
margin-left: 10px;
}
.bg-image { .registration-line {
background-image: linear-gradient(135deg, #7028e4 0%, #e5b2ca 100%); width: 100%;
} height: 1px;
background-color: #ccc;
margin-top: 10px;
margin-bottom: 15px;
}
.registration-color{
color: #646262;
}
.registration-color2{
color: #000000;
width: 200px;
</style> }
</style>
Поддерживает Markdown
0% или .
You are about to add 0 people to the discussion. Proceed with caution.
Сначала завершите редактирование этого сообщения!
Пожалуйста, зарегистрируйтесь или чтобы прокомментировать