Skip to content

Instantly share code, notes, and snippets.

@keidarcy
Last active May 16, 2020 04:14
Show Gist options
  • Save keidarcy/41504cf0477efd3dcbbbcae650521815 to your computer and use it in GitHub Desktop.
Save keidarcy/41504cf0477efd3dcbbbcae650521815 to your computer and use it in GitHub Desktop.
login react vs vue
import React, { useState } from 'react'
const login = ({ username, password }) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (Object.is(username, 'bili') && Object.is(password, 'bili')) {
console.log(username, password)
resolve('success')
} else {
console.log(username, password)
reject('error')
}
}, 1000)
})
}
function App() {
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const [error, setError] = useState('')
const [isSubmitting, setIsSumbitting] = useState(false)
const [isLogin, setIsLogin] = useState(false)
const handleSumbit = async (e) => {
e.preventDefault()
setIsSumbitting(true)
try {
await login({ username, password })
setUsername('')
setPassword('')
setError('')
setIsSumbitting(false)
setIsLogin(true)
} catch (error) {
setUsername('')
setPassword('')
setError('incorrect username or password')
setIsSumbitting(false)
}
}
const logout = () => {
setIsLogin(false)
}
return (
<div className="card container my-5">
{isLogin ? (
<>
<h1>Welcome {username}✅🐸</h1>
<button onClick={logout} className="btn-block btn btn-warning">
Logout
</button>
</>
) : (
<div className="card-body">
<h1 className="card-title">React Login</h1>
{error && (
<>
<h1 className="text-danger">{error}</h1>
</>
)}
<form onSubmit={handleSumbit}>
<div className="form-group">
<label htmlFor="exampleInputEmail1">Username</label>
<input
type="text"
className="form-control"
id="exampleInputEmail1"
value={username}
onChange={(e) => setUsername(e.currentTarget.value)}
aria-describedby="emailHelp"
/>
</div>
<div className="form-group">
<label htmlFor="exampleInputPassword1">Password</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.currentTarget.value)}
className="form-control"
id="exampleInputPassword1"
/>
</div>
<button
type="submit"
className="btn btn-block btn-dark"
disabled={isSubmitting}
>
{isSubmitting ? 'submitting' : 'submit'}
</button>
</form>
</div>
)}
</div>
)
}
export default App
<template>
<div id="app">
<div class="card container mx-auto mt-5">
<div class="card-body" v-if="!isLogin">
<h1 class="card-title">Vue Login</h1>
<h1 class="text-danger" v-if="error">{{ error }}</h1>
<form @submit.prevent="handleSubmit">
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input
type="text"
class="form-control"
id="exampleInputEmail1"
aria-describedby="emailHelp"
v-model="username"
/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input
type="password"
v-model="password"
class="form-control"
id="exampleInputPassword1"
/>
</div>
<button
type="submit"
class="btn btn-primary btn-block"
:disabled="isSubmitting ? true : false"
>Submit</button>
</form>
</div>
<div v-else>
<h1 class="text-success">Welcome {{username}}✅🐸</h1>
<button class="btn btn-info btn-block" @click="logout">Logout</button>
</div>
</div>
</div>
</template>
<script>
const login = ({ username, password }) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (Object.is(username, "bili") && Object.is(password, "bili")) {
console.log(username, password);
resolve("success");
} else {
console.log(username, password);
reject("error");
}
}, 1000);
});
};
export default {
name: "App",
data() {
return {
username: "",
password: "",
error: "",
isSubmitting: false,
isLogin: false
};
},
methods: {
async handleSubmit() {
this.isSubmitting = true;
try {
await login({ username: this.username, password: this.password });
this.username = "";
this.password = "";
this.isSubmitting = false;
this.isLogin = true;
} catch (error) {
console.log(error);
this.error = "incorrect username or password";
this.username = "";
this.isSubmitting = false;
this.password = "";
}
},
logout() {
this.isLogin = false;
}
}
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment