react-icons/fa#FaKey JavaScript Examples
The following examples show how to use
react-icons/fa#FaKey.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.js From rahat-vendor with GNU Affero General Public License v3.0 | 4 votes |
|
export default function Main() {
const history = useHistory();
const [restorePage, setRestorePage] = useState(false);
const [showModal, setModal] = useState(false);
const [restoreMethod, setRestoreMethod] = useState(null);
const togglePasscodeModal = () => setModal(prev => !prev);
const toggleRestore = () => setRestorePage(prev => !prev);
const setRestoreMthd = mthd => setRestoreMethod(mthd);
const handlePasscodeSave = () => {
togglePasscodeModal();
restoreMethod && history.push(RESTORE_LINK[restoreMethod]);
};
const hasWallet = useCallback(async () => {
const wallet = await DataService.getWallet();
if (wallet != null) {
history.push('/');
}
}, [history]);
useEffect(hasWallet, [hasWallet]);
return (
<>
<div className="item p-2">
<div className="text-center p-3 mb-3">
<img src="/assets/img/brand/logo-512.png" alt="alt" width="200" />
</div>
<h2>राहत अधिकृत पसल</h2>
<p>
राहत कार्यक्रममा भाग लिनु भएकोमा धन्यवाद। कोरोना भाइरसको निषेधाज्ञाबाट पिडितहरुलाई राहतको धेरै खाँचो
छ। देश विदेशका दाताबाट राहत बाडिएको छ। उहाँहरुको सहयोग खेरा नजान यो सिस्टम बनाइएको हो। यो आधुनिक
सिस्टमबाट राहत बाड्न सहज र पारदर्सी हुन्छ। हजुर बिक्रेताको लागि भनेर यो छुटै App बनाइएको हो। यो App
को माध्यमबाट तपाइले राहत लिनेसंग पैसा लिन सक्नुहुने छ।
</p>
<p>आउनुहोस तपाईंलाई Register गरौ। तपाईंको Google Login गर्नुहोस। </p>
<PasscodeModal
showModal={showModal}
togglePasscodeModal={togglePasscodeModal}
handlePasscodeSave={handlePasscodeSave}
/>
{/* <div className="p-2">
<Link
to="/setup/profile"
id="btnSetupWallet"
type="button"
className="btn btn-lg btn-block btn-primary mt-3"
>
<IoWalletOutline className="ion-icon" aria-label="Restore Using Google" />
Register as Vendor
</Link>
</div> */}
{!restorePage && (
<div className="p-2">
<Link
to="/setup/profile"
id="btnSetupWallet"
type="button"
className="btn btn-lg btn-block btn-primary mt-3"
>
<IoWalletOutline className="ion-icon" aria-label="Restore Using Google" />
Register as Vendor
</Link>
<div className="form-links mt-2">
<div className="text-center">
<strong>Already registered? </strong>
<button className="btn btn-text p-0 ml-2" onClick={toggleRestore}>
Restore
</button>
</div>
</div>
</div>
)}
{restorePage && (
<div className="p-2">
<button
onClick={() => {
setRestoreMthd(RESTORE_METHOD.GOOGLE);
togglePasscodeModal();
}}
className="btn btn-lg w-100 btn-warning mb-2"
>
<FaGoogleDrive className="mr-2" size={'1.3em'} />
Restore from Google Drive
</button>
<button
onClick={() => {
setRestoreMthd(RESTORE_METHOD.MNEMOMICS);
togglePasscodeModal();
}}
className="btn btn-lg w-100 btn-primary "
>
<FaKey className="mr-2" size={'1.3em'} />
Restore from Mnemonics
</button>
<div className="form-links mt-2">
<div className="text-center w-100">
<button className="btn btn-text" onClick={toggleRestore}>
Back
</button>
</div>
</div>
</div>
)}
<div className="text-center mt-4">
<small>Version: {PackageJson.version}</small>
</div>
</div>
</>
);
}
Example #2
| Source File: index.js From FinDevs with MIT License | 4 votes |
|
export default function SignUpForm({ history }) {
const [gitUser, setGitUser] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [techs, setTechs] = useState([]);
const [latitude, setLatitude] = useState('');
const [longitude, setLongitude] = useState('');
useEffect(() => {
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
setLatitude(latitude);
setLongitude(longitude);
},
(err) => {
console.log(err);
},
{
timeout: 30000,
},
);
}, []);
async function handleSubmit(e) {
e.preventDefault();
try {
if (confirmPassword !== password) {
setConfirmPassword('');
setPassword('');
throw 'Passwords does not match.';
}
if (password.length < 6) {
setConfirmPassword('');
setPassword('');
throw 'This password is too short! (min 6 characters)';
}
const newDev = await api.post('/devs', {
github_user: gitUser,
password,
techs,
latitude,
longitude,
});
history.push('/');
} catch (err) {
await Swal.fire({
title: err.response ? err.response.data.error : err,
icon: 'error',
confirmButtonColor: '#7159c1',
});
}
}
return (
<Form onSubmit={handleSubmit}>
<img src={logo} alt="FinDevs" />
<div className="input-block">
<label htmlFor="GitHub User">
<FaGithubAlt />
</label>
<input
name="github_user"
id="github_user"
placeholder="GitHub User"
required
onChange={(e) => {
setGitUser(e.target.value);
}}
/>
</div>
<div className="input-block">
<label htmlFor="password">
<FaKey />
</label>
<input
name="password"
id="password"
type="password"
placeholder="Password"
required
onChange={(e) => {
setPassword(e.target.value);
}}
value={password}
/>
<input
name="confirmPassword"
id="confirmPassword"
type="password"
placeholder="Confirm Password"
required
onChange={(e) => {
setConfirmPassword(e.target.value);
}}
value={confirmPassword}
/>
</div>
<div className="input-block">
<label htmlFor="techs">
<FaCode />
</label>
<input
name="techs"
id="techs"
placeholder="Your main Techs splited by comma"
required
onChange={(e) => {
setTechs(e.target.value);
}}
/>
</div>
<div className="input-group">
<div className="input-block">
<label htmlFor="location">
<FaCompass />
</label>
<input
name="Latitude"
type="number"
id="Latitude"
placeholder="Latitude"
value={latitude}
onChange={(e) => setLatitude(e.target.value)}
/>
<input
name="Longitude"
type="number"
id="Longitude"
placeholder="Longitude"
value={longitude}
onChange={(e) => setLongitude(e.target.value)}
/>
</div>
</div>
<button type="submit">New Dev</button>
</Form>
);
}
