55 lines
980 B
Vue
55 lines
980 B
Vue
<script>
|
|
export default {
|
|
props: {
|
|
authenticated: { type: Boolean, default: false },
|
|
},
|
|
};
|
|
</script>
|
|
<template>
|
|
<div class="transferSummary">
|
|
<div v-if="authenticated" class="authboxgreen">
|
|
<font-awesome-icon
|
|
id="auth"
|
|
:icon="['fas', 'user-shield']"
|
|
size="2xl"
|
|
style="color: #45b408"
|
|
/>
|
|
Customer Authenticated
|
|
</div>
|
|
<div v-else class="authboxred">
|
|
<font-awesome-icon id="noauth" :icon="['fas', 'user-lock']" size="2xl" />
|
|
Customer Not Authenticated
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style>
|
|
.authboxgreen,
|
|
.authboxred {
|
|
margin: 8px;
|
|
border-radius: 5px;
|
|
padding: 11px 16px 11px 12px;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
font-family: OpenSans, Ariel, sans-serif;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.authboxgreen {
|
|
border: 2px solid #45b408;
|
|
}
|
|
|
|
.authboxred {
|
|
border: 2px solid #e03800;
|
|
}
|
|
|
|
#auth {
|
|
color: #45b408;
|
|
}
|
|
|
|
#noauth {
|
|
color: #e03800;
|
|
}
|
|
</style>
|