login react vs vue

react-login.js

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

vue-login.js

<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>