Immanuel
/
trendplays
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 1 Wiki Activity
Browse Source

Handle registration success and errors

tags/v0.1.0
Immanuel Onyeka 4 years ago
parent
3cf673dbb2
commit
987c826878
6 changed files with 185 additions and 5 deletions
Unified View
  1. +51
    -0
      resources/images/checked.svg
  2. +43
    -0
      resources/images/checked2.svg
  3. +49
    -0
      resources/images/warning.svg
  4. +27
    -4
      resources/js/register-area/register-area.vue
  5. +2
    -1
      resources/scss/_vars.scss
  6. +13
    -0
      resources/scss/main.scss

+ 51
- 0
resources/images/checked.svg View File

@@ -0,0 +1,51 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" fill="#63b521" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M497.36,69.995c-7.532-7.545-19.753-7.558-27.285-0.032L238.582,300.845l-83.522-90.713
c-7.217-7.834-19.419-8.342-27.266-1.126c-7.841,7.217-8.343,19.425-1.126,27.266l97.126,105.481
c3.557,3.866,8.535,6.111,13.784,6.22c0.141,0.006,0.277,0.006,0.412,0.006c5.101,0,10.008-2.026,13.623-5.628L497.322,97.286
C504.873,89.761,504.886,77.54,497.36,69.995z"/>
</g>
</g>
<g>
<g>
<path d="M492.703,236.703c-10.658,0-19.296,8.638-19.296,19.297c0,119.883-97.524,217.407-217.407,217.407
c-119.876,0-217.407-97.524-217.407-217.407c0-119.876,97.531-217.407,217.407-217.407c10.658,0,19.297-8.638,19.297-19.296
C275.297,8.638,266.658,0,256,0C114.84,0,0,114.84,0,256c0,141.154,114.84,256,256,256c141.154,0,256-114.846,256-256
C512,245.342,503.362,236.703,492.703,236.703z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 43
- 0
resources/images/checked2.svg View File

@@ -0,0 +1,43 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" fill="#63b521" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 408.576 408.576" style="enable-background:new 0 0 408.576 408.576;" xml:space="preserve">
<g>
<g>
<path d="M204.288,0C91.648,0,0,91.648,0,204.288s91.648,204.288,204.288,204.288s204.288-91.648,204.288-204.288
S316.928,0,204.288,0z M318.464,150.528l-130.56,129.536c-7.68,7.68-19.968,8.192-28.16,0.512L90.624,217.6
c-8.192-7.68-8.704-20.48-1.536-28.672c7.68-8.192,20.48-8.704,28.672-1.024l54.784,50.176L289.28,121.344
c8.192-8.192,20.992-8.192,29.184,0C326.656,129.536,326.656,142.336,318.464,150.528z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 49
- 0
resources/images/warning.svg View File

@@ -0,0 +1,49 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" fill="red" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<g>
<path d="M507.113,428.415L287.215,47.541c-6.515-11.285-18.184-18.022-31.215-18.022c-13.031,0-24.7,6.737-31.215,18.022
L4.887,428.415c-6.516,11.285-6.516,24.76,0,36.044c6.515,11.285,18.184,18.022,31.215,18.022h439.796
c13.031,0,24.7-6.737,31.215-18.022C513.629,453.175,513.629,439.7,507.113,428.415z M481.101,449.441
c-0.647,1.122-2.186,3.004-5.202,3.004H36.102c-3.018,0-4.556-1.881-5.202-3.004c-0.647-1.121-1.509-3.394,0-6.007
L250.797,62.559c1.509-2.613,3.907-3.004,5.202-3.004c1.296,0,3.694,0.39,5.202,3.004L481.1,443.434
C482.61,446.047,481.748,448.32,481.101,449.441z"/>
<rect x="240.987" y="166.095" width="30.037" height="160.197"/>
<circle cx="256.005" cy="376.354" r="20.025"/>
</g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 27
- 4
resources/js/register-area/register-area.vue View File

@@ -33,11 +33,27 @@
<button class="submit-btn" type="submit">Submit</button> <button class="submit-btn" type="submit">Submit</button>
</form> </form>
<img v-if="active === 'loading'" type="image/svg+xml" class="loading-icon" src="../../images/loading.svg" alt=""/> <img v-if="active === 'loading'" type="image/svg+xml" class="loading-icon" src="../../images/loading.svg" alt=""/>
<div v-if="active === 'register-completed'">
<img class="medium-icon" src="../../images/checked2.svg" alt="">
<h3>Success!</h3>
<p>A verification link has been sent to your inbox.</p>
</div>
<div v-if="active === 'forgot-completed'">
<img class="medium-icon" src="../../images/checked2.svg" alt="">
<h3>Success!</h3>
<p>A password reset link has been sent.</p>
</div>
<div v-if="active === 'error'">
<img class="medium-icon" src="../../images/warning.svg" alt="">
<h3>An Error Occured.</h3>
<p>{{`${error}: ${errorMessage}`}}</p>
</div>
<div v-on:click="closeArea" class="cancel-button"></div> <div v-on:click="closeArea" class="cancel-button"></div>
</template> </template>


<script> <script>
function register(event) { function register(event) {
this.active = 'loading'
fetch("/register", { fetch("/register", {
method: 'POST', method: 'POST',
headers: {'Content-Type': 'application/json', headers: {'Content-Type': 'application/json',
@@ -47,9 +63,15 @@
"password": document.getElementById("register-password").value}), "password": document.getElementById("register-password").value}),
"password_confirmation": document.getElementById("confirm-password").value}) "password_confirmation": document.getElementById("confirm-password").value})
.then(response => { .then(response => {
//Give completed or error
if (response.ok) {
this.active = 'completed'
} else {
this.error = response.status
this.errorMessage = response.statusText
this.active = 'error'
}
console.log(response.json()) console.log(response.json())
console.log(response.ok)
console.log(response.message)
}); });
event.preventDefault(); event.preventDefault();
} }
@@ -64,16 +86,17 @@
} }
} }



module.exports = { module.exports = {
data() { data() {
return {active: 'loading'} return {active: 'register'}
}, },
methods: { methods: {
register, register,
checkPasswords, checkPasswords,
closeArea() { closeArea() {
document.querySelector(".register-area").classList.remove("active") document.querySelector(".register-area").classList.remove("active")
} },
} }
} }
</script> </script>

+ 2
- 1
resources/scss/_vars.scss View File

@@ -17,7 +17,8 @@ $theme-colors: (
"faded-text": #425466, "faded-text": #425466,
"faded-text2": #6c757d, "faded-text2": #6c757d,
"dark-green": #3bb78f, "dark-green": #3bb78f,
"light-green": #0bab64 "light-green": #0bab64,
"green": #63b521
); );


@function getColor($col) { @function getColor($col) {


+ 13
- 0
resources/scss/main.scss View File

@@ -468,6 +468,10 @@ footer a {
margin: auto; margin: auto;
} }


.register-area p {
text-align: center;
}

.register-area .loading-icon { .register-area .loading-icon {
margin-top: 100px; margin-top: 100px;
} }
@@ -531,6 +535,15 @@ div.register-area.active {
opacity: 1; opacity: 1;
} }


.medium-icon {
width: 50px;
height: 50px;
margin-left: auto;
margin-right: auto;
display: block;
top: 50px;
}

// Make small screens more usable // Make small screens more usable
@media (max-width: 720px) { @media (max-width: 720px) {
nav { display: block; } nav { display: block; }


Write Preview
||||||
​x
 
​
000:0
Loading…
Cancel
Save