mirror of
https://github.com/creativetimofficial/vue-material-kit.git
synced 2025-11-04 16:35:40 +08:00
Start of working auth
This commit is contained in:
FEARmeR
parent
48c4df099d
commit
bdcbdf818e
171
src/views/LandingPages/SignIn/BasicView Old.vue
Normal file
171
src/views/LandingPages/SignIn/BasicView Old.vue
Normal file
@ -0,0 +1,171 @@
|
|||||||
|
<script setup>
|
||||||
|
import { onMounted } from "vue";
|
||||||
|
|
||||||
|
// example components
|
||||||
|
import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue";
|
||||||
|
import Header from "@/examples/Header.vue";
|
||||||
|
|
||||||
|
//Vue Material Kit 2 components
|
||||||
|
import MaterialInput from "@/components/MaterialInput.vue";
|
||||||
|
import MaterialSwitch from "@/components/MaterialSwitch.vue";
|
||||||
|
import MaterialButton from "@/components/MaterialButton.vue";
|
||||||
|
|
||||||
|
// material-input
|
||||||
|
import setMaterialInput from "@/assets/js/material-input";
|
||||||
|
onMounted(() => {
|
||||||
|
setMaterialInput();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<DefaultNavbar transparent />
|
||||||
|
<Header>
|
||||||
|
<div
|
||||||
|
class="page-header align-items-start min-vh-100"
|
||||||
|
:style="{
|
||||||
|
backgroundImage:
|
||||||
|
'url(https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80)'
|
||||||
|
}"
|
||||||
|
loading="lazy"
|
||||||
|
>
|
||||||
|
<span class="mask bg-gradient-dark opacity-6"></span>
|
||||||
|
<div class="container my-auto">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-lg-4 col-md-8 col-12 mx-auto">
|
||||||
|
<div class="card z-index-0 fadeIn3 fadeInBottom">
|
||||||
|
<div
|
||||||
|
class="card-header p-0 position-relative mt-n4 mx-3 z-index-2"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="bg-gradient-success shadow-success border-radius-lg py-3 pe-1"
|
||||||
|
>
|
||||||
|
<h4
|
||||||
|
class="text-white font-weight-bolder text-center mt-2 mb-0"
|
||||||
|
>
|
||||||
|
Sign in
|
||||||
|
</h4>
|
||||||
|
<div class="row mt-3">
|
||||||
|
<div class="col-2 text-center ms-auto">
|
||||||
|
<a class="btn btn-link px-3" href="javascript:;">
|
||||||
|
<i class="fa fa-facebook text-white text-lg"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-2 text-center px-1">
|
||||||
|
<a class="btn btn-link px-3" href="javascript:;">
|
||||||
|
<i class="fa fa-github text-white text-lg"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-2 text-center me-auto">
|
||||||
|
<a class="btn btn-link px-3" href="javascript:;">
|
||||||
|
<i class="fa fa-google text-white text-lg"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<form role="form" class="text-start">
|
||||||
|
<MaterialInput
|
||||||
|
id="email"
|
||||||
|
class="input-group-outline my-3"
|
||||||
|
:label="{ text: 'Email', class: 'form-label' }"
|
||||||
|
type="email"
|
||||||
|
/>
|
||||||
|
<MaterialInput
|
||||||
|
id="password"
|
||||||
|
class="input-group-outline mb-3"
|
||||||
|
:label="{ text: 'Password', class: 'form-label' }"
|
||||||
|
type="password"
|
||||||
|
/>
|
||||||
|
<MaterialSwitch
|
||||||
|
class="d-flex align-items-center mb-3"
|
||||||
|
id="rememberMe"
|
||||||
|
labelClass="mb-0 ms-3"
|
||||||
|
checked
|
||||||
|
>Remember me</MaterialSwitch
|
||||||
|
>
|
||||||
|
|
||||||
|
<div class="text-center">
|
||||||
|
<MaterialButton
|
||||||
|
class="my-4 mb-2"
|
||||||
|
variant="gradient"
|
||||||
|
color="success"
|
||||||
|
fullWidth
|
||||||
|
>Sign in</MaterialButton
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<p class="mt-4 text-sm text-center">
|
||||||
|
Don't have an account?
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
class="text-success text-gradient font-weight-bold"
|
||||||
|
>Sign up</a
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<footer class="footer position-absolute bottom-2 py-2 w-100">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row align-items-center justify-content-lg-between">
|
||||||
|
<div class="col-12 col-md-6 my-auto">
|
||||||
|
<div
|
||||||
|
class="copyright text-center text-sm text-white text-lg-start"
|
||||||
|
>
|
||||||
|
© {{ new Date().getFullYear() }}, made with
|
||||||
|
<i class="fa fa-heart" aria-hidden="true"></i> by
|
||||||
|
<a
|
||||||
|
href="https://www.creative-tim.com"
|
||||||
|
class="font-weight-bold text-white"
|
||||||
|
target="_blank"
|
||||||
|
>Creative Tim</a
|
||||||
|
>
|
||||||
|
for a better web.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-md-6">
|
||||||
|
<ul
|
||||||
|
class="nav nav-footer justify-content-center justify-content-lg-end"
|
||||||
|
>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a
|
||||||
|
href="https://www.creative-tim.com"
|
||||||
|
class="nav-link text-white"
|
||||||
|
target="_blank"
|
||||||
|
>Creative Tim</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a
|
||||||
|
href="https://www.creative-tim.com/presentation"
|
||||||
|
class="nav-link text-white"
|
||||||
|
target="_blank"
|
||||||
|
>About Us</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a
|
||||||
|
href="https://www.creative-tim.com/blog"
|
||||||
|
class="nav-link text-white"
|
||||||
|
target="_blank"
|
||||||
|
>Blog</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a
|
||||||
|
href="https://www.creative-tim.com/license"
|
||||||
|
class="nav-link pe-0 text-white"
|
||||||
|
target="_blank"
|
||||||
|
>License</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</Header>
|
||||||
|
</template>
|
||||||
@ -1,21 +1,79 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import { onMounted } from "vue";
|
import { onMounted } from "vue";
|
||||||
|
import { ref } from "vue";
|
||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
// example components
|
// example components
|
||||||
import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue";
|
import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue";
|
||||||
import Header from "@/examples/Header.vue";
|
import Header from "@/examples/Header.vue";
|
||||||
|
|
||||||
//Vue Material Kit 2 components
|
|
||||||
import MaterialInput from "@/components/MaterialInput.vue";
|
|
||||||
import MaterialSwitch from "@/components/MaterialSwitch.vue";
|
|
||||||
import MaterialButton from "@/components/MaterialButton.vue";
|
|
||||||
|
|
||||||
// material-input
|
// material-input
|
||||||
import setMaterialInput from "@/assets/js/material-input";
|
import setMaterialInput from "@/assets/js/material-input";
|
||||||
|
|
||||||
|
const username = ref('');
|
||||||
|
const password = ref('');
|
||||||
|
const errorMessage = ref('');
|
||||||
|
|
||||||
|
|
||||||
|
const login = async () => {
|
||||||
|
if (!username.value || !password.value) {
|
||||||
|
errorMessage.value = "Please fill in both fields.";
|
||||||
|
} else {
|
||||||
|
const url = 'http://somebodyhire.me/api/token/';
|
||||||
|
const headers = {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
};
|
||||||
|
const body = {
|
||||||
|
username: username.value,
|
||||||
|
password: password.value,
|
||||||
|
};
|
||||||
|
try {
|
||||||
|
const response = await axios.post(url, body, { headers });
|
||||||
|
errorMessage.value = `Request:\nPOST ${url}\nHeaders: ${JSON.stringify(headers)}\nBody: ${JSON.stringify(body)}\n\nResponse:\nStatus: ${response.status}\nHeaders: ${JSON.stringify(response.headers)}\nBody: ${JSON.stringify(response.data)}`;
|
||||||
|
} catch (error) {
|
||||||
|
if (error.response) {
|
||||||
|
// The request was made and the server responded with a status code that falls out of the range of 2xx
|
||||||
|
errorMessage.value = `Request:\nPOST ${url}\nHeaders: ${JSON.stringify(headers)}\nBody: ${JSON.stringify(body)}\n\nResponse:\nStatus: ${error.response.status}\nHeaders: ${JSON.stringify(error.response.headers)}\nBody: ${JSON.stringify(error.response.data)}`;
|
||||||
|
} else if (error.request) {
|
||||||
|
// The request was made but no response was received
|
||||||
|
errorMessage.value = `Request:\nPOST ${url}\nHeaders: ${JSON.stringify(headers)}\nBody: ${JSON.stringify(body)}\n\nError: No response received from server. Please try again later.`;
|
||||||
|
} else {
|
||||||
|
// Something happened in setting up the request that triggered an error
|
||||||
|
errorMessage.value = `Request:\nPOST ${url}\nHeaders: ${JSON.stringify(headers)}\nBody: ${JSON.stringify(body)}\n\nError: ${error.message}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
setMaterialInput();
|
setMaterialInput();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
username: '',
|
||||||
|
password: '',
|
||||||
|
errorMessage: '',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
login() {
|
||||||
|
if (!this.username || !this.password) {
|
||||||
|
this.errorMessage = "Please fill in both fields.";
|
||||||
|
} else {
|
||||||
|
// Implement login logic here
|
||||||
|
this.errorMessage = `Can't login now, you are trying to sign in with login: ${this.username} and password: ${this.password}`;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<DefaultNavbar transparent />
|
<DefaultNavbar transparent />
|
||||||
<Header>
|
<Header>
|
||||||
@ -41,64 +99,49 @@ onMounted(() => {
|
|||||||
<h4
|
<h4
|
||||||
class="text-white font-weight-bolder text-center mt-2 mb-0"
|
class="text-white font-weight-bolder text-center mt-2 mb-0"
|
||||||
>
|
>
|
||||||
Sign in
|
Вход
|
||||||
</h4>
|
</h4>
|
||||||
<div class="row mt-3">
|
|
||||||
<div class="col-2 text-center ms-auto">
|
|
||||||
<a class="btn btn-link px-3" href="javascript:;">
|
|
||||||
<i class="fa fa-facebook text-white text-lg"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-2 text-center px-1">
|
|
||||||
<a class="btn btn-link px-3" href="javascript:;">
|
|
||||||
<i class="fa fa-github text-white text-lg"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-2 text-center me-auto">
|
|
||||||
<a class="btn btn-link px-3" href="javascript:;">
|
|
||||||
<i class="fa fa-google text-white text-lg"></i>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<form role="form" class="text-start">
|
<form role="form" class="text-start">
|
||||||
<MaterialInput
|
<div>
|
||||||
id="email"
|
|
||||||
class="input-group-outline my-3"
|
<div>
|
||||||
:label="{ text: 'Email', class: 'form-label' }"
|
<input v-model="username" type="text" placeholder="Имя пользователя" />
|
||||||
type="email"
|
</div>
|
||||||
/>
|
|
||||||
<MaterialInput
|
<div>
|
||||||
id="password"
|
<input v-model="password" type="password" placeholder="Пароль" />
|
||||||
class="input-group-outline mb-3"
|
</div>
|
||||||
:label="{ text: 'Password', class: 'form-label' }"
|
|
||||||
type="password"
|
|
||||||
/>
|
<div class="text-center">
|
||||||
<MaterialSwitch
|
<button
|
||||||
class="d-flex align-items-center mb-3"
|
type="button"
|
||||||
id="rememberMe"
|
class="btn bg-gradient-dark w-100 my-4 mb-2"
|
||||||
labelClass="mb-0 ms-3"
|
@click="login"
|
||||||
checked
|
>
|
||||||
>Remember me</MaterialSwitch
|
Войти
|
||||||
>
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div v-if="errorMessage">
|
||||||
|
<p>{{ errorMessage }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="text-center">
|
|
||||||
<MaterialButton
|
|
||||||
class="my-4 mb-2"
|
|
||||||
variant="gradient"
|
|
||||||
color="success"
|
|
||||||
fullWidth
|
|
||||||
>Sign in</MaterialButton
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<p class="mt-4 text-sm text-center">
|
<p class="mt-4 text-sm text-center">
|
||||||
Don't have an account?
|
Нет аккаунта?
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
class="text-success text-gradient font-weight-bold"
|
class="text-success text-gradient font-weight-bold"
|
||||||
>Sign up</a
|
>Пока что нахер идите</a
|
||||||
>
|
>
|
||||||
</p>
|
</p>
|
||||||
</form>
|
</form>
|
||||||
@ -107,65 +150,6 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<footer class="footer position-absolute bottom-2 py-2 w-100">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row align-items-center justify-content-lg-between">
|
|
||||||
<div class="col-12 col-md-6 my-auto">
|
|
||||||
<div
|
|
||||||
class="copyright text-center text-sm text-white text-lg-start"
|
|
||||||
>
|
|
||||||
© {{ new Date().getFullYear() }}, made with
|
|
||||||
<i class="fa fa-heart" aria-hidden="true"></i> by
|
|
||||||
<a
|
|
||||||
href="https://www.creative-tim.com"
|
|
||||||
class="font-weight-bold text-white"
|
|
||||||
target="_blank"
|
|
||||||
>Creative Tim</a
|
|
||||||
>
|
|
||||||
for a better web.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 col-md-6">
|
|
||||||
<ul
|
|
||||||
class="nav nav-footer justify-content-center justify-content-lg-end"
|
|
||||||
>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a
|
|
||||||
href="https://www.creative-tim.com"
|
|
||||||
class="nav-link text-white"
|
|
||||||
target="_blank"
|
|
||||||
>Creative Tim</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a
|
|
||||||
href="https://www.creative-tim.com/presentation"
|
|
||||||
class="nav-link text-white"
|
|
||||||
target="_blank"
|
|
||||||
>About Us</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a
|
|
||||||
href="https://www.creative-tim.com/blog"
|
|
||||||
class="nav-link text-white"
|
|
||||||
target="_blank"
|
|
||||||
>Blog</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a
|
|
||||||
href="https://www.creative-tim.com/license"
|
|
||||||
class="nav-link pe-0 text-white"
|
|
||||||
target="_blank"
|
|
||||||
>License</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
</Header>
|
</Header>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user